SpringBoot+Mybatis+thymeleaf实现小项目

~空梦

已于 2022-11-21 20:13:28 修改

阅读量1.7k

点赞数 5

文章标签： spring boot mybatis java

于 2022-11-21 20:03:16 首次发布

本文链接：https://blog.csdn.net/shshhshshh/article/details/127969977

版权

导语

刚学习springboot几天，本人觉得springboot非常好用，就写了个小例子,给不会springboot的可以做一下参考。

开发环境

开发工具：Java2021.1.1、jdk1.8、SpringBoot2.7.5版本项目

数据库：MySQL

所用技术

框架：springboot、mybatis、bootstrap

模板引擎：Thymeleaf

构建工具：Maven

项目搭建

一、数据库设计

整个项目总共涉及到了2张表，如下。

球队信息表。

球员信息表

二、导入依赖以及创建配置文件

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

#配置数据源
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/mybatis?serverTimezone=GMT-8
    username: root
    password: root

mybatis:
  #别名
  type-aliases-package: com.ketai.pojo
  #下划线自动映射驼峰
  configuration:
    map-underscore-to-camel-case: true
  #指定sql映射文件的位置
  mapper-locations: classpath:com/ketai/*.xml

pro.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 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.7.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ketai</groupId>
    <artifactId>NBAPlayers</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>NBAPlayers</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <dependencies>
        <!--web启动器  spring-boot-starter-xx springboot官方的starter-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mybatis启动器 xxx-spring-boot-starter 第三方的starter-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!--lombok-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

        <!--测试-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- thymeleaf -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.7.5</version>
        </dependency>
        <!--分页插件-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.3.2</version>
        </dependency>
    </dependencies>

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

</project>

三、项目结构

四、前端代码实现

注意
使用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>
</head>
<body>
<form th:action="@{/a}">
    <table style="margin: auto">
        <div style="text-align: center">
            <h1>美国职业篮球联盟(NBA)球员信息</h1>
            球员姓名：<input type="text" th:value="${pname}" name="pname">
            所属球队：
            <select th:name="cid">
                <option value="">——请选择——</option>
                <option th:each="c :${clubsList}" th:text="${c.cname}" th:value="${c.cid}"></option>
            </select>
            <input type="submit" value="查询">
            <input type="button" value="添加新球员信息" onclick="add()">
        </div>
        <tr>
            <th>球队编号</th>
            <th>球员名称</th>
            <th>出生时间(yyyy-MM-dd)</th>
            <th>球员身高(单位:cm)</th>
            <th>球员体重(单位:kg)</th>
            <th>球员位置</th>
            <th>所属球队</th>
            <th>相关操作</th>
        </tr>
        <tr th:each="p :${page.list}">
            <td th:text="${p.pid}"></td>
            <td th:text="${p.pname}"></td>
            <td th:text="${#dates.format(p.birthday,'yyyy-MM-dd')}"></td>
            <td th:text="${p.height}"></td>
            <td th:text="${p.weight}"></td>
            <td th:text="${p.position}"></td>
            <td th:text="${p.clubs.cname}"></td>
            <td><a th:href="@{/delete(pid=${p.pid})}">删除</a></td>
        </tr>
    </table>
</form>
<div style="text-align: center">
    <a th:href="@{/a/(pageNum=1,cid=${cid},pname=${pname})}">首页</a>
    <a th:href="@{/a/(pageNum=${page.prePage},cid=${cid},pname=${pname})}">上一页</a>
    <a th:href="@{/a/(pageNum=${page.nextPage},cid=${cid},pname=${pname})}">下一页</a>
    <a th:href="@{/a/(pageNum=${page.pages},cid=${cid},pname=${pname})}">末页</a>
    第<span th:text="${page.pageNum}"></span>页，共<span th:text="${page.pages}"></span>页
</div>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
    //跳转添加页面
    function add(){
        $.ajax({
            type:'GET',
            url:"/toAdd?pageNum=1",
            success: function(data){
                location.href="/toAdd?pageNum=1";
            }
        })
    }
    //tr添加颜色
    $('tr:odd').css("background-color","yellow")
</script>
</body>
</html>

页面展示

添加页面代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form th:action="@{/toAdd/list}">
  <h1>添加球员信息</h1>
  球员姓名：<input type="text" name="pname" required="required"><br>
  出生时间：<input type="date" name="birthday" required="required">(yyyy-MM-dd)<br>
  球员身高：<input type="text" name="height">(单位：cm)<br>
  球员体重：<input type="text" name="weight">(单位：kg) <br>
  球员位置：<input type="radio" name="position" value="控球后卫" checked>控球后卫
  <input type="radio" name="position" value="得分后卫">得分后卫
  <input type="radio" name="position" value="小前锋">小前锋
  <input type="radio" name="position" value="大前锋">大前锋
  <input type="radio" name="position" value="中锋">中锋<br>
  所属球队：
  <select name="cid">
    <option value="0">—请选择—</option>
    <option th:each="s:${clubsList}" th:value="${s.cid}" th:text="${s.cname}"></option>
  </select><br>
  相关操作：<input type="submit" value="新增">
        <input type="button" value="返回" onclick="fh()">
</form>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  //返回
  function fh(){
    $.ajax({
      type:'GET',
      url:"/a",
      success: function(data){
        location.href="/a";
      }
    })
  }
</script>
</body>
</html>

页面实现效果

五、后台代码展示

这里主要是实现用户的增删查，跳转和返回用了ajax请求，纯后端，在com.ketai.pojo包中新建两个类，命名为Players.java（实体类）

package com.ketai.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;

import java.util.Date;

@NoArgsConstructor
@Data
@AllArgsConstructor
public class Players {
    /**
     * 球员编号
     */
    private Integer pid;
    /**
     * 球员姓名
     */
    private String pname;
    /**
     * 出生日期
     */
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date birthday;
    /**
     * 球员身高
     */
    private Integer height;
    /**
     * 球员体重
     */
    private Integer weight;
    /**
     * 球员位置
     */
    private String position;
    /**
     * 所属球队编号
     */
    private Integer cid;
    /**
     * 球队名称和城市
     */
    private Clubs clubs;
}

