用springboot+vue+mybatis写一个前后端登录注册
时间: 2023-06-11 17:08:52 浏览: 118
好的,下面我为您介绍如何使用Spring Boot、Vue和MyBatis实现前后端登录注册的功能。
### 环境搭建
首先,您需要在本地安装以下环境:
- JDK 1.8+
- Maven
- Node.js
- Vue CLI
- MySQL
### 创建数据库和表
在MySQL中创建一个名为“test”的数据库,然后创建一个名为“user”的表,用于存储用户信息。表结构如下:
```sql
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```
### 创建Spring Boot项目
使用Spring Initializr创建一个新的Spring Boot项目,并添加以下依赖:
```xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.0.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
```
### 配置数据源
在application.properties中添加以下配置:
```properties
spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
```
### 创建实体类和Mapper接口
在src/main/java目录下创建一个名为“com.example.demo”的包,然后创建一个名为“User”的实体类:
```java
public class User {
private Integer id;
private String username;
private String password;
// getter和setter方法省略
}
```
然后在同一包下创建一个名为“UserMapper”的Mapper接口:
```java
@Mapper
public interface UserMapper {
User selectByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
void insert(User user);
}
```
### 创建Controller
在com.example.demo包下创建一个名为“UserController”的Controller,用于处理前端发送的请求:
```java
@RestController
public class UserController {
@Autowired
private UserMapper userMapper;
@PostMapping("/login")
public User login(@RequestBody User user) {
return userMapper.selectByUsernameAndPassword(user.getUsername(), user.getPassword());
}
@PostMapping("/register")
public void register(@RequestBody User user) {
userMapper.insert(user);
}
}
```
### 创建Vue项目
使用Vue CLI创建一个新的Vue项目,然后在src/main/resources/static目录下添加以下文件:
- index.html
- main.js
- App.vue
- Login.vue
- Register.vue
其中,index.html作为Vue应用的入口文件,main.js作为Vue应用的入口脚本,App.vue为根组件,Login.vue和Register.vue分别为登录和注册页面的组件。
### 编写前端代码
在Login.vue中添加以下代码,用于发送登录请求:
```vue
<template>
<div>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button @click="login">登录</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(response => response.json())
.then(user => console.log(user))
}
}
}
</script>
```
在Register.vue中添加以下代码,用于发送注册请求:
```vue
<template>
<div>
<input type="text" v-model="username" placeholder="用户名">
<input type="password" v-model="password" placeholder="密码">
<button @click="register">注册</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
register() {
fetch('/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
}
}
}
</script>
```
### 启动项目
使用Maven将Spring Boot项目打包成jar包,然后在命令行中执行以下命令启动项目:
```
java -jar demo.jar
```
然后进入Vue项目所在的目录,执行以下命令启动前端服务器:
```
npm run serve
```
最后,在浏览器中访问http://localhost:8080,即可看到登录和注册页面。