（3）从0开始搭建一个vue+springboot的前后端分离登陆案例
一、前端（vue.js+iview）
1.新建一个vue项目，取名login
使用vue init webpack login初始化一个vue项目。
然后进入login目录
2.初始化包结构
执行npm install（需要先安装node.js，参考node官网进行安装即可）
最后启动项目：npm run dev
打开浏览器，输入http://localhost:8080进行访问，看到如下页面表示启动成功。
3.安装iview
将刚才的项目停止（Ctrl+C，然后按Y确定），执行npm install --save iview
4.在项目中引入iview
使用vs-code打开项目，在main.js中加入以下代码
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
整体文件如下：
5.使用iview
首先，在components目录下创建Login.vue文件。然后在iview官网找到Form表单组件。复制到Login.vue中。
Login.vue：
然后修改app.vue。
至此，前端页面完成，再次运行项目，看看效果。
6.修改Login.vue和安装使用axios
在Login.vue组件中，有一个提交的方法，当校验通过时，会提示“Success!”，失败时会提示“Fail!”,所以我们可以在校验通过的时候提交表单到后台。
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
}
vue官方推荐使用axios发送异步请求。所以这里我们先安装在使用axios
安装axios：npm install axios -S
安装完成后，在main.js加入以下代码
Import axios from ‘axios’
Vue.prototype.$axios = axios
接下来在表单验证的时候，提交用axios来做。
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$axios({
url: '',//请求的地址
method: 'post',//请求的方式
data: this.formInline//请求的表单数据
}).then(res => {
console.info('后台返回的数据', res.data);
}).catch(err => {
console.info('报错的信息', err.response.message);
});
} else {
this.$Message.error('表单校验失败!');
}
})
}
到此为止，前端的搭建算是完成了。接下来搭建后台。
二、后端（spring boot）
1.新建项目
新建一个Spring initializr工程，这里使用默认的名称demo，也可以根据自己喜好更改项目名，第三步选择web工程。
2.新建LoginController.java和User.java文件
LoginController.java代码如下:
package com.example.demo;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/rest")
public class LoginController {
@RequestMapping(value = "/login", method = RequestMethod.POST)
public Boolean Login(@RequestBody User user) {
System.out.printf("用户名" + user.getUserName());
System.out.printf("用户密码" + user.getPassword());
return Boolean.TRUE;
}
}
User.java代码如下：
package com.example.demo;
import javax.persistence.Entity;
@Entity
public class User {
//用户名
private String userName;
//密码
private String password;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
3.修改端口为8081
Springboot内置的tomcat的默认端口是8080，但是这个端口被前端占了，所以我们修改后端端口为8081，在application.properties文件加入server.port=8081即可。修改后，后端项目完成，重启就可以了。由于后端端口改了，所以要修改url为：localhost:8081/rest/login
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$axios({
url: 'localhost:8081/rest/login',//请求的地址
method: 'post',//请求的方式
data: this.formInline//请求的表单数据
}).then(res => {
console.info('后台返回的数据', res.data);
}).catch(err => {
console.info('报错的信息', err.response.message);
});
} else {
this.$Message.error('表单校验失败!');
}
})
}
修改完就可以在前端发送请求了，发现报错，跨域的问题。网上有很多解决方法。
4.解决跨域问题
我们打开config文件夹下的index.js文件，修改为:
然后修改提交表单的请求方法：
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$axios({
url: '/rest/login',//请求的地址
method: 'post',//请求的方式
data: this.formInline//请求的表单数据
}).then(res => {
console.info('后台返回的数据', res.data);
}).catch(err => {
console.info('报错的信息', err.response.message);
});
} else {
this.$Message.error('表单校验失败!');
}
})
}
5.再次测试：
后台console打印出来用户名和密码，成功。
这个demo的目的是展示前后端分离后数据请求过程，并没有做页面跳转，因为页面跳转涉及到vue的路由router。
6.最后附上工程目录
前端login：
后端demo：
