01-商品查詢業務邏輯的實現

時間 2021-06-20

標籤 javascript css html 前端 java jquery 程序員 ajax spring sql 欄目 JavaScript 简体版

原文原文鏈接

這是一個表格，將來展示數據一行一行的標識。
javascript

UI框架-表格數據展示說明

核心：JS中須要什麼數據，後端程序員就封裝什麼數據！！css

入門Demo-EasyUI表格的定義

大體瀏覽瀏覽。html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI-3-菜單按鈕</title>
<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" />
<script type="text/javascript">
   /*經過js建立表格 */ $(function(){
      $("#table3").datagrid({
         /*定義工具欄 */ toolbar: [{       
              iconCls: 'icon-edit',       
              handler: function(){alert("點擊工具欄")}      
              },'-',{         
              iconCls: 'icon-help',       
              handler: function(){alert('幫助工具欄')}      
              },'-',{
                 iconCls: 'icon-save',
                 handler: function(){alert('保存工具欄')}
              }],  
         columns:[[
         {field:'itemIds',checkbox:true},
         {field:'itemId',title:'商品Id',width:100}, 
         {field:'itemName',title:'商品名稱',width:100}, 
         {field:'itemDesc',title:'商品描述',width:100,align:'right'} 
         ]],
         fitColumns:true,        //自動適應
 url:"datagrid_item.json", //請求數據的地址
 method:"get",          //提交方式
 striped:true,          //有條紋的行
 nowrap:true,           //提升加載性能
 loadMsg:"正在加載",         //加載數據時打印
 pagination:true,        //分頁加載
 rownumbers:true,        //顯示行號
 //singleSelect:true,         //只容許選中一行數據
 })
   })
</script>
</head>
   <body>
      <h1>Easy-表格數據1</h1>
      <div>
         <table class="easyui-datagrid" style="width:400px;height:250px">
            <thead> 
               <tr> 
                  <th data-options="field:'code'">Code</th> 
                  <th data-options="field:'name'">Name</th> 
                  <th data-options="field:'price'">Price</th> 
               </tr> 
            </thead> 
            <tbody> 
               <tr> 
                  <td>001</td>
                  <td>name1</td>
                  <td>2323</td> 
               </tr> 
            
               <tr> 
                  <td>002</td>
                  <td>name2</td>
                  <td>4612</td> 
               </tr>
               
               <tr> 
                  <td>003</td>
                  <td>name3</td>
                  <td>4612</td> 
               </tr>  
            </tbody> 
         </table>
      </div>
      <hr/>
      <h1>經過數據請求建立表格</h1>
      <div>
         看到URL:屬性 在背後解析時就是一個AJAX $.GET(XXXX)
         定義表格，而且經過url訪問json數據， fitColumns:true表示自動適應，singleSelect:true 表示選中單個
 <table class="easyui-datagrid" style="width:500px;height:300px"
 data-options="url:'datagrid_data.json',method:'get',
 fitColumns:true,singleSelect:false,pagination:true">
            <thead> 
               <tr> 
                  <th data-options="field:'code',width:100">Code</th> 
                  <th data-options="field:'name',width:100">Name</th> 
                  <th data-options="field:'price',width:100,align:'right'">Price</th>
               </tr> 
            </thead> 
         </table> 
      </div>
      <hr/>
      <h1>經過js建立表格</h1>
      <table id="table3" style="width:700px">
         
      </table>
   </body>
</html>

主要代碼部分截圖：
前端

fitColumns 自適應
singleSelect 單選
pagination 分頁
java

分頁效果
jquery

表格最重要的就是表格的屬性 url:'datagrid_data.json
看到url屬性的時候，在背後解析時就是一個ajax請求
程序員

常見縮寫介紹

1.pojo: 與數據庫映射的實體類對象
2.vo: 數據展示層的對象，主要與頁面js進行數據解析的交互媒介ajax

JSON結構的說明

什麼是json

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
http://www.json.org.cn/index.htmspring

json的特色

它使得人們很容易的進行閱讀和編寫。同時也方便了機器進行解析和生成。sql

json的結構

