Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验

七月 27, 2018

Vue实现前后端分离项目的初体验

经过之前学习的Vue的知识:

其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后端是基于SpringMVC的。

以下我们将演示如何使用Vue组件实现一个用户登录系统。

介绍

后端

后端基于spring、springMVC、mybatis框架

对后端SSM框架搭建不熟悉的可以参考我的博文: SSM项目整合

前端

前端使用了wepack打包工具,利用了vue.cli脚手架快速搭建的项目。由于本人对一些技术也不是很熟悉,所以给大家提供些官方文档,
想要深入学习还是要仔细分析官方文档。传送门如下(也是本项目要用到的):

以上技术都是比较常用的,webpack类似一个打包工具,它会将你项目中的Vue组件打包为一个庞大的js文件(当然我们是看不懂的),而我们的前端项目是部署在node.js提供的web容器中的。

即前后端分离的实际效果是这样的:
index.html

index

有没有感觉很神奇,哈哈,反正我第一次见到的时候就是觉得很神奇,因为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依赖包,所以我们不需要再手动安装了。

范例

如果安装完成,我们可以看到出现如下目录结构:

启动项目

在终端项目路径下输入npm run dev命令;正常情况下,会出现如下信息:

在浏览器中输入指定的URL,会出现如下页面:

我们继续观察,打开项目中的index.html

我们看到,这个HTML中没有任何代码,甚至没有引入js、css,但是页面中的视图是怎样渲染出来的呢?

仔细看项目结构,我们能看到在src/components/下有一个HelloWorld.vue程序,我们页面中的程序就是通过这些.vue组件来渲染出来的。

打包项目

如果我们想将项目部署到服务器上,你放一堆.vue程序,浏览器是无法解析出来的,所以我们需要了解一下webpack的打包命令:

npm run build

正常情况下,会显示上图中的信息,表示打包成功了,会在项目根目录中生成一个叫dist的文件夹,里面是生成的静态项目:

我们双击dist/index.html,会看到和之前一样的页面,但是其中引入了一个XX.js文件

开始

经过上面的步骤我们应该了解到了所谓前端分离的简易概念,其实在之前的博文: Vue组件 我们已经了解到了Vue的模块化开发流程。配合.vue组件,其实思路还是相同的。

搭建前端

开始之前,我们首先要安装vue-resourceelement-ui),执行:

npm install vue-resource
npm install element-ui

第一步:修改main.js

main.js文件是webpack的核心入口,我们需要在其中引入Vue-resource以及router

1
2
3
import VueResource from 'vue-resource'

import router from './router/index.js'

在Vue实例中注册router

1
2
3
new Vue({
router,
});

完整代码:

第二步:修改router/index.js

这是有关Vue路由的配置,前面我们也已经讲过了vue的路由,这里不再多说,代码如下:

如上就配置了,如果你访问localhost:8081/,那么就会自动路由跳转到login.vue组件中,提示我们登录;其中的/home表示,如果登录成功,就跳转到home.vue组件中,相当于登录成功后跳转到后台页面。

第三步:创建login.vue

src/components/下创建login.vue组件。

login组件中表单样式就不再讲了,我们主要看一下怎样利用v-model绑定表单数据,并请求后端

表单原型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 登录表单 -->
<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的校验部分

表单提交方法部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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组件




搭建后端

经过上面介绍了前端搭建步骤后,搭建后端我们就相对熟悉了,我们的目标就是在controller中提供一个接口login.do让前端访问。

解决跨域请求

之前已经说了跨域请求很重要,不然我们写的所有请求都无法顺利访问后端接口。解决的方式如下:

配置

我们只需要在项目中的web.xml中配置如下代码即可。因为这个过滤器是tomcat提供的,所以我们并不需要导入任何jar包。

1
2
3
4
5
6
7
8
9
<!--配置允许跨域访问-->
<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层,这里就比较简单了,就是根据获取到的参数判断数据库中有没有对应的用户,有就登录成功,否者亏登录失败。

由于我这里使用了shiro,需要将密码加密处理,所以没有直接传入到service层,当然思路是相同的。

注意:

  • 我这个login.do接口返回的是JSON字符串,前面使用了@RestController注解,不要误认为是返回的页面,那么就会404的。
  • 接受的参数要用@RequestParam注解标记,不然会接受不到前端传递的数据

请求成功

跳转到home组件中:


交流

如果大家有兴趣,欢迎大家加入我的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.