07 springboot + mybatis + spring technology integration to realize crud operation of commodity brand module

Business description

There is a commodity subsystem in any e-commerce system , And there will be a brand information management associated with the product , In the current business system design, we are to design and implement the management of brand information .
In the brand (Brand) Information management is to achieve the addition of brand information , modify , Inquire about , Delete, etc , As shown in the figure :

Basic business prototype design

Based on the brand business description , Prototype and business module analysis , As shown in the figure :

Brand list page

Brand edit page

Project technical architecture analysis and Design

In the brand management module implementation process , We use the typical C/S Architecture for implementation . The client is implemented based on browser , Server using tomcat, Database usage MySQL. The specific application layer is based on MVC Layered architecture for implementation .

Project technology stack application analysis and selection

Client technology :html,css,javascript,bootstrap
Server technology :hikaricp,mybatis,spring,springboot,thymeleaf
Database technology :mysql,sql
Development toolset :jdk1.8,maven3.6.3,idea2020.2
Project brand module core API Analysis and design

Based on the layered architecture design idea , Now the brand API Design , As shown in the figure ：

Analysis and design of database and table

Design and create a database

If the database already exists , Delete the database first , The code is as follows :

drop database if exists dbbrand;

create new database , The code is as follows :

create database dbbrand default character set utf8;

Design and create a brand (Brand) surface

Open database , The statement is as follows ：

use dbbrand;

stay dbbrand Create brand table in database .

create table tb_brand(
id bigint primary key auto_increment,
name varchar(100) not null,
remark text,
createdTime datetime not null
)engine=InnoDB;

be based on SQL Script performs database initialization

Write the database design script to brand.sql in , Then follow the steps below :

open mysql It comes with its own client , Sign in mysql, The instructions are as follows ：

mysql -uroot -proot

Set client code , The instructions are as follows ：

set names utf8;

perform sql Script , The instructions are as follows ：

source d:/brand.sql

After the script is successfully executed , Before the client queries the data , First execute the following statement ：

set names gbk;

Project environment initialization

Prepare to operate

1)JDK 1.8
2)Maven 3.6.3
3)IDEA 2020.2
4)MySQL 5.7+

Create project Module

open idea, And then based on design , Create project module, As shown in the figure ：

Add the project Module rely on

MySQL drive

<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>

Srping Jdbc Provides HikariCP Connection pool

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>

MyBatis resources

<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>

Spring Web rely on ( Built in one tomcat service )

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

Thymeleaf rely on (html template engine )

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

project Module Basic configuration

Open the project Module The configuration file application.properties, And add the following :