1.對象（object）是一個無序的「‘名稱/值’對」集合。一個對象以「{」（左括號）開始，「}」（右括號）結束。每一個「名稱」後跟一個「:」（冒號）；「‘名稱/值’ 對」之間使用「,」（逗號）分隔。

eg:{"id":"100","name":"TomCat"}

2.數組（array）是值（value）的有序集合。一個數組以「[」（左中括號）開始，「]」（右中括號）結束。值之間使用「,」（逗號）分隔。

eg: ["學習","玩","睡覺"]

3.值（value）能夠是雙引號括起來的字符串（string）、數值(number)、true、false、 null、對象（object）或者數組（array）。這些結構能夠嵌套。

value能夠嵌套

嵌套格式
eg：["敲到嗎","打遊戲",[1,2,3,4,5],{"id":100,"name":"tomcat貓","hobby":["玩遊戲,","吃飯"]}]
查看json數據是否正確,訪問這個網站 http://json.cn/

datagrid_data.json數據展示

{
   "total":2000,
   "rows":[
      {"code":"A","name":"果汁","price":"20"},
      {"code":"B","name":"漢堡","price":"30"},
      {"code":"C","name":"雞柳","price":"40"},
      {"code":"D","name":"可樂","price":"50"},
      {"code":"E","name":"薯條","price":"10"},
      {"code":"F","name":"麥旋風","price":"20"},
      {"code":"G","name":"套餐","price":"100"}
   ]
}

數據回顯

建立一個vo取名EasyUITable

package com.jt.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.util.List;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
    private Long total;  //查詢的總記錄數
 private List rows;   //當前查詢分頁結果
}

分頁的兩種實現方式

方法1，經過sql語句來實現

/*
SELECT * FROM tb_item LIMIT 0, 20   /*第一頁 0-19SELECT * FROM tb_item LIMIT 20,20   /*第二頁 20-39SELECT * FROM tb_item LIMIT 40,20   /*第三頁 40-59SELECT * FROM tb_item LIMIT (page-1)*ROWS,ROWS  40-59*/
/**
 * 1.後端查詢數據庫記錄
 * 2.將後端數據經過業務調用轉化爲VO對象
 * 3.前端經過VO對象的JSON進行數據的解析
 * z在嗎
 *執行的sql:
 *     select * from tb_item  order by updated  desc LIMIT 0, 20 * @param page
 * @param rows
 * @return
 */
 
@Override
public EasyUITable findItemByPage(int page, int rows) {
 //1.total 獲取數據庫總記錄數
 long total = itemMapper.selectCount(null); //2.rows 商品分頁查詢的結果
 int startNum = (page-1)*rows; List<Item> itemList = itemMapper.findItemByPage(startNum,rows); //3.將返回值結果封裝
 return new EasyUITable(total,itemList);}

ItemMapper裏面代碼的實現

public interface ItemMapper extends BaseMapper<Item>{
    //注意事項: 之後寫sql語句時 字段名稱/表名注意大小寫問題.
 @Select("SELECT * FROM tb_item  ORDER BY updated  DESC LIMIT #{startNum}, #{rows}")
    List<Item> findItemByPage(int startNum, int rows);
}

方法2，經過MP的方式來實現

@Override
public EasyUITable findItemByPage(int page, int rows) {
   //1.須要使用MP的方式進行分頁
 IPage<Item> iPage = new Page<>(page,rows);  //分頁的方法
 QueryWrapper<Item> queryWrapper = new QueryWrapper<>();  //條件構造器
 queryWrapper.orderByDesc("updated");
   //MP經過分頁操做將分頁的相關數據統一封裝到IPage對象中
 iPage = itemMapper.selectPage(iPage,queryWrapper);
   return new EasyUITable(iPage.getTotal(),iPage.getRecords());
}

配置MybatisPlus 配置類

package com.jt.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration //標識配置類
public class MybatisPlusConfig {
    @Bean
 public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 設置請求的頁面大於最大頁後操做， true調回到首頁，false 繼續請求  默認false
 // paginationInterceptor.setOverflow(false); // 設置最大單頁限制數量，默認 500 條，-1 不受限制
 // paginationInterceptor.setLimit(500);
 // 開啓 count 的 join 優化,只針對部分 left join paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }
}

攔截器的原理實際上就是aop