等了很久，終于收到落戶批復(fù)啦！就差后面辦一些手續(xù)。
這篇文章首先分享一下自己作為一名本科生，通過攢積分成功落戶上海的一些心得。然后手把手帶大家使用框架開發(fā)一個(gè)『上海應(yīng)屆生落戶積分計(jì)算器』網(wǎng)站。
建議先觀看短視頻簡單了解下，然后選擇自己感興趣的部分閱讀。
以前從沒想過要留在上海，但后來在上海讀書，待了一年后，有些習(xí)慣了，也逐漸開始愛上這座城市。
我是從大二開始確定落戶目標(biāo)的，一開始什么都不懂，也根本沒想過要落戶。雖然家長親戚一直在我耳邊叮囑落戶多么多么重要，但當(dāng)時(shí)我的心態(tài)就是“反正買不起房，落不落戶不都一樣？”
后來，自己上網(wǎng)查詢了有關(guān)戶口的信息，突然發(fā)現(xiàn)校園落戶比社會(huì)落戶要容易許多，現(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é)建模等，會(huì)有一定的難度，所以最好趁早準(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ī)會(huì)更多，落戶也更容易。
為了幫助更多同學(xué)計(jì)算自己的落戶積分，之前我也開發(fā)了一個(gè)單頁面網(wǎng)站『上海應(yīng)屆生落戶積分計(jì)算器』，就當(dāng)一個(gè)練手項(xiàng)目了，下面一起來實(shí)踐下吧！
做一個(gè)落戶積分計(jì)算器非常簡單，就是一個(gè)單頁面網(wǎng)站的Demo，使用前端框架，除去輸入文字的時(shí)間，只用10分鐘就能完成開發(fā)和上線。
說是計(jì)算器，其實(shí)就是一個(gè)累加器，整個(gè)網(wǎng)站就是一個(gè)表單，用戶可以根據(jù)自己的情況來選擇對應(yīng)選項(xiàng)，每個(gè)選項(xiàng)有不同的分?jǐn)?shù)，在網(wǎng)站底部會(huì)實(shí)時(shí)顯示當(dāng)前的總分。
最終效果如下：
1.創(chuàng)建項(xiàng)目
通過的腳手架工具，輸入一行命令，就可以輕松地搭建一個(gè)前端項(xiàng)目，還會(huì)自動(dòng)安裝依賴包：
生成如下目錄：
有了腳手架，真的輕松不少，不用再自己寫項(xiàng)目的基礎(chǔ)模板啦！
2.引入Vant組件庫
要做一個(gè)移動(dòng)端網(wǎng)頁，推薦引入一個(gè)精美的組件庫，這里我推薦有贊的，精致美觀、文檔成熟。
參照官方文檔的“快速上手”部分，先在項(xiàng)目中引入依賴：
然后直接全局引入，比較方便：
之后就可以使用的組件了，參照官方文檔，選擇組件后復(fù)制代碼到頁面文件即可：
引入組件庫后，就可以開發(fā)界面了。
3.開發(fā)界面
開發(fā)界面就像拼圖一樣，將一個(gè)大的頁面拆解為多個(gè)小的組件，然后自上而下堆積起來。
如下圖，整個(gè)頁面由“標(biāo)題”、“輸入框”、“單選按鈕組”、“底部展示按鈕”組成。
在框架中，通常一個(gè)頁面對應(yīng)一個(gè)文件。該文件分為三部分：內(nèi)容、樣式、行為，分別對應(yīng)、、代碼。
一個(gè)標(biāo)準(zhǔn)的文件如下：
通常的開發(fā)流程是，先寫內(nèi)容，再去美化，最后再給網(wǎng)站添加交互行為。
編寫內(nèi)容比較簡單，可以直接使用的對應(yīng)組件，比如、、。在文檔中搜索，然后復(fù)制代碼到項(xiàng)目頁面文件中，部分代碼如下：
再編寫一個(gè)按鈕用于顯示當(dāng)前分?jǐn)?shù)，并且當(dāng)>=72時(shí)，改變按鈕顯示的顏色：
寫完結(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è)數(shù)組來記錄得分，比如“最高學(xué)歷”選項(xiàng)組的得分用來記錄，“畢業(yè)學(xué)校”選項(xiàng)組的得分用來記錄。當(dāng)然也可以用其他數(shù)據(jù)結(jié)構(gòu)，如對象。
用指令綁定數(shù)組元素到選項(xiàng)組，同時(shí)要用指令給選項(xiàng)標(biāo)簽綁定一個(gè)點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊界面選擇時(shí)，改變當(dāng)前數(shù)組元素的值。每個(gè)選項(xiàng)有一個(gè)屬性，代表選中時(shí)的得分。
代碼如下：
比如我點(diǎn)擊了“上海2分”選項(xiàng)，的值就為2。
那計(jì)算總分也就很簡單了，只要將數(shù)組元素累加求和，利用的屬性，可以輕松實(shí)現(xiàn)當(dāng)數(shù)組值變化時(shí)，自動(dòng)更新總分的值。
計(jì)算功能就實(shí)現(xiàn)了！
5.打包發(fā)布
本地開發(fā)完成后，怎么將網(wǎng)站發(fā)布，讓所有人都能看到呢？
首先在項(xiàng)目目錄下通過命令打包項(xiàng)目：
會(huì)在生成目錄，結(jié)構(gòu)如下：
怎么發(fā)布網(wǎng)站到線上呢？先買臺(tái)服務(wù)器？
大可不必，可以使用。
是免費(fèi)網(wǎng)站托管平臺(tái)，可以幫我們輕松部署網(wǎng)站，并生成可訪問的網(wǎng)址。先通過安裝：
安裝完成后，進(jìn)入目錄，通過命令發(fā)布網(wǎng)站：
發(fā)布成功，會(huì)得到一個(gè)網(wǎng)址，打開就能看到積分計(jì)算器網(wǎng)站啦！
就是這樣，點(diǎn)擊鏈接可以查看項(xiàng)目的源代碼。
其實(shí)很多問題都可以使用編程來解決，也希望大家在學(xué)編程的過程中，多多發(fā)揮自己的想象，并動(dòng)手敲代碼來實(shí)現(xiàn)創(chuàng)意，就能不斷進(jìn)步！
此心安處是吾鄉(xiāng)，希望大家都能留在自己喜愛的城市，品味生活。
