Vue+Koa+Mongodb 小練習

Vue+Koa+Mongodb 小練習

做者： Pawn

本文首發： Pawn博客

功能： 基於vue koa mongodb進行登陸，註冊，留言的簡單網站。

體驗地址： demo.lcylove.cn

github: github.com/LiChangyi/d…

前面的話

緣由

1. 前段時間用vue+koa+mongodb搭建了一個我的博客，由於是第一次寫先後交互，發現有不少地方不是特別的完善，同時代碼對於新學者來講可讀性也不是很大。因此這個小練習，從一個簡單的方面入手，但願能給踩過一樣多坑的同路人一點啓發。
2. 在我今年年初在學習vue以及koa的時候，網上對這方面的內容，都是一個完整的項目，文件太多，觀看難度太大，其次是，都對圖片的上傳都沒怎麼涉及。
3. 我在學習部署koa和vue的項目的時候，網上的知識很零碎，這裏我會概括一下。

涉及知識點

1. vue全家桶的使用
2. 在vue中使用axios，並配置它
3. koa與mongoose的基本使用
4. 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
    }
}
複製代碼

如何讓服務器端記住你(jsonwebtoken)

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

因此針對每一個用戶咱們須要用一個惟一的標識來肯定他，這就是爲何須要登陸才能操做，登陸的目的就是讓服務端產生一個認識你的標識，之後你的每次請求都要帶上去。

在先後臺不分離的時候，服務器端每每會在客服端放一個SessionId 或者一個cookie的東西。可是如今先後端分離之後，咱們登陸成功，服務器端應該也會給咱們這樣一個惟一標識身份的字符串。而後咱們在每次請求數據的時候帶上它。這裏我服務器端採用的是jsonwebtoken 來製造這個惟一標識，代碼詳情 => server/utils/token.js 而後我寫了一箇中間件check_token 來判斷若是這個資源須要登陸，就會去檢查他的token若是token不對那麼就直接拋出錯誤。

前端拿到服務端的token後咱們須要把他存放起來這裏大概會有2種方式：

1. 存在vuex 裏面， 這種方式有一個弊端就是，網頁一刷新vuex裏面的數據就清空了。就意味着要從新登陸。
2. 存在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出現了<input type="file">可是解決這個問題也是很麻煩。我我的以爲上傳圖片應該有2種方式：

1. 直接用過input的onchang事件獲取到的文件，來上傳二進制文件。
2. 將圖片轉換成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方式運行：

1. 將文件丟到server/public 文件夾下面，由於咱們在server/app.js下面配置了靜態文件目錄，而後咱們啓動服務端。就能夠在127.0.0.1:7778/index.html(假設服務器端口號是7778)看到咱們的網頁。
2. 用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 查看效果

最後

因爲本人才疏學淺，若是有任何問題的歡迎下面留言討論！