摘要：小練習(xí)作者本文首發(fā)博客功能基于進(jìn)行登錄，注冊(cè)，留言的簡(jiǎn)單網(wǎng)站。所以這個(gè)小練習(xí)，從一個(gè)簡(jiǎn)單的方面入手，希望能給踩過同樣多坑的同路人一點(diǎn)啟發(fā)。就意味著要重新登錄。的作用是進(jìn)行進(jìn)程守護(hù)，當(dāng)你的意外的停止的時(shí)候，進(jìn)行重啟。

作者： Pawn 
本文首發(fā)： Pawn博客
功能： 基于vue koa mongodb進(jìn)行登錄，注冊(cè)，留言的簡(jiǎn)單網(wǎng)站。
體驗(yàn)地址： http://demo.lcylove.cn
github: https://github.com/LiChangyi/demo1

前段時(shí)間用vue+koa+mongodb搭建了一個(gè)個(gè)人博客，因?yàn)槭堑谝淮螌懬昂蠼换?，發(fā)現(xiàn)有很多地方不是特別的完善，同時(shí)代碼對(duì)于新學(xué)者來說可讀性也不是很大。所以這個(gè)小練習(xí)，從一個(gè)簡(jiǎn)單的方面入手，希望能給踩過同樣多坑的同路人一點(diǎn)啟發(fā)。

在我今年年初在學(xué)習(xí)vue以及koa的時(shí)候，網(wǎng)上對(duì)這方面的內(nèi)容，都是一個(gè)完整的項(xiàng)目，文件太多，觀看難度太大，其次是，都對(duì)圖片的上傳都沒怎么涉及。

我在學(xué)習(xí)部署koa和vue的項(xiàng)目的時(shí)候，網(wǎng)上的知識(shí)很零碎，這里我會(huì)歸納一下。

vue全家桶的使用

在vue中使用axios，并配置它

koa與mongoose的基本使用

jsonwebtoken的使用以及前后臺(tái)鑒定登錄

注： 本文面對(duì)剛學(xué)vue或者koa不久或者想了解一個(gè)簡(jiǎn)單的前后臺(tái)交互的問題的同學(xué)，涉及基礎(chǔ)。

我在代碼里面寫了很多的注釋方便閱讀，這里簡(jiǎn)單說一下我個(gè)人當(dāng)初學(xué)習(xí)的時(shí)候比較疑惑為問題

前端直接采用vue-cli進(jìn)行一個(gè)基礎(chǔ)的項(xiàng)目骨架。然后由于是一個(gè)簡(jiǎn)單的項(xiàng)目，所以頁(yè)面就隨便寫一下，主要是實(shí)現(xiàn)功能。

因?yàn)槲覀冊(cè)诜?wù)器上面采用的是二級(jí)域名的形式，所以需要在 config/index.js 下面的 build 項(xiàng)里面將 assetsPublicPath 設(shè)置成相對(duì)路徑。

assetsPublicPath: ""

我們?cè)诒镜亻_發(fā)的時(shí)候需要進(jìn)行調(diào)試，需要用到代理，不然就只有設(shè)置后臺(tái)允許跨域。所以在 config/index.js 下面的 dev 對(duì)象里面添加：

proxyTable: {
    "/api":{  // 只代理 /api url下的請(qǐng)求
        target: "http://localhost:7778", // 后臺(tái)服務(wù)器的地址
        changeOrigin: true
    }
}

HTTP請(qǐng)求是無狀態(tài)的，意思是他記不住你這個(gè)人是誰，他只知道你要什么資源，然后給你什么。但是實(shí)際問題是當(dāng)用戶給我們尋求資源的時(shí)候，我們應(yīng)該要考慮應(yīng)該給他這個(gè)資源。對(duì)這個(gè)人的身份做一個(gè)判別，然后在做決定給他什么樣的資源。

所以針對(duì)每個(gè)用戶我們需要用一個(gè)唯一的標(biāo)識(shí)來確定他，這就是為什么需要登錄才能操作，登錄的目的就是讓服務(wù)端產(chǎn)生一個(gè)認(rèn)識(shí)你的標(biāo)識(shí)，以后你的每次請(qǐng)求都要帶上去。

