SpringBoot+SSM+Thymeleaf增删改查

1.数据库文件

-- ----------------------------
-- Table structure for t_book
-- ----------------------------
DROP TABLE IF EXISTS `t_book`;
CREATE TABLE `t_book`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `isbn` varchar(50) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  `author` varchar(100) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  `name` varchar(50) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
  `price` float NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 5 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of t_book
-- ----------------------------
INSERT INTO `t_book` VALUES (1, '11111', '吴承思', '西游记', 100);
INSERT INTO `t_book` VALUES (2, '22222', '罗贯中', '三国演义', 200);
INSERT INTO `t_book` VALUES (3, '33333', '施耐奄', '水浒传', 200);
INSERT INTO `t_book` VALUES (4, '44444', '曹雪芹', '红楼梦', 200);

创建springboot项目,项目最终结构
在这里插入图片描述

1.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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.1.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.hr</groupId>
    <artifactId>ssm</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>ssm</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-jdbc</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>2.1.3</version>
        </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>
            <version>5.1.47</version>
            <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-thymeleaf</artifactId>
        </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>
    </dependencies>

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

</project>

2.文件application.properties

server.port=8888
spring.datasource.username=root
spring.datasource.password=52Java
spring.datasource.url=jdbc:mysql://localhost:3306/springboot?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
mybatis.mapper-locations=classpath*:mapper/*/*.xml

3.启动类(自动生成)

package com.hr.ssm;

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

@SpringBootApplication
public class SsmApplication {

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

}

4.实体

package com.hr.ssm.entity;

import java.io.Serializable;

/**
 * @ClassName Book
 * @Description: TODO
 * @Author 汤永红
 * @Date 2020/3/10 0010
 * @Version V1.0
 **/
public class Book implements Serializable {
     private Integer id;
     private String isbn;
     private String author;
     private String name;
     private Float price;


    public Book() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getId() {
        return id;
    }

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

    public String getIsbn() {
        return isbn;
    }