#spring server
server.port=80
# spring datasource
spring.datasource.url=jdbc:mysql:///dbbrand?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root
# spring mybatis
mybatis.mapper-locations=classpath:/mapper/*/*.xml
# spring log
logging.level.com.cy=debug
#spring thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

Start the project for preliminary environmental test analysis

Port number occupied

Database connection error

Query and presentation of brand data

Business description

Search the brand information in the database , And then on the client side based on html Technology presents , As shown in the figure :

Query and presentation of brand data

Business description

Search the brand information in the database , And then on the client side based on html Technology presents , As shown in the figure :

Server brand query timing design

Based on the query request , Design access timing , As shown in the figure :

Domain object (POJO) Design and Implementation

Set up Brand object , Based on this object, encapsulate the brand information from the database , The code is as follows :

package com.cy.pj.brand.pojo;
import java.util.Date;
public class Brand {
private Integer id;
private String name;
private String remark;
private Date createdTime;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getRemark() {
return remark;
}
public void setRemark(String remark) {
this.remark = remark;
}
public Date getCreatedTime() {
return createdTime;
}
public void setCreatedTime(Date createdTime) {
this.createdTime = createdTime;
}
@Override
public String toString() {
return "Brand{" +
"id=" + id +
", name='" + name + ''' +
", remark='" + remark + ''' +
", createdTime=" + createdTime +
'}';
}
}

Data logic objects (DAO) Query method design and implementation

Designed to access Brand Data access objects and methods of data , The key steps are as follows :

First step : Definition BrandDao Interface , The code is as follows :

package com.cy.pj.brand.dao;
@Mapper
public interface BrandDao{
}

The second step : stay BrandDao Define the brand query method in , The code is as follows :

List<Brand> findBrands(String name);

The third step : Define based on query method SQL mapping .
stay resources Create... In the directory mapper/brand Catalog , And add... To the catalog BrandMapper.xml file , The key codes are as follows :

<?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.cy.pj.brand.dao.BrandDao">
<select id="findBrands" resultType="com.cy.pj.brand.pojo.Brand">
select id,name,remark,createdTime
from tb_brand
<if test="name!=null and name!=''">
where name like concat("%",#{name},"%")
</if>
</select>
</mapper>

among :concat by mysql String concatenation function provided in .

Step four : Unit test the query method of data layer , The code is as follows :

package com.cy.pj.brand.dao;
@SpringBootTests
public class BrandDaoTests{
@Autowired
private BrandDao brandDao;
@Test
void testFindBrands(){
List<Brand> list=brandDao.findBrands("TCL");
for(Brand b:list){
System.out.println(b);
}
}
}

Step five : During the test BUG analysis ?

BindingException, As shown in the figure :

ExecutorException, As shown in the figure :

Business logic objects (Service) Query method design and implementation

The business logic object is responsible for the specific business processing of the module , For example, parameter verification , Transaction control , Access control , Logging, etc .

First step : Define business interface

package com.cy.pj.brand.service;
public interface BrandService{
}

The second step : stay BrandService Add the brand query method to the interface

List<Brand> findBrands(String name);

The third step : Definition BrandService Interface implementation class BrandServiceImpl.

package com.cy.pj.brand.service.impl;
@Service
public class BrandServiceImpl implements BrandService{
private static final Logger log=
LoggerFactory.getLogger(BrandServiceImpl.class);
@Autowired
private BrandDao brandDao;
public List<Brand> findBrands(String name){
long t1=System.currentTimeMillis();
List<Brand> list=brandDao.findBrands(name);
long t2=System.currentTimeMillis();
log.info("findBrands->time->{}",(t2-t1));
return list;
}
}

The third step : Definition BrandService Unit test classes for interface methods , And business test analysis

package com.cy.pj.brand.service;
@SpringBootTest
public class BrandServiceTests{
@Autowired
private BrandService brandService;
@Test
void testFindBrands(){
List<Brand> list=brandService.findBrands();
for(Brand b:list){
System.out.println(b);
}
}
}

Step four : During the test Bug analysis

NoSuchBeanDefinition, As shown in the figure :

NullPointerException, As shown in the figure :

Control logic objects (Controller) Query method design and implementation

In the control logic object, it is mainly responsible for the request and response logic control , Such as request url mapping , Parameter mapping , Request mode , Encapsulation of result sets , analysis , Response design, etc .

First step : Definition Controller class

package com.cy.pj.brand.controller;
@Controller
public class BrandController{
@Autowired
private BrandService brandService;
}

The second step : stay Controller Add query processing method

@GetMapping(value={"/brand/doFindBrands/{name}","/brand/doFindBrands"})
public String doFindBrands(@PathVariable(required = false) String name, Model model){
List<Brand> list=brandService.findBrands(name);
model.addAttribute("list", list);
return "brand/brand";// first brand Directory , second brand by view name
}

among ,
1)@GetMapping When describing a method , This method can only handle Get request , Inside the annotation value Property can specify more than one url.
2)@PathVariable Used to describe method parameters , Values representing method parameters can come from url in {} Internal variable values ,required=false Indicates that the parameter can not pass a value .

Client brand list page design and implementation

In the project templates Create under directory brand Catalog and add brand.html page , The key code is as follows :

<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>createdTime</th>
</tr>
</thead>
<tbody>
<tr th:each="brand: ${list}">
<td th:text="${brand.id}">10</td>
<td th:text="${brand.name}">AAA</td>
<td th:text="${#dates.format(brand.createdTime, 'yyyy/MM/dd
HH:mm')}">2020/10/11</td>
</tr>
</tbody>
</table>

among :
1)${} by thymeleaf For medium EL expression , Used from the server side model Get data in
2)th:each by thymeleaf Defined custom label properties , For iterative data .
3)th:text by thymeleaf Defined custom label properties , Used to set text content .

Start the service for access testing and analyze the results

Start the service , Open the browser and input the specified url, Visit , Its data presentation process , As shown in the figure :

During start-up and operation Bug Analysis and solutions

Page element parsing exception , As shown in the figure :

Template page not found , As shown in the figure :

Brand module delete business analysis and implementation

Business description

On the brand list page , Click the delete button after the current line record , Record based on current line id Delete the brand , After deleting successfully , Refresh the page . As shown in the figure :

Business timing analysis and Design

The client sends a delete request to the server , The server-side processing sequence is as follows :

Data logic objects (DAO) Design and implementation of delete method in

Business based , stay BrandDao Add delete method to the interface , The code is as follows :

int deleteById(Integer id);

Based on the deletion method , Definition SQL mapping ( This time it is defined directly in the form of annotation ), The code is as follows :

@Delete("delete from tb_brand where id=#{id}")
int deleteById(Integer id);

stay BrandDaoTests Add unit test method to unit test class , Test the delete operation , The key codes are as follows

@Test
void testDeleteById(){
int rows=brandDao.deleteById(10);
System.out.println("rows="+rows);
}

Business logic objects (Service) Design and implementation of delete method in

In business logic object methods , Some of the business logic needed to handle the delete operation ( There is a parameter check later , Access control ,....).

First step : stay BrandService Add to interface , The business method of brand deletion , The code is as follows :

int deleteById(Integer id);

The second step : stay BrandServiceImpl Class to add the specific implementation of delete business , The code is as follows :

public int deleteById(Integer id){
//1. Parameter checking
//2. Execute delete business
int rows=brandDao.deleteById(id);
//3. Verify the result and return
return rows;
}

The third step : stay BrandServiceTests Add unit test method to class , Test its deletion service ?

@Test
void testDeleteById(){
int rows=brandService.deleteById(10);
System.out.println("row="+row);
}

Step four : During the test Bug analysis ?

Control logic objects (Controller) Design and implementation of delete method in

Define the method to handle the delete request in the control layer object , The specific code is as follows :

@GetMapping("/brand/doDeleteById/{id}")
public String doDeleteById(@PathVariable Integer id,Model model){
brandService.deleteById(id);
List<Brand> list=brandService.findBrands();
model.addAttribute("list",list);
return "brand/brand";
}

Client delete button event definition and processing

stay tbody Of tr Add a column , The code is as follows :

<td>
<button type="button" th:onclick="doDeleteById([[${brand.id}]])">delete</button>
</td>

Definition javascript function , Handle delete Events , The code is as follows :

function doDeleteById(id){
// Give tips
if(!confirm(" Are you sure to delete "))return;//confirm For the browser window Object function
// Execute delete business
location.href=`http://localhost/brand/doDeleteById/${id}ss`;
}

Brand module add business analysis and implementation

Business description

On the list page , Design add button , When you click the Add button , Jump to add page , Then add the data brand information on the page , Click on Save Button to submit the data to the server for saving .

Add timing analysis and Design

Data logic objects (Dao) Design and implementation of the method in

First step : stay BrandDao Add a method to save brand information in , The code is as follows :

int insertBrand(Brand brand);

The second step : stay BrandMapper Add the corresponding to the brand saving operation sql mapping , The code is as follows :

<insert id="insertBrand">
insert into tb_brand
(name,remark,createdTime)
values
(#{name},#{remark},now())
</insert>

Business logic objects (Service) Design and implementation of the method in

First step : stay BrandService The method used to store brand information is defined in the business interface , The code is as follows :

int saveBrand(Brand brand);

The second step : stay BrandServiceImpl The specific implementation of saving brand information is added in the business implementation class , The code is as follows :

public int saveBrand(Brand brand){
int rows=brandDao.insertBrand(brand);
return rows;
}

Control logic objects (Controller) Design and implementation of the method in

First step : stay BrandController Add a method to handle the request to add a page , The code is as follows :

@GetMapping("/brand/doAddUI")
public String doAddUI(){
return "brand/brand-add";
}

The second step : stay BrandController Add methods to handle adding brand information pages , The code is as follows :

@PostMapping("/brand/doSaveBrand")
public String doSaveBrand(Brand brand,Model model){
System.out.println("save.brand="+brand);
brandService.saveBrand(brand);
List<Brand> list=brandService.findBrands(null);
model.addAttribute("list",list);
return "brand/brand";
}

Brand add operation client business analysis 、 Design and Implementation .

First step : Design brand add page brand-add.html, The code is as follows

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>The Brand Add Page</h1>
<form th:action="@{/brand/doSaveBrand}" method="post">
<div class="form-group">
<label for="nameId">Name</label>
<input type="text" class="form-control" name="name" id="nameId" placeholder="Brand Name">
</div>
<div class="form-group">
<label for="remarkId">Remark</label>
<textarea class="form-control" rows="5" cols="100" name="remark" id="remarkId">
</textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

The second step : In the brand list brand.html page , Design add button , The code is as follows :

<button type="button" onclick="doAddUI()" class="btn btn-primary btn-sm">Add Brand</button>

The third step : When you click the Add button , Load brand add page , The event handling functions are as follows :

function doAddUI(){
location.href="/brand/doAddUI";
}

Start the service for access test analysis

During start-up and operation BUG analysis

The data submitted by the client to the server cannot be obtained ?

Brand module modification business analysis and implementation

Business description

On the brand list page , Click the Modify button of the current line , Based on id Query the current line record , And present the record on the edit page , As shown in the figure ：

Business timing analysis and Design

be based on id Query the brand information and present it on the page , The timing analysis is shown in the figure ：

On the brand edit page , Edit the data , Click on save Button to save the update , The timing is shown in the figure ：

Data logic objects (Dao) Design and implementation of the method in

stay BrandDao Based on id How to query brand information and SQL mapping , The code is as follows :

@Select("select * from tb_brand where id=#{id}")
Brand findById(Integer id);

stay BrandDao Based on id How to implement brand renewal and SQL mapping , The code is as follows :

 @Update("update tb_brand set name=#{name},remark=#{remark} where id=#{id}")
int updateBrand(Brand Brand);

Business logic objects (Service) Design and implementation of the method in

stay BrandService Based on id How to query and update brand information , The code is as follows :

Brand findById(Integer id);
int updateBrand(Brand brand);

stay BrandServiceImpl Based on id How to query and update brand information , The code is as follows :

 @Override
public Brand findById(Integer id) {
//.....
return brandDao.findById(id);
}

 @Override
public int updateBrand(Brand brand) {
return brandDao.updateBrand(brand);
}

Control logic objects (Controller) Design and implementation of the method in

stay BrandController Based on id How to query brand information , The code is as follows :

 @RequestMapping("/brand/doFindById/{id}")
public String doFindById(@PathVariable Integer id,Model model) {
Brand brand=brandService.findById(id);
model.addAttribute("brand",brand);
return "/brand/brand-update";
}

stay BrandController Add a way to update brand information , The code is as follows :

 @RequestMapping("/brand/doUpdateBrand")
public String doUpdateBrand(Brand brand,Model model) {
brandService.updateBrand(brand);
List<Brand> list=brandService.findBrands(null);
model.addAttribute("list",list);
return "brand/brand";
}

Design and implementation of client brand editing page

First step : Design brand modification page brand-update.html, The code is as follows

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>The Brand Update Page</h1>
<input type="hidden" name="id" th:value="${brand.id}">
<form th:action="@{/brand/doUpdateBrand}" method="post">
<div class="form-group">
<label for="nameId">Name</label>
<input type="text" class="form-control" name="name" id="nameId" th:value="${brand.name}" placeholder="Brand Name">
</div>
<div class="form-group">
<label for="remarkId">Remark</label>
<textarea class="form-control" rows="5" cols="100" name="remark" th:text="${brand.remark}" id="remarkId">
</textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

start-up Tomcat Service access test analysis

Start the service , First into the brand list page , Then click the Modify button as shown in the figure ：

here , Enter the brand edit page , As shown in the figure ：

On the brand edit page , After editing the data , Click on save Button , Perform an update operation .

During start-up and operation BUG analysis

405 abnormal

The data presented is incorrect

Page element parsing exception

summary (Summary)

This chapter , It's mainly based on what you've learned springboot,Hikaricp,MyBatis,Spring,Thymeleaf Technology , The product brand module has been realized . Focus on the basic design and implementation process .