Clubs.java (实体类)

package com.ketai.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@NoArgsConstructor
@Data
@AllArgsConstructor
public class Clubs {
    /**
     * 球队编号
     */
    private Integer cid;
    /**
     * 球队名称
     */
    private String cname;
    /**
     * 球队城市
     */
    private String city;
}

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

package com.ketai.mapper;

import com.ketai.pojo.Players;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface PlayersMapper {

    /**
     * 查询所有用户
     * @param cid
     * @param pname
     * @return
     */
    List<Players> getAllPlayersPage(@Param("cid")Integer cid,@Param("pname")String pname);

    /**
     * 根据球员编号删除
     */
    int deletePlayers(Integer pid);

    /**
     * 新增球员信息
     */
    int toAddPlayers(Players players);
}

(ClubsMapper.java)

package com.ketai.mapper;

import com.ketai.pojo.Clubs;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface ClubsMapper {
    /**
     * 查询球队信息
     * @return
     */
    List<Clubs> getAllClubs();
}

写了接口之后在resource下新建一个mapper文件夹，用于存放映射文件新建*mapper.xml文件，写入以下代码即可(注意：此映射文件需与Java下mapper文件夹下的接口同名，并且包名也要与其一致，在这里创建方式也不同)

PlayersMapper.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">

<!--
    namespace:名称空间