    public void setIsbn(String isbn) {
        this.isbn = isbn;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public Float getPrice() {
        return price;
    }

    public void setPrice(Float price) {
        this.price = price;
    }
}

5.Mapper接口

package com.hr.ssm.mapper;

import com.hr.ssm.entity.Book;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * @Classname BookMapper
 * @Description TODO
 * @Date 2020/6/24 0024 15:56
 * @Created by Emily
 */
@Mapper
public interface BookMapper {
    List<Book> findAll(Book book);
    Book findOne(Integer id);
    int add(Book book);
    int update(Book book);
    int del(Integer id);
}

6.Mapper接口对应的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.hr.ssm.mapper.BookMapper">
    <select id="findAll" parameterType="com.hr.ssm.entity.Book" resultType="com.hr.ssm.entity.Book">
        select * from t_book
    </select>
    <select id="findOne" parameterType="java.lang.Integer" resultType="com.hr.ssm.entity.Book">
        select * from t_book where id=#{id}
    </select>
    <insert id="add" parameterType="com.hr.ssm.entity.Book">
        INSERT INTO `t_book`(`isbn`, `author`, `name`, `price`) VALUES (#{isbn}, #{author}, #{name}, #{price})
    </insert>
    <update id="update" parameterType="com.hr.ssm.entity.Book">
        UPDATE `t_book` SET `isbn` = #{isbn}, `author` = #{author}, `name` = #{name}, `price` = #{price} WHERE `id` = #{id}
    </update>
    <delete id="del" parameterType="java.lang.Integer">
        delete from t_book where id=#{id}
    </delete>
</mapper>

7.Service接口

package com.hr.ssm.service;

import com.hr.ssm.entity.Book;

import java.util.List;

/**
 * @Classname BookMapper
 * @Description TODO
 * @Date 2020/6/24 0024 15:56
 * @Created by Emily
 */

public interface BookService {
    List<Book> findAll(Book book);
    Book findOne(Integer id);
    int add(Book book);
    int update(Book book);
    int del(Integer id);
}

8.Service实现类

package com.hr.ssm.service.impl;/**
 * @Classname BookServiceImpl
 * @Description TODO
 * @Date 2020/6/24 0024 15:57
 * @Created by Emily
 */

import com.hr.ssm.entity.Book;
import com.hr.ssm.mapper.BookMapper;
import com.hr.ssm.service.BookService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

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

/**
 * @ClassName BookServiceImpl
 * @Description: TODO
 * @Author 汤永红
 * @Date 2020/6/24 0024
 * @Version V1.0
 **/
@Service
@Transactional
public class BookServiceImpl implements BookService {
    private Logger logger = LoggerFactory.getLogger(this.getClass());
    private Logger dataLogger = LoggerFactory.getLogger("dataLogger");
    @Resource
    private BookMapper bookMapper;
    @Override
    public List<Book> findAll(Book book) {
        return bookMapper.findAll(book);
    }

    @Override
    public Book findOne(Integer id) {
        return bookMapper.findOne(id);
    }

    @Override
    @Transactional(propagation = Propagation.REQUIRED)
    public int add(Book book) {
        dataLogger.info("module=video_order`api=save`id={}`isbn={}",book.getId(),book.getIsbn());

        return bookMapper.add(book);
    }

    @Override
    public int update(Book book) {
        return bookMapper.update(book);
    }

    @Override
    public int del(Integer id) {
        return bookMapper.del(id);
    }
}

9.控制层Controller

package com.hr.ssm.web;/**
 * @Classname BookController
 * @Description TODO
 * @Date 2020/6/24 0024 16:01
 * @Created by Emily
 */

import com.hr.ssm.entity.Book;
import com.hr.ssm.service.BookService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

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

/**
 * @ClassName BookController
 * @Description: TODO
 * @Author 汤永红
 * @Date 2020/6/24 0024
 * @Version V1.0
 **/
@Controller
@RequestMapping("/book/v1/api/")
public class BookController {
    @Resource
    private BookService bookService;
    @RequestMapping("/list")
    public String list(Model model){
        List<Book> books = bookService.findAll(null);
        model.addAttribute("books",books);
        return "list";
    }
    //到添加
    @RequestMapping("/toAdd")
    public String toAdd(){
        return "toAdd";
    }
    //添加
    @RequestMapping("/add")
    public String add(Book book,Model model){
        int i = bookService.add(book);
        String msg = i>0?"添加成功":"添加失败";
        model.addAttribute("msg",msg);
        return "msg";
    }
    //到修改
    @RequestMapping("/toUpdate/{id}")
    public String toUpdate(@PathVariable("id")Integer id, Model model){
        Book book = bookService.findOne(id);
        model.addAttribute("book",book);
        return "toUpdate";
    }
    //修改
    @RequestMapping("/update")
    public String update(Book book,Model model){
        int i = bookService.update(book);
        String msg = i>0?"修改成功":"修改失败";
        model.addAttribute("msg",msg);
        return "msg";
    }
    //删除:斜杠传值写法
    @RequestMapping("/del/{id}")
    public String del(@PathVariable("id") Integer id,Model model){
        int i = bookService.del(id);
        String msg = i>0?"删除成功":"删除失败";
        model.addAttribute("msg",msg);
        return "msg";
    }
    //删除:问号传值写法
    @RequestMapping("/del2")
    public String del2(@RequestParam("id") Integer id, Model model) {
        int i = bookService.del(id);
        String msg = i > 0 ? "删除成功" : "删除失败";
        model.addAttribute("msg", msg);
        return "msg";
    }
}

10.模板
list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Title</title>
		<meta charset="UTF-8">
		<meta name=description content="">
		<meta name=viewport content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap CSS -->
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
		<script>
			function del(id) {
				if(confirm("是否确定删除")){
					window.location.href="/book/v1/api/del2?id="+id;
				}
			}
		</script>
	</head>
	<body>
		<h1 class="text-center">显示所有图书信息</h1>



		<!-- jQuery -->
		<script src="//code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
		<a th:href="@{/book/v1/api/toAdd/}">添加图书信息</a>
		<table class="table table-bordered table-hover">
	    	<thead>
	    		<tr>
                    <th>id</th>
                    <th>isbn</th>
                    <th>author</th>
                    <th>name</th>
                    <th>price</th>
                    <th>price</th>
                    <th>operation</th>
	    		</tr>
	    	</thead>
	    	<tbody>
	    		<tr th:each="book,index:${books}">
                    <td th:text="${book.id}"></td>
                    <td th:text="${book.isbn}"></td>
                    <td th:text="${book.author}"></td>
                    <td th:text="${book.name}"></td>
                    <td th:text="${book.price}"></td>
                    <td th:text="${book.getPrice()}"></td>
                    <td >
						<a th:href="@{/book/v1/api/toUpdate/{id}(id=${book.id})}">修改</a>
						|
						<a th:href="@{/book/v1/api/del/{id}(id=${book.id})}" onclick="return confirm('你确定要删除吗?')">删除(斜杠传值)</a>
						|<a th:onclick="|del(${book.id})|" href="javascript:void(0)">删除(问号传值)</a>
					</td>
	    		</tr>
	    	</tbody>
	    </table>
    </body>
</html>

toAdd.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1 class="text-center">添加图书信息</h1>

<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<form class="form-horizontal" method="post" action="/book/v1/api/add">
    <div class="form-group">
        <label for="id" class="col-sm-2 control-label">id</label>
        <div class="col-sm-10">
            <input  type="text" class="form-control" id="id" placeholder="id" name="id">
        </div>
    </div>
    <div class="form-group">
        <label for="isbn" class="col-sm-2 control-label">isbn</label>
        <div class="col-sm-10">
            <input  type="text" class="form-control" id="isbn" placeholder="isbn" name="isbn">
        </div>
    </div>
    <div class="form-group">
        <label for="author" class="col-sm-2 control-label">author</label>
        <div class="col-sm-10">
            <input  type="text" class="form-control" id="author" placeholder="author" name="author">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="name" placeholder="name" name="name">
        </div>
    </div>
    <div class="form-group">
        <label for="price" class="col-sm-2 control-label">price</label>
        <div class="col-sm-10">
            <input type="number" class="form-control" id="price" placeholder="price" name="price">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</body>
</html>

toUpdate.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Title</title>
		<meta charset="UTF-8">
		<meta name=description content="">
		<meta name=viewport content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Bootstrap CSS -->
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<h1 class="text-center">修改图书信息</h1>

		<!-- jQuery -->
		<script src="//code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
        <form class="form-horizontal" method="post" action="/book/v1/api/update">
            <div class="form-group">
                <label for="id" class="col-sm-2 control-label">id</label>
                <div class="col-sm-10">
                    <input th:value="${book.id}" type="text" class="form-control" id="id" placeholder="id" name="id">
                </div>
            </div>
            <div class="form-group">
                <label for="isbn" class="col-sm-2 control-label">isbn</label>
                <div class="col-sm-10">
                    <input th:value="${book.isbn}" type="text" class="form-control" id="isbn" placeholder="isbn" name="isbn">
                </div>
            </div>
            <div class="form-group">
                <label for="author" class="col-sm-2 control-label">author</label>
                <div class="col-sm-10">
                    <input th:value="${book.author}" type="text" class="form-control" id="author" placeholder="author" name="author">
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">name</label>
                <div class="col-sm-10">
                    <input th:value="${book.name}" type="text" class="form-control" id="name" placeholder="name" name="name">
                </div>
            </div>
            <div class="form-group">
                <label for="price" class="col-sm-2 control-label">price</label>
                <div class="col-sm-10">
                    <input th:value="${book.price}" type="number" class="form-control" id="price" placeholder="price" name="price">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Sign in</button>
                </div>
            </div>
        </form>
    </body>
</html>

msg.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--要么不写,要么写th:inline="javascript"-->
<script th:inline="javascript">
    var msg = [[${msg}]];
    alert(msg);
    window.location.href="/book/v1/api/list";
</script>
</body>
</html>

3.测试(就不用postman测试了)
http://localhost:8888/book/v1/api/list
在这里插入图片描述
在这里插入图片描述
thymeleaf回显其它收集:

<form action="/update" method="post" onsubmit="return check();">
    <div>
        <input th:value="${digit.id}" name="id"  id="id" type="hidden" />
        名称 :<input th:value="${digit.name}" name="name"  id="name" /><br/>
        分类 :<select name="type" id="type">
        <option value="">请选择</option>
        <option value="手机" th:selected="${digit.type=='手机'}">手机</option>
        <option value="平板电脑" th:selected="${digit.type=='平板电脑'}">平板电脑</option>
        <option value="相机/单反" th:selected="${digit.type=='相机/单反'}">相机/单反</option>
        <option value="笔记本" th:selected="${digit.type=='笔记本'}">笔记本</option>
        <option value="台式机" th:selected="${digit.type=='台式机'}">台式机</option>
    </select><br/>
        尺寸 :<input name="size" id="size" th:value="${digit.size}"/><br/>
        价格 :<input name="price"  id="price" th:value="${digit.price}"/><br/>
        简介:<input name="brief" id="brief" th:value="${digit.brief}"/><br/>
        <input type="submit" value="提交"/>&nbsp;<input type="reset" value="清空"/>
    </div>
</form>

select

<label  class="col-sm-2 control-label">类别</label>
<div class="col-sm-8">
    <select  name="cId" id="cId" class="form-control1" >
        <option value="1" th:field="*{book.cId}">目录1</option>
        <option value="2" th:field="*{book.cId}">目录2</option>
        <option value="3" th:field="*{book.cId}">目录3</option>
        <option value="4" th:field="*{book.cId}">目录4</option>
    </select>
</div>

radio

    <label for="isBoy" class="col-sm-2 control-label">是否男生</label>
    <div id="isBoy" class="col-sm-8">
        <div class="radio-inline">
            <label><input name="isBoy" type="radio" value="1"  th:field="*{book.isBoy}"/></label>
        </div>
        <div class="radio-inline">
            <label><input name="isBoy" type="radio" value="0"  th:field="*{book.isBoy}"/></label>
        </div>
    </div>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤永红

一分也是爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值