在前后臺(tái)不分離的時(shí)候，服務(wù)器端往往會(huì)在客服端放一個(gè)SessionId 或者一個(gè)cookie的東西。但是現(xiàn)在前后端分離以后，我們登錄成功，服務(wù)器端應(yīng)該也會(huì)給我們這樣一個(gè)唯一標(biāo)識(shí)身份的字符串。然后我們?cè)诿看握?qǐng)求數(shù)據(jù)的時(shí)候帶上它。這里我服務(wù)器端采用的是jsonwebtoken 來制造這個(gè)唯一標(biāo)識(shí)，代碼詳情 => server/utils/token.js 然后我寫了一個(gè)中間件check_token 來判斷如果這個(gè)資源需要登錄，就會(huì)去檢查他的token如果token不對(duì)那么就直接拋出錯(cuò)誤。

前端拿到服務(wù)端的token后我們需要把他存放起來這里大概會(huì)有2種方式：

存在vuex 里面， 這種方式有一個(gè)弊端就是，網(wǎng)頁(yè)一刷新vuex里面的數(shù)據(jù)就清空了。就意味著要重新登錄。

存在sessionStorage里面，采用瀏覽器的會(huì)話存儲(chǔ)，只有當(dāng)瀏覽器關(guān)閉的時(shí)候才會(huì)清空數(shù)據(jù)。

這里我把2種方法結(jié)合起來，得到token的時(shí)候把他同時(shí)存放在vuex和sessionStorage里面，存放在vuex里面是為了操作方便，存放在sessionStorage是為了保持刷新頁(yè)面的時(shí)候數(shù)據(jù)不丟失。在前端每次向后臺(tái)請(qǐng)求數(shù)據(jù)的時(shí)候，帶上這個(gè)token,詳見代碼 => client/src/axios/index.js

關(guān)于一些網(wǎng)上的爭(zhēng)論：

Q ：有人說，讓客服端存放token不安全，或者說用sessionStorage方法來存放不安全，因?yàn)榇嬖谥鴆srf問題

A ：沒有絕對(duì)的安全，我個(gè)人了解到就是用以前的cookie或者SessionId 也存在著這樣的問題。想要解決這個(gè)問題就盡量的吧網(wǎng)頁(yè)升級(jí)成https，或者，采用服務(wù)器中轉(zhuǎn)的方式，在2者之間在加入一個(gè)服務(wù)器端，把真實(shí)的token存放在中轉(zhuǎn)，然后客服端與中轉(zhuǎn)進(jìn)行通信。

驗(yàn)證碼的生成我采用了gd-bmp 包具體用法，看server/controller/other.js 同樣根據(jù)上面的介紹，http是沒有狀態(tài)的，我們要驗(yàn)證驗(yàn)證碼的正確性，應(yīng)該對(duì)每個(gè)驗(yàn)證碼增加一個(gè)唯一的標(biāo)識(shí)，然后存放在數(shù)據(jù)，當(dāng)用戶登錄或者用戶注冊(cè)用到驗(yàn)證碼的時(shí)候，把驗(yàn)證碼和相應(yīng)的驗(yàn)證碼標(biāo)識(shí)一起發(fā)往后臺(tái)，然后判斷驗(yàn)證碼的正確與否。對(duì)于驗(yàn)證碼及標(biāo)識(shí)的存儲(chǔ)，我這里為了方便就是采用mongodb來存儲(chǔ)，但是網(wǎng)上很多人推薦用redis來存儲(chǔ)。

這個(gè)問題從很久以前就很迷惑，一直不知道如何上傳圖片到服務(wù)器。即使h5出現(xiàn)了但是解決這個(gè)問題也是很麻煩。我個(gè)人覺得上傳圖片應(yīng)該有2種方式：

直接用過input的onchang事件獲取到的文件，來上傳二進(jìn)制文件。

將圖片轉(zhuǎn)換成base64來進(jìn)行上傳

