SpringBoot add delete change check

I recently started learning SpringBoot and did a small project to practice. Just do a record for students who have not contacted SpringBoot to provide a reference. Super detailed!! Directory structure!!

Create a project

Use IDEA to create a Springboot project, which can be generated using IDEA or on the official website.

• The JDK: 1.8
• Java: 8

Spring’s start. Spring. IO /

Adding project dependencies

• Spring Web
• Mybatis Framework
• MySQL Driver
• Thymeleaf

2. Create a database

use `mall_smart`;

CREATE TABLE IF NOT EXISTS `wdl_user` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`username` varchar(125) DEFAULT NULL,
`password` varchar(256) DEFAULT NULL.PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
Copy the code

MySQL Workbench is used here

Iii. Project structure

main

• java.com.example.demo
  • bean
    • User.java
  • contoller
    • UserController.java
  • mapper
    • UserMapper.java
  • server
    • UserService.java
  • Application.java
• resources
  • mapping
    • UserMapper.xml
  • static
    • CSS package
    • Img package
    • Js package
  • templates
    • insertPage.html
    • updatePage.html
    • userList.html
  • application.yml

Four, code implementation

4.1 Back-end code

1. The User class

A new User class under java.com.example.demo.bean package

package com.example.demo.bean;

public class User {
    private int id;
    private String username;
    private String password;

    public User(a) {}public User(int id, String username, String password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public int getId(a) {
        return id;
    }

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

    public String getUsername(a) {
        return username;
    }

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

    public String getPassword(a) {
        return password;
    }

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

Control + Enter quickly adds constructors and get() set() methods

2. The UserController class

Under the java.com.example.demo.controller bag new UserController class

package com.example.demo.controller;

import com.example.demo.bean.User;
import com.example.demo.server.UserService;
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;

@RequestMapping
@Controller
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/insertPage")
    public String index(a){

        return "insertPage";
    }

    @RequestMapping("select/{id}")
    @ResponseBody
    public String save(@PathVariable int id){

        return userService.select(id).toString();
    }

    @RequestMapping("/userList")
    public String userList(Model model){
        List<User> users = userService.userList();
        model.addAttribute("users",users);
        return "userList";
    }

    @RequestMapping("/insert")
    public String save(User user){
        userService.save(user);
        System.out.println("Added user:" + user);
        return "redirect:/userList";
    }

    @GetMapping("/delete/{id}")
    public String delete(@PathVariable Integer id){
        userService.delete(id);
        return "redirect:/userList";
    }

    @GetMapping("/updatePage/{id}")
    public String updatePage(Model model,@PathVariable int id){
        User user = userService.findUserById(id);
        model.addAttribute("user",user);
        return "updatePage";
    }

    @PostMapping("/update")
    public String updateUser(User user){
        userService.update(user);
        System.out.println("Modified user is:" + user.getUsername());
        return "redirect:/userList"; }}Copy the code

3. UserMapper interface

New UserMapper interface under java.com.example.demo.mapper package

package com.example.demo.mapper;

import com.example.demo.bean.User;
import org.springframework.stereotype.Repository;

import java.util.List;

@Repository
public interface UserMapper {

    User select(int id);

    List<User> userList(a);

    void save(User user);

    int delete(Integer id);

    User getById(int id);

    int update(User user);

}
Copy the code

4. UserService class

Under the java.com.example.demo.server bag new UserService class

package com.example.demo.server;

import com.example.demo.bean.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public User select(int id) {
        return userMapper.select(id);
    }

    public List<User> userList(a) {
        return userMapper.userList();
    }

    public void save(User user){
        userMapper.save(user);
    }

    public int delete(Integer id){
        return userMapper.delete(id);
    }

    public User findUserById(int id){
        return userMapper.getById(id);
    }

    public int update(User user){
        returnuserMapper.update(user); }}Copy the code

5. UserMapper.xml

