Settled in Shanghai! Share your experience and make a point calculator

After waiting for a long time, I finally received the settlement approval! Just need to go through some formalities later.

This article first shares some of my experiences as an undergraduate student who successfully settled in Shanghai by accumulating points. Then hands with everyone to use Vuethe framework to develop a "fresh graduates settled in Shanghai integral calculator" website.

It is recommended to watch the short video for a brief understanding, and then select the part of interest to read.

Settled experience

I never thought about staying in Shanghai before, but then I studied in Shanghai. After a year, I got used to it and gradually started to fall in love with the city.

I decided to settle down since my sophomore year. I didn't understand anything at the beginning, and I didn't even think about it. Although my parents and relatives have been telling me how important it is to settle down, my mentality at the time was "I can't afford a house anyway. Isn't it the same whether settled down?"

Later, I checked the information about household registration on the Internet, and suddenly found that it is much easier to settle on campus than social settlement. Now, students from many prestigious schools such as the Qingbei Resumption of Exchange can even settle directly!

If you can directly settle down when you graduate, it will save you a lot of trouble in the future. Even if you can't afford a garage, it is better to have a hukou first than nothing.

At that time, 72 points were required for Shanghai to settle down, so I simply calculated according to the points rules:

Integral term	Happening	Score
highest education	Undergraduate	21
Graduated school	First category colleges	15
The highest degree graduated in Shanghai	Yes	2
Academic performance	First level	8
Foreign language level	English Band 6	8
computer skill	Computer Major	7
Employer points	To meet the conditions	5

In addition to academic qualifications, I got the highest points in the above points, but the total is only 66 points. That is to say, if there are no bonus points for competitions, honors, patents, etc., there is still a full 6 points away from settlement!

How do you collect these 6 points? At the time, I think participating in the competition is the best choice. It would be better to hold a thigh!

Therefore, my "settlement goal" was simplified to "participate in the competition and win prizes." First, carefully confirm which competition awards can add points to settle down.

In fact, for students majoring in computer science or learning programming, we can participate in many of the above competitions, such as the Challenge Cup, Internet +, mathematical modeling, etc., which will have a certain degree of difficulty, so it is best to prepare as soon as possible and report to the group to get warm.

At first I tried to organize a team to participate in some competitions, but the results were not very satisfactory. Later, I was fortunate enough to hold the thighs of other colleges. We participated in the Challenge Cup competition together and won the Shanghai Special Prize and the National Second Prize. , Directly added a dozen points to settle down!

Later, he also won other honors such as Shanghai Outstanding Graduates, and the bonus points of the competition awards were directly drawn up (15 points), and finally settled with 81 points of success.

To sum up, the advice for students who want to settle down is to confirm the goal as soon as possible, first try to ensure that the basic score is full, and then participate in more competitions and win some honorary titles. Students with strong ability can also try to apply for some invention patents. Students who cannot directly settle undergraduate courses can also consider studying for graduate school. There are more opportunities for scientific research competitions at the graduate level and it is easier to settle down.

In order to help more students calculate their own settlement points, I also developed a single-page website "Shanghai Freshmen Settlement Points Calculator", which is a practice project, let’s practice together!

Develop settlement points calculator

Make a settled integral calculator is very simple, is a single-page website Demo, using the Vuefront-end framework, remove time to enter text, with only 10 minutes to complete the development and on-line.

A calculator is actually an accumulator. The entire website is a form. Users can select corresponding options according to their own situation. Each option has a different score. The current total score will be displayed at the bottom of the website in real time.

The final effect is as follows:

1. Create a project

By Vuescaffolding tool Vue Cli, enter the command line, you can easily build a front-end project, it will automatically install dependencies:

vue create can-i-settle-shanghai

Generate the following directory:

With scaffolding, it is really easy, no need to write the basic template of the project yourself!

2. Introduce the Vant component library

To make a mobile web page, it is recommended to introduce an exquisite component library, here I recommend a good one Vant, exquisite and beautiful, with mature documentation.

Referring to official documents "Quick Start" section, first introduced in the project Vantdepend on:

npm i vant -S

