當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/20 编程问答 32 豆豆

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

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

一、git版本控制

1.1 創建github倉庫,進行版本控制

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

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

idea 如何優雅的添加.ignore 忽略不必要提交的文件

1.3 GIT免密提交

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

二、PowerDesinger

2.1 PD介紹

PD可以以圖形化的形式展現數據庫中表與表之間的關聯關系 , 并且能夠自動的生存建庫建表的語句 , 以及可以非常靈活的切換數據庫

2.2 安裝

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

2.3 查看表設計模型

打開 PhysicalDataModel.pdm 文件

三、前端UI框架采用EasyUI

EasyUI官網 : http://www.jeasyui.net/

bootstrap官網 : https://www.bootcss.com/

Layui官網 : https://www.layui.com/ 當前比較流行的,收費

3.1 EasyUI介紹

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

(2) 為創建現代化，互動，JavaScript應用程序，提供必要的功能

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

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

(5) 節省您網頁開發的時間和規模

(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 實現通用頁面跳轉

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

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

3.5 EasyUI表格數據展現

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

3.5.1 編輯VO對象

封裝數據為JSON通過ajax展示到EasyUI表格中

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

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

4.1 商品表設計

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

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 '默認值為1，可選值：1正常，2下架，3刪除',created datetime,updated datetime comment '列表排序時按修改時間排序，所以在新增時需要設置此值。',primary key (id) );

4.2 編輯POJO-Item

根據商品表的設計,創建封裝商品信息的對象

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

4.3 商品列表展示

4.3.1 商品展現頁面分析

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

4.3.2 頁面url分析

得知url為/item/query
參數為 page 和 rows

4.3.3 編輯ItemController

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

@RestController //保證返回值數據都是JSON時使用 @RequestMapping("/item") public class ItemController {@Autowiredprivate ItemService itemService;/*** 根據條件查詢數據信息.* 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方式實現分頁
在ItemService和 ItemServiceImpl添加 findItemByPage方法
1.查詢商品總記錄數
2.進行分頁查詢
select * from tb_item order by desc updated limit (page-1)*rows,rows
mybatis-plus分頁說明
1.new Page<>(current, size);
2.current:當前頁數 ; size: 每頁條數

@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");//當前查詢的分頁結果對象IPage<Item> IPage = itemMapper.selectPage(tempPage, queryWrapper);//獲取總記錄數int total = (int) IPage.getTotal();//獲取分頁的結果List<Item> userList = IPage.getRecords();return new EasyUITable(total, userList);} }

4.3.5 編輯Mapper接口

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

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 實現商品分類目錄回顯

4.4.1 格式化價格

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

格式化價格 value 是數據庫數據

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

4.4.2 格式化時間

item-list頁面

格式化時間按照我們需要的格式 : 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, //表示同步默認的是異步的truedataType:"text",//表示返回值參數類型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
根據itemCatId查詢商品分類名稱 http://localhost:8091/item/cat/queryItemName?itemCatId=560

先根據id查詢對象

將對象中的name名稱獲取

@RestController @RequestMapping("/item/cat") public class ItemCatController {@Autowiredprivate ItemCatService itemCatService;@RequestMapping("/queryItemName")public String findItemCatNameById(Long itemCatId) {//1.先根據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嵌套問題
當ajax進行嵌套時,一般將內部的ajax的請求方式設置為同步,
默認為異步

頁面效果展現

隨手筆記

1 RESTful 說明

RESTful : Representational State Transfer 傳送門

1.1 什么RESTful架構 ?

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

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

(3) 客戶端通過四個HTTP動詞，對服務器端資源進行操作，實現"表現層狀態轉化"

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

1.2 SpringBoot 中使用 RESTful

1.4 RESTful 實現通用頁面跳轉

@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(管理員權限) : net start mysql

MySQL5.6（ZIP）解壓版安裝

4. vo對象

VO :(value object) 值對象

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

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

VO對象和PO對象的區別

5. Lombok 注解 @Accessors

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

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

chain的中文含義是鏈式的，設置為true，則setter方法返回當前對象。

6. @Param

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

7. Json

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

(1) Object 格式

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

(2) Array 格式

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

(3) 復雜格式

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

8. sql查詢排序

order by

默認為升序 asc

設置為降序 desc

@configuration 標注當前類為配置類 (替代xml)

9. 計算器、畫圖 cmd指令

calc 計算器 , mspaint 畫圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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