飞道的博客

SpringBoot+MyBatis+thymeleaf 增删改查实例（超详细）

2020-12-31 19:43 443人阅读  评论(0)
导语：

刚学springboot几天，做了个小例子，感觉springboot很好用。相比ssm，springboot除去了很多的繁杂的配置，使用起来非常方便。而且springboot内置了tomcat、jetty这两个web服务器，也不需要你再去配置web服务器，方便刚学springboot或者想学springboot的朋友，下面就带你一步一步做成一个小例子

项目开发环境

开发工具：IDEA 2019.2
框架：springboot、mybatis、bootstrap
模板引擎：thymeleaf
数据库：MySQL
构建工具：Maven
可视化工具：Navicat for MySQL

项目搭建

项目的创建这里就不详细写了，不会的朋友可以看这里
https://blog.csdn.net/Woo_home/article/details/98860135

一、数据库设计

CREATE TABLE `stus` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) DEFAULT NULL,
  `password` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

创建好数据库之后随便插入几条数据就可以了

在resource中创建application.yml配置文件，有两种文件，一种是properties的一种是yml的，这里使用的是yml的，yml的编写格式很重要，就是冒号后面一定要给一个空格，而且不能按tab键缩进，必须手动缩进，下面是对数据库连接的配置

spring:
  #数据库配置
  datasource:
    url: jdbc:mysql://localhost:3306/数据库名?useSSL=false
    driver-class-name: com.mysql.jdbc.Driver
    username: 用户名
    password: 密码
    initial-size: 10
    max-active: 20
    max-idle: 8
    min-idle: 8

二、导入项目所需的依赖

pom.xml依赖

注意
  • 在pom.xml文件这里有几点需要注意的，就是导入springboot和mybatis的整合包的时候不需要再导入mybatis包，会冲突
  • 添加junit测试包的时候不用添加scope，不然无法在controller中使用测试
<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.java.springboot</groupId>
  <artifactId>springboot-demo</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <!-- Spingboot相关jar包版本 -->
  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.5.RELEASE</version>
  </parent>

  <dependencies>
	
	<!-- Springboot核心jar包 -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter</artifactId>
    </dependency>
    
    <!-- web开发包：包含Tomcat和Springmvc -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- thymeleaf -->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

	<!--mysql驱动包-->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
    </dependency>

	<!--springboot与JDBC整合包-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-jdbc</artifactId>
    </dependency>

	<!--springboot与mybatis的整合包-->
    <dependency>
      <groupId>org.mybatis.spring.boot</groupId>
      <artifactId>mybatis-spring-boot-starter</artifactId>
      <version>1.3.0</version>
    </dependency>

	<!--junit测试包-->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId> 
    </dependency>

  </dependencies>
</project>

三、项目目录结构

  • com.java.springboot
    • controller（包）
      • UserController.java
    • bean（包）
      • User.java
    • mapper（包）
      • UserMapper.java
    • service（包）
      • UserService.java
    • App.java

四、前端代码实现

个人不是很会前端哈，如果写的丑希望大佬们不轻点喷，多给建议

在resource目录下新建两=个文件夹，分别是templates、static
templates用于存放html页面
static用于存放静态资源文件，如（js、img、css）

在application.yml配置对应的信息，接着数据库后面添加就行

  #静态资源配置
  resources:
    static-locations: classpath:static/

 #thymeleaf模板引擎配置
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    content-type: text/html
    cache: false

在templates文件夹中新建一个html页面，命名为userList.html，如果需要使用样式框架的话加在static里面的文件夹就可以了

注意
  • 在html中导入bootstrap样式的时候路径要注意，就是如果你在application.yml配置了访问的是static目录下的资源的时候，在html导入的静态资源是不需要在前面加static了
  • 比如这里的bootstrap.css样式是放在static/css目录下的，在html中就直接写css/bootstrap.css就可以了，如果在前面加了static就无法访问样式了，这里踩了很多坑，要注意
  • 使用thymeleaf模板引擎的时候一定添加 xmlns:th="http://www.thymeleaf.org"在html标签中
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>

