当前位置:网站首页>First experience of simple project

First experience of simple project

2021-01-24 11:53:12 qintian

Demand analysis

There is a commodity subsystem in any e-commerce system , And there will be a brand information management subsystem associated with commodities , In the current design, we just want to manage the brand information .

Business structure

In the brand (brand) Management is to achieve the addition of commodity brand information 、 modify 、 Inquire about 、 Delete, etc , As shown in the figure :
image.png

Prototype design

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

  • Brand list page

image.png

  • Brand edit page

image.png

Technology Architecture

In the process of brand management module implementation , We use the typical c/s(client/service) Architecture for implementation . The client is based on the browser (web) To implement , Server using Tomcat, Database usage mysql, The specific application layer is based on MVC Layered architecture for implementation .

Technology stack selection

Client technology :html、css、JavaScript、bootstrap( frame )
Server technology :spring、mybatis、springboot、thymeleaf
Database technology :MySQL( database )、SQL( programing language )
Development toolset :jdk1.8,maven3.6.3,idea2020.2

Project environment initialization

1)JDK 1.8
2)Maven 3.6.3
3)Idea 2020.2
4)MySQL 5.7 Above version

Initialize 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

drop database if exists dbbrand;
create database dbbrand default character set utf8;
use dbbrand;
create table tb_brand(
     id bigint primary key auto_increment,
     name varchar(100) not null,
     remark text,
     createdTime datetime not null
)engine=InnoDB;

image.png
Write the above 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;

image.png

establish springboot project Module

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

image.png

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

image.png

  • Database connection error

image.png

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 :
image.png

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 :
image.png

Server timing access design

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

image.png

explain :
1. Client first through url Send a request to Tomcat The server , Again by Tomcat Call the front controller dispatcherServlet;
2. The front-end controller distributes the received requests to the processor mapper (HandlerMapping), The processor mapper then uses xml To configure 、 The annotation finds the final (Handler), Then the processor object and the processor interceptor are generated ( Generate if any ) Return to DispatcherServlet;
3.DispatcherServlet call HandlerAdapter Processor adapter ,HandlerAdapter Call the specific processor through adaptation (Controller, Also called back end controller ). Controller Execution complete return ModelAndView,HandlerAdapter take controller Execution results ModelAndView Return to DispatcherServlet;
4.DispatcherServlet take ModelAndView Pass to ViewReslover view resolver , After view parser parsing , Add the prefix 、 suffix , ViewReslover Return details after parsing View;
5.DispatcherServlet according to View Render view ( Fill model data into view ),DispatcherServlet Responding to users .

Add :
image.png

Domain object (POJO) Object design and implementation

The so-called domain object , It's the data layer 、 The business layer 、 Control layer and other fields may need to use POJO This object , So it's called “ Domain object ”!

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 :

image.png

  • ExecutorException, As shown in the figure :

image.png

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 :

image.png

  • NullPointerException, As shown in the figure :

image.png

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 :
image.png

During start-up and operation Bug Analysis and solutions

  • Page element parsing exception , As shown in the figure :

image.png

  • Template page not found , As shown in the figure :

image.png

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 :

image.png

Business timing analysis and Design

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

image.png

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}`;
}

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 .

image.png

image.png

Add timing analysis and Design

image.png

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

image.png

image.png

During start-up and operation BUG analysis

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

image.png

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 :

image.png

image.png

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 :

image.png

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

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>
       <form th:action="@{/brand/doUpdateBrand}" method="post">
         <input type="hidden" name="id"  th:value="${brand.id}">
           <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 :
image.png
here , Enter the brand edit page , As shown in the figure :
image.png
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

image.png

  • The data presented is incorrect

image.png

  • Page element parsing exception

image.png

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 .

版权声明
本文为[qintian]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/01/20210124115156678k.html

随机推荐