#### 使用vue + express + mongodb + angular大家博客管理系統
#### 技術棧
> 博客展示前臺： angular5
> 管理后臺： vue + iview + axios + vue-router
> 后端： express + mongoDB，使用的node版本是v8.9.1，畢竟是已經LTS版本了。
> 其他： 1. 七牛云存儲文章圖片； 2. mongoose操作數據庫； 3. marked轉化markdown，highlight.js做代碼高亮顯示
源碼地址： [https://github.com/lzy1043/blog](https://github.com/lzy1043/blog)。有興趣的可以看一下，當然給個star也是極好的。
#### 開發中遇到的問題
##### 1.前后端分離處理跨域的問題
這是使用的CORS（Cross-origin resource sharing），中文就是跨域資源共享，想了解CORS的可以看一下[這篇文章](http://www.ruanyifeng.com/blog/2016/04/cors.html)。當然也可以使用代理來處理跨域的問題。
##### 2. 管理后臺的權限控制
這里的權限控制使用的是無狀態的token來實現的。主要思路就是登錄成功之后后端會返回一個token,前端拿到token之后存儲在localStorage中，之后每次請求都會在請求頭中帶上token，由后端對token進行校驗，當token失效時由前端控制路由跳轉回登錄頁。
##### 3. 博客展示前臺的開發
這里主要是使用angualr來進行開發，這里選用angualr原因是想了解一下angular和typescript。剛開始看的時候對ts的語法已經angular中的注入、服務等不太明白，后來自己跟著官方的教程寫了些才算是有點明白。
##### 4. 后端
后端使用的是node的express框架。業務中的異步操作使用的都是Promise，雖然使用Promise可以避免回調的嵌套，但是出現一堆的.then和.catch也是令人很不爽的。后面的話會試著換成async來實現。操作數據庫使用的是mongoose。
#### 上線遇到的問題
上線遇到的問題主要由兩個： 一是首頁加載慢，二是刷新后404。
##### 首頁加載慢
這里是因為一次性會將所有的組件都加載過來，處理方式是使用異步路由和子模塊實現按需加載，盡管如此首頁還會有些慢，后面會再做些優化。
##### 刷新后404
要解決這個問題就要先了解一下angular中的路由的模式。angular中的路由模式和vue-router類似，history模式和hash模式（帶‘#’）。
當使用history模式時，刷新頁面相當于使用了get方式請求了后臺中對應url地址的接口，然而這個接口并不存在所以會導致404。
vue-router中提供了解決方案，這種方式在angular中也可以使用，大家可以參考一下。當然用過路由使用的是hash模式則不會出現這種問題。
我這里的處理方式很簡單，就是在后端路由中添加一個通配的路由接口，如果前端訪問的接口匹配不到是則使用該路由將頁面返回到前端。這樣就不會出現刷新后404的問題。這樣就必須前端自己提供一個404頁面。
#### 總結：
總的來說這次開發過程還算順利，太復雜的問題沒有遇到。不過代碼質量方面還需要極大的提高，后面會針對代碼質量做些優化，也會根據自己的需求去添加一些其他的功能。
