Vue实现前后端分离项目的初体验
经过之前学习的Vue的知识：
其实我们已经可以开始实战运用到实际的Web项目中了，由于本人是Java后端开发的，所以后端是基于SpringMVC的。
以下我们将演示如何使用Vue组件实现一个用户登录系统。
介绍
后端
后端基于spring、springMVC、mybatis框架
对后端SSM框架搭建不熟悉的可以参考我的博文： SSM项目整合
前端
前端使用了wepack打包工具，利用了vue.cli脚手架快速搭建的项目。由于本人对一些技术也不是很熟悉，所以给大家提供些官方文档，
想要深入学习还是要仔细分析官方文档。传送门如下（也是本项目要用到的）：
以上技术都是比较常用的，webpack类似一个打包工具，它会将你项目中的Vue组件打包为一个庞大的js文件（当然我们是看不懂的），而我们的前端项目是部署在node.js提供的web容器中的。
即前后端分离的实际效果是这样的：
1.png
2.png
有没有感觉很神奇，哈哈，反正我第一次见到的时候就是觉得很神奇，因为html中完全看不到任何js、css代码，但是却能渲染出来这么好看的页面。下面我们就讲一下，怎么实现这个过程吧！！
环境
上面我们提到的技术，在本案例中都会遇到，后端的SSM框架请参考我的博客文档，介绍一下前端环境的搭建：
1、安装node.js
具体安装流程还是要去看node.js官网。如果安装完成，请在终端输入npm -v查看是否安装成功。一般会出现类似如下版本号：
v8.11.3
2、安装VueCLI脚手架
VueCLI能够帮助我们快速搭建一个webpack的项目。
在已经安装好node.js的前提上，在终端输入：npm install vue-cli -g开始安装VueCLI。如果安装完成，请在终端输入：vue -V，会出现如下版本信息：
2.9.6
具体安装流程可以参看：博文
由于VueCLI脚手架已经帮我们安装好了webpack、以及相关的node依赖包，所以我们不需要再手动安装了。
范例
如果安装完成，我们可以看到出现如下目录结构：
3.png
启动项目
在终端项目路径下输入npm run dev命令；正常情况下，会出现如下信息：
4.png
在浏览器中输入指定的URL，会出现如下页面：
5.png
我们继续观察，打开项目中的index.html
6.png
我们看到，这个HTML中没有任何代码，甚至没有引入js、css，但是页面中的视图是怎样渲染出来的呢？
仔细看项目结构，我们能看到在src/components/下有一个HelloWorld.vue程序，我们页面中的程序就是通过这些.vue组件来渲染出来的。
打包项目
如果我们想将项目部署到服务器上，你放一堆.vue程序，浏览器是无法解析出来的，所以我们需要了解一下webpack的打包命令：
npm run build
7.png
正常情况下，会显示上图中的信息，表示打包成功了，会在项目根目录中生成一个叫dist的文件夹，里面是生成的静态项目：
8.png
我们双击dist/index.html，会看到和之前一样的页面，但是其中引入了一个XX.js文件
开始
经过上面的步骤我们应该了解到了所谓前端分离的简易概念，其实在之前的博文： Vue组件 我们已经了解到了Vue的模块化开发流程。配合.vue组件，其实思路还是相同的。
搭建前端
开始之前，我们首先要安装vue-resource（element-ui），执行：
npm install vue-resource
npm install element-ui
第一步：修改main.js
main.js文件是webpack的核心入口，我们需要在其中引入Vue-resource以及router
import VueResource from 'vue-resource'
import router from './router/index.js'
在Vue实例中注册router
new Vue({
router,
});
完整代码：
9.png
第二步：修改router/index.js
这是有关Vue路由的配置，前面我们也已经讲过了vue的路由，这里不再多说，代码如下：
10.png
如上就配置了，如果你访问localhost:8081/，那么就会自动路由跳转到login.vue组件中，提示我们登录;其中的/home表示，如果登录成功，就跳转到home.vue组件中，相当于登录成功后跳转到后台页面。
第三步：创建login.vue
在src/components/下创建login.vue组件。
login组件中表单样式就不再讲了，我们主要看一下怎样利用v-model绑定表单数据，并请求后端
表单原型
<!-- 登录表单 -->
<el-form :model="login" status-icon :rules="rule" ref="login">
<el-form-item prop="username">
<el-input prefix-icon="el-icon-ump-yonghu" v-model="login.username"
auto-complete="off"/>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="el-icon-ump-mima" type="password" v-model="login.password"
auto-complete="off"/>
</el-form-item>
<el-form-item>
<el-checkbox class="check" v-model="checked">记住我</el-checkbox>
</el-form-item>
<el-form-item>
<el-button class="btn" type="primary" @click="submitForm('login')">登录</el-button>
</el-form-item>
</el-form>
<div>
<p><a href="#" class="tips">还没有账号？点我去注册</a></p>
</div>
在上面的表单中，我们只需要关注三个点：
- v-model="login.username"
- v-model="login.password"
- @click="submitForm('login')"
为什么不关注其他的？
注意，这个案例由于我使用了element-ui，从标签中就能看出来，其中涉及到了一些element-ui提供的js校验，我们只需要关注Vue的逻辑即可。
提交表单
关于上面提到的element-ui的校验部分
11.png
表单提交方法部分
methods: {
submitForm(login) {
this.$refs[login].validate((valid) => {
if (valid) {
//提交表单
this.$http.post('http://127.0.0.1:8080/login.do', {
username: this.login.username,
password: this.login.password
}).then(result => {
console.log(result);
if (result.bodyText === 'index') {
this.$router.push({ path: 'home' }); //跳转到home组件中
} else {
console.log("登录失败");
return false;
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
}
上面就是我们要讲到的核心部分：请求后端的接口
解释：
-
首先需要注意的
this.$refs[login].validate((valid)){}是element-ui提供的表单验证的逻辑，但是是结合vue.js的。因为我们若在不验证表单直接提交的时候，会在表单提交按钮中直接传@click="submitForm(login)"，因为此时的login是一个data中已经声明的对象，其中包含两个参数：username,password。而element-ui提供的方式则会根据.validate()获取到login所包含的参数从而实现校验。 -
经过上面的校验，如果校验成功，那么将调用
this.$http.post()进行提交post表单，这是vue-resource提供的方式，博文 中我们也讲过。其中包含了两个参数，username,password。 -
请求成功，调用
.then()回获取到成功的请求结果。判断请求的结果：我这里是从后端返回的参数（return "index"）中判断是否登录成功，如果能录成功，就应该跳转到home组件中。 -
调用
vue-router中提供的$router.push方法，我们可以理解为向Router对象中添加了一条路由地址，其URL是：path: 'home'，那么就表明了会跳转带名字叫/home的路径下，整好对应的是我们配置好的home.vue组件。
注意：
-
最重要的就是跨域请求问题，本例中
node.js提供的web服务器地址是：127.0.0.1:8081，但是我们后端Tomcat服务器的地址是：127.0.0.1:8080，而默认是不能在一个域中访问另一个域中的资源的，所以也就出现了跨域请求的概念。 -
其次重要的就是
$http.post()的第一个参数：URL地址，不要写locahost:，不要写.... 具体原因不是很清楚，不然请求还会报错为跨域请求。 -
解决跨域请求的方式也有很多，这里我提供一个比较简单的方式，只需要在后端的
web.xml中提供一个允许跨域访问的过滤器就行了，后面会介绍。 -
还有就是之前我们就说过Vue中默认提交的post请求时不包含表单格式的，所以需要配置，我已经在
main.js中写了Vue.http.options.emulateJSON = true;设置全局表单提交格式，所以在post()方法中就没有设置。
第四部：创建home.vue
在src/components/下创建home.vue组件
15.png
搭建后端
经过上面介绍了前端搭建步骤后，搭建后端我们就相对熟悉了，我们的目标就是在controller中提供一个接口login.do让前端访问。
解决跨域请求
之前已经说了跨域请求很重要，不然我们写的所有请求都无法顺利访问后端接口。解决的方式如下：
配置
我们只需要在项目中的web.xml中配置如下代码即可。因为这个过滤器是tomcat提供的，所以我们并不需要导入任何jar包。
<!--配置允许跨域访问-->
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
Controller
讲了那么多，终于到了Controller层，这里就比较简单了，就是根据获取到的参数判断数据库中有没有对应的用户，有就登录成功，否者亏登录失败。
12.png
由于我这里使用了shiro，需要将密码加密处理，所以没有直接传入到service层，当然思路是相同的。
注意：
- 我这个
login.do接口返回的是JSON字符串，前面使用了@RestController注解，不要误认为是返回的页面，那么就会404的。 - 接受的参数要用
@RequestParam注解标记，不然会接受不到前端传递的数据
请求成功
13.png
跳转到home组件中：
14.png
交流
如果大家有兴趣，欢迎大家加入我的Java交流群：671017003 ，一起交流学习Java技术。博主目前一直在自学JAVA中，技术有限，如果可以，会尽力给大家提供一些帮助，或是一些学习方法，当然群里的大佬都会积极给新手答疑的。所以，别犹豫，快来加入我们吧！
联系
If you have some questions after you see this article, you can contact me or you can find some info by clicking these links.
网友评论