您的当前位置:首页正文

springboot+mybatis+Thymeleaf

2024-11-29 来源:个人技术集锦

Thymeleaf介绍

Thymeleaf是一种用于Web和独立环境的现代服务器端的Java模板引擎。

Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中,并将HTML在浏览器中正确显示,并且可以作为静态原型,让开发团队能更容易地协作。Thymeleaf能够处理HTML,XML,JavaScript,CSS甚至纯文本。

Thymeleaf使用Spring框架的模块,与许多常见的工具集成在一起,并且可以插入自己的功能,是现代HTML5 JVM Web开发的理想选择,尽管Thymeleaf还有更多其它的功能。
Thymeleaf建立在自然模板的概念之上,以不影响模板作为设计原型的方式将其逻辑注入到模板文件中。 这改善了设计沟通,弥合了前端设计和开发人员之间的理解偏差。

1、整体结构

 

2、创建项目

新建一个springboot项目,需要勾选五个依赖项

3、maven


    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.0</version>
        </dependency>

        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</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>
        </dependency>
    </dependencies>

  

 4、配置application.yml

#端口号
server:
  port: 8888

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/cust?serverTimezone=UTC&characterEncoding=utf-8
    username: root
    password:
  thymeleaf:
    cache: false
    mode: HTML5
    suffix: .html
    prefix: classpath:/templates/
mybatis:
  mapper-locations: classpath:/mapper/*.xml
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  type-aliases-package: com.qiao.springboot_mybatis


5、实体类

1、客户信息类tomer

package com.qiao.springboot02.pojo;

import lombok.Data;

/**
 * @Author 江沉晚吟时
 * 客户信息类
 * @Date 2022/12/21 18:57
 */
@Data
public class tomer {
    //客户编号
    private  Integer id;
    //客户姓名
    private  String name;
    //客户备注
   private String remark;
   //客户电话号码
   private String telephone;
   //客户所在地址
   private String address;
   //客户类型id
   private String typeId;


    private String typeName;

}

2、客户类型类type

package com.qiao.springboot02.pojo;

import lombok.Data;

/**
 * @Author 江沉晚吟时
 * 客户信息类
 * @Date 2022/12/21 18:57
 */
@Data
public class tomer {
    //客户编号
    private  Integer id;
    //客户姓名
    private  String name;
    //客户备注
   private String remark;
   //客户电话号码
   private String telephone;
   //客户所在地址
   private String address;
   //客户类型id
   private String typeId;


    private String typeName;

}

6、事务层

service

package com.qiao.springboot02.service;

import com.qiao.springboot02.pojo.tomer;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface tomerService {
    /*
     * 查询所有客户信息
     * */
    List<tomer> getAll();

    /*
     * 根据客户名称模糊查询,查询客户信息
     * */
    List<tomer> getByName(@Param("name") String name);

    /*
     * 新增客户信息
     * */
    int insert(tomer tomer);

    /*
     * 删除客户信息
     * */
    int delete(Integer id);

    /*
     * 根据id查询所有信息
     * */
    tomer getById(@Param("id") Integer id);

    /*
     * 修改客户姓名,备注
     * */
    int update(tomer tomer);
}

serviceImpl

package com.qiao.springboot02.service;

import com.qiao.springboot02.mapper.tomerMapper;
import com.qiao.springboot02.pojo.tomer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Author 江沉晚吟时
 * @Date 2022/12/21 19:18
 */
@Service
public class tomerServiceImpl implements tomerService{
    @Autowired
    private tomerMapper tomerMapper;

    @Override
    public List<tomer> getAll() {
        return tomerMapper.getAll();
    }

    @Override
    public List<tomer> getByName(String name) {
        return tomerMapper.getByName(name);
    }

    @Override
    public int insert(tomer tomer) {
        return tomerMapper.insert(tomer);
    }

    @Override
    public int delete(Integer id) {
        return tomerMapper.delete(id);
    }

    @Override
    public tomer getById(Integer id) {
        return tomerMapper.getById(id);
    }

    @Override
    public int update(tomer tomer) {
        return tomerMapper.update(tomer);
    }
}

7、mapper层

package com.qiao.springboot02.mapper;

import com.qiao.springboot02.pojo.tomer;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface tomerMapper {
    /*
    * 查询所有客户信息
    * */
    List<tomer> getAll();

    /*
    * 根据客户名称模糊查询,查询客户信息
    * */
    List<tomer> getByName(@Param("name")String name);

    /*
    * 新增客户信息
    * */
    int insert(tomer tomer);

    /*
    * 删除客户信息
    * */
    int delete(@Param("id") Integer id);

    /*
    * 根据id查询所有信息
    * */
    tomer getById(@Param("id") Integer id);

    /*
    * 修改客户姓名,备注
    * */
    int update(tomer tomer);
}

8、sql

