SpringBoot (四)：SpringBoot实战 Thymeleaf 中单表的增删改查功能

一、导依赖

<dependencies>
	<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</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>
			<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>

二、配置文件application.yml文件编写

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    password: 123456
    username: root
  jpa:
    database: mysql
    hibernate:
      #数据库自动创建表  实际开发中要关闭
      #      ddl-auto 几种属性
      #      create： 每次运行程序时，都会重新创建表，故而数据会丢失
      #      create-drop： 每次运行程序时会先创建表结构，然后待程序结束时清空表
      #      upadte： 每次运行程序，没有表时会创建表，如果对象发生改变会更新表结构，原有数据不会清空，只会更新（推荐使用）
      #      validate： 运行程序会校验数据与数据库的字段类型是否相同，字段不同会报错
      ddl-auto: update  #在开发阶段使用
      #在控制台显示sql语句
    show-sql: true

三、实体类的编写

package com.ncl.demo.entity;


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

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    
    
    @Id
    @GeneratedValue
    private Long id;

    private String username;

    private String password;

    private int age;
}

四、UserRepository接口的编写

package com.ncl.demo.reposiry;

import com.ncl.demo.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User,Long> {
    
    

}

五、Service接口和其实现类的编写

Service接口

package com.ncl.demo.service;

import com.ncl.demo.entity.User;
import org.springframework.data.domain.Page;

public interface UserService {
    
    

    Page<User> list(int page, int pageSize);

    User save(User user);

    User findById(Long id);

    User update(User user);

    void deleteById(Long id);
}

Service实现类

package com.ncl.demo.service;

import com.ncl.demo.entity.User;
import com.ncl.demo.reposiry.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl implements UserService {
    
    

    @Autowired
    private UserRepository userRepository;

    @Override
    public Page<User> list(int page, int pageSize) {
    
    
        //jpa的页数从0开始
        Pageable pageable = PageRequest.of(page-1,pageSize);
        Page<User> pageUser = userRepository.findAll(pageable);
        return pageUser;
    }

    @Override
    public User save(User user) {
    
    
        return userRepository.save(user);
    }

    @Override
    public User findById(Long id) {
    
    
        return userRepository.findById(id).get();
    }

    @Override
    public User update(User user) {
    
    
        return userRepository.save(user);
    }

    @Override
    public void deleteById(Long id) {
    
    
        userRepository.deleteById(id);
    }

}

六、UserController的编写

package com.ncl.demo.controller;

import com.ncl.demo.entity.User;
import com.ncl.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("user")
public class UserController {
    
    
    @Autowired
    UserService userService;

    @RequestMapping("/list")
    public String list(Model model,
                       @RequestParam(value = "pageNum",defaultValue = "1") int pageNum,
                       @RequestParam(value = "pageSize",defaultValue = "3") int pageSize
                       ) {
    
    
        if (pageNum<1)pageNum=1;
        Page<User> pageUser = userService.list(pageNum, pageSize);
        if (pageNum>pageUser.getTotalPages())pageNum=pageUser.getTotalPages();
        pageUser=userService.list(pageNum, pageSize);
        model.addAttribute("pageNum",pageNum);
        model.addAttribute("pageSize",pageSize);
        model.addAttribute("users", pageUser.toList());
        return "list";
    }
    @RequestMapping("/to_add")
    public String toAdd(){
    
    
        return "userAdd";
    }

    @RequestMapping("/save")
    public String save(User user){
    
    
        User userTemp = userService.save(user);
        if (userTemp != null) {
    
    
            return "redirect:list";
        }
        return "500";
    }

    @RequestMapping("/to_edit")
    public String toEdit(Model model,long id){
    
    
        User user = userService.findById(id);
        model.addAttribute("user",user);
        return "userEdit";
    }

    @RequestMapping(value = "/update")
    public String update(Model model,User user){
    
    
        User userTemp  =userService.update(user);
        if(userTemp!=null){
    
    
            return "redirect:list";
        }
        return "500";
    }

    @RequestMapping("/delete")
    public String delete(Long id){
    
    
        userService.deleteById(id);
        return "redirect:list";
    }
}

七、html页面的编写

list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8"/>
    <title>userList</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<script>
    function del(msg,id) {
    
    
        confirm("确认删除"+msg+"吗")
        location.href="/user/delete?id="+id;
    }
</script>
<body class="container">
<br/>
<h1>用户列表</h1>
<br/><br/>
<div class="with:80%">
    <table class="table table-hover" >
        <thead>
        <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
            <th colspan="2">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
            <th th:text="${user.id}">1</th>
            <td th:text="${user.username}">neo</td>
            <td th:text="${user.password}">Otto</td>
            <td th:text="${user.age}">6</td>
            <td><a href="#" th:href="@{/user/to_edit(id=${user.id})}">edit</a></td>
            <td><a href="#" th:onclick="del([[${user.username}]],[[${user.id}]])" >delete</a></td>
        </tr>
        <tr align="right">
            <td colspan="6">
                <a th:href="@{/user/to_add}" href="/to_add" class="btn btn-info">add</a>
                <a th:href="@{/user/list(pageNum=${pageNum}-1,pageSize=${pageSize})}" class="btn btn-info">上一页</a>
                <a th:href="@{/user/list(pageNum=${pageNum}+1,pageSize=${pageSize})}" class="btn btn-info">下一页</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

userAdd.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>user</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<br/>
<h1>添加用户</h1>
<br/><br/>
<div class="with:80%">
    <form class="form-horizontal" th:action="@{/user/save}"    method="post">
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="username"  id="username" placeholder="username"/>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label" >Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" id="password" placeholder="Password"/>
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">age</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="age"  id="age" placeholder="age"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="Submit" class="btn btn-info" />
                &nbsp; &nbsp; &nbsp;
                <input type="reset" value="Reset" class="btn btn-info" />
            </div>

        </div>
    </form>
</div>
</body>
</html>

userEdit.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>user</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<br/>
<h1>修改用户</h1>
<br/><br/>
<div class="with:80%">
    <form class="form-horizontal"  th:action="@{/user/update}"   method="post">
        <input type="hidden" name="id" th:value="${user.id}"/>
        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">username</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" th:value="${user.username}" name="username"  id="username"  placeholder="username"/>
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label" >Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" name="password" id="password" th:value="${user.password}"  placeholder="Password"/>
            </div>
        </div>
        <div class="form-group">
            <label for="age" class="col-sm-2 control-label">age</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="age"  id="age" th:value="${user.age}" placeholder="age"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" value="Submit" class="btn btn-info" />
                &nbsp; &nbsp; &nbsp;
                <a th:href="@{/user/list}" href="/toAdd"  class="btn btn-info">Back</a>
            </div>
        </div>
    </form>
</div>
</body>
</html>

八、最终页面演示