Java生成二維碼的例項程式碼
1.1使用F12工具
1.2 頁面請求
1 <ul> 2 <li data-options="attributes:{'url':'/page/item-add'}">新增商品</li> 3 <li data-options="attributes:{'url':'/page/item-list'}">查詢商品</li> 4 <li data-options="attributes:{'url':'/page/item-param-list'}">規格引數</li> 5</ul>
1.3關於RestFul風格說明
問題：說說restful風格是怎麼使用的
用法1：可以動態的接收url中的引數，之後完成業務呼叫
用法2：通過不同的請求型別來標識不同的業務需求
用法1說明：
page/item-add
page/item-insert
利用一個請求方法，實現頁面通用跳轉
思路：只要能夠獲取url第二個引數就可以實現通用的頁面跳轉
- 引數與引數之間使用/分隔
- 引數使用{}形式包裹
- 定義引數使用特定的註解接收 @PathVariable
用法2說明：
可以利用請求的型別，制定業務功能
TYPE="GET" 查詢業務
TYPE="POST" 新增業務
TYPE="PUT" 更新業務
TYPE="DELETE" 刪除業務
1.4實現策略
1 @Controller 2 public class IndexController{ 3 //@RequestMapping(value="/page/{moduleName}" method=RequestMethod.GET) 4 @GetMapping("/page/{moduleName}") 5 public String itemAdd(@PathVariable String moduleName){ 6 //跳轉頁面 7return moduleName; 8 } 9 }
1.5EasyUI中表格資料展現
1.5.1 表格的入門案例
1 <table class="easyui-datagrid" id="itemList" title="商品列表" 2 data-options="singleSelect:false,collapsible:true,url:'/easy-query',method:'get'"> 3 <thead> 4 <tr> 5 <th data-options="field:'ck',checkbox:true"></th> 6 <th data-options="field:'id',width:60">商品ID</th> 7 <th data-options="field:'title',width:200">商品標題</th> 8 9 </tr> 10 </thead> 11 </table>
1.5.2 表格資料展現
核心知識點：如果需要展現UI框架中特定的格式，則返回的資料必須滿足其要求，框架才會自動的完成解析
1 { 2 "total":2001, 3 "rows":[ 4 {"code":"A","name":"果汁","price":"20"}, 5 {"code":"B","name":"漢堡","price":"30"}, 6 {"code":"C","name":"雞柳","price":"40"}, 7 {"code":"D","name":"可樂","price":"50"}, 8 {"code":"E","name":"薯條","price":"10"}, 9 {"code":"F","name":"麥旋風","price":"20"}, 10 {"code":"G","name":"套餐","price":"100"} 11 ] 12 }
1.6 關於JSON串說明
1.6.1 JSON介紹
JSON（javascript Object Notation）是一種輕量級的資料交換格式。易於人閱讀和編寫，同時也易於機器解析和生成
1.6.2 Object物件格式
物件是一個無序的，鍵值對集合，物件用{}包含，鍵值對之間使用逗號連線，名稱後面跟冒號。
例子：{"id":"1","name":"tomcat"}
1.6.3 陣列格式
資料是值（value）的有序集合。陣列使用【】包含，值之間使用逗號分隔
例子："['1','2','4']"
1.6.4 JSON巢狀格式
上述兩個格式的結合
例子：{"id":"1","name":"tomcat貓","hobby":["吃漢堡","喝果汁","玩遊戲","遊戲十連勝","看美女",{"身高":"172","腿長":"110","膚色":"白裡透紅"}]}
1.7 實現商品列表展現
可以根據JSON資料，來封裝VO物件
EasyUITable
1 @Data 2 @Accessors(chain = true) 3 @NoArgsConstructor 4 @AllArgsConstructor 5 // 當服務之間位元組陣列(物件)傳遞時,必須實現序列化介面. 6 // json的本質就是字串可以直接傳遞. 7 public class EasyUITable implements Serializable{ 8 private long total; 9 private List<Item> rows; 10 11 }
1.8 商品列表頁面分析
1 <table class="easyui-datagrid" id="itemList" title="商品列表" 2 data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar"> 3 <thead> 4 <tr> 5 <th data-options="field:'ck',checkbox:true"></th> 6 <th data-options="field:'id',width:60">商品ID</th> 7 <th data-options="field:'title',width:200">商品標題</th> 8 <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">商品類目</th> 9 <th data-options="field:'sellPoint',width:100">賣點</th> 10 <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th> 11 <th data-options="field:'num',width:70,align:'right'">庫存數量</th> 12 <th data-options="field:'barcode',width:100">條形碼</th> 13 <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th> 14 <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">建立日期</th> 15 <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th> 16 </tr> 17 </thead> 18 </table>
如圖：需要展示的資料有：
商品列表全部資訊，總數和分頁資料
1.9編輯ItemController
書寫步驟的流程：
在不用寫頁面的時候：url----->controller------>service------>serviceImpl------>mapper
在需要寫頁面的時候：mapper------>service------->controller------>js頁面
使用者發起Ajax請求，之後通過ItemController返回EasyUITable的JSON串
書寫一個功能業務時，需要確認幾個點
1.業務需求是什麼
2.url地址
3.請求引數
4.返回值結果型別
1 @RestController //返回值都是JSON資料 2 @RequestMapping("/item") 3 public class ItemController { 4 5 @Autowired 6 private ItemService itemService; 7 8 /** 9 * 業務需求:商品資訊的分頁查詢. 10 * url地址: http://localhost:8091/item/query?page=1&rows=50 11 * 請求引數: page 頁數 , rows 行數 12 * 返回值結果: EasyUITable 13 * 開發順序: mapper~~service~~~controller~~頁面 自下而上的開發 14 * 京淘開發順序: 分析頁面需求~~~~Controller~~~~Service~~~Mapper 自上而下的開發 15 * 16 * */ 17 @RequestMapping("/query") 18 public EasyUITable findItemByPage(Integer page,Integer rows){ 19 return itemService.findItemByPage(page,rows); 20 } 21
根據ItemController自動生成ItemService介面檔案
之後編寫ItemServiceImpl繼承ItemService，並編寫方法
SQL語句：
手寫分頁的查詢實現資料返回
select * from tb_item limit 起始位置，展現行數
查詢第一頁：20條
select * from tb_item limit 0,20
查詢第二頁：20條
select * from tb_item limit 20.20
查詢第三頁：20條
select * from tb_item limit 40.20
查詢第N頁：20條
select * from tb_item limit (n-1)*20,20
使用Mybatis實現分頁
1 @Service 2 public class ItemServiceImpl implements ItemService { 3 4 @Autowired(required=false) 5 private ItemMapper itemMapper; 6 @Override 7 public EasyUITable findItemByPage(Integer page, Integer rows) { 8 //獲取總記錄數 9 long total = itemMapper.selectCount(null); 10 //計算起始位置 11 int startIndex = (page-1)*rows; 12 List<Item> findItemByPage = itemMapper.findItemByPage(startIndex,rows);//mapper中的方法 13 return new EasyUITable(total,findItemByPage); 14 } 15 }
使用mybatis-plus機制實現分頁
1 @Service 2 public class ItemServiceImpl implements ItemService { 3 4 @Autowired 5 private ItemMapper itemMapper; 6 7 /** 8 * 在進行分頁查詢時,MP必須新增配置類 9 * 利用MP機制,實現商品查詢 10 * @param page 11 * @param rows 12 * @return 13 */ 14 @Override 15 public EasyUITable findItemByPage(Integer page, Integer rows) { 16 //查詢條件根據更新時間進行排序. 17 QueryWrapper<Item> queryWrapper = new QueryWrapper<>(); 18 queryWrapper.orderByDesc("updated"); 19 //當用戶將引數傳遞之後,MP會自己執行分頁操作後,將需要的資料進行封裝. 20 //定義分頁物件 21 IPage<Item> iPage = new Page<>(page,rows); 22 //根據分頁物件執行資料庫查詢,之後獲取其其他分頁資料. 23 iPage = itemMapper.selectPage(iPage,queryWrapper); 24 //獲取總記錄數 25 int total = (int)iPage.getTotal(); 26 //獲取分頁後的結果 27 List<Item> itemList = iPage.getRecords(); 28 //封裝返回值 返回 29 return new EasyUITable(total,itemList); 30 } 31 }
編輯配置類
1 //1.標識配置類 配置類一般與@Bean註解聯用!!! 2 @Configuration 3 public class MybatisPlusConfig { 4 5 //需要將物件交給容器管理Map集合 map<paginationInterceptor方法名,例項化之後的物件> 6 //Spring注入 1.按照型別注入 2.可以按照名字注入 7 @Bean 8 public PaginationInterceptor paginationInterceptor(){ 9 return new PaginationInterceptor(); 10 } 11 }
商品分類資訊回顯
資料格式問題
資料庫中的價格，價格欄位使用了Long型別，Long型別比Double型別更合適
使用Long型別之後，需要將之前的價格擴大100倍來儲存，之後顯示價格時在縮小100倍即可
同時tb_item表中cid商品類目使用外來鍵與
待補充.....