落戶上海！分享心得，再做個(gè)積分計(jì)算器

等了很久，終于收到落戶批復(fù)啦！就差后面辦一些手續(xù)。

這篇文章首先分享一下自己作為一名本科生，通過(guò)攢積分成功落戶上海的一些心得。然后手把手帶大家使用 Vue 框架開發(fā)『 上海應(yīng)屆生落戶積分計(jì)算器 』網(wǎng)站。

建議先觀看短視頻簡(jiǎn)單了解下，然后選擇自己感興趣的部分閱讀。

落戶心得

以前從沒想過(guò)要留在上海，但后來(lái)在上海讀書，待了一年后，有些習(xí)慣了，也逐漸開始愛上這座城市。

我是從大二開始確定落戶目標(biāo)的，一開始什么都不懂，也根本沒想過(guò)要落戶。雖然家長(zhǎng)親戚一直在我耳邊叮囑落戶多么多么重要，但當(dāng)時(shí)我的心態(tài)就是 “反正買不起房，落不落戶不都一樣？”

后來(lái)，自己上網(wǎng)查詢了有關(guān)戶口的信息，突然發(fā)現(xiàn)校園落戶比社會(huì)落戶要容易許多，現(xiàn)在清北復(fù)交等多所名校的學(xué)生甚至可以直接落戶！

如果能在畢業(yè)時(shí)直接落戶，將為以后省去不少的麻煩，即使買不起車房，但是先有一個(gè)戶口總比沒有好。

當(dāng)時(shí)上海市落戶積分 72 分才能達(dá)標(biāo)，于是我就按照積分規(guī)則來(lái)簡(jiǎn)單計(jì)算了一下：

除了學(xué)歷外，上述積分項(xiàng)我都拿到了最高分，但總計(jì)也只有 66 分，也就是說(shuō)，如果沒有任何競(jìng)賽、榮譽(yù)、專利等加分，距離落戶還差整整 6 分！

怎么去湊這 6 分呢？在當(dāng)時(shí)來(lái)看，我覺得參加競(jìng)賽是最好的選擇，能抱一個(gè)大腿就更好啦！

于是，我的 “落戶目標(biāo)” 就簡(jiǎn)化為 “參加競(jìng)賽并拿獎(jiǎng)”。首先仔細(xì)確認(rèn)哪些競(jìng)賽獎(jiǎng)項(xiàng)能為落戶加分。

其實(shí)對(duì)于計(jì)算機(jī)專業(yè)或者學(xué)習(xí)編程的同學(xué)來(lái)說(shuō)，上面的很多比賽我們都可以參與，比如挑戰(zhàn)杯、互聯(lián)網(wǎng)+、數(shù)學(xué)建模等，會(huì)有一定的難度，所以最好趁早準(zhǔn)備、報(bào)團(tuán)取暖。

剛開始我試著自己組團(tuán)參加了一些比賽，但結(jié)果都不是很理想， 后來(lái)有幸抱了其他學(xué)院的大腿，我們一起參與了挑戰(zhàn)杯競(jìng)賽，并取得了上海市特等獎(jiǎng)、全國(guó)二等獎(jiǎng)的成績(jī)，直接給落戶加了十幾分！

后來(lái)還拿了上海市優(yōu)秀畢業(yè)生等其他榮譽(yù)，把競(jìng)賽獎(jiǎng)項(xiàng)的加分直接拉滿（15 分），最終以 81 分成功積分落戶。

總結(jié)一下，給想落戶的同學(xué)的建議是，盡早確認(rèn)目標(biāo)，先盡量保證基本分拿滿，然后多去參加競(jìng)賽、爭(zhēng)取一些榮譽(yù)稱號(hào)，能力強(qiáng)的同學(xué)還可以試著申請(qǐng)一些發(fā)明專利。本科無(wú)法直接落戶的同學(xué)也可以考慮讀研，研究生階段科研競(jìng)賽機(jī)會(huì)更多，落戶也更容易。

為了幫助更多同學(xué)計(jì)算自己的落戶積分，之前我也開發(fā)了一個(gè)單頁(yè)面網(wǎng)站『 上海應(yīng)屆生落戶積分計(jì)算器 』，就當(dāng)一個(gè)練手項(xiàng)目了，下面一起來(lái)實(shí)踐下吧！

開發(fā)落戶積分計(jì)算器

做一個(gè)落戶積分計(jì)算器非常簡(jiǎn)單，就是一個(gè)單頁(yè)面網(wǎng)站的 Demo，使用 Vue 前端框架，除去輸入文字的時(shí)間，只用 10 分鐘就能完成開發(fā)和上線。

說(shuō)是計(jì)算器，其實(shí)就是一個(gè)累加器，整個(gè)網(wǎng)站就是一個(gè)表單，用戶可以根據(jù)自己的情況來(lái)選擇對(duì)應(yīng)選項(xiàng)，每個(gè)選項(xiàng)有不同的分?jǐn)?shù)，在網(wǎng)站底部會(huì)實(shí)時(shí)顯示當(dāng)前的總分。

最終效果如下：

1. 創(chuàng)建項(xiàng)目

通過(guò) Vue 的腳手架工具 Vue Cli，輸入一行命令，就可以輕松地搭建一個(gè)前端項(xiàng)目，還會(huì)自動(dòng)安裝依賴包：

vue?create?can-i-settle-shanghai

生成如下目錄：

有了腳手架，真的輕松不少，不用再自己寫項(xiàng)目的基礎(chǔ)模板啦！

2. 引入 Vant 組件庫(kù)