<style>
    a{
    
        color:#fff;
    }
</style>

<body>
    <button class="btn btn-primary form-control" style="height:50px"><a th:href="@{
    '/insertPage'}">添加用户</a></button>
    <table class="table table-striped table-bordered table-hover text-center">
        <thead>
            <tr style="text-align:center">
                <th>Id</th>
                <th>Username</th>
                <th>Password</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
           <tr th:each="users:${users}">
               <td th:text="${users.id}"></td>
               <td th:text="${users.username}"></td>
               <td th:text="${users.password}"></td>
               <td>
                   <a class="btn btn-primary" th:href="@{
    '/updatePage/'+${users.id}}">更改</a>
                   <a class="btn btn-danger" th:href="@{
    '/delete/'+${users.id}}">删除</a>
               </td>
           </tr>
        </tbody>
    </table>
</body>
</html>

页面效果预览

在templates文件中新建 insertPage.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>

<body>

    <div style="width:800px;height:100%;margin-left:270px;">
        <form action="/insert" method="post">
            用户名：<input class="form-control" type="text" th:value="${username}" name="username"><br>
            密 码：<input class="form-control" type="text" th:value="${password}" name="password"><br>
            <button class="btn btn-primary btn-lg btn-block">保存</button>
        </form>
    </div>

</body>
</html>

页面效果预览

在templates文件中新建 updatePage.html 文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改用户</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>

    <div style="width:800px;height:100%;margin-left:270px;">
        <form action="/update" method="post">
            ID：<input class="form-control" name="id" type="text" th:value="${user.id}" readonly="readonly"><br>
            用户名：<input class="form-control" type="text" th:value="${user.username}" name="username"><br>
            密 码：<input class="form-control" type="text" th:value="${user.password}" name="password"><br>
            <button class="btn btn-primary btn-lg btn-block" type="submit">提交</button>
        </form>
    </div>

</body>
</html>

页面效果预览

五、后端代码实现

有了前端代码之后我们就可以实现前端页面的功能了，这里主要是实现用户的增删改查，而且这里没有使用到ajax交互，纯后端

在com.java.springboot.bean包中新建一个类，命名为User.java（实体类）

package com.java.springboot.bean;

/**
 * @author Woo_home
 * @create by 2019/8/12
 */
public class User {
   

    private int id;

    private String username;

    private String password;

    //此处省略setter、getter、toString方法，自行添加即可
}

在com.java.springboot.mapper包中新建一个类，编写mapper接口（UserMapper.java）

package com.java.springboot.mapper;

import com.java.springboot.bean.User;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * @author Woo_home
 * @create by 2019/8/12
 */
@Repository
public interface UserMapper {
   

    /*
     * 根据id查询用户
     */
    User select(int id);

    /*
     * 查询所有用户
     */
    List<User> userList();

    /*
     * 增加保存用户
     */
    void save(User user);

    /*
     * 根据id删除用户
     */
    int delete(Integer id);

    /*
     * 根据id查找用户
     */
    User findUserById(int id);

    /*
     * 更改用户信息
     */
    int update(User user);

}

