#### 使用vue + express + mongodb + angular大家博客管理系統(tǒng)

#### 技術(shù)棧

> 博客展示前臺： angular5

> 管理后臺： vue + iview + axios + vue-router

> 后端： express + mongoDB，使用的node版本是v8.9.1，畢竟是已經(jīng)LTS版本了。

> 其他： 1. 七牛云存儲文章圖片； 2. mongoose操作數(shù)據(jù)庫； 3. marked轉(zhuǎn)化markdown，highlight.js做代碼高亮顯示

源碼地址： [https://github.com/lzy1043/blog](https://github.com/lzy1043/blog)。有興趣的可以看一下，當然給個star也是極好的。

#### 開發(fā)中遇到的問題

##### 1.前后端分離處理跨域的問題

這是使用的CORS（Cross-origin resource sharing），中文就是跨域資源共享，想了解CORS的可以看一下[這篇文章](http://www.ruanyifeng.com/blog/2016/04/cors.html)。當然也可以使用代理來處理跨域的問題。

##### 2. 管理后臺的權(quán)限控制

這里的權(quán)限控制使用的是無狀態(tài)的token來實現(xiàn)的。主要思路就是登錄成功之后后端會返回一個token,前端拿到token之后存儲在localStorage中，之后每次請求都會在請求頭中帶上token，由后端對token進行校驗，當token失效時由前端控制路由跳轉(zhuǎn)回登錄頁。

##### 3. 博客展示前臺的開發(fā)

這里主要是使用angualr來進行開發(fā)，這里選用angualr原因是想了解一下angular和typescript。剛開始看的時候?qū)s的語法已經(jīng)angular中的注入、服務等不太明白，后來自己跟著官方的教程寫了些才算是有點明白。

##### 4. 后端

后端使用的是node的express框架。業(yè)務中的異步操作使用的都是Promise，雖然使用Promise可以避免回調(diào)的嵌套，但是出現(xiàn)一堆的.then和.catch也是令人很不爽的。后面的話會試著換成async來實現(xiàn)。操作數(shù)據(jù)庫使用的是mongoose。

#### 上線遇到的問題

上線遇到的問題主要由兩個： 一是首頁加載慢，二是刷新后404。

##### 首頁加載慢

這里是因為一次性會將所有的組件都加載過來，處理方式是使用異步路由和子模塊實現(xiàn)按需加載，盡管如此首頁還會有些慢，后面會再做些優(yōu)化。

##### 刷新后404

要解決這個問題就要先了解一下angular中的路由的模式。angular中的路由模式和vue-router類似，history模式和hash模式（帶‘#’）。

當使用history模式時，刷新頁面相當于使用了get方式請求了后臺中對應url地址的接口，然而這個接口并不存在所以會導致404。

vue-router中提供了解決方案，這種方式在angular中也可以使用，大家可以參考一下。當然用過路由使用的是hash模式則不會出現(xiàn)這種問題。

我這里的處理方式很簡單，就是在后端路由中添加一個通配的路由接口，如果前端訪問的接口匹配不到是則使用該路由將頁面返回到前端。這樣就不會出現(xiàn)刷新后404的問題。這樣就必須前端自己提供一個404頁面。

#### 總結(jié)：

總的來說這次開發(fā)過程還算順利，太復雜的問題沒有遇到。不過代碼質(zhì)量方面還需要極大的提高，后面會針對代碼質(zhì)量做些優(yōu)化，也會根據(jù)自己的需求去添加一些其他的功能。