簡易實現商品開發

業務描述

需求分析

大概描述了開發這個項目的目的、市場需求、和預期達到的一個目的javascript

業務架構分析

業務架構分析就是對項目功能的分析,此項目實現的功能是增刪改查,{RD01J0S61K\(QR0FU}28H3R.pngcss

業務基本原型設計

基於品牌業務描述,對品牌模塊的業務原型進行分析和設計html

項目技術架構分析及設計

在品牌管理模塊實現過程,咱們採用典型的C/S架構進行實現.客戶端咱們基於瀏覽器進行實現,服務端採用tomcat,數據庫使用MySQL.具體應用層基於MVC分層架構進行實現.java

項目技術棧應用分析及選型

  • 客戶端技術:html,css,javascript,bootstrap
  • 服務端技術:hikaricp,mybatis,spring,springboot,thymeleaf
  • 數據庫技術:mysql,sql
  • 開發工具集:jdk1.8,maven3.6.3,idea2020.2
  • 項目品牌模塊核心API分析與設計

    基於分層架構設計思想,現對品牌API進行設計mysql

image.png

數據庫的準備

庫的建立和表的創建web

注意點

編碼方式,若是利用的腳本的形式,須要加上set names gbk在查看,不然會出現亂碼,執行基本語句:`source d:/brand.sqlspring

項目所需依賴

  • MySQL 驅動
<dependency>
   <groupId>mysql</groupId>
   <artifactId>mysql-connector-java</artifactId>
   <scope>runtime</scope>
</dependency>
  • Srping Jdbc 提供了HikariCP鏈接池
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
  • MyBatis 資源
<dependency>
   <groupId>org.mybatis.spring.boot</groupId>
   <artifactId>mybatis-spring-boot-starter</artifactId>
   <version>2.1.3</version>
</dependency>
  • Spring Web 依賴 (內置一個tomcat服務)
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>
  • Thymeleaf 依賴 (html模板引擎)
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

健康管理依賴sql

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

熱部署數據庫

<dependency>            <groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
</dependency>

項目配置文件

#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

功能模塊

查詢

業務描述

時序設計

TPNS$O\)\)JCZOX7MLO2C@9IU.png

領域對象設計及實現POJO

private Integer id;
    private String name;
    private String remark;
    private Date createdTime;
注意點

屬性設計須要和數據庫裏的屬性設計名稱同樣bootstrap

數據邏輯對象(DAO)查詢方法設計及實現

第一步:定義BrandDao接口,代碼以下:

第二步:在BrandDao中定義品牌查詢方法,代碼以下:

第三步:基於查詢方法定義SQL映射.

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

注意點

映射文件的命名須要和配置裏設置的同樣

業務邏輯對象(Service)查詢方法設計及實現

業務邏輯對象負責模塊的具體業務處理,例如參數校驗,事務控制,權限控制,日誌記錄等.

第一步:定義業務接口

第二步:在BrandService接口中添加品牌查詢方法

第三步:定義BrandService接口實現類BrandServiceImpl.

第四步:定義BrandService接口方法的單元測試類,並業務進行測試分析

控制邏輯對象(Controller)查詢方法設計及實現

在控制邏輯對象中主要是負責請求和響應邏輯控制,例如請求url映射,參數映射,請求方式,結果集的封裝,解析,響應的設計等.

第一步:定義Controller類

第二步:在Controller添加處理查詢請求的方法

1)@GetMapping描述方法時,表示這個方法只能處理Get請求,註解內部的value屬性能夠指定多個url.
2)@PathVariable 用於描述方法參數,表示方法參數的值能夠來自url中{}內部的變量值,required=false表示參數能夠不傳值.

客戶端品牌列表頁面設計及實現

在項目的templates目錄下建立brand目錄並添加brand.html頁面,
1)${}爲thymeleaf爲中的EL表達式,用於從服務端model中獲取數據
2)th:each爲thymeleaf定義的自定義標籤屬性,用於迭代數據.
3)th:text爲thymeleaf定義的自定義標籤屬性,用於設置文本內容.

品牌模塊刪除業務分析及實現

業務描述

在品牌列表頁面中,點擊當前行記錄後面的刪除按鈕,基於當前行的記錄id執行品牌刪除操做

業務時序分析與設計

數據邏輯對象(DAO)中刪除方法設計及實現

基於業務,在BrandDao接口中添加刪除方法

基於刪除方法,定義SQL映射(本次直接以註解方式進行定義):

在BrandDaoTests單元測試類中添加單元測試方法,對刪除操做進行測試,

業務邏輯對象(Service)中刪除方法設計及實現

在業務邏輯對象方法中,要處理刪除操做須要的一些業務邏輯(後續有參數校驗,權限控制,....).

第一步:在BrandService接口中添加,品牌刪除的業務方法

第二步:在BrandServiceImpl類中添加刪除業務的具體實現

控制邏輯對象(Controller)中刪除方法設計及實現

在控制層對象中定義處理刪除請求的方法

客戶端刪除按鈕事件定義及處理

在tbody的tr中添加一列,

定義javascript函數,處理刪除事件

function doDeleteById(id){
    //給出提示信息
 if(!confirm("您確認刪除嗎"))return;//confirm爲瀏覽器中window對象的函數
 //執行刪除業務
 location.href=`http://localhost/brand/doDeleteById/${id}`;
}

