在上一篇中我们使用spring-boot搭建了一个简易的后端模板，现在我们使用iview-admin来简单前端的模板。
目前前端较火的框架有react.js或者是vue.js，其他的关注度较低很容易落伍所以我就没有去了解。这两者当中vue.js由于中文圈支持较好而我本人又是个菜鸡，所以我就采用vue全家桶的技术栈了。
前端技术栈：vue.js + iview + webpack
相比较于后端搭建一个完整的且可运行的项目相比，搭建一个完整的前端模板，个人觉得还是要复杂不少的。。来自一个菜鸡发自灵魂的拷问。所以我们就直接拿开源的iview-admin来进行魔改就行，也不算很复杂。先来看下官方提供的预览图，是不是很赞：
http://admin.iviewui.com/homeadmin.iviewui.com
github地址
iview/iview-admingithub.com
我们下载下来并且进行npm install之后就可以开始搭建我们的前端基本数据了 ，通常来说我们要搭建一个基本的vue项目，需要有以下几个必备的点，其中有一些iview-admin已经帮我们做好了，我们只需要再做一些自己需要的就行。
1、webpack编译配置（已经配好）
2、vue-router用来帮我们管理前端路由（已经配好，但需要修改部分配置）
3、vuex用来帮我们管理应用共享数据（已经配好）
4、axios相关配置来帮我们发送ajax请求（部分需要我们自己配置）
5、反向代理实现前后端分离（需要我们自己配置）
其中需要我们自己配置的只有4、5两项。
现在就让我们来配置一下。
一、魔改路由
iview-admin源码
运行 npm run dev 或者 npm start启动项目
登录页面
项目主页
可以看到 项目中已经有很多的菜单了，不过我们几乎都不需要。先让我们来摸清这个后台模板的基本结构，然后就可以进行魔改了。
熟悉vue的同学一定知道熟悉一个项目最简单的方法就是从路由管理模块去看。
router目录
了解import模块化的同学一定会知道import router默认会导入名为index的文件（其实并不是index.js，而是有一系列的策略，不过我们最终要回归后端，暂且不讲这些）。所以router的主要逻辑就在index.js文件中
router的
通过vue的官方文档，我们可以了解到，这是一个全局的路由前置导航守卫，是在路由进行导航时触发的一个钩子函数。
导航守卫 | Vue Routerrouter.vuejs.org
其主要逻辑是先取出key为token的Cookie，查看其是否存在，不存在则说明尚未登录，需直接跳转到登录页面（使用name的用法叫做命名路由）。如果token存在，则跳过登录页面直接路由到主页。如果已经登录，但是访问的不是主页或者登录页。则需要进行权限验证。
验证逻辑不是很复杂，首先从vuex中取出一个名为access的数据，从项目给的静态数据来看，这是一个字符串数组：
项目中的静态代码
由此我们可以初步猜测，用户的权限是由一个字符串的数组组成的，而且这个数组中的字符串和路由的页面有某种对应关系。至于有什么关系，我们继续往下看验证函数：
验证逻辑
主要逻辑有两步：
1、递归找到这个路由的配置项
2、使用用户的access权限列表和这个item进行权限比对
结果很明显了，如果我们给route配置了meta或者meta.access则需要进行hasOneOf的验证，如果没有配置则默认是全开放的范围，不需要经过鉴权。对于很多人来说理解这个过程可能还是有些稍微复杂的，毕竟中间涉及到了不少工具类，vuex等的引用。我下面用一个实例来讲如何去使用它的鉴权机制，首先找到route的配置数据：
红箭头标注的access是我自己添加上去的，表示只有用户的access权限数组中包含ROLE_NORMAL这个字符串，才能够访问doc这个路由。
所以划重点：我们要想魔改自己的项目，只需要在这个基础上改改路由就行了~
首先我们把所有的路由极其相关组件都删除掉，只留下主页就行了。最终结果如下
另外除了access，iview-admin还有很多其他的配置项，不过作者都已经贴出来了我们就不一一解释了。主要还是先把项目改成我们可以用的再说~
现在我们的主页已经变成这个样子了
二、魔改axios
我们在前端发送ajax的请求一般使用axios，中文文档如下：
使用说明 · Axios 中文说明 · 看云www.kancloud.cn
iview-admin已经给我们提供了axios，但是其注册函数的做法说实话令人感到捉急，有点太麻烦了。
axios.request调用后返回的是一个promise对象，也就是说作者把所有的ajax请求都写成了一个返回一个promise的函数，所以我们完全可以将这种配置压缩成统一管理的方式。
首先我们要将其提供的axios中一些不需要的配置项删除掉，改成下面这样子
libs/axios.js
libs/axios.js
接下来是编写我们的api管理中心，很简单现在src目录下新增一个api目录
api/index.js
api/index.js
api/index.js
静态配置可以为对象类型，也可以为string类型。如果为对象类型则和axios文档中所给的配置一样。处理完成后我们返回的是一个函数，我们可以像这个函数传入一个或者两个参数。
第一个form，类型为对象，当method为post时，其值代表了请求体的JSON数据。当method为get时，其值代表了请求体的键值对数据。还有的时候我们可能要对header进行特殊配置，则可以在第二个参数中以对象的形式传入，比如我们想设置一个请求头则调用api函数时传入额外的config参数， 如 { headers: { header: value }}
最后我们将整个函数管理中心的初始化工作放在了类Api中，并且提供了一个install方法，用来给Vue进行注册。即我们可以在main.js文件中使用Vue.use，将api对象挂载到Vue对象的原型$api上
做完上面的步骤，我们就完成了api模块的基本配置
三、反向代理
webpack在运行时就相当于我们在本地配置了一个nginx的location，可以将其看成一个服务器的概念。提供服务必然要有自己的运行端口，所以在我们进行前后端分离的时候，前端的域名虽然和后端的域名相同，但是他们具有不同的端口，由于ajax请求默认是同源下进行的，所以我们必须进行一次请求的转发。给webpack配置devServer
比如我们可以在vue.config.js文件中添加devServer的配置，
port： 7000表示当前前端项目运行在本地的7000端口，如果不经过请求的代理，则默认ajax请求会发送到http://localhost:7000端口下
这里的proxy配置表示将匹配所有以/api开头url的请求转发到8080端口，并且将开头的api重写为空，也就是去除api
例:
http://localhost:7000/api/query --> http://localhost:8080/query
在跟目录下的vue.config.js中配置自己的代理
看到这你会发现，我们需要一个全局的开始标志'/api' 来告诉代理服务器，这个请求需要被代理。所以我们在src/config/index.js问价夹下设置一下baseUrl为/api
这样我们的前后端分离的ajax请求的模块就完成了。
这里放一个我自己写的前端模板，不过有些地方还需要进行优化