-->
<mapper namespace="com.ketai.mapper.PlayersMapper">

    <resultMap id="PlayersMap" type="com.ketai.pojo.Players">
        <id column="pid" property="pid"></id>
        <result column="pname" property="pname"></result>
        <result column="birthday" property="birthday"></result>
        <result column="height" property="height"></result>
        <result column="weight" property="weight"></result>
        <result column="position" property="position"></result>
        <association property="clubs" javaType="com.ketai.pojo.Clubs">
            <id column="id" property="cid"></id>
            <result column="cname" property="cname"></result>
            <result column="city" property="city"></result>
        </association>
    </resultMap>

    <select id="getAllPlayersPage" resultType="com.ketai.pojo.Players" resultMap="PlayersMap">
        select p.cid cd,p.*,c.cid id,c.* from players p,clubs c
        <where>
            and p.cid=c.cid
            <if test="pname!=null and pname!=''">
                and p.pname like concat('%',#{pname},'%')
            </if>
            <if test="cid!=null and cid!=''">
                and p.cid=#{cid}
            </if>
        </where>
    </select>

    <!--根据球员编号删除-->
    <delete id="deletePlayers">
        delete from players where pid=#{pid}
    </delete>

    <!--新增球员信息-->
    <insert id="toAddPlayers">
        insert into players values(null,#{pname},#{birthday},#{height},#{weight},#{position},#{cid})
    </insert>
</mapper>

ClubsMapper.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">

<!--
    namespace:名称空间
-->
<mapper namespace="com.ketai.mapper.ClubsMapper">

    <select id="getAllClubs" resultType="com.ketai.pojo.Clubs">
        select * from clubs
    </select>
</mapper>

在com.ketai.service包中新建一个Service类，接下来就是编写业务层了（PlayersService.java）

package com.ketai.service;

import com.github.pagehelper.PageInfo;
import com.ketai.pojo.Players;

public interface PlayersService {
    //分页查询
    PageInfo<Players> getAllPlayersPage(Integer pageNum, Integer cid, String pname);

    //根据球员编号删除
    int deletePlayers(Integer pid);

    //新增球员信息
    int toAddPlayers(Players players);
}

(ClubsService.java)

package com.ketai.service;

import com.ketai.pojo.Clubs;

import java.util.List;

public interface ClubsService {
    /**
     * 查询球队信息
     * @return
     */
    List<Clubs> getAllClubs();
}

在com.ketai.service包中新建一个Impl类来实现Service接口（PlayersServiceImpl.java）

package com.ketai.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.ketai.mapper.PlayersMapper;
import com.ketai.pojo.Players;
import com.ketai.service.PlayersService;
import org.springframework.stereotype.Service;

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

@Service
public class PlayersServiceImpl implements PlayersService {

    @Resource
    private PlayersMapper playersMapper;

    @Override
    public PageInfo<Players> getAllPlayersPage(Integer pageNum, Integer cid, String pname) {
        PageHelper.startPage(pageNum,3);
        List<Players> list=playersMapper.getAllPlayersPage(cid,pname);
        PageInfo<Players> page=new PageInfo<>(list,4);
        return page;
    }

    //根据球员编号删除
    @Override
    public int deletePlayers(Integer pid) {
        return playersMapper.deletePlayers(pid);
    }

    //新增球员信息
    @Override
    public int toAddPlayers(Players players) {
        return playersMapper.toAddPlayers(players);
    }
}

(ClubsServiceImpl.java)

package com.ketai.service.impl;

import com.ketai.mapper.ClubsMapper;
import com.ketai.pojo.Clubs;
import com.ketai.service.ClubsService;
import org.springframework.stereotype.Service;

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

@Service
public class ClubsServiceImpl implements ClubsService {

    @Resource
    private ClubsMapper clubsMapper;

    @Override
    public List<Clubs> getAllClubs() {
        return clubsMapper.getAllClubs();
    }
}

编写完业务之后就是编写控制器了
在com.ketai.controller包中新建PlayersController.java

package com.ketai.controller;

import com.github.pagehelper.PageInfo;
import com.ketai.pojo.Clubs;
import com.ketai.pojo.Players;
import com.ketai.service.ClubsService;
import com.ketai.service.PlayersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
public class PlayersController {

    @Autowired
    private PlayersService playersService;
    @Autowired
    private ClubsService clubsService;

    @RequestMapping("/a")
    public String getAllPlayers(Model model,
                                @RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
                                @RequestParam(required = false)Integer cid,
                                @RequestParam(required = false)String pname){
        //分页查询
        PageInfo<Players> page=playersService.getAllPlayersPage(pageNum,cid,pname);
        model.addAttribute("page",page);
        //查询clubs表数据
        List<Clubs> clubsList=clubsService.getAllClubs();
        model.addAttribute("clubsList",clubsList);
        //获取cid字段
        model.addAttribute("cid",cid);
        //获取pname字段
        model.addAttribute("pname",pname);
        return "index";
    }

    //删除球员
    @GetMapping("/delete")
    public String deletePlayers(Integer pid){
        int count=playersService.deletePlayers(pid);
        return "redirect:/a";
    }

    //添加
    @GetMapping("/toAdd/list")
    public String toAddPlayers(Players players){
        int count=playersService.toAddPlayers(players);
        return "redirect:/a";
    }

    //添加成功后查询
    @GetMapping(value = "/toAdd")
    public String ListToAdd(Model model,Integer pageNum, @RequestParam(required = false) String pname,@RequestParam(required = false) Integer cid){
        //分页查询球队信息
        PageInfo<Players> page=playersService.getAllPlayersPage(pageNum,cid,pname);
        model.addAttribute("page",page);
        //查询Clubs表信息
        List<Clubs> clubsList=clubsService.getAllClubs();
        model.addAttribute("clubsList",clubsList);
        return "toAdd";
    }
}

再就是页面分页的代码了(MybatisConfig.java)

package com.ketai.config;

import com.github.pagehelper.PageInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@Configuration
public class MybatisConfig {

    @Bean
    public PageInterceptor pageInterceptor() {
        PageInterceptor pageInterceptor = new PageInterceptor();
        Properties p = new Properties();
        // 设置数据库方言 ， 也可以不设置，会动态获取
        p.setProperty("helperDialect", "mysql");
        pageInterceptor.setProperties(p);
        return pageInterceptor;
    }
}

SpringBoot启动界面