線上
線上地址：itc
項目地址：GITHUB
由於使用Element框架實現前端，並沒有做移動端適配，所以建議PC端觀看。
由於作者aliyun域名正在備案，當前小夥伴只能通過ip地址進行訪問，後續備案通過後，會替換成域名訪問形式。
建議參考本文最後教程，將項目克隆到本地啓動（不需要任何aliyun系列產品即可本地啓動），配合該篇文章進行閱讀
效果圖
註冊
登陸
首頁
編輯
背景
最近想學習下koa框架，於是便從網上找了一些資料，在大致瞭解了koa框架的基本用法後，想要自己做點什麼東西出來。
在掘金平臺找到一篇文章，是一個前端用vue，後端用koa，數據庫用mongodb實現的簡單留言功能。看似簡單，在閱讀完代碼後，發現有很多東西，之前還是沒有接觸過的。比如說後臺生成驗證碼、token、密碼加密等
於是我也仿着實現了一個簡單的註冊登陸模塊，麻雀雖小，五臟俱全。基本上整個前後端交互的細節都有涉獵，同時也將自己的作品上傳至aliyun服務器，是非常適合新手學習和了解整個前後端交互的一套技術體系。
這裏假如你把整個項目弄明白了，那麼你將會有以下收穫：
- 可以部署自己的服務，讓別人通過網址訪問你的網站
- 知道整個前後端交互的一套流程
- 前端經常拿到的token是如何生成的
- 會考慮如何去逐步從各方面優化你的應用
- 會知道原來前端真的只是冰山一角，對前端有了重新的認知
- 擁有了想要成爲全棧工程師的夢想
主要包含以下模塊
- 註冊
- 登陸
- 首頁
- 編輯頁
細節包含
- CURD增刪改查
- 前端校驗
- 上傳用戶頭像
aliyunoss上傳圖片- token鑑權
- 模糊搜索
- 排序
- 分頁
- xss內容過濾
- 請求／響應攔截
- …
主要技術棧
前端
vue vue-cli3 webpack4 axios vue-router vuex
後臺
koa-generator koa2 ali-oss gd-bmp jsonwebtoken koa/multer
數據庫
mongodb
服務器相關
nginx pm2 aliyun服務器 域名 oss對象存儲
簡單畫了個流程圖
前言
本篇文章，主要圍繞整個開發和部署過程中的一些疑難點展開，具體的代碼邏輯，個人建議，還是把代碼拉下來跑起來，深度閱讀幾遍來的實在。
我認爲這裏面最值得學習的應是思路，不要在意一些細節，比如：
- 我用的數據庫是mongodb，因爲之前瞭解過，覺得合適自己，容易上手，如果你喜歡mysql，你大可以自己替換
- 我用的前端框架是element，如果你感到身體不適，習慣於用Ant Design又或是手寫樣式，你大可以自己折騰
- …
變通，乃開發者應具備的不二神器。
當然，想要通讀完代碼或者是自己動手實現一個輪子，你需要具備以下基本知識
- Vue（vue-cli、vuex、vue-router、element、Axios…）
- Koa（路由、中間件…）
- Mongodb（數據庫增刪改查…）
- ES6語法（promise、async、await…）
- …
具備了以上知識點，你能做到的，僅是在本地實現自己的輪子。如果想要最終部署在網上，讓大家可以看到你的作品，參與進來，你可能還需要準備以下乾糧
- 域名
- 服務器
- OSS對象存儲
- nginx基本操作要領
- pm2基本操作要領
- …
下面主要從前端、後端、數據庫、線上部署四個方面做一些闡述
前端
使用vue-cli3腳手架生成前端骨架，後端骨架使用koa-generator生成
這裏我爲了節省開發成本，用了element框架，考慮到性能問題，我使用了element提供的按需引入方式，引入需要的組件。
爲了能夠在用戶登陸後，以及整個流程中方便獲取用戶的相關信息，使用vuex全局註冊單例對象store。
方便實現請求後臺功能，以及請求攔截、響應攔截，使用Axios提供的實例方法
…
交互細節
- 路由跳轉根據頁面是否需要權限以及是否已登陸做判斷
- 路由帶有redirect重定向字段時，用戶登陸後，自動跳轉到之前的頁面
- 登陸、註冊頁面對用戶輸入內容做校驗，比如用戶名、密碼的格式、長度等（考慮到後期數據庫能力）
- 上傳圖片大小、個數、格式做限制，將圖片上傳至
aliyun對象存儲oss（如果本地啓動的話，不需要aliyun對象存儲即可） - 登陸用戶僅可以操作自己之前發過的帖子，其他用戶的內容，僅具有查看權限
- 根據訪問每條記錄的詳情次數，生成每條記錄的熱門程度，方便用戶篩選
- 用戶登陸後，將用戶的token存在前端(store、localStorage)，每次調用後臺接口，都會經過token驗證這一層，如果token已過期，需要引導用戶重定向到登陸頁，這裏token存儲一份在localStorage下，目的是爲了用戶關閉頁面後，再次訪問時，如果token沒有過期，直接可以進入對應的頁面
- 頁面涉及到操作後臺數據的，比如點擊按鈕執行對應請求，阻止按鈕重複點擊動作
- 對於一些不會變動的庫文件，比如vue、vue-router、vuex、axios等，通過webpack的externals配置項，可以在生產環境配合使用穩定的cdn提供服務，便於利用緩存機制，提升性能和交互體驗
- …
備註：這裏關於圖片上傳，我最早的實現方式是將圖片存儲在nginx服務器上，然後將地址返回給前端，後來考慮到服務器性能問題，改用ali-oss上傳圖片，可以更好的利用緩存機制，提高用戶體驗
後端
後臺框架使用既成的koa框架實現。這裏我想說下，去年用express框架寫過一個express+mongodb+vue實現增刪改查-全棧之路，這次使用koa後，個人感覺在使用上並沒有特別大的差異，大致就是一些api變化了，精簡了整個框架，同時基於async/await語法糖可以更好地開發中間件。對於這些後臺框架，如果你不是有志於成爲領域佼佼者，我覺得，作爲前端，知道它是幹嘛的，以及怎麼用的，就可以了。
交互細節
- 通過mongoose中間件對象模型工具實現數據庫連接，以及Schema創建
- 驗證碼通過gd-bmp實現，再用jsonwebtoken(jwt)根據一定規則，生成token後，一併存儲在數據庫中，用戶登陸或者註冊時，先判斷驗證碼是否存在數據庫中，再進行其他動作
- 封裝check_token中間件，每次收到前端請求時，判斷請求頭裏面的token是否過期，進而執行後續動作
- 使用@koa/multer實現前端上傳圖片，存儲到server文件夾下，再用ali-oss上傳圖片到
aliyun - …
備註：後臺知識於前端而言，比較生澀隱晦，建議自己遇到不了解的，自行前往瞭解
數據庫
數據庫的話，這裏我用的是Mongodb，推薦使用homebrew一鍵安裝，
同時爲了方便後續操作和查看數據庫，建議下載一個Robo 3T GUI圖形工具。
剩下的我覺得需要了解的就是Mongodb的數據庫增刪改查API
重點
到這裏，本地開發基本沒有問題了。換句話說，你可以在本地訪問你的前端服務，調用後臺接口，進行本地數據庫的增刪改查了。
但是我想你既然讀到了這裏，肯定是不滿足於僅在自己的機器上折騰，你更加感興趣的是如何將自己的項目部署在服務器上，讓其他小夥伴也可以看到你的作品。更多細節請參考aliyun服務器部署web項目全過程
接下來爲了防止大家頭皮發麻，我會用最樸素的言語，爲你揭開神祕的面紗
準備工作
服務器
你想讓人家看到你的作品，那你是不是需要準備自己的一臺服務器，所以你需要先去aliyun買個服務器，至於服務器的標準，決定於你錢包裏的毛爺爺
買了服務器之後，最直觀的感受是，你只是拿到了一串數字（ip地址）
// aliyun服務器ip地址
123.56.119.218
域名
別人訪問你的服務器，也只能通過ip地址訪問，你絕不甘心於此，數字誰能記住？於是乎，你還需要去aliyun上面買個域名 ，再通過域名解析，將你的域名指向你的ip地址，這樣，別人就可以更從容的記住你的站點
// 小夥伴們通過訪問域名，進入你的網站，而不是使用一串數字訪問
www.xxx.com -> 123.56.119.218
備案
有了域名和服務器後，爲了證明你未來網站的合法性，你還需要去備案域名網站，週期大概20天左右。只有備案通過後，別人纔可以通過域名訪問你的網站，否則，只能通過ip地址進行訪問。
在等待域名備案成功的這段時間，你要做的事情還有不少，同時也註定着蛋疼（踩坑）
上傳文件至服務器
通過命令行ssh root@xxx 方式連接服務器，其中xxx爲你的服務器ip地址，
進行相關依賴的安裝。這裏包括但不限於mongodb、nginx、pm2、node、git等，說白了，就是要在服務器環境上搭建類似於你的本地環境，在安裝的時候，最好注意下相關的版本，爲了避免出現兼容問題，你可以看下你本地的版本，對應下載即可。
這裏我不想做過多描述，因爲本人搭建的時候，也是踩了好多坑，建議新人都踩一遍，遇到不會的，網上找教程，你遇到的坑，前人都趟過了。只有自己多踩坑，才能記憶深刻。
當這些工作都準備完畢後，你需要一個工具，可以將你本地的代碼，傳輸到服務器上，這裏推薦大家使用FileZilla，方便、快速。比如說我本地開發完後，執行npm run build後，生成的dist目錄內的文件和server文件夾，全部通過FileZilla上傳到/home目錄下的www文件夾下，www這個目錄是你自己創建的，你可以任意取名字，但是這裏的路徑，跟後面需要配置的nginx靜態資源目錄路徑root有一定的關係。
服務器安裝PM2
到這裏，基本上所有的準備工作已經就緒，你只需要通過命令行進入服務器上存放後臺代碼的server文件夾，用pm2啓動後臺程序即可。關於pm2，你可以閱讀PM2入門。
假如你的server文件夾放在/home/www下，你只需要執行以下幾步
1.cd /home/www/server
2.pm2 start bin/www --name xxx (這裏的xxx是你爲你啓動的服務起個名字)
關於pm2的相關命令，可以使用pm2 examples查看示例
服務器安裝Nginx
首先，你要知道我們的靜態資源和後臺服務代碼都存在nginx服務器的一個目錄下
在通過域名解析後，當我們通過域名訪問前端靜態資源時，會指向你之前在nginx.conf文件裏面的root目錄，同時會訪問你的默認首頁index.html
這時，前端已經就緒了，但是因爲後臺程序是啓動在服務器的本地3000端口上，如果直接訪問，會存在跨域的問題，這個時候，nginx的主要作用之一反向代理就起作用了
// nginx.conf配置文件
server {
listen 80; // 默認端口
server_name 123.56.119.218; // 域名，當你訪問這個域名時，會直接去找/home/www目錄下的index.html文件
root /home/www; // 根目錄
index index.html index.htm index.php; // 默認首頁
// 反向代理
location /api/ { // 前端訪問api下的接口時，會代理到proxy_pass指向的地址
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
proxy_pass http://127.0.0.1:3000; // 反向代理，用戶訪問api接口時，指向本地服務3000端口
}
}
提示： 每次修改完nginx.conf配置文件，都需要執行以下命令，重新啓動nginx服務器
重啓nginx服務器步驟
1. cd /usr/local/nginx/sbin
2. ./nginx -s reload
本地啓動
首先你本地要全局安裝了mongodb、node、npm、robo3T等相關工具，本地啓動mongodb
1.git clone https://github.com/weirui88888/itc.git 把項目克隆到本地
2.cnpm install // 項目根目錄安裝前端項目依賴
3.cnpm install // server目錄下安裝後端項目依賴
4.在根目錄下啓動前端程序
npm run serve
5.在server目錄下啓動後端程序
npm run start
6.訪問localhost:8080即可看到成果
如果開通了aliyunOSS對象存儲，想要將圖片上傳至aliyun對象存儲的話，請參考server/controller/record.js文件中的詳細註釋
最後
在整個搭建的過程中，會遇到各種各樣的問題。但是正是這些問題，會讓我們成長，也認識到自己的微不足道，同時也鞭策着我們不斷前行，愈戰愈勇。這裏也要感謝licy97love這位同學，在部署服務器過程中給予我的幫助和指導。
這是我第一次寫一個完整的前後端應用並部署服務器，所以難免程序中，會存在一些瑕疵，望包含。同時如果有一些疑惑點或者是建議，可以提issue，也可以發郵件call我。
線上地址：itc
項目地址：GITHUB
歡迎star和fork,謝謝！
寫在文章的最後，如果這篇文章，給你啓示或是成長，請爲我點亮一顆小紅心。程序員，碼字不易，謝謝。