品牌模塊添加業務分析及實現

業務描述

在列表頁面上,設計添加按鈕,當點擊添加按鈕時,跳轉到添加頁面,而後在添加頁面上數據品牌信息,點擊Save按鈕就數據提交到服務端進行保存.

添加時序分析及設計

image.png

數據邏輯對象(Dao)中方法設計及實現

第一步:在BrandDao中添加用於保存品牌信息的方法,代碼以下:

第二步:在BrandMapper中添加品牌保存操做對應的sql映射,代碼以下:

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

業務邏輯對象(Service)中方法設計及實現

第一步:在BrandService業務接口中中定義用於保存品牌信息的方法

第二步:在BrandServiceImpl業務實現類中添加保存品牌信息的具體實現

控制邏輯對象(Controller)中方法設計及實現

第一步:在BrandController中添加用於處理請求添加頁面的方法

第二步:在BrandController添加用於處理添加品牌信息頁面的方法

品牌添加操做客戶端業務分析、設計及實現.

第一步:設計品牌添加頁面brand-add.html,

第二步:在品牌列表brand.html頁面,設計添加按鈕

第三步:點擊添加按鈕時,加載品牌添加頁面,事件處理函數

品牌模塊修改業務分析及實現

業務描述

在品牌列表頁面,點擊當前行的修改按鈕,先基於id查詢當前行記錄,並將記錄呈如今編輯頁面,

業務時序分析與設計

基於id查詢品牌信息並呈如今頁面上,其時序分析如圖所示:

image.png

數據邏輯對象(Dao)中方法設計與實現

在BrandDao中添加基於id查詢品牌信息的方法及SQL映射,代碼以下:

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

在BrandDao中添加基於id執行品牌更新的方法及SQL映射,代碼以下:

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

業務邏輯對象(Service)中方法設計與實現

在BrandService 中添加基於id查詢品牌信息和更新品牌信息的方法,代碼以下:

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

在BrandServiceImpl中基於id查詢品牌信息和更新品牌信息的方法

控制邏輯對象(Controller)中方法設計與實現

在BrandController中添加基於id查詢品牌信息的方法
在BrandController中添加更新品牌信息的方法

客戶端品牌編輯頁面設計與實現

第一步:設計品牌修改頁面brand-update.html

啓動及運行過程當中的BUG分析

  • 405 異常

image.png

  • 呈現的數據不正確

image.png

  • 頁面元素解析異常

image.png

相關文章
相關標籤/搜索