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

发起ajax请求

返回值

页面解析数据