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

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

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

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

我在學習部署koa和vue的項目的時候，網上的知識很零碎，這里我會歸納一下。

vue全家桶的使用

在vue中使用axios，并配置它

koa與mongoose的基本使用

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

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

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

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

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

assetsPublicPath: ""

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

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

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

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

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

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

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

存在sessionStorage里面，采用瀏覽器的會話存儲，只有當瀏覽器關閉的時候才會清空數據。

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

關于一些網上的爭論：

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

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

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

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

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

將圖片轉換成base64來進行上傳

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

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

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

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

這里關于把打包出來的文件往往會有2方式運行：

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

用nginx服務器代理 ，靜態文件用nginx托管，然后設置轉發的方式來獲取api請求數據。

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

開始之前，你應該檢查你的服務器是否安裝有nginx與pm2

$ pm2 -v
$ nginx -v

如果正確出現版本號，那么就已經安裝了，如果沒有的話，請谷歌安裝。pm2的作用是進行進程守護，當你的nodejs意外的停止的時候，進行重啟。

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

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

然后進行nginx服務器的重啟：nginx -s reload

我們把server的代碼放在服務器下，通過命令行移到相應位置執行命令：

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

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

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