使用vue + express + mongodb + angular搭建博客管理系统

#### 使用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页面。

#### 总结：

总的来说这次开发过程还算顺利，太复杂的问题没有遇到。不过代码质量方面还需要极大的提高，后面会针对代码质量做些优化，也会根据自己的需求去添加一些其他的功能。