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

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

前段時間用vue+koa+mongodb搭建了一個個人博客，因為是第一次寫前后交互，發(fā)現(xiàn)有很多地方不是特別的完善，同時代碼對于新學(xué)者來說可讀性也不是很大。所以這個小練習(xí)，從一個簡單的方面入手，希望能給踩過同樣多坑的同路人一點(diǎn)啟發(fā)。

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

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

vue全家桶的使用

在vue中使用axios，并配置它

koa與mongoose的基本使用

jsonwebtoken的使用以及前后臺鑒定登錄

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

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

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

因為我們在服務(wù)器上面采用的是二級域名的形式，所以需要在 config/index.js 下面的 build 項里面將 assetsPublicPath 設(shè)置成相對路徑。

assetsPublicPath: ""

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

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

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

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

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

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

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

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

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

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

Q ：有人說，讓客服端存放token不安全，或者說用sessionStorage方法來存放不安全，因為存在著csrf問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$ pm2 -v
$ nginx -v

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

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

然后，我們找到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/*的請求才會進(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

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

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