好的，下面是
一个简单的示例：
### 后端部分
#### 1. 创建Spring Boot项目
使用Spring Initializr创建
一个基于Maven的Spring Boot项目，勾选Web、
MyBatis、MySQL、Lombok等依赖。
#### 2. 配置数据库连接
在`application.
properties`
文件中配置数据库连接信息：
```
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/mydb?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
```
#### 3. 创建数据库表
创建
一个名为`user`的表，包含`id`、`username`、`password`三个字段。
#### 4. 创建实体类和Mapper
创建
一个名为`User`的实体类，对应数据库
中的`user`表。同时，创建
一个名为`UserMapper`的Mapper接口，用于操作数据库
中的`user`表。
#### 5. 创建Controller
创建
一个名为`UserController`的Controller类，用于处理用户相关的请求。
```
java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@PostMapping("/register")
public Result register(@RequestBody User user) {
userService.register(user);
return Result.success();
}
@PostMapping("/login")
public Result login(@RequestBody User user) {
User result = userService.login(user.getUsername(), user.getPassword());
if (result != null) {
return Result.success(result);
} else {
return Result.error("用户名或密码
错误");
}
}
}
```
#### 6. 创建Service
创建
一个名为`UserService`的Service接口，包含用户注册和登录的方法。
```
java
public interface UserService {
void register(User user);
User login(String username, String password);
}
```
创建
一个名为`UserServiceImpl`的Service实现类，实现`UserService`接口
中的方法。
```
java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public void register(User user) {
userMapper.insert(user);
}
@Override
public User login(String username, String password) {
return userMapper.selectByUsernameAndPassword(username, password);
}
}
```
#### 7. 创建返回结果类
创建
一个名为`Result`的类，用于封装接口的返回结果。
```
java
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result {
private int code;
private String msg;
private Object data;
public static Result success() {
return new Result(200, "success", null);
}
public static Result success(Object data) {
return new Result(200, "success", data);
}
public static Result error(String msg) {
return new Result(500, msg, null);
}
}
```
### 前端部分
#### 1. 创建Vue项目
使用Vue CLI创建
一个基于Vue.js的项目。
#### 2. 安装Axios
使用npm安装Axios。
```
npm install axios --save
```
#### 3. 创建登录和注册组件
创建
一个名为`Login`的组件，包含用户名和密码输入框、登录按钮和注册链接。
```html
<template>
<div class="login">
<h2>登录</h2>
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" class="form-control" v-model="username">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" class="form-control" v-model="password">
</div>
<button type="button" class="btn btn-primary" @click="login">登录</button>
</form>
<div class="register-link">
<a href="
javascript:void(0)" @click="goRegister">没有账号？去注册</a>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
axios.post('/user/login', {
username: this.username,
password: this.password
}).then(res => {
if (res.data.code === 200) {
alert('登录成功')
} else {
alert(res.data.msg)
}
}).catch(err => {
console.error(err)
})
},
goRegister () {
this.$router.push('/register')
}
}
}
</script>
```
创建
一个名为`Register`的组件，包含用户名、密码和确认密码输入框、注册按钮和登录链接。
```html
<template>
<div class="register">
<h2>注册</h2>
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" class="form-control" v-model="username">
</div>
<div class="form-group">
<label>密码：</label>
<input type="password" class="form-control" v-model="password">
</div>
<div class="form-group">
<label>确认密码：</label>
<input type="password" class="form-control" v-model="confirmPassword">
</div>
<button type="button" class="btn btn-primary" @click="register">注册</button>
</form>
<div class="login-link">
<a href="
javascript:void(0)" @click="goLogin">已有账号？去登录</a>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
username: '',
password: '',
confirmPassword: ''
}
},
methods: {
register () {
if (this.password !== this.confirmPassword) {
alert('两次输入密码不一致')
return
}
axios.post('/user/register', {
username: this.username,
password: this.password
}).then(res => {
if (res.data.code === 200) {
alert('注册成功，请登录')
this.$router.push('/login')
} else {
alert(res.data.msg)
}
}).catch(err => {
console.error(err)
})
},
goLogin () {
this.$router.push('/login')
}
}
}
</script>
```
#### 4. 配置路由
在`router/index.js`
文件中配置路由。
```
javascript
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Register from '@/components/Register'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
]
})
```
#### 5.
运行项目
启动Spring Boot项目和Vue项目后，访问`http://localhost:8080`即可看到登录页面。
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
