SpringBoot工程下商品子系统分析及实现

Posted 2021-09-23 六一

1.业务描述：
将数据库中的商品信息从数据库查询出来,然后进行删除、修 改、添加等操作。

2.技术架构设计:整体依旧基于“分而治之”的设计思想，采用MVC分层对业务进行技术实现。

3.基于特定架构下技术选型:
1)SpringBoot 管理依赖,提供基础配置,实现开箱即用
2)HikariCP 定义连接池
3)MyBatis 实现数据的持久操作
4)Spring IOC 实现资源整合
5)Spring Web 模块实现请求响应处理
6)Thymeleaf 基于此对象实现html模板解析

4.核心API(接口和类)的设计
1)pojo (Goods)
2)dao (GoodsDao,GoodsMapper.xml)
3)service(GoodsService,GoodsServiceImpl)
4)controller (GoodsController)

商品信息的查询并呈现:

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/)

第一步：定义商品pojo对象Goods，基于此对象封装商品数据。

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

第二步：定义GoodsDao接口及查询方法

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

第三步：定义GoodsMapper.xml文件并添加查询SQL映射

...
<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>

第四步：定义GoodsService接口及查询方法
定义GoodsService接口及查询方法

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

定义GoodsService接口实现类GoodsServiceImpl并重写相关方法

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

第五步：定义GoodsController类及处理查询请求的方法

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

---

查询客户端分析及实现
第一步：定义goods.html页面，用于呈现从服务端返回的数据

<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>

第二步：注册查询按钮click事件，基于此事件进行商品信息查询

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

商品子系统删除业务实现

业务分析
客户端点击删除按钮时,基于id删除数据中的商品信息

删除服务端实现
第一步:在GoodsDao中添加删除方法

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

第二步:在GoodsService接口及实现类中删除方法

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

第三步:在GoodsController中添加处理删除请求的方法

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

---

商品添加页面设计及呈现

业务分析
在商品列表页面上点击添加按钮时,进入商品添加页面.

添加服务端实现
在GoodsController中添加返回商品添加页面的方法

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

添加客户端设计实现
第一步:商品列表页面添加按钮事件及事件处理函数

<button onclick="doLoadGoodsAddUI()">添加商品</button>

function doLoadGoodsAddUI(){ location.href=`${rootUrl}/goods/doGoodsAddUI`; }

第三步:创建商品添加页面(goods-add.html),关键代码如下:

<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>

商品子系统添加业务实现

业务分析:
在页面上输入商品,输入完成,点击保存按钮将商品信息添加到数据库.

服务端设计实现
第一步:GoodsDao接口中添加保存商品信息的方法及映射

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

第二步: GoodsService接口及实现类中添加保存商品信息的方法

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

第三步:GoodsController中添加保存商品信息的方法

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

---

商品修改页面及数据呈现

业务分析
在商品列表页面点击修改按钮时,基于当前行记录的id,查询商品信息,并将商品信息呈现在页面上.

服务端设计及实现
第一步:GoodsDao接口中添加基于id执行查询的方法j及映射.

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

第二步:GoodsService接口及实现类中添加基于id执行查询的方法.

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

第三步:GoodsController类中添加处理基于商品id执行查询的方法

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

客户端设计及实现
第一步:在goods列表页面,添加更新按钮并注册点击事件.

<button th:onclick="doFindById([[${g.id}]])">update</button>

function doFindById(id){
location.href=`${rootUrl}/goods/doFindById/${id}`

第二步:创建goods-update.html页面并基于此页面呈现修改数据

<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>           

商品数据更新设计及实现

业务分析
在修改页面，点击修改按钮时将表单数据提交到服务端进行更新

服务端设计及实现
第一步：GoodsDao接口中添加修改方法及SQL映射

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

第二步：GoodsService接口及实现类添加商品更新方法

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

第三步：GoodsController中添加处理商品更新请求的方法

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

客户端设计及实现
点击update goods 按钮将表单数据提交到服务端。