Analysis and implementation of commodity subsystem under springboot project

Time:2021-9-15

1. Business description:
Query the commodity information in the database from the database, and then delete, modify, add and other operations.

2. Technical architecture design: the whole is still based on the design idea of “divide and rule”, and MVC is used to realize the business technology in layers.

3. Technology selection based on specific architecture:
1) Springboot management relies on to provide basic configuration and realize out of the box
2) Hikaricp defines the connection pool
3) Mybatis implements data persistence
4) Spring IOC realizes resource integration
5) The spring web module implements request response processing
6) Thymeleaf implements HTML template parsing based on this object

4. Design of core API (interface and class)
1)pojo (Goods)
2)dao (GoodsDao,GoodsMapper.xml)
3)service(GoodsService,GoodsServiceImpl)
4)controller (GoodsController)

Query and presentation of commodity information:

1)Goods (id,name,remark,createdTime)
2)GoodsDao (@Mapper):List findGoods();

3)GoodsMapper.xml(mapper/goods/GoodsMapper.xml)
4)GoodsService,GoodsServiceImpl (@Service)
5)GoodsController(@Controller): String doFindGoods(){return goods;}
6)goods.html (templates/modules/)

Step 1: define the commodity POJO object goods, and encapsulate the commodity data based on this object.

public class Goods {
    private Integer id;
    private String name;
    private String remark;
    private Date createdTime;

    @Override 
    public String toString() {
    return "Goods{" +
    "id=" + id +
    ", name='" + name + '\'' +
    ", remark='" + remark + '\'' +
    ", createdTime=" + 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; 
}
}

Step 2: define goodsdao interface and query method

package com.cy.pj.goods.dao;
@Mapper
public interface GoodsDao{
    List<Goods> findGoods(String name);
}

Step 3: define goodsmapper.xml file and add query SQL map