Then directly import it globally, which is more convenient:

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Then you can use Vantcomponents of the reference to official documents, copy the code into the page file to select components:

After the component library is introduced, the interface can be developed.

3. Development interface

The development interface is like a puzzle, disassembling a large page into multiple small components, and then stacking them from top to bottom.

As shown in the figure below, the entire page is composed of "title", "input box", "radio button group", and "bottom display button".

In the Vueframework, typically a page corresponding to a .vuefile. The document is divided into three parts: the content, style, behavior, respectively HTML, CSS, JavaScriptcode.

A standard .vuefile as follows:

<template>
    ... 写网页内容和结构
</template>

<script>
    ... 给页面添加交互行为
</script>

<style scoped>
    ... 写样式，美化网页
</style>

The usual development process is to write content first, then beautify, and finally add interactive behavior to the website.

SUMMARY write relatively simple, can be used as Vantthe corresponding components, such as Radio 单选框, Divider 分割线, Field 输入框. Search in the document, and then copy the code to the project page file, some of the code is as follows:

<template>
  <!-- 通过 style 属性控制单个标签样式 -->
  <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa'}">最高学历</van-divider>
  <van-radio-group>
    <van-radio name="27">博士27分</van-radio>
    <van-radio name="24">硕士24分</van-radio>
    <van-radio name="21">本科21分</van-radio>
  </van-radio-group>
</template>

Write another button to display the current score total, and when total>= 72, change the color of the button:

<van-button :type="total >= 72 ? 'primary' : 'info'">当前分数：{{total}}</van-button>

After writing the structure, then beautify the style, such as increasing spacing, adjusting fonts, etc. The code is omitted here.

4. Realize the integral calculation function

After the interface of the website is developed, interactive behaviors should be added to realize the points calculation function. Every time the user clicks on an option or input, a calculation is triggered and the "current score" in the lower right corner is updated.

You can define a scorearray to record scores, scores such as the "highest degree" option group with a score[0]recorded score "graduate school" option group with score[1]recorded. Of course, other data structures, such as objects, can also be used.

<script>
  export default {
    name: "Index",
    // 在 data 中定义变量
    data() {
      return {
        scores: [],
        show: false,
      };
    }
  }
</script>

With v-modelinstructions to bind the array elements option group, and use the @changeinstructions to the tab bind a click event when the user click interface to select and change the current scorevalue of the array elements. Each option has a nameproperty, when scores of representatives selected.

code show as below:

<template>
  <van-radio-group v-model="scores[2]" @change="doChange">
    <van-radio name="2">上海 2分</van-radio>
    <van-radio name="0">非上海 0分</van-radio>
    </van-radio-group>
</template>

For example, I clicked the "Shanghai 2 points" option, scores[2]the value is 2.

It will calculate the total score is very simple, as long as the scorearray element cumulative sum, the use of Vuethe computedproperty, you can easily achieve when scorevalues change when the array is automatically updated score totalvalues.

<script>
export default {
  ...
  computed: {
    // 定义 total 变量
    total() {
      let total = 0;
      // 循环求和
      for (const score of this.scores) {
        if (score) {
          total += parseInt(score);
        }
      }
      return total;
    }
  }
}
</script>

The calculation function is realized!

5. Package release

After the local development is completed, how to publish the website so that everyone can see it?

First, package the project by command in the project directory:

npm run build

It will generate a distdirectory structure as follows:

How to publish a website online? Buy a server first?

It is not necessary, it can be used Vercel.

VercelIt is a free website hosting platform that can help us easily deploy a website and generate accessible URLs. First through the npminstallation Vercel:

npm install -g vercel

After installation is complete, enter the distdirectory, by vercelpublishing Web command:

cd public
vercel deploy --name can-i-settle-shanghai

If you publish successfully, you will get a website, and you can see the point calculator website when you open it!

That's it, click on the link to view the source code of the project.

In fact, many problems can be solved by programming, and I hope that when you learn programming, you can use your imagination and code to realize your creativity, and you can make continuous progress!

---

This peace of mind is my hometown, I hope everyone can stay in their favorite city and enjoy life.