springboot+mybatisplus+vue实现登录跳转
时间: 2023-09-11 12:03:30 浏览: 56
首先,你需要创建一个登录页面,用户输入用户名和密码后,前端将用户名和密码发送到后端进行验证。后端可以使用SpringBoot + MybatisPlus来实现数据的查询和验证。
1. 创建前端登录页面
在Vue中,你可以使用ElementUI等UI框架来快速创建登录表单。以下是一个简单的登录表单示例:
```html
<template>
<div class="login">
<el-card class="login-form">
<h2>用户登录</h2>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
login() {
// TODO: 发送登录请求
}
}
}
</script>
```
2. 创建后端登录接口
在后端,你可以使用SpringBoot + MybatisPlus来实现登录接口。以下是一个简单的登录接口示例:
```java
@RestController
@RequestMapping("/api")
public class LoginController {
@Autowired
private UserService userService;
@PostMapping("/login")
public Result login(@RequestBody User user) {
User dbUser = userService.getOne(new QueryWrapper<User>()
.eq("username", user.getUsername())
.eq("password", user.getPassword()));
if (dbUser != null) {
return Result.ok().put("user", dbUser);
} else {
return Result.error("用户名或密码错误");
}
}
}
```
该接口接收一个User对象,包含用户名和密码。然后使用MybatisPlus进行查询,如果查询到了用户,则返回成功结果和用户信息;否则返回失败结果。
3. 前后端交互
前端在点击登录按钮后,可以使用axios等HTTP库将用户输入的用户名和密码发送给后端接口。以下是一个简单的前后端交互示例:
```javascript
import axios from 'axios';
export default {
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
axios.post('/api/login', this.loginForm)
.then(resp => {
if (resp.data.code === 0) {
this.$message.success('登录成功');
// TODO: 跳转到主页
} else {
this.$message.error(resp.data.msg);
}
})
.catch(error => {
console.error(error);
this.$message.error('登录失败');
});
} else {
return false;
}
});
}
}
}
```
在收到后端接口的响应后,根据返回结果进行跳转或弹出错误提示。