SpringBoot+MyBatis Plus+PageHelper+vue+mysql 实现用户信息增删改查功能

静态资源展示

(1)静态资源下载

(2)下载后文件放到resources/static 目录下

(3) main函数启动项目访问对应文件,http://127.0.0.1:8080/user-list.html


数据库添加表和数据

sql 复制代码
SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for t_user
-- ----------------------------
DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `sex` int(1) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `status` int(1) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4;

-- ----------------------------
-- Records of t_user
-- ----------------------------
INSERT INTO `t_user` VALUES ('1', '赵雨晴', '1', '13812345678', 'zhaoyuqing@example.com', '0');
INSERT INTO `t_user` VALUES ('2', '林志远', '0', '13987654321', 'linzhiyuan@example.com', '1');
INSERT INTO `t_user` VALUES ('3', '周思敏', '1', '13567891234', 'zhousimin@example.com', '2');
INSERT INTO `t_user` VALUES ('4', '郑建国', '0', '13345678901', 'zhengjianguo@example.com', '0');

项目结构

bash 复制代码
src/main/java/com/example/demo/
├── controller
│   └── UserController.java
├── entity
│   └── User.java
├── mapper
│   └── UserMapper.java
└── service
    ├── IUserService.java
    └── impl
        └── UserServiceImpl.java

添加依赖

在 pom.xml 中添加必要的依赖:

yaml 复制代码
		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.10</version>
        </dependency>

配置数据库

yaml 复制代码
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/springboot04?characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: root
    password: root

# 开启SQL日志
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

创建实体类

实体类和数据库t_user字段做映射。

java 复制代码
@TableName("t_user")
@Data
public class User {
    @TableId(value = "id",type = IdType.AUTO)
    private Long id;
    private String name;
    private Integer sex;
    private String phone;
    private String email;
    private Integer status;
}

创建Mapper接口

java 复制代码
@Mapper
public interface UserMapper extends BaseMapper<User> {
 // 继承BaseMapper后,已经包含了基本的CRUD方法
}

创建Service层

java 复制代码
public interface IUserService extends IService<User> {
	// 可以在这里定义额外的业务方法
}

Service实现类

java 复制代码
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User>  implements IUserService{
	// 继承了ServiceImpl后,已经实现了IService接口的所有方法
}

创建Controller

根据静态页面中JS的url和参数编写controller方法

java 复制代码
@RestController
public class UserController {

    @Autowired
    private IUserService userService;

    @GetMapping("/user/list")
    public PageInfo<User> list(Integer pageNum) {
        PageHelper.startPage(pageNum, 5);
        List<User> list = userService.list();
        PageInfo<User> userPageInfo = new PageInfo<>(list);
        return userPageInfo;
    }

    @GetMapping("/user/search")
    public PageInfo<User> search(String text) {
        PageHelper.startPage(1,99);
        QueryWrapper<User> query = new QueryWrapper<User>()
                .like("name", text)
                .or()
                .like("id", text);
        List<User> list = userService.list(query);
        PageInfo<User> userPageInfo = new PageInfo<>(list);
        return userPageInfo;
    }

    @PostMapping("/user/add")
    public String add(User user){
        userService.save(user);
        return "添加用户成功:"+user;
    }

    @PostMapping("/user/edit")
    public String edit(User user){
        userService.saveOrUpdate(user);
        return "更新用户成功:"+user;
    }

    @GetMapping("/getUserById")
    public User getUserById(String id){
        return userService.getById(id);
    }

    @PostMapping("/user/delete")
    public void delete(String id){
        userService.removeById(id);
    }

}

运行效果

列表

添加用户


编辑用户


数据库t_user表

相关推荐
上官浩仁40 分钟前
springboot ioc 控制反转入门与实战
java·spring boot·spring
叫我阿柒啊1 小时前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
中国胖子风清扬2 小时前
Rust 序列化技术全解析:从基础到实战
开发语言·c++·spring boot·vscode·后端·中间件·rust
JosieBook6 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
刘一说6 小时前
Spring Boot+Nacos+MySQL微服务问题排查指南
spring boot·mysql·微服务
叫我阿柒啊10 小时前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
计算机毕设定制辅导-无忧学长10 小时前
MQTT 与 Java 框架集成:Spring Boot 实战(一)
java·网络·spring boot
叫我阿柒啊10 小时前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
泉城老铁11 小时前
Spring Boot中实现多线程分片下载
java·spring boot·后端
泉城老铁11 小时前
Spring Boot中实现多文件打包下载
spring boot·后端·架构