SpringBoot+MyBatis+thymeleaf粗糙小项目--新手小白学习

SpringBoot+MyBatis+thymeleaf 增删改查实例

结尾有源码,希望看完有所受益的给个免费的攒!

1.项目搭建

项目开发环境

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

创建项目

项目位置也要选择放到自己想放的位置,语言选择Java,其他的选好无误后点击下一步

创建好项目后会下载依赖

先进入设置,配置好Maven的配置:

​ maven的下载与安装教程请参考:https://blog.csdn.net/u012660464/article/details/114113349

pom.xml文件

导入项目所需要的依赖

<?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>

    <!-- Spingboot相关jar包版本 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.15</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springboot-mybatis-thymeleaf-test</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springboot-mybatis-thymeleaf-test</name>
    <description>springboot-mybatis-thymeleaf-test</description>
    <properties>
        <java.version>11</java.version>
    </properties>
    <dependencies>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!--MyBatis依赖-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>

        <!-- Springboot核心jar包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>

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

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

        <!-- 引入mysql的jdbc驱动的依赖 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.22</version>
        </dependency>

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

        <!--springboot单元测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <image>
                        <builder>paketobuildpacks/builder-jammy-base:latest</builder>
                    </image>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

Maven的版本可以换也可以不换,换完点击Maven刷新即可:

application.yml文件

在resource中创建application.yml配置文件，有两种文件，一种是properties的一种是yml的，这里使用的是yml的，yml的编写格式很重要，就是冒号后面一定要给一个空格，而且不能按tab键缩进，必须手动缩进，所以先将项目中properties文件改为yml,或者创建新的yml文件和properties文件平级,然后再删掉properties文件（要保证yml文件和之前删掉properties文件在同一位置)

在yml文件中写入本地的数据库配置即可,下面是对数据库连接的配置

server:
  port: 8080
  tomcat:
    uri-encoding: UTF-8

spring:
  #数据库连接信息
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/demo?characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: root
    password: 666666

  resources:
    static-locations: classpath:static/

  #thymeleaf
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    mode: HTML5

#Mybatis配置
mybatis:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

#spring事务管理日志
logging:
  level:
    org.springframework.jdbc.support.JdbcTransactionManager: debug

2.数据库设计

