今天下了Vue，想试一试前后端分离的实现，没想到坑还不少，这里就记录一下我遇到的坑和我的代码：
一、Vue的下载安装：从网上找就好了，没什么问题，除了下载以后，要把镜像库改成淘宝的，要不然太慢了。
二、推荐一个很好用的软件 HBuilder X，可以在上面写前端的项目，直接就能打开浏览器看到效果，还可以自动下载依赖。
三、前端代码：
首先，先创建一个Vue项目，新建以后项目自带的程序结构如图：
因为我也是刚刚接触vue，对里面的东西也不是很了解，只是从网上找了一些项目，边看边学，感觉里面重要的就是main.js、router还有components这三个，当然config里应该是配置文件，也很重要，但在这个初学的项目里，并没有涉及太多里面的东西。
首先，先看一下main.js里面的东西：
里面的东西不多，可以看到大多数都是添加依赖,使用Vue.use()指定全局使用的包之类的功能。
这里一定要注意，比如这个程序添加了ElementUI这样的外部依赖，那么一定要在这里用Vue.use()使用起来，表示全局都载入了这个库，否则的话，在页面显示的时候，没有内容，使用F12查看网页代码，会出现：
Unknown custom element: <xxx> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
这样的提示，这时候就要检查一下自己是否只是Import但是忘了use了。
接着看一下App.vue，这是项目的根组件：
在这里，我为了做测试，在上面加了一个啊咧，就会发现，不管跳转到哪个页面，页面上都会有“啊咧”这两个字，而另一方面，如果去掉下面的<router-view>的话，不管用什么访问路径，都只有这一个页面，无法获得其他页面，也就是说其实这个App.vue，是程序的入口，在此基础上，通过<router-view>来找到对应路径的页面，给予显示。这有点像SpringBoot里面的Application，程序都是从那里开始启动的。
最后，是Index.js，这里面规定了各个路径对应的页面,在这里，我已经写好了两个组件，一个是登录的组件，一个是初始页面：
这里，path就是配置的路径名，而component对应着每一个组件，组件就可以表示一个页面。
下面，就看一看登录的页面代码：
这里主要参考了https://www.jianshu.com/p/4eecd628782a
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import VueResource from 'vue-resource'
Vue.use(Element) <template>
<div>
<el-form :model="login" status-icon :rules="rule" ref="login">
<b>用户名</b>
<el-form-item prop="username" >
<el-input prefix-icon="el-icon-ump-yonghu" v-model="login.username" auto-complete="off" />
</el-form-item>
<b>密码</b>
<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-button class="btn" type="primary" @click="submitForm('login')">登录</el-button>
</el-form-item>
</el-form> <p><a href="#" class="tips">还没有账号？点我去注册</a></p>
</div>
</template> <script>
export default {
name: 'login',
data() {
var checkUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
} else {
callback();
}
};
var checkPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
return {
checked: false,
token: '',
login: {
username: '',
password: ''
},
rule: {
username: [{
validator: checkUsername,
trigger: 'blur'
}
],
password: [{
validator: checkPassword,
trigger: 'blur'
}]
}
}
},
methods: {
submitForm(login){
this.$refs[login].validate((valid)=>{
if(valid){
this.$http.post('http://127.0.0.1:8080/login',{
username: this.login.username,
password:this.login.password
},{emulateJSON:true}).then(result =>{
console.log(result);
if(result.bodyText ==='index'){
this.$router.push({path:'home'});
}else{
console.log("登录失败");
return false;
}
});
}else{
console.log("error submit!!");
return false;
}
});
},
},
}
</script> <style>
</style>
这个程序里面，有一些点需要说明：
①上面的<el-form>这样的标签，是在ElementUI里面的，所以一定要在main.js中使用Vue.use()来导入依赖
②对于 :model,他相当于v-bind和v-on的集合，它负责监听用户的输入事件，从而更新数据，具体的解释和实例可以参考:https://www.jianshu.com/p/20e485cb65d9
③:rules：用来添加对表单字段的检验，通常使用语法是：{validator:验证方式，trigger:验证触发}，如果是自己定义的验证方式，应该传入函数名，而不加参数。
④下面的methods里，要注意的就是post的地址不要出错，不要写localhost,写127.0.0.1进行测试，端口号写自己服务器端部署的端口号。
这样子，前端就算完成了，可以运行了，但是我们看vue项目config下面的index.js(或者运行的时候，看命令行也可以)，我们可以看到这样的内容，项目运行的端口地址是8080，而这个又是服务器默认运行的端口，这两个不可以在同一个端口上运行，所以必须修改一个端口，不妨把前端的端口改为8081:
其中，home的代码，随便写一写就好了：
<template>
<div>
<h2>这是主页</h2>
</div>
</template> <script>
export default{
name:"name"
}
</script> <style>
</style>
四、后端代码：
新建SpringBoot项目：在Controller层直接写平常写的代码即可：
@RestController
public class TestController { @CrossOrigin(origins = "*")
@RequestMapping("/login")
public String login(
@RequestParam(value = "username", required = false) String username,
@RequestParam(value = "password",required = false) String password,
Model model
){
System.out.println("用户名为"+username);
System.out.println("密码为"+password);
if (username.equals("11")){
return "index";
}else{
return "login";
}
}
}
只不过要注意的就是 最上面的注解变成了@RestController:这个注解就是@Controller和在方法上加@ResponseBody的结合，这样使得返回值自动写入返回响应中，方便了前端读取。
在部署的时候，第一个问题就是：
①：Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package
这个是因为启动的程序Application放的位置不对，应该把它放到，包含所有java文件的包下，而不能在java包下，比如这样子放才是正确的姿势
②：运行了以后，发现可以使用postMan传送数据，但是却接收不到来自前段的数据：这是因为前段的数据格式不是JSON的，要转成JSON才可以接收到：
需要在传送数据的时候，加上这样一行：
③上面的写完以后，后端接收到了数据，但是前端没有反应：这时候，是因为跨域问题：详细可以参见https://blog.csdn.net/xcbeyond/article/details/84453832
而SpringBoot的解决方案十分简单：直接在方法上加@CrossOrigin()注解即可：