写了接口之后在resource下新建一个mapping文件夹，用于存放映射文件新建usermapper.xml文件，写入以下代码即可

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.java.springboot.mapper.UserMapper">
	
	<!--查询所有用户-->
    <select id="userList" resultType="com.java.springboot.bean.User">
        select * from stus
    </select>

	<!--添加用户-->
    <insert id="save" parameterType="string">
        INSERT INTO stus VALUES(null,#{username},#{password})
    </insert>

	<!--删除用户-->
    <delete id="delete" parameterType="int">
        delete from stus where id = #{id}
    </delete>

	<!--根据id查询用户-->
    <select id="findUserById" resultType="com.java.springboot.bean.User">
        select * from stus where id = #{id}
    </select>

	<!--更改用户信息-->
    <update id="update" parameterType="user">
        update stus set username=#{username},password=#{password} where id=#{id}
    </update>

</mapper>

还要在application.yml中添加配置扫描映射文件和实体类

mybatis:
  mapper-locations: classpath:mapping/*.xml
  type-aliases-package: com.java.springboot.bean

在com.java.springboot.service包中新建一个UserService类，接下来就是编写业务层了（UserService.java）
这里为了快速实现一个增删改查，就不新建UserServiceImpl类来实现UserService接口了，直接在新建UserService类来写业务了

package com.java.springboot.server;

import com.java.springboot.bean.User;
import com.java.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

/**
 * @author Woo_home
 * @create by 2019/8/12
 */
@Service
public class UserService {
   

    @Autowired
    private UserMapper userMapper;

    /*
     * 根据id查询用户
     */
    public User select(int id){
   
        return userMapper.select(id);
    }

    /*
     * 查询所有用户
     */
    public List<User> userList(){
   
        return userMapper.userList();
    }

    /*
     * 增加保存用户
     */
    public void save(User user){
   
        userMapper.save(user);
    }

    /*
     * 根据id删除用户
     */
    public int delete(Integer id){
   
        return userMapper.delete(id);
    }

    /*
     * 根据id查找用户
     */
    public User findUserById(int id){
   
        return userMapper.findUserById(id);
    }

    /*
     * 更改用户信息
     */
    public int update(User user){
   
        return userMapper.update(user);
    }

}

编写完业务之后就是编写控制器了
在com.java.springboot.controller包中新建一个UserController.java

package com.java.springboot.controller;

import com.java.springboot.bean.User;
import com.java.springboot.server.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * @author Woo_home
 * @create by 2019/8/12
 */
@Controller
public class UserController {
   

    @Autowired
    private UserService userService;

    @RequestMapping("/insertPage")
    public String index(){
   
        return "insertPage";
    }

    @RequestMapping("select/{id}")
    @ResponseBody
    public String save(@PathVariable int id){
   
        return userService.select(id).toString();
    }

    @RequestMapping("/userList")
    public String userList(Model model){
   
        List<User> users = userService.userList();
        model.addAttribute("users",users);
        return "userList";
    }

    @RequestMapping("/insert")
    public String save(User user){
   
        userService.save(user);
        return "redirect:/userList";
    }

    @GetMapping("/delete/{id}")
    public String delete(@PathVariable Integer id){
   
        userService.delete(id);
        return "redirect:/userList";
    }

    @GetMapping("/updatePage/{id}")
    public String updatePage(Model model,@PathVariable int id){
   
        User user = userService.findUserById(id);
        model.addAttribute("user",user);
        return "updatePage";
    }

    @PostMapping("/update")
    public String updateUser(User user){
   
        userService.update(user);
        System.out.println("修改的用户为 ： " + user.getUserName());
        return "redirect:/userList";
    }
}

App.java 项目启动类
需要在启动类中添加mapper接口的扫描
@MapperScan(basePackages = “com.java.springboot.mapper”)

package com.java.springboot;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan(basePackages = "com.java.springboot.mapper")
public class App {
   
    public static void main(String[] args) {
   
        SpringApplication.run(App.class, args);
    }
}

application.yml全部配置，再强调一次，一定要注意yml的编写格式，不然会出各种错

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/数据库名?useSSL=false
    driver-class-name: com.mysql.jdbc.Driver
    username: 用户名
    password: 密码
    initial-size: 10
    max-active: 20
    max-idle: 8
    min-idle: 8

  resources:
    static-locations: classpath:static/

  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    content-type: text/html
    cache: false

mybatis:
  mapper-locations: classpath:mapping/*.xml
  type-aliases-package: com.java.springboot.bean

logging:
  level:
    com:
      example:
        mapper : debug

到这里就可以运行我们的项目了，可以看到spring的字样

这个是我们项目的进程

这些是可以访问的路径

我们依次在浏览器输入这些路径看看是否正确
这是添加用户页面

这是删除页面，即用户列表页面，因为没涉及到 ajax 和 jQuery 那些

这是更改用户信息页面

代码下载地址


转载：https://blog.csdn.net/Woo_home/article/details/99564476
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场