<?xml version="1.0" encoding="UTF8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qiao.springboot02.mapper.tomerMapper">
    <select id="getAll" resultType="com.qiao.springboot02.pojo.tomer">
        select t.id,t.name,t.remark,t.telephone,t.address,p.typeName from tomer t,type p
        where t.typeId = p.id
        order by t.id
    </select>

    <select id="getByName" resultType="com.qiao.springboot02.pojo.tomer" parameterType="string">
        select  t.id,t.name,t.remark,t.telephone,t.address,p.typeName from tomer t,type p
        <where>
            and t.typeId = p.id
            <if test="name!=null and name!=''">
               and t.name like concat('%',#{name},'%')
            </if>
        </where>
        order by t.id
    </select>

    <insert id="insert" parameterType="com.qiao.springboot02.pojo.tomer">
        insert into tomer values(null,#{name},#{remark},#{telephone},#{address},#{typeId})
    </insert>

    <delete id="delete" parameterType="integer">
        delete from tomer where id = #{id}
    </delete>

    <select id="getById" parameterType="integer" resultType="com.qiao.springboot02.pojo.tomer">
        select * from tomer where id = #{id}
    </select>

    <update id="update" parameterType="com.qiao.springboot02.pojo.tomer">
        update tomer set name = #{name},remark=#{remark} where id = #{id}
    </update>
</mapper>

9、controller

package com.qiao.springboot02.controller;

import com.qiao.springboot02.pojo.tomer;
import com.qiao.springboot02.service.tomerServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import javax.servlet.http.HttpServletRequest;
import java.util.List;

/**
 * @Author 江沉晚吟时
 * @Date 2022/12/21 19:19
 */
@Controller
public class tomerController {
    @Autowired
    private tomerServiceImpl tomerService;

    /*
     * 查询所有客户信息
     * */
    @RequestMapping("getAll")
    public String getAll(Model model){
        List<tomer> all = tomerService.getAll();
        model.addAttribute("tomerList",all);
        return "index";
    }

    /*
     * 根据客户名称模糊查询,查询客户信息
     * */
    @RequestMapping("/getByName")
    public String getByName(Model model,@RequestParam("name")String name){
        List<tomer> byName = tomerService.getByName(name);
        model.addAttribute("tomerList",byName);
        return "index";
    }

    /*
    * 进入insert.html
    * */
    @RequestMapping("/toadd")
    public String toadd(){
        return "insert";
    }

    /*
     * 新增客户信息
     * */
    @RequestMapping("/insert")
    public String insert(tomer tomer, HttpServletRequest request){
        String name = request.getParameter("name");
        String remark = request.getParameter("remark");
        String telephone = request.getParameter("telephone");
        String address = request.getParameter("address");
        Integer typeId = Integer.valueOf(request.getParameter("typeId"));
        tomer.setName(name);
        tomer.setRemark(remark);
        tomer.setTelephone(telephone);
        tomer.setAddress(address);
        tomer.setTypeId(typeId);
        int insert = tomerService.insert(tomer);
        if (insert>0){
            return "redirect:/getAll";
        }
        return "error";
    }

    /*
     * 删除客户信息
     * */
    @RequestMapping("/delete")
    public String delete(@RequestParam("id") Integer id){
        int delete = tomerService.delete(id);
        if (delete>0){
            return "redirect:/getAll";
        }
        return "error";
    }

    /*
    * 根据id查询所哟用户信息
    * */
    @RequestMapping("/getById")
    public String getById(Model model,@RequestParam("id")Integer id){
        tomer byId = tomerService.getById(id);
        model.addAttribute("idList",byId);
        return "update";
    }

    /*
     * 修改客户姓名,备注
     * */
    @RequestMapping("/update")
    public String update(tomer tomer,HttpServletRequest request){
        Integer id = Integer.valueOf(request.getParameter("id"));
        String name = request.getParameter("name");
        String remark = request.getParameter("remark");
        tomer.setId(id);
        tomer.setName(name);
        tomer.setRemark(remark);
        int update = tomerService.update(tomer);
        if (update>0){
            return "redirect:/getAll";
        }
        return "error";
    }

}

10、前端代码

所用到的thymeleaf作用:

        th:each:遍历循环元素

        th:text:设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。

        th:value:设置当前元素的value值

index


<form th:action="@{getByName}">
    请输入客户姓名:<input type="text" name="name">
    <input type="submit" value="查询">
</form>
<table border="1">
    <tr>
        <td>客户编号</td>
        <td>客户姓名</td>
        <td>客户备注</td>
        <td>客户电话</td>
        <td>客户所在地址</td>
        <td>客户类型</td>
        <td>操作</td>
    </tr>
    <tr th:each="list :${tomerList}">
        <td th:text="${list.id}"></td>
        <td th:text="${list.name}"></td>
        <td th:text="${list.remark}"></td>
        <td th:text="${list.telephone}"></td>
        <td th:text="${list.address}"></td>
        <td th:text="${list.typeName}"></td>
        <td><a th:href="@{toadd}">新增</a>
            <a th:href="@{'/delete?id='+${list.id}}">删除</a>
            <a th:href="@{'/getById?id='+${list.id}}">编辑</a>
        </td>
    </tr>
</table>

insert

<form th:action="@{insert}">
    客户姓名:<input type="text" name="name"><br>
    客户备注:<input type="text" name="remark"><br>
    客户电话:<input type="text" name="telephone"><br>
    客户所在地址:<input type="text" name="address"><br>
    客户类型:<input type="text" name="typeId"><br>
    <input type="submit" value="提交"><br>
</form>

update

<form th:action="@{update}">
  客户编号:<input type="text" readonly name="id" th:value="${idList.id}"><br>
  客户姓名:<input type="text" name="name" th:value="${idList.name}"><br>
  客户备注:<input type="text" name="remark" th:value="${idList.remark}"><br>
  客户电话:<input type="text" name="telephone" readonly th:value="${idList.telephone}"><br>
  客户所在地址:<input type="text" name="address" th:value="${idList.address}"><br>
  客户类型:<input type="text" name="typeId" readonly th:value="${idList.typeId}"><br>
  <input type="submit" value="提交"><br>
</form>

11、首页效果

 

显示全文