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

　　

　　

落戶批復(fù)

　　

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

　　

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

　　

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

　　

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

　　

　　

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

　　

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

　　

當時上海市落戶積分72分才能達標，于是我就按照積分規(guī)則來簡單計算了一下：

　　

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

　　

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

　　

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

　　

　　

于是，我的“落戶目標”就簡化為“參加競賽并拿獎”。首先仔細確認哪些競賽獎項能為落戶左邊加分右邊。

　　

　　

競賽左邊加分右邊規(guī)則

　　

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

　　

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

　　

　　

挑戰(zhàn)杯現(xiàn)場

　　

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

　　

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

　　

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

　　

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

　　

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

　　

最終效果如下：

　　

　　

落戶積分計算器

　　

1.創(chuàng)建項目

　　

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

　　

生成如下目錄：

　　

　　

生成的項目文件

　　

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

　　

2.引入Vant組件庫

　　

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

　　

　　

有贊Vant組件庫

　　

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

　　

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

　　

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

　　

　　

使用組件

　　

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

　　

3.開發(fā)界面

　　

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

　　

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

　　

　　

頁面拆解

　　

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

　　

一個標準的文件如下：

　　

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

　　

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

　　

再編寫一個按鈕用于顯示當前分數(shù)，并且當>=72時，改變按鈕顯示的顏色：

　　

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

　　

4.實現(xiàn)積分計算功能

　　

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

　　

可以定義一個數(shù)組來記錄得分，比如“最高學(xué)歷”選項組的得分用來記錄，“畢業(yè)學(xué)?！边x項組的得分用來記錄。當然也可以用其他數(shù)據(jù)結(jié)構(gòu)，如對象。

　　

用指令綁定數(shù)組元素到選項組，同時要用指令給選項標簽綁定一個點擊事件，當用戶點擊界面選擇時，改變當前數(shù)組元素的值。每個選項有一個屬性，代表選中時的得分。

　　

代碼如下：

　　

比如我點擊了“上海2分”選項，的值就為2。

　　

　　

那計算總分也就很簡單了，只要將數(shù)組元素累加求和，利用的屬性，可以輕松實現(xiàn)當數(shù)組值變化時，自動更新總分的值。

　　

計算功能就實現(xiàn)了！

　　

5.打包發(fā)布

　　

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

　　

首先在項目目錄下通過命令打包項目：

　　

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

　　

　　

生成的代碼文件

　　

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

　　

大可不必，可以使用。

　　

　　

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

　　

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

　　

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

　　

　　

就是這樣，點擊下方閱讀原文可以查看項目的源代碼。

　　

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

　　

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

　　

　　

往期推薦

　　

　　

編程入門到進大廠，你需要這套學(xué)習(xí)架構(gòu)

　　

　　

四年，上海，車房妹

　　

　　

大廠機密！30個提升團隊研發(fā)效能的錦囊

　　

　　

覺得不錯，長按關(guān)注叭

　　

送您「最全Java/前端?學(xué)習(xí)教程」關(guān)注領(lǐng)取技術(shù)無限，

　　

抽獎也不停哦后臺回復(fù)“

　　

我要抽獎”拿獎品啦

　　

點小花花，讓他們知道你?“在看”?我