今天的文章介绍的是vue.js+iview+springboot来搭建一个简单的前后端分离登录demo。
（项目目录在最后）
一、前端（vue.js+iview）
- 1.新建一个静态的网页项目，这里我给项目取名为login
- 2.初始化包结构
- 3.安装iview
- 4.在main.js中加入iview
- 5.使用iview
<template>
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="userName">
<Input type="text" v-model="formInline.userName" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" placeholder="Password">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
return {
formInline: {
userName: '',
password: ''
},
ruleInline: {
userName: [
{required: true, message: 'Please fill in the user name', trigger: 'blur'}
],
password: [
{required: true, message: 'Please fill in the password.', trigger: 'blur'},
{
type: 'string',
min: 6,
message: 'The password length cannot be less than 6 bits',
trigger: 'blur'
}
]
}
}
},
methods: {
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
}
}
}
</script>
<template>
<div id="app">
<Login></Login>
</div>
</template>
<script>
import Login from '@/components/Login'
export default {
name: 'App',
components: {
'Login': Login
},
data() {
return {}
}
}
</script>
<style>
#app {
text-align: center;
margin-top:400px ;
}
</style>
- 6.修改Login.vue代码并且安装和使用axios
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
}
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('表单校验失败!');
}
})
}
三、后端（springboot）
- 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;
/**
* Created by 不爱编程的程序猿
* 2018/11/8
*/
@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;
/**
* Created by 不爱编程的程序猿
* 2018/11/8
*/
@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;
}
}
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('表单校验失败!');
}
})
}
proxyTable: {
'/rest': {
target: 'http://localhost:8081',//设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/rest': '/rest'
}
}
}
并且重新修改提交表单的请求方法为
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('表单校验失败!');
}
})
}
- 最后附上工程的目录（没有进行分包）
- 前端 login工程
- 后端工程
