當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

精灵商场项目(二)--Github+EasyUI+商品列表

發(fā)布時間：2023/12/20 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了精灵商场项目(二)--Github+EasyUI+商品列表小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、git版本控制
- 1.1 創(chuàng)建github倉庫,進行版本控制
- 1.2 idea添加.ignore忽略不必要提交的文件
- 1.3 GIT免密提交
二、PowerDesinger
- 2.1 PD介紹
- 2.2 安裝
- 2.3 查看表設(shè)計模型
三、前端UI框架采用EasyUI
- 3.1 EasyUI介紹
- 3.2 入門案例
- 3.3 RESTful 實現(xiàn)通用頁面跳轉(zhuǎn)
- 3.5 EasyUI表格數(shù)據(jù)展現(xiàn)
- - 3.5.1 編輯VO對象
四、精靈商場項目-商品列表展示
- 4.1 商品表設(shè)計
- 4.2 編輯POJO-Item
- 4.3 商品列表展示
- - 4.3.1 商品展現(xiàn)頁面分析
  - 4.3.2 頁面url分析
  - 4.3.3 編輯ItemController
  - 4.3.4 編輯ItemService
  - 4.3.5 編輯Mapper接口
  - 4.3.6 mybatis-plus分頁配置類
- 4.4 實現(xiàn)商品分類目錄回顯
- - 4.4.1 格式化價格
  - 4.4.2 格式化時間
  - 4.4.3 格式化葉子類目
隨手筆記
- 1 RESTful 說明
- - 1.1 什么RESTful架構(gòu) ?
  - 1.2 SpringBoot 中使用 RESTful
  - 1.4 RESTful 實現(xiàn)通用頁面跳轉(zhuǎn)
- 2. 列表li
- 3. @PathVariable使用以及REST
- 4. vo對象
- 5. Lombok 注解 @Accessors
- 6. @Param
- 7. Json
- 8. sql查詢排序
- 9. 計算器、畫圖 cmd指令

一、git版本控制

1.1 創(chuàng)建github倉庫,進行版本控制

GitHub地址 : https://github.com/q850717441/jl

1.2 idea添加.ignore忽略不必要提交的文件

idea 如何優(yōu)雅的添加.ignore 忽略不必要提交的文件

1.3 GIT免密提交

在項目所在位置打開git-bash，在git bash交互環(huán)境輸入命令：
git config credential.helper store
后續(xù)正常 push，第一次要輸入賬號密碼，以后就不用了

二、PowerDesinger

2.1 PD介紹

PD可以以圖形化的形式展現(xiàn)數(shù)據(jù)庫中表與表之間的關(guān)聯(lián)關(guān)系 , 并且能夠自動的生存建庫建表的語句 , 以及可以非常靈活的切換數(shù)據(jù)庫

2.2 安裝

安裝完成之后,將破解補丁中的文件復(fù)制.替換根目錄中的文件信息,就可以運行了

2.3 查看表設(shè)計模型

打開 PhysicalDataModel.pdm 文件

三、前端UI框架采用EasyUI

EasyUI官網(wǎng) : http://www.jeasyui.net/

bootstrap官網(wǎng) : https://www.bootcss.com/

Layui官網(wǎng) : https://www.layui.com/ 當(dāng)前比較流行的,收費

3.1 EasyUI介紹

(1) easyui是一種基于jQuery、Angular.、Vue和React的用戶界面插件集合

(2) 為創(chuàng)建現(xiàn)代化，互動，JavaScript應(yīng)用程序，提供必要的功能

(3) 不需要寫很多代碼，你只需要通過編寫一些簡單HTML標(biāo)記，就可以定義用戶界面

(4) 完美支持HTML5網(wǎng)頁的完整框架

(5) 節(jié)省您網(wǎng)頁開發(fā)的時間和規(guī)模

(6) 簡單且功能強大

3.2 入門案例

<script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>  <script type="text/javascript"src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>  <script type="text/javascript"src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>  <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/icon.css" /> <link rel="stylesheet" type="text/css"href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" /> <body><div class="easyui-draggable">拖動DIV</div> </body>