要做一個(gè)移動(dòng)端網(wǎng)頁(yè)，推薦引入一個(gè)精美的組件庫(kù)，這里我推薦有贊的 Vant，精致美觀、文檔成熟。

參照官方文檔的 “快速上手” 部分，先在項(xiàng)目中引入 Vant 依賴：

npm?i?vant?-S

然后直接全局引入，比較方便：

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

Vue.use(Vant);

之后就可以使用 Vant 的組件了，參照官方文檔，選擇組件后復(fù)制代碼到頁(yè)面文件即可：

引入組件庫(kù)后，就可以開發(fā)界面了。

3. 開發(fā)界面

開發(fā)界面就像拼圖一樣，將一個(gè)大的頁(yè)面拆解為多個(gè)小的組件，然后自上而下堆積起來(lái)。

如下圖，整個(gè)頁(yè)面由 “標(biāo)題”、“輸入框”、“單選按鈕組”、“底部展示按鈕” 組成。

在 Vue 框架中，通常一個(gè)頁(yè)面對(duì)應(yīng)一個(gè) .vue 文件。該文件分為三部分：內(nèi)容、樣式、行為，分別對(duì)應(yīng) HTML、CSS、JavaScript 代碼。

一個(gè)標(biāo)準(zhǔn)的 .vue 文件如下：

<template>
?...?寫網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)
template>

<script>
?...?給頁(yè)面添加交互行為
script>

<style?scoped>
?...?寫樣式，美化網(wǎng)頁(yè)
style>

通常的開發(fā)流程是，先寫內(nèi)容，再去美化，最后再給網(wǎng)站添加交互行為。

編寫內(nèi)容比較簡(jiǎn)單，可以直接使用 Vant 的對(duì)應(yīng)組件，比如 Radio 單選框、Divider 分割線、Field 輸入框。在文檔中搜索，然后復(fù)制代碼到項(xiàng)目頁(yè)面文件中，部分代碼如下：

<template>
??
??<van-divider?:style="{?color:?'#1989fa',?borderColor:?'#1989fa'}">最高學(xué)歷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>

再編寫一個(gè)按鈕用于顯示當(dāng)前分?jǐn)?shù) total，并且當(dāng) total >= 72 時(shí)，改變按鈕顯示的顏色：

<van-button?:type="total?>=?72???'primary'?:?'info'">當(dāng)前分?jǐn)?shù)：{{total}}van-button>

寫完結(jié)構(gòu)后，再然后美化一下樣式，比如增加間距、調(diào)整字體等等，此處代碼省略。

4. 實(shí)現(xiàn)積分計(jì)算功能

開發(fā)完網(wǎng)站的界面后，要增加交互行為，實(shí)現(xiàn)積分計(jì)算功能。每當(dāng)用戶點(diǎn)擊選項(xiàng)或輸入，都要觸發(fā)一次計(jì)算，更新右下角的 “當(dāng)前分?jǐn)?shù)”。

可以定義一個(gè) score 數(shù)組來(lái)記錄得分，比如 “最高學(xué)歷” 選項(xiàng)組的得分用 score[0] 來(lái)記錄，“畢業(yè)學(xué)校” 選項(xiàng)組的得分用 score[1] 來(lái)記錄。當(dāng)然也可以用其他數(shù)據(jù)結(jié)構(gòu)，如對(duì)象。

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

用 v-model 指令綁定數(shù)組元素到選項(xiàng)組，同時(shí)要用 @change 指令給選項(xiàng)標(biāo)簽綁定一個(gè)點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊界面選擇時(shí)，改變當(dāng)前 score 數(shù)組元素的值。每個(gè)選項(xiàng)有一個(gè) name 屬性，代表選中時(shí)的得分。

代碼如下：

<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>

比如我點(diǎn)擊了 “上海 2分” 選項(xiàng)，scores[2] 的值就為 2。

那計(jì)算總分也就很簡(jiǎn)單了，只要將 score 數(shù)組元素累加求和，利用 Vue 的 computed 屬性，可以輕松實(shí)現(xiàn)當(dāng) score 數(shù)組值變化時(shí)，自動(dòng)更新總分 total 的值。

<script>
export?default?{
??...
??computed:?{
????//?定義?total?變量
????total()?{
??????let?total?=?0;
??????//?循環(huán)求和
??????for?(const?score?of?this.scores)?{
????????if?(score)?{
??????????total?+=?parseInt(score);
????????}
??????}
??????return?total;
????}
??}
}
script>

計(jì)算功能就實(shí)現(xiàn)了！

5. 打包發(fā)布

本地開發(fā)完成后，怎么將網(wǎng)站發(fā)布，讓所有人都能看到呢？

首先在項(xiàng)目目錄下通過(guò)命令打包項(xiàng)目：

npm?run?build

會(huì)在生成 dist 目錄，結(jié)構(gòu)如下：

怎么發(fā)布網(wǎng)站到線上呢？先買臺(tái)服務(wù)器？

大可不必，可以使用 Vercel。

Vercel 是免費(fèi)網(wǎng)站托管平臺(tái)，可以幫我們輕松部署網(wǎng)站，并生成可訪問的網(wǎng)址。先通過(guò) npm 安裝 Vercel：

npm?install?-g?vercel

安裝完成后，進(jìn)入 dist 目錄，通過(guò) vercel 命令發(fā)布網(wǎng)站：

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

發(fā)布成功，會(huì)得到一個(gè)網(wǎng)址，打開就能看到積分計(jì)算器網(wǎng)站啦！