springboot

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               //跳转页面
7               return 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商品类目使用外键与

待补充.....

posted @ 2020-09-09 20:48 罗晓峥阅读(188) 评论(0) 编辑收藏举报

刷新页面返回顶部