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

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

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

落戶心得

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

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

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

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

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

積分項(xiàng)情況得分最高學(xué)歷本科21畢業(yè)學(xué)校第一類高校15最高學(xué)歷畢業(yè)在滬是2學(xué)習(xí)成績一級8外語水平英語六級8計(jì)算機(jī)水平計(jì)算機(jī)專業(yè)7用人單位分滿足條件5

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

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

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

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

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

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

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

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

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

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

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

最終效果如下：

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

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

vue?create?can-i-settle-shanghai


生成如下目錄：

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

2. 引入 Vant 組件庫

要做一個(gè)移動端網(wǎng)頁，推薦引入一個(gè)精美的組件庫，這里我推薦有贊的 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ù)制代碼到頁面文件即可：

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

3. 開發(fā)界面

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

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

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

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

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

<script>
?...?給頁面添加交互行為
</script>

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


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

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

<template>
??<!--?通過?style?屬性控制單個(gè)標(biāo)簽樣式?-->
??<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ù)組來記錄得分，比如 “最高學(xué)歷” 選項(xiàng)組的得分用 score[0] 來記錄，“畢業(yè)學(xué)?！?選項(xiàng)組的得分用 score[1] 來記錄。當(dāng)然也可以用其他數(shù)據(jù)結(jié)構(gòu)，如對象。

<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ì)算總分也就很簡單了，只要將 score 數(shù)組元素累加求和，利用 Vue 的 computed 屬性，可以輕松實(shí)現(xiàn)當(dāng) score 數(shù)組值變化時(shí)，自動更新總分 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)目目錄下通過命令打包項(xiàng)目：

npm?run?build


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

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

大可不必，可以使用 Vercel。

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

npm?install?-g?vercel


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

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


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

就是這樣，點(diǎn)擊鏈接可以查看項(xiàng)目的源代碼。

其實(shí)很多問題都可以使用編程來解決，也希望大家在學(xué)編程的過程中，多多發(fā)揮自己的想象，并動手敲代碼來實(shí)現(xiàn)創(chuàng)意，就能不斷進(jìn)步！

此心安處是吾鄉(xiāng)，希望大家都能留在自己喜愛的城市，品味生活。