...
<mapper namespace="com.cy.pj.goods.dao.GoodsDao">
    <select id="findGoods" resultType="com.cy.pj.goods.pojo.Goods">
    select *
    from tb_goods
        <where>
             <if test="name!=null and name!=''">
                 name like concat ("%",#{name},"%")
             </if>
         </where> 
    </select>
</mapper>

Step 4: define goodsservice interface and query method
Define goodsservice interface and query method

package com.cy.pj.goods.service;
public interface GoodsService{
    List<Goods> findGoods(String name);
}

Define the goodsservice interface implementation class goodsserviceimpl and override the relevant methods

package com.cy.pj.goods.service.impl;
@Service
public class GoodsServiceImpl implements GoodsService{
    @Autowired
    private GoodsDao goodsDao;
    public List<Goods> findGoods(String name){
        return goodsDao.findGoods(name);
    }
  }

Step 5: define the goodscontroller class and the method of processing query requests

package com.cy.pj.goods.controller;
@Controller
@RequestMapping("/goods/")
public class GoodsController{
    @Autowired
    private GoodsService goodsService;

    @RequestMapping("doFindGoods")
    public String doFindGoods(String name,Model model){
    List<Goods> list=goodsService.findGoods(name);
    model.addAttribute("list",list);
    return "goods";
  }
}

Analysis and implementation of query client
Step 1: define the goods.html page to render the data returned from the server

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
            <th>operation</th>
        </tr>
    </thead>

    <tbody>
        <tr th:each="g:${list}">
            <td th:text="${g.id}">1</td>
            <td th:text="${g.name}">A</td>
            <td th:text="${g.remark}">A..</td>
            <td th:text="${#dates.format(g.createdTime, 'yyyy/MM/ddHH:mm')}">2020/12/30</td>
                <td><buttonth:onclick="doDeleteById([[${g.id}]])">delete</button>
                <button th:onclick="doFindById([[${g.id}]])">update</button>
            </td>
        </tr>
    </tbody>
</table>

Step 2: register the click event of the query button to query the commodity information based on this event

<form th:action="@{/goods/doFindGoods}" method="get">
    <input type="text" name="name">
    < input type = "submit" value = "query" >
</form>

Commodity subsystem deletion business implementation

Business analysis
When the client clicks the delete button, the product information in the data is deleted based on the ID

Delete server implementation
Step 1: add and delete methods in goodsdao

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

Step 2: delete the method in the goodsservice interface and implementation class

public int deleteById(Integer id){
    int rows=goodsDao.deleteById(id);
    return rows;

Step 3: add a method to handle the deletion request in goodscontroller

@RequestMapping("doDeleteById")
public String doDeleteById(Integer id,Model model){
    goodsService.deleteByreturn             
    "redirect:/goods/doFindGoods";Id(id);

Product addition page design and presentation

Business analysis
Click the Add button on the product list page to enter the product addition page

Add server implementation
Add a method to return to the product addition page in goodscontroller

@GetMapping("doGoodsAddUI")
public String doGoodsAddUI(){
    return "goods-add";

Add client design implementation
Step 1: Add button events and event handling functions on the product list page

< button onclick = "doloadgoodsaddui()" > add product < / button >
function doLoadGoodsAddUI(){ location.href=`${rootUrl}/goods/doGoodsAddUI`; }

Step 3: create a goods add page (goods-add. HTML). The key codes are as follows:

<form th:action="@{/goods/doSaveGoods}" method="post">
    <ul>
        <li>name</li> 
        <li><input type="text" name="name"></li> 
        <li>remark</li> 
        <li><textarea rows="5" cols="50" name="remark"></textarea></li> 
        <li><input type="submit" value="Save Goods"></li>
    </ul>
</form>

Add business implementation of commodity subsystem

Business analysis:
Enter the commodity on the page, and click Save to add the commodity information to the database

Design and implementation of server
Step 1: add the method and mapping to save the commodity information in the goodsdao interface

@Insert("insert into tb_goods (name,remark,createdTime) values (#{name},# {remark},now())")
int insertGoods(Goods goods);

Step 2: add a method to save the commodity information in the goodsservice interface and implementation class

public int saveGoods(Goods goods){
    return goodsDao.insertGoods(goods);
}    

Step 3: add a method to save commodity information in goodscontroller

@PostMapping("doSaveGoods")
pulbic String doSaveGoods(Goods goods,Model model){
    goodsService.saveGoods(goods);
    return "redirect:/goods/doFindGoods";
}

Product modification page and data presentation

Business analysis
Click the Modify button on the commodity list page to query the commodity information based on the ID of the current line record and present the commodity information on the page

Design and implementation of server
Step 1: add ID based query method J and mapping in goodsdao interface

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

Step 2: add ID based query method to goodsservice interface and implementation class

public Goods findById(Integer id){
    //......
    return goodsDao.findById(id);
}

Step 3: add a method to the goodscontroller class to process the query based on the commodity ID

@GetMapping("/doFindById/{id}")
public String doFindById(@PathVariable Integer id,Model model){
    Goods goods=goodsService.findById(id);
    model.addAttribute("goods",goods);
    return "goods-update";  

Client design and Implementation
Step 1: on the goods list page, add the update button and register the click event

<button th:onclick="doFindById([[${g.id}]])">update</button>
function doFindById(id){
location.href=`${rootUrl}/goods/doFindById/${id}`

Step 2: create the goods-update.html page and render the modified data based on this page

<form th:action="@{/goods/doUpdateGoods}" method="post">
    <ul>
        <li><input type="hidden" name="id" th:value="${goods.id}"></li>
        <li>name</li>
        <li><input type="text" name="name" th:value="${goods.name}"></li>
        <li>remark</li>
        <li><textarea rows="5" cols="50" name="remark" th:text="${goods.remark}"></textarea></li>
        <li><input type="submit" value="Update Goods"></li>
     </ul>
</form>           

Design and implementation of commodity data update

Business analysis
On the modify page, click the Modify button to submit the form data to the server for update

Design and implementation of server
Step 1: add and modify methods and SQL mapping in goodsdao interface

@Update("update tb_goods set name=#{name},remark=#{remark} where id=#{id}")
int updateGoods(Goods goods);

Step 2: add commodity update method to goodsservice interface and implementation class

public int updateGoods(Goods goods){ 
    return goodsDao.updateGoods(goods); 
}

Step 3: add a method to handle the product update request in goodscontroller

@RequestMapping("doUpdateGoods")
public String doUpdateGoods(Goods goods,Model model){ 
    goodsService.updateGoods(goods); 
    return "redirect:/goods/doFindGoods"; 
}

Client design and Implementation
Click the update goods button to submit the form data to the server.