请给出基于spring boot、vue、mysql、my-batisplus的新闻管理系统的用户管理功能的具体实现方式,给出所使用的技术、方法和参数传递过程
时间: 2024-03-11 14:46:37 浏览: 22
基于spring boot、vue、mysql、mybatis-plus的新闻管理系统的用户管理功能可以采用如下实现方式:
1. 技术
- 后端使用Spring Boot框架,集成MyBatis-Plus实现ORM映射。
- 前端使用Vue框架,使用Axios库进行数据交互。
- 数据库使用MySQL。
2. 方法
- 后端通过MyBatis-Plus提供的Mapper接口实现对数据库的增删改查操作。
- 前端通过Axios库发送HTTP请求,获取后端返回的JSON格式数据,实现前后端数据交互。
- 后端通过Spring Security实现用户认证和授权功能。
3. 参数传递过程
- 后端通过@RequestParam注解获取前端传递的参数。
- 前端通过Axios库发送HTTP请求,将参数以JSON格式传递给后端。
- 后端通过@ResponseBody注解将处理结果以JSON格式返回给前端。
具体实现步骤如下:
1. 创建数据库表
```sql
CREATE TABLE `user` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
`username` varchar(64) NOT NULL COMMENT '用户名',
`password` varchar(64) NOT NULL COMMENT '密码',
`email` varchar(64) NOT NULL COMMENT '邮箱',
`create_time` datetime NOT NULL COMMENT '创建时间',
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';
```
2. 创建MyBatis-Plus实体类、Mapper接口和Service接口
```java
// User实体类
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class User implements Serializable {
private static final long serialVersionUID = -3262273942794978915L;
private Integer id;
private String username;
private String password;
private String email;
private LocalDateTime createTime;
}
// UserMapper接口
public interface UserMapper extends BaseMapper<User> {
}
// UserService接口
public interface UserService extends IService<User> {
/**
* 根据用户名查询用户
*
* @param username 用户名
* @return 用户信息
*/
User findByUsername(String username);
}
```
3. 实现Service接口
```java
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
@Override
public User findByUsername(String username) {
QueryWrapper<User> wrapper = new QueryWrapper<>();
wrapper.eq("username", username);
return getOne(wrapper);
}
}
```
4. 实现Controller接口
```java
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
/**
* 根据用户名查询用户
*
* @param username 用户名
* @return 用户信息
*/
@GetMapping("/findByUsername")
public User findByUsername(@RequestParam String username) {
return userService.findByUsername(username);
}
/**
* 创建用户
*
* @param user 用户信息
* @return 操作结果
*/
@PostMapping("/create")
public boolean create(@RequestBody User user) {
return userService.save(user);
}
/**
* 更新用户
*
* @param user 用户信息
* @return 操作结果
*/
@PutMapping("/update")
public boolean update(@RequestBody User user) {
return userService.updateById(user);
}
/**
* 删除用户
*
* @param id 用户ID
* @return 操作结果
*/
@DeleteMapping("/delete")
public boolean delete(@RequestParam Integer id) {
return userService.removeById(id);
}
}
```
5. 前端实现
```vue
<template>
<div>
<el-form ref="form" :model="user" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="user.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="user.password"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="user.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="create">创建</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
user: {
username: '',
password: '',
email: ''
}
}
},
methods: {
create() {
axios.post('/api/user/create', this.user).then(response => {
if (response.data) {
this.$message.success('创建成功');
} else {
this.$message.error('创建失败');
}
}).catch(error => {
console.log(error);
});
}
}
}
</script>
```
以上实现方式中,使用了@RequestParam和@RequestBody注解传递参数。其中,@RequestParam注解用于获取URL中的参数,@RequestBody注解用于获取请求体中的参数。在前端实现中,使用了Axios库发送HTTP请求,将参数以JSON格式传递给后端。