我這里采用的是第二種，用base64上傳圖片，然后自己吧base64字符串保存進(jìn)數(shù)據(jù)庫(kù)，因?yàn)椴僮鞅容^方便。當(dāng)然你也可以在服務(wù)器端吧base64轉(zhuǎn)換成二進(jìn)制文件存放在服務(wù)器里面，然后把文件地址保存在數(shù)據(jù)庫(kù)里面。也可以在本地直接上傳二進(jìn)制文件，如果你采用這個(gè)方式，那么你應(yīng)該在koa里面在加入一個(gè)處理file請(qǐng)求的中間件。

也可以借助第三方的存儲(chǔ)，比如我在我的博客里面寫了一個(gè)接口就是直接在客服端上傳文件到七牛云，然后七牛云返回給我鏈接。當(dāng)時(shí)之所以采用這個(gè)操作是因?yàn)?，小水管服?wù)器太慢了，借助第三方加載圖片會(huì)快很多。

因?yàn)関ue的簡(jiǎn)單，很多都只知道npm install 和 npm run dev 所以有很多人會(huì)有疑問，那就是我這個(gè)vue項(xiàng)目如何部署在服務(wù)器上面？難道是把代碼上傳到服務(wù)器上面來執(zhí)行上面2條命令嗎？

其實(shí)這個(gè)問題是由于大家只會(huì)機(jī)械式操作留下的，因?yàn)関ue-cli的簡(jiǎn)單方便已經(jīng)mvvm框架的厲害，我們忘記了我們寫的東西本子上還是網(wǎng)頁(yè)。所以我們需要用webpack 將我們的項(xiàng)目打包一下在命令行里面執(zhí)行npm run build 將我們寫的vue和js代碼以及其他的資源文件，打包/dist里面。這里面的文件就是我們寫的網(wǎng)頁(yè)，，我們只需要吧這里面的文件上傳到服務(wù)器下就可以運(yùn)行了。

這里關(guān)于把打包出來的文件往往會(huì)有2方式運(yùn)行：

將文件丟到server/public 文件夾下面，因?yàn)槲覀冊(cè)?b>server/app.js下面配置了靜態(tài)文件目錄，然后我們啟動(dòng)服務(wù)端。就可以在127.0.0.1:7778/index.html(假設(shè)服務(wù)器端口號(hào)是7778)看到我們的網(wǎng)頁(yè)。

用nginx服務(wù)器代理 ，靜態(tài)文件用nginx托管，然后設(shè)置轉(zhuǎn)發(fā)的方式來獲取api請(qǐng)求數(shù)據(jù)。

其實(shí)第一種的話也是借助與nodejs會(huì)自動(dòng)啟動(dòng)一個(gè)服務(wù)器，進(jìn)行靜態(tài)文件的托管。我個(gè)人比較喜歡第二種方法，下面我們就進(jìn)行這種文件的配置。

開始之前，你應(yīng)該檢查你的服務(wù)器是否安裝有nginx與pm2

$ pm2 -v
$ nginx -v

如果正確出現(xiàn)版本號(hào)，那么就已經(jīng)安裝了，如果沒有的話，請(qǐng)谷歌安裝。pm2的作用是進(jìn)行進(jìn)程守護(hù)，當(dāng)你的nodejs意外的停止的時(shí)候，進(jìn)行重啟。

如果我們有域名的話，我們現(xiàn)在域名商哪里添加一個(gè)二級(jí)域名解析。這里添加完解析以后會(huì)要幾分鐘的等待時(shí)間

然后，我們找到nginx的配置文件nginx.conf 在里面加入：

server {
        listen 80;
        server_name demo.lcylove.cn;
        root   /data/www/demo; 
        index  index.html index.htm index.php;

        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $http_host;
            proxy_pass http://127.0.0.1:7778;
        }
    }

注意： location /api/ 這里說明只有api/*的請(qǐng)求才會(huì)進(jìn)行轉(zhuǎn)發(fā)。

然后進(jìn)行nginx服務(wù)器的重啟：nginx -s reload

我們把server的代碼放在服務(wù)器下，通過命令行移到相應(yīng)位置執(zhí)行命令：

$ npm install && cnpm i
$ pm2 start --name demo1 npm -- run start

啟動(dòng)我們的nodejs服務(wù)器。然后我們就可以打開網(wǎng)站 demo.lcylove.cn 查看效果

由于本人才疏學(xué)淺，如果有任何問題的歡迎下面留言討論！