After the interface is written, create the mapping file usermapper. XML in the resource. Mapping package

      
<! DOCTYPEmapper PUBLIC "- / / mybatis.org//DTD Mapper / 3.0 / EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper.UserMapper">

 		<! -- Query all users -->
    <select id="select" resultType="com.example.demo.bean.User">
        select * from db.user_t where id = #{id}
    </select>

  	
    <select id="userList" resultType="com.example.demo.bean.User">
        select * from db.user_t
    </select>
  
		<! Add user -->
    <insert id="save" parameterType="string">
        INSERT INTO db.user_t VALUES(null,#{username},#{password})
    </insert>

  	<! -- Delete user -->
    <delete id="delete" parameterType="int">
        delete from db.user_t where id = #{id}
    </delete>

 		<! Select * from user by id;
    <select id="getById" resultType="com.example.demo.bean.User">
        select * from db.user_t where id = #{id}
    </select>

  	<! -- Change user information -->
    <update id="update" parameterType="user">
        update db.user_t set username=#{username},password=#{password} where id=#{id}
    </update>

</mapper>
Copy the code

6. application.yml

Create a new application.yml file under the Resources package. Be careful how yML is written. Url write their own database IP and port, username and password remember to change their own.

server:
  port: 8080

spring:
  datasource:
    url: JDBC: mysql: / / 127.0.0.0 / db? useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root
    password: 12345

  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    content-type: text/html
    cache: false
  web:
    resources:
      static-locations: classpath:static/

mybatis:
  mapper-locations: classpath:mapping/*.xml
  type-aliases-package: com.example.demo.bean

logging:
  level:
    com:
      example:
        demo:
          mapper : debug
Copy the code

4.2 Front-end Code

Create an HTML file under Resources.templates

1. insertPage.html

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Add user</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>

<body>

    <div style="width:800px; height:100%; margin-left:270px;">
        <form action="/insert" method="post">User name:<input class="form-control" type="text" th:value="${username}" name="username"><br>Password:<input class="form-control" type="text" th:value="${password}" name="password"><br>
            <button class="btn btn-primary btn-lg btn-block">save</button>
        </form>
    </div>

</body>
</html>
Copy the code

2. updatePage.html

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Modify the user</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>
<body>

    <div style="width:800px; height:100%; margin-left:270px;">
        <form action="/update" method="post">ID:<input class="form-control" name="id" type="text" th:value="${user.id}" readonly="readonly"><br>User name:<input class="form-control" type="text" th:value="${user.username}" name="username"><br>The secret code:<input class="form-control" type="text" th:value="${user.password}" name="password"><br>
            <button class="btn btn-primary btn-lg btn-block" type="submit">submit</button>
        </form>
    </div>

</body>
</html>
Copy the code

3. userList.html

<! DOCTYPEhtml>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>List of users</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>

<style>
    a {
        color:#fff;
    }
    th {
        text-align: center;
    }
</style>

<body>
    <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>operation</th>
            </tr>
        </thead>
        <tbody>
           <tr th:each="user:${users}">
               <! --/*@thymesVar id="id" type="com.example.demo.bean.User"*/-->
               <td th:text="${user.id}"></td>
               <! --/*@thymesVar id="username" type="com.example.demo.bean.User"*/-->
               <td th:text="${user.username}"></td>
               <! --/*@thymesVar id="password" type="com.example.demo.bean.User"*/-->
               <td th:text="${user.password}"></td>
               <td>
                   <a class="btn btn-primary" th:href="@{'/updatePage/'+${user.id}}">To change the</a>
                   <a class="btn btn-danger" th:href="@{'/delete/'+${user.id}}">delete</a>
               </td>
           </tr>
        </tbody>
    </table>
    <button class="btn btn-primary form-control" style="height:50px"><a th:href="@{'/insertPage'}">Add user</a></button>
</body>
</html>
Copy the code

4. The static bag

The CSS in the static package is Bootstrap V3.3.7. Js is jQuery V2.1.4. Please download it yourself.

Five, the effect of

http://localhost:8080/userList

http://localhost:8080/insertPage

http://localhost:8080/updatePage/1