3.3 RESTful 實現(xiàn)通用頁面跳轉(zhuǎn)

實現(xiàn)通用頁面跳轉(zhuǎn)
特點:
(1)前綴相同
(2)訪問地址不同
(3)請求地址與跳轉(zhuǎn)的頁面相同的
方法: 參數(shù)使用/分割;參數(shù)使用{}包裹,并且設(shè)置變量名稱;使用@PathVariable注解動態(tài)獲取數(shù)據(jù)
注: 如果傳遞的參數(shù)數(shù)量眾多時,使用對象封裝

@Controller public class IndexController {@RequestMapping("/page/{moduleName}")public String item_add(@PathVariable String moduleName) {return moduleName;}

3.5 EasyUI表格數(shù)據(jù)展現(xiàn)

由于前段頁面接收的數(shù)據(jù)為JSON格式{"total":xxx,"rows":[{},{}}

3.5.1 編輯VO對象

封裝數(shù)據(jù)為JSON通過ajax展示到EasyUI表格中

@Data @Accessors(chain = true) @NoArgsConstructor @AllArgsConstructor public class EasyUITable implements Serializable{private Integer total;private List<?> rows; }

四、精靈商場項目-商品列表展示

4.1 商品表設(shè)計

來源于某東的商品頁面的信息

SQL語句

create table tb_item (id bigint(10) not null auto_increment comment '商品ID，也是商品編號',title varchar(100),sell_point varchar(150),price bigint(20) comment '單位為：分',num int(10),barcode varchar(30),image varchar(500) comment '最多5張圖片',cid bigint(10),status int(1) default 1 comment '默認(rèn)值為1，可選值：1正常，2下架，3刪除',created datetime,updated datetime comment '列表排序時按修改時間排序，所以在新增時需要設(shè)置此值。',primary key (id) );

4.2 編輯POJO-Item

根據(jù)商品表的設(shè)計,創(chuàng)建封裝商品信息的對象

@JsonIgnoreProperties(ignoreUnknown = true) //表示JSON轉(zhuǎn)化時忽略未知屬性 @TableName("tb_item") @Data @Accessors(chain = true) public class Item extends BasePojo {@TableId(type = IdType.AUTO)private Long id; //商品idprivate String title; //商品標(biāo)題private String sellPoint; //商品賣點信息private Long price; //商品價格 Long > dubboprivate Integer num; //商品數(shù)量private String barcode; //條形碼private String image; //商品圖片信息 1.jpg,2.jpg,3.jpgprivate Long cid; //表示商品的分類idprivate Integer status; //1正常，2下架//為了滿足頁面調(diào)用需求,添加get方法public String[] getImages() {return image.split(",");} }

4.3 商品列表展示

4.3.1 商品展現(xiàn)頁面分析

對item-list.jsp 分析了解到 url:'/item/query'

4.3.2 頁面url分析

得知url為/item/query
參數(shù)為 page 和 rows

4.3.3 編輯ItemController

在Controller編輯商品分頁查詢的映射方法 findItemByPage
調(diào)用service的findItemByPage方法,返回為EasyUITable對象類型的JSON格式數(shù)據(jù)

@RestController //保證返回值數(shù)據(jù)都是JSON時使用 @RequestMapping("/item") public class ItemController {@Autowiredprivate ItemService itemService;/*** 根據(jù)條件查詢數(shù)據(jù)信息.* url:http://localhost:8091/item/query?page=1&rows=20*/@RequestMapping("/query")public EasyUITable findItemByPage(Integer page, Integer rows) {return itemService.findItemByPage(page, rows);} }

4.3.4 編輯ItemService

Mybatis-plus方式實現(xiàn)分頁
在ItemService和 ItemServiceImpl添加 findItemByPage方法
1.查詢商品總記錄數(shù)
2.進行分頁查詢
select * from tb_item order by desc updated limit (page-1)*rows,rows
mybatis-plus分頁說明
1.new Page<>(current, size);
2.current:當(dāng)前頁數(shù) ; size: 每頁條數(shù)

@Service public class ItemServiceImpl implements ItemService {@Autowiredprivate ItemMapper itemMapper;@Overridepublic EasyUITable findItemByPage(Integer page, Integer rows) {Page<Item> tempPage = new Page<>(page, rows);QueryWrapper<Item> queryWrapper = new QueryWrapper<Item>();queryWrapper.orderByDesc("updated");//當(dāng)前查詢的分頁結(jié)果對象IPage<Item> IPage = itemMapper.selectPage(tempPage, queryWrapper);//獲取總記錄數(shù)int total = (int) IPage.getTotal();//獲取分頁的結(jié)果List<Item> userList = IPage.getRecords();return new EasyUITable(total, userList);} }

4.3.5 編輯Mapper接口

通過@select 注解來執(zhí)行sql查詢語句參數(shù)為start 初始化位置和 rows 數(shù)量

public interface ItemMapper extends BaseMapper<Item>{@Select("select * from tb_item order by updated desc limit #{start},#{rows}")List<Item> findItemByPage(@Param("start") Integer start, @Param("rows") Integer rows); }

4.3.6 mybatis-plus分頁配置類

定義MybatisConfig的配置類.在com.jt.config中
目的 : 加快分頁查詢的速度

@Configuration //配置類 public class MybatisConfig {@Bean //將對象交給Spring容器管理public PaginationInterceptor paginationInterceptor() {return new PaginationInterceptor();} }

4.4 實現(xiàn)商品分類目錄回顯

4.4.1 格式化價格

因為儲存的價格是Long 就是為了防止小數(shù)無限
在儲存的時候就放大了100倍,所以回顯的時候需要縮小100倍

格式化價格 value 是數(shù)據(jù)庫數(shù)據(jù)

formatPrice : function(val,row){return (val/100).toFixed(2); }

4.4.2 格式化時間

item-list頁面

<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">創(chuàng)建日期</th>

格式化時間按照我們需要的格式 : yyyy-MM-dd hh:mm:ss

formatDateTime : function(val,row){var now = new Date(val);return now.format("yyyy-MM-dd hh:mm:ss"); }

4.4.3 格式化葉子類目

頁面分析

編輯common.js

findItemCatName : function(val,row){var name;$.ajax({type:"get",url:"/item/cat/queryItemName",data:{itemCatId:val},cache:true, //緩存async:false, //表示同步默認(rèn)的是異步的truedataType:"text",//表示返回值參數(shù)類型success:function(data){name = data;}});return name; }

編輯ItemCat POJO對象

@TableName("tb_item_cat") @Data @Accessors(chain = true) public class ItemCat extends BasePojo{@TableId(type = IdType.AUTO)private Long id;private Long parentId;private String name;private Integer status;private Integer sortOrder; //排序號private Boolean isParent; //是否為父級 }

編輯ItemCatController
根據(jù)itemCatId查詢商品分類名稱 http://localhost:8091/item/cat/queryItemName?itemCatId=560

先根據(jù)id查詢對象

將對象中的name名稱獲取

@RestController @RequestMapping("/item/cat") public class ItemCatController {@Autowiredprivate ItemCatService itemCatService;@RequestMapping("/queryItemName")public String findItemCatNameById(Long itemCatId) {//1.先根據(jù)id查詢對象ItemCat itemCat = itemCatService.findItemCatById(itemCatId);//2.將對象中的name名稱獲取return itemCat.getName();} }

編輯ItemCatService

@Service public class ItemCatServiceImpl implements ItemCatService {@Autowiredprivate ItemCatMapper itemCatMapper;@Overridepublic ItemCat findItemCatById(Long itemCatId) {return itemCatMapper.selectById(itemCatId);} }

ajax嵌套問題
當(dāng)ajax進行嵌套時,一般將內(nèi)部的ajax的請求方式設(shè)置為同步,
默認(rèn)為異步

頁面效果展現(xiàn)

隨手筆記

1 RESTful 說明

RESTful : Representational State Transfer 傳送門

1.1 什么RESTful架構(gòu) ?

(1) 每一個URI代表一種資源

(2) 客戶端和服務(wù)器之間，傳遞這種資源的某種表現(xiàn)層

(3) 客戶端通過四個HTTP動詞，對服務(wù)器端資源進行操作，實現(xiàn)"表現(xiàn)層狀態(tài)轉(zhuǎn)化"

REST 就是將資源的狀態(tài)以適合客戶端或服務(wù)端的形式從服務(wù)端轉(zhuǎn)移到客戶端（或者反過來）。在 REST 中，資源通過 URL 進行識別和定位，然后通過行為(即 HTTP 方法)來定義 REST 來完成怎樣的功能。來自:我沒有三顆心臟

1.2 SpringBoot 中使用 RESTful

1.4 RESTful 實現(xiàn)通用頁面跳轉(zhuǎn)

@Controller public class IndexController {@RequestMapping("/{moduleName}")public String pageJumps(@PathVariable String moduleName) {return moduleName;}

2. 列表li

ul li 有序列表 ; ol li 無序列表

3. @PathVariable使用以及REST

@PathVariable是映射 URL 綁定的占位符傳送門

啟動mysql

cmd(管理員權(quán)限) : net start mysql

MySQL5.6（ZIP）解壓版安裝

4. vo對象

VO :(value object) 值對象

通常用于業(yè)務(wù)層之間的數(shù)據(jù)傳遞，和PO一樣也是僅僅包含數(shù)據(jù)而已。但應(yīng)是抽象出的業(yè)務(wù)對象,可以和表對應(yīng),也可以不,這根據(jù)業(yè)務(wù)的需要

而PO只能用在數(shù)據(jù)層，VO用在商業(yè)邏輯層和表示層。各層操作屬于該層自己的數(shù)據(jù)對象，這樣就可以降低各層之間的耦合，便于以后系統(tǒng)的維護和擴展。

VO對象和PO對象的區(qū)別

5. Lombok 注解 @Accessors

Accessor的中文含義是存取器，用于配置getter和setter方法的生成結(jié)果

有三種屬性 :fluent chain prefix 傳送門

chain的中文含義是鏈?zhǔn)降?#xff0c;設(shè)置為true，則setter方法返回當(dāng)前對象。

6. @Param

當(dāng)映射器方法需要多個參數(shù)時，這個注解可以應(yīng)用于映射器方法來給每個參數(shù)一個名字。否則，多參數(shù)將會以他們的順序位置來命名。比如#{1}、#{2}等，這是默認(rèn)的。若使用@Param(“person”),SQL中的參數(shù)應(yīng)該被命名為#{person}

7. Json

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式
易于人閱讀和編寫,以及機器解析和生成。

(1) Object 格式

對象是一個無序的“名稱/值對”集合,一個對象以{左括號開始,}右括號結(jié)束。每個"名稱"后跟一個:冒號;"名稱/值"對之間使用逗號分隔 {"id":"100","name":"tomcat貓"}

(2) Array 格式

數(shù)組是值( value)的有序集合。一個數(shù)組以[左中括號開始,]右中括號結(jié)束。值
之間使用,逗號分隔。["value1","value2","value3"]

(3) 復(fù)雜格式

json串可以進行無限層級的嵌套. 但是只有value可以嵌套
["value1",true,["value3",{"key":"value"}]]

8. sql查詢排序

order by

默認(rèn)為升序 asc

設(shè)置為降序 desc

@configuration 標(biāo)注當(dāng)前類為配置類 (替代xml)

9. 計算器、畫圖 cmd指令

calc 計算器 , mspaint 畫圖

總結(jié)

以上是生活随笔為你收集整理的精灵商场项目(二)--Github+EasyUI+商品列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：亚马逊（脚本）自动化软件开发案例过程
下一篇：修改地址图标