SpringBoot 前端交互式实现增删改查

github下载源码，推荐使用GitZip
网页前端交互式进行增删改查，进入页面先添加数据信息

一、准备工作

1、创建项目

2、目录列表与内容

目录列表：

pom.xml依赖：
web mysql jpa mybatis thymeleaf等等

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.zohar</groupId>
    <artifactId>springboot</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.0.0</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

3、mysql数据库连接

application.properties

spring.datasource.url=jdbc:mysql://127.0.0.1/springboot?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=true
spring.datasource.username=
spring.datasource.password=

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
# 自动创建、更新、验证数据库表结构
spring.jpa.properties.hibernate.hbm2ddl.auto=update

spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect
# 控制台显示SQL语句
spring.jpa.show-sql= true

其中springboot为数据库名（不自动创建，需手动），账号密码自己填

二、创建实体与数据表（entry）

User.java

@Entity
@Data
public class User{
    @Id
    @Column(nullable = false,unique = true)
    private long id;

    @Column(nullable = false,unique = false)
    @NotEmpty(message = "姓名不能为空")
    private String name;

    @Column(unique = false)
    private int age;
}

属性	解释
@Entity	声明该类为实体
@Data	用于简化类，提供类的get、set、equals、hashCode、canEqual、toString方法
@Id	设置主键
@Column	建立数据表属性
nullable=false	字段在保存时必需有值
unique=true	字段的值在这张表里不能重复

三、实现数据持久层（repository）

UserRepository.java

public interface UserRepository extends JpaRepository<User,Long>, JpaSpecificationExecutor<User> {
    User findById(long id);
    
    @Query(value = "select * from user where name LIKE CONCAT('%',:name,'%')", nativeQuery = true)
    List<User> findByName(@Param("name")String name);

@Query处加入模糊查询功能

四、实现服务接口与接口的实现类（service）

1、创建服务接口

UserService.java

public interface UserService {
    public List<User> getUserList();
    public User findUserById(long id);
    
	public User findUserByName(String name);

2、接口的实现类(Impl)

UserServiceImpl.java

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserRepository userRepository;
    private String name;

    @Override
    public List<User> getUserList(){
        return userRepository.findAll();
    }

    @Override
    public User findUserById(long id){
        return userRepository.findById(id);
    }
	
	@Override
    public User findUserByName(String Name){
        return (User) userRepository.findByName(name);
    }

属性	解释
@Autowired	它可以对类成员变量、方法及构造函数进行标注，让 spring 完成 bean 自动装配的工作

五、设置控制层（controller）

UserController.java
网上都是用@DeleteMapping什么的，但是我用就无限报错，所以改用@PostMapping

1、显示全部并分页

@Autowired //首先装载
    private UserRepository userRepository;
    
@RequestMapping("") // user列表 分页 从0开始分页
    public ModelAndView userlist(@RequestParam(value = "start",defaultValue = "0") Integer start,
                                 @RequestParam(value = "limit",defaultValue = "4") Integer limit){
        start = start < 0 ? 0 : start;
        Sort sort = Sort.by(Sort.Direction.ASC, "id");
        Pageable pageable = PageRequest.of(start, limit, sort);
        Page<User> page = userRepository.findAll(pageable);
        ModelAndView mav = new ModelAndView("user/list");
        mav.addObject("page", page);
        return mav;
    }

2、增

@PostMapping("")
    public String add(User model)  throws Exception{
        userRepository.save(model);
        return "redirect:/user/";
    }

3、删

@PostMapping("/{id}")
    public String del(@PathVariable("id") long id){
        userRepository.deleteById(id);
        return "redirect:";
    }

4、改

@PostMapping("/edit/{id}")
    public String edit(User model, long id){
        model.setId(id);
        userRepository.save(model);
        return "redirect:/user";
    }

5、查

加入模糊查询 findByName，由于还在学习了解，还不懂得如何在同一页面上处理显示，只能新建query页面了…

@PostMapping(value = "/q")
    public ModelAndView getUser(String name){
        List<User> users = userRepository.findByName(name);
        ModelAndView mav = new ModelAndView("user/query");
        mav.addObject("user",users);
        return mav;
    }

前端页面显示

1、通过遍历查询结果循环

2、action表单提交url匹配Controller路径

这里放一小段图，剩余自行查看html页面代码
（tips：url=@RequestMapping(value = “a”)+@PostMapping(“b”)，form表单提交URL=url即可使用该操作）

源码链接