扣丁学堂Java开发SpringBoot与Vue.js整合基本流
今天扣丁学堂Java培训老师给大家介绍一下关于SpringBoot与Vue.js整合实践过程中的基本流程及遇到问题解答，Java开发SpringBoot后端；前端使用Vue.js这个轻量、易上手的框架。下面我们一起来看一下吧。
框架版本
SpringBoot:2.0.4.RELEASE（JDK是1.8）
Vue.js:2.x
基本流程
前端：编写Vue组件
首先用vue-cli搭好脚手架，我这个Demo用到的第三方库有：
axios：负责HTTP请求
bootstrap-vue：Bootstrap和Vue.js的整合，方便设计页面
vue-router：管理路由
qs：实现CORS
然后写一个登录组件：
<!--下面是我直接从bootstrap-vue文档抄下来的模板-->
<template>
<div>
<b-form@submit="onSubmit"@reset="onReset"v-if="show">
<b-form-groupid="exampleInputGroup1"
label="Username:"
label-for="exampleInput1">
<b-form-inputid="exampleInput1"
type="text"
v-model="form.username"
required
placeholder="Enterusername">
</b-form-input>
</b-form-group>
<b-form-groupid="exampleInputGroup2"
label="Password:"
label-for="exampleInput2">
<b-form-inputid="exampleInput2"
type="text"
v-model="form.password"
required
placeholder="Enterpassword">
</b-form-input>
</b-form-group>
<b-form-groupid="exampleGroup4">
<b-form-checkbox-groupv-model="form.checked"id="exampleChecks">
<b-form-checkboxvalue="me">Checkmeout</b-form-checkbox>
<b-form-checkboxvalue="that">Checkthatout</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-buttontype="submit"variant="primary">Submit</b-button>
<b-buttontype="reset"variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
//...
</script>
我现在想实现的就是用户登录成功之后导航到另一个组件，所以我就又写了一个欢迎组件：
<template>
<div>
<h1>Welcome!</h1>
</div>
</template>
记得配置路由：
//src/router/index.js
importVuefrom'vue'
importRouterfrom'vue-router'
importLoginfrom'@/components/Login.vue'
importInformationfrom'@/components/Information.vue'
Vue.use(Router)
exportdefaultnewRouter({
routes:[
{
path:'/',
name:'Login',
component:Login
},
{
path:'/information',
name:'Information',
component:Information
}
]
})
后端：提供RESTfulAPI
因为只有后端提供了接口，前端才能调用，所以现在要进行后端开发。RESTful是现在很流行的API设计风格，所以我这里也实践了一下。下面是controller的代码，完整源码地址附在文末。
@RestController
@RequestMapping("/api")
publicclassLoginController{
@RequestMapping(path="/login",method=RequestMethod.POST)
@ResponseBody
publicStringlogin(@RequestParamStringusername,
@RequestParamStringpassword){
//简单处理一下，实际开发中肯定是要用到数据库的
if(username.equals("123")&&password.equals("123")){
return"successful";
}else{
return"failed";
}
}
}
后端的API现在有了，就差前端调用了。但是没这么简单，接下来就要解决我前面提到的问题。
实现CORS
在这个Demo中前端占用的端口是8080，后端是8088。这就存在跨域的问题，如果不解决的话后端就没法接收前端的请求。
我参考了这个例子，通过配置SpringMVC实现了CORS：
@Configuration
publicclassCORSConfigimplementsWebMvcConfigurer{
@Override
publicvoidaddCorsMappings(CorsRegistryregistry){
registry.addMapping("/**")
.allowedOrigins(ALL)
.allowedMethods(ALL)
.allowedHeaders(ALL)
.allowCredentials(true);
}
}
后端配置好了还不行，前端也要有一些配置，要用axios顺利地发送请求并保证后端能接收到，需要对请求参数做处理。我参考这个回答用qs库对请求参数做了处理：
qs.stringify({
'username':this.form.username,
'password':this.form.password
})
现在只需完善前端调用后端API的代码：
//Login.vue
<script>
exportdefault{
data(){
return{
form:{
username:'',
password:'',
checked:[]
},
show:true
}
},
methods:{
onSubmit(evt){
evt.preventDefault();
//关键就在于要对参数进行处理
axios.post('http://localhost:8088/api/login',qs.stringify({
'username':this.form.username,
'password':this.form.password
})).then((response)=>{
varstatus=response.data;
if(status==='successful'){
this.$router.push('/information');
}else{
alert(response.data.message);
}
console.log(response);
}).catch((error)=>{
console.log(response);
});
}
}
}
</script>
至此，终于实现了前后端的分离，并且保证前后端能够顺利交互。
题外话
让controller能获取请求参数
??controller可能无法获取请求参数，这篇文章提供了一种解决方案。我这个Demo中并没有出现controller收不到请求参数的问题，但也把这个问题记录下来，以后可能遇上也说不准。
axios方法中的this
我这个Demo中还试着用axios发GET请求，然后获取后端响应的JSON数据。
//Information.vue
<template>
<div>
<h1>Welcome!</h1>
<div>
<b-button@click="getInfo()">Getyourinformation</b-button>
<h2v-if="username!==''">Yourusernameis:{{username}}</h2>
<h2v-if="email!==''">Youremailis:{{email}}</h2>
</div>
</div>
</template>
<script>
importaxiosfrom'axios'
exportdefault{
data(){
return{
username:'',
email:''
};
},
methods:{
getInfo(){
axios.get('http://localhost:8088/api/information')
.then(function(response){
this.username=response.data['username'];
this.email=response.data['email'];
console.log(response);
}).catch(function(error){
console.log(error);
});
}
}
}
</script>
一开始我是这么写的，乍一看没什么问题，但是JavaScript就一直报错：
typeError:Cannotsetproperty'username'ofundefined
搞了很久都没有解决，直到看到这篇文章，才明白原来是this作用域的问题（JavaScript的this是真的复杂啊！！！）。改成下面这样就没问题了：
axios.get('http://localhost:8088/api/information')
.then((response)=>{
this.username=response.data['username'];
this.email=response.data['email'];
console.log(response);
}).catch((error)=>{
console.log(error);
});
后来StackOverflow上有人说不用箭头函数也行，只需提前把指向Vue实例的this保存在一个变量就行了：
varvue=this;
axios.get('http://localhost:8088/api/information')
.then(function(response){
vue.username=response.data['username'];
vue.email=response.data['email'];
console.log(response);
}).catch((error)=>{
console.log(error);
});
以上所述是扣丁学堂Java开发SpringBoot与Vue.js整合基本流程及遇到问题答疑的详细介绍，希望对大家有所帮助。