创建user表

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `stus`  (
  `id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `username` varchar(50)
  `password` varchar(50) 
)

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `stus` VALUES (1, 'admin', 'password');
INSERT INTO `stus` VALUES (2, '张三', 'zhangsan');
INSERT INTO `stus` VALUES (3, 'Lisa', 'dfasga');
INSERT INTO `stus` VALUES (4, 'admin123', 'dnfsaf');
INSERT INTO `stus` VALUES (8, 'woogithub', 'haha');
INSERT INTO `stus` VALUES (37, 'Woo_home', 'jfdhsajkfhaj');
INSERT INTO `stus` VALUES (40, 'WooGitee', '1234567');
INSERT INTO `stus` VALUES (43, '030719201402', 'ewqewq');
INSERT INTO `stus` VALUES (44, 'ewqeq', 'ewqeqwewq');
INSERT INTO `stus` VALUES (45, 'ewqeqeqwe', 'qweqweqwe');

用不同工具创建表

(1)用navicat for MySQL创建:

一开始是准备些stus表的,后来改成了user表,代码和文章写的是对的,截图里懒得换了hhh,下面idea里一样没换

随便选一个数据库然后创建新的查询,把代码复制进去然后执行就可以

刷新一下就可以看到user表了(就是图中的stus)

(2)用idea创建:

先连接自己的本地数据库,这里用的是MySQL

填写用户和密码,然后写要创建表的数据库,填完测试一下连接,然后点确定即可:

会自动创建一个console查询控制台

也可以自己创建

然后导入代码,点击运行,运行完成之后就可在右侧表中看到user表

注意idea里面插入数据后要点击提交的图标才能修改数据库中数据

3.项目目录结构

4.前端代码实现

在resource目录下新建两个文件夹，分别是templates、static(如果没有这两个文件夹的话就创建,我这里已经自动创建了)

templates用于存放html页面

static用于存放静态资源文件

不是很会前端,所以这里我只写了templates里的简单的html,很丑陋,不喜勿喷,哈哈哈

userList.html

在templates文件夹中新建一个html页面，命名为userList.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
</head>

<body>
<button class="btn btn-primary form-control" style="height:50px"><a th:href="'/user/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="@{/user/update/{id}(id=${users.id})}">更改</a>
			<a class="btn btn-danger" th:href="@{/user/delete/{id}(id=${users.id})}">删除</a>
		</td>
	</tr>
	</tbody>
</table>
</body>

<style>
    a{
        color:#000000;
    }
    th{
	    text-align: center;
    }
    td{
        width: 100px;
        border: solid blue 1px;
    }
</style>
</html>

insertPage.html

在templates文件中新建 insertPage.html

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

<body>

<div style="width:800px;height:100%;margin-left:270px;">
	<form action="/user/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" type="submit">保存</button>
	</form>
</div>

</body>
</html>

updatePage.html

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

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

<div style="width:800px;height:100%;margin-left:270px;">
	<form action="/user/update" method="get">
		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>

5.后端代码实现

com.example.controller:

UserController.java

在com.example.controller包中新建一个类，命名为UserController.java（实体类）

package com.example.controller;

import com.example.entity.User;
import com.example.service.UserService;
import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

/**
 * (User)表控制层
 *
 * @author makejava
 * @since 2023-11-23 16:22:46
 */
@Controller
@RequestMapping("/user")
public class UserController {
    @Resource
    private UserService userService;

    /**
     * 插入员工的页面
     * @return
     */
    @RequestMapping("/insertPage")
    public String index() {
        return "insertPage";
    }

    /**
     * 通过id查询员工
     *
     * @param id 主键
     * @return 单条数据
     */
    @RequestMapping("select/{id}")
    @ResponseBody
    public String save(@PathVariable int id){
        return userService.queryById(id).toString();
    }

    /**
     *查看员工列表的页面
     * @param model
     * @return
     */
    @RequestMapping("/userList")
    public String userList(Model model){
        List<User> users = userService.userList();
        model.addAttribute("users",users);
        return "userList";
    }

    /**
     * 新增数据
     *
     * @param user 实体
     * @return 新增结果
     */
    @PostMapping("/insert")
    public String save(User user){
        userService.insert(user);
        System.out.println("新增了用户：" + user);
        return "redirect:/user/userList";
    }

    /**
     * 根据id删除数据
     *
     * @param id 主键
     * @return 删除是否成功
     */
    @GetMapping("/delete/{id}")
    public String delete(@PathVariable Integer id) {
        userService.deleteById(id);
        return "redirect:/user/userList";
    }

    /**
     * 功能：打开编辑学生界面
     * 备注：使用查询字符串
     *
     * @param id
     * @return
     */
    @GetMapping("/update/{id}")
    public String updatePage(Model model, @PathVariable("id") Integer id) {
        model.addAttribute("user",userService.queryById(id));
        return "updatePage";
    }

    /**
     * 编辑数据
     *
     * @param user 实体
     * @return 编辑结果
     */
    @GetMapping("/update")
    public String updateUser(User user) {
        userService.update(user);
        System.out.println("成功将id为"+user.getId()+"的员工信息修改为:  用户名:" + user.getUsername()+"密码:"+user.getPassword());
        return "redirect:/user/userList";
    }

}

com.example.entity:

User.java

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

package com.example.entity;

import java.io.Serializable;

/**
 * (User)实体类
 *
 * @author makejava
 * @since 2023-11-23 16:21:21
 */
public class User implements Serializable {
    private static final long serialVersionUID = 610315166456570797L;

    private Integer id;

    private String username;

    private String password;


    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

com.example.mapper:

UserMapper.java

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

package com.example.mapper;

import com.example.entity.User;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * (User)表数据库访问层
 *
 * @author makejava
 * @since 2023-11-23 17:16:02
 */
@Mapper
public interface UserMapper {
    /*
     * 根据id查询用户
     */
    User select(int id);

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

    /*
     * 新增用户
     */
    void insert(User user);

    /*
     * 根据id删除用户
     */
    void deleteById(Integer id);

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

}

com.example.service:

impl:

UserServiceImpl.java

在com.example.service.impl包中新建一个UserServiceImpl.java实现类(是下面UserService.java接口的实现类)

package com.example.service.impl;

import com.example.entity.User;
import com.example.mapper.UserMapper;
import com.example.service.UserService;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

/**
 * (User)表服务实现类
 *
 * @author makejava
 * @since 2023-11-23 17:22:40
 */
@Service("userService")
public class UserServiceImpl implements UserService {
    @Resource
    private UserMapper userMapper;

    /**
     * 通过ID查询用户
     *
     * @param id 主键
     * @return 实例对象
     */
    @Override
    public User queryById(Integer id){
        return userMapper.select(id);
    }

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

    /**
     * 新增用户
     *
     * @param user 实例对象
     */
    @Override
    public void insert(User user) {
        userMapper.insert(user);
    }

    /**
     * 修改用户信息
     *
     * @param user 实例对象
     * @return 实例对象
     */
    @Override
    public void update(User user) {
        userMapper.update(user);
    }

    /**
     * 通过id删除数据
     *
     * @param id 主键
     * @return 是否成功
     */
    @Override
    public void deleteById(Integer id) {
        userMapper.deleteById(id);
    }
}

UserService.java

在com.example.service包中新建一个UserService.java接口(上面UserServiceImpl.java实现类的接口)

package com.example.service;

import com.example.entity.User;

import java.util.List;

/**
 * (Stus)表服务接口
 *
 * @author makejava
 * @since 2023-11-23 16:22:48
 */
public interface UserService {

    /**
     * 通过ID查询单条数据
     *
     * @param id 主键
     * @return 实例对象
     */
    User queryById(Integer id);

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

    /**
     * 新增数据
     *
     * @param stus 实例对象
     * @return 实例对象
     */
    User insert(User stus);

    /**
     * 修改数据
     *
     * @param stus 实例对象
     * @return 实例对象
     */
    User update(User stus);

    /**
     * 通过主键删除数据
     *
     * @param id 主键
     * @return 是否成功
     */
    Integer deleteById(Integer id);

}

UserMapper.xml

写了接口之后在resource下新建一个com.example.mapper文件夹(新建文件夹文件名写com/example/mapper避免出现将 符号"." 识别为文件夹名导致成为一个文件夹而不是嵌套的文件夹)，用于存放映射文件新建UserMapper.xml文件，写入以下代码即可

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.mapper.UserMapper">
    <!--根据id查询用户-->
    <select id="select" resultType="com.example.entity.User">
        select
          id, username, password
        from user
        where id = #{id}
    </select>

    <!--查询所有用户-->
    <insert id="inster" parameterType="string">
        INSERT INTO user VALUES(null,#{username},#{password})
    </insert>

    <!--新增用户-->
    <insert id="insert" keyProperty="id" useGeneratedKeys="true">
        insert into user(username, password)
        values (#{username}, #{password})
    </insert>

    <!--查询所有用户-->
    <select id="userList" resultType="com.example.entity.User">
        select * from user
    </select>

    <!--通过id修改用户信息-->
    <update id="update">
        update user
        <set>
            <if test="username != null and username != ''">
                username = #{username},
            </if>
            <if test="password != null and password != ''">
                password = #{password},
            </if>
        </set>
        where id = #{id}
    </update>

    <!--通过id删除用户-->
    <delete id="deleteById" parameterType="integer">
        delete from user where id = #{id}
    </delete>

</mapper>

SpringbootMybatisThymeleafTestApplication.java

项目启动类(创建项目的时候自动生成了)
一般来说需要在启动类中添加mapper接口的扫描,@MapperScan(basePackages = “com.java.springboot.mapper”)

但我们前面在resource下新建一个com.example.mapper文件夹和Mapper接口的包同名可以不用加扫描语句

package com.example;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringbootMybatisThymeleafTestApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootMybatisThymeleafTestApplication.class, args);
    }

}

6.结果测试

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

这个是我们项目的进程和端口号等

我们依次在浏览器输入这些路径看看是否正确

这是全部用户列表:

点击添加用户,进入添加用户页面:

保存后自动跳回用户列表,项目做的比较粗糙,勿怪,没有设置用户名不能重复的原则hhh,主要是没想好怎么在thymeleaf前端进行提示

点击更改进入更改页面:

提交后也返回用户列表页面:

点击id:51的一行的删除:

测试通过!!! 完结撒花hhh

完整代码获取:
https://gitee.com/zyh1552951165/springboot-mybatis-thymeleaf-test