乐趣区

关于springboot:京淘day05京淘项目前端js

作者：

jiezi

在

1.京淘后盾页面剖析(理解)

1.1 页面构造

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<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>
</head>
<body class="easyui-layout">
  <div data-options="region:'west',title:'菜单',split:true" style="width:10%;">
           <ul class="easyui-tree">
               <li>
               <span>商品治理</span>
               <ul>
               <li><a onclick="addTab('商品新增','/item-add')">商品新增</a></li>
               <li><a onclick="addTab('商品查问','/item-list')">商品查问</a></li>
               <li><a onclick="addTab('商品更新','/item-update')">商品更新</a></li>
               </ul>
            </li>
            <li>
               <span>网站内容治理</span>
               <ul>
               <li>内容新增</li>
               <li>内容批改</li>
               </ul>
            </li>
           </ul>
   </div>
   <div id="tt" class="easyui-tabs" data-options="region:'center',title:'首页'"></div>
</body>
<script type="text/javascript">
function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var url2 = "https://map.baidu.com/@12964432.517776728,4826375.366248961,13z";
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url2+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
            title:title,  
            content:content,  
            closable:false
        });  
    }
}
</script>
</html>

2.商品列表展示

2.1 Item表剖析

2.2 JSON阐明

2.2.1 什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局。它使得人们很容易的进行浏览和编写。同时也不便了机器进行解析和生成。 JSON实质是String

2.2.2 Object格局

2.2.3 Array格局

2.2.4 嵌套格局


例如：

//1.object格局
{id:1,name:"tomcat猫"...}
//2.array格局
[1,2,3,"打游戏","写代码"]
//3.嵌套格局  value能够嵌套   四层嵌套json
{"id":1,"name":"哈利波特","hobbys":["敲代码","学魔法","喜爱赫敏","打伏地魔"],
"method":[{"type":"火系","name":"三味真火"},{"type":"水系","name":"大海无穷"}]}

2.3 表格数据展示

2.3.1 JSON构造

2.3.2 编辑EasyUITable VO对象

阐明: 对象转化为JSON 调用的是get办法. JSON转护为对象时调用set办法

2.3.3 表格页面剖析

阐明:当增加了分页插件之后,当ajax程序解析时会动静的拼接参数.

2.3.4 编辑ItemController

package com.jt.controller;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.jt.service.ItemService;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RestController    //示意返回数据都是JSON
@RequestMapping("/item")
public class ItemController {
    @Autowired
    private ItemService itemService;
    /**
     * 业务: 分页查问商品信息.
     * url:  http://localhost:8091/item/query?page=1&rows=20
     * 参数: page=1 页数  &rows=20  行数
     * 返回值: EasyUITable
     */
    @RequestMapping("/query")
    public EasyUITable findItemByPage(int page,int rows){
        return itemService.findItemByPage(page,rows);
    }
    
    
    /*@RequestMapping("/testVO")
    @ResponseBody
    public EasyUITable testVO(){
        Item item1 = new Item();
        item1.setId(1000L).setTitle("饮水机").setPrice(200L);
        Item item2 = new Item();
        item2.setId(2000L).setTitle("电冰箱").setPrice(1800L);
        List<Item> rows = new ArrayList<>();
        rows.add(item1);
        rows.add(item2);
        return new EasyUITable(2000L, rows);
    }*/
}

2.3.4 编辑ItemService

package com.jt.service;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.jt.mapper.ItemMapper;
import java.util.List;
@Service
public class ItemServiceImpl implements ItemService {

    @Autowired
    private ItemMapper itemMapper;
    /**
     * 分页Sql:
     *         查问第一页:
         *         select * from tb_item limit 起始地位,查问条数
         *            select * from tb_item limit 0,20    共21个数  index[0,19]
     *            查问第二页:
     *                select * from tb_item limit 20,20    index[20,39]
     *            查问第三页:
     *                 select * from tb_item limit 40,20
     *          查问第N页:
     *      *          select * from tb_item limit (page-1)rows,20
     * @param page
     * @param rows
     * @return
     */
    @Override
    public EasyUITable findItemByPage(int page, int rows) {
        long total = itemMapper.selectCount(null);
        //1.手写分页
        int startIndex = (page - 1) * rows;
        List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);
        return new EasyUITable(total, itemList);
    }
}

2.3.5 编辑ItemMapper

public interface ItemMapper extends BaseMapper<Item>{
    @Select("select * from tb_item order by updated desc limit #{startIndex},#{rows}")
    List<Item> findItemByPage(int startIndex, int rows);
}

2.3.6 页面成果展示

2.4 MybatisPlus实现分页

2.4.1 编辑ItemService

package com.jt.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.jt.mapper.ItemMapper;
import java.util.List;
@Service
public class ItemServiceImpl implements ItemService {
    @Autowired
    private ItemMapper itemMapper;
        //2.利用MP形式实现分页
        IPage mpPage = new Page(page,rows);
        QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
        queryWrapper.orderByDesc("updated");
        mpPage = itemMapper.selectPage(mpPage,queryWrapper);
        long total = mpPage.getTotal();    //获取记录总数
        List<Item> itemList = mpPage.getRecords();    //获取查问当前页
        return new EasyUITable(total, itemList);
    }
}

2.4.2 增加配置了类

package com.jt.config;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration   //bean标签应用
public class MybatisPlusConfig {
    //将分页拦截器交了Spring容器治理 MP是Mybatis的加强工具
    @Bean
    public PaginationInterceptor paginationInterceptor(){
        return new PaginationInterceptor();
    }
}

2.5 数据格式化阐明

2.5.1 格式化价格

1.页面JS阐明

`<th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>`

2.格式化代码

2.5.2 格式化状态

1).页面JS

`<th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>`

2).JS剖析

2.6 实现商品分类回显

2.6.1 业务需要

阐明:当用户展示列表数据时,要求将商品分类信息,进行展示.依据cid返回商品分类的名称

2.6.2 编辑item-list页面

2.6.3 编辑页面JS

编辑 js/common.js

2.6.4 编辑ItemCat POJO对象

在jt-common中增加Itemcat POJO对象

package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;
@TableName("tb_item_cat")
@Data
@Accessors(chain = true)
public class ItemCat extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Long id;        //主键
    private Long parentId;  //父级ID
    private String name;    //名称
    private Integer status; //状态信息
    private Integer sortOrder;  //排序号
    private Boolean isParent;   //是否为父级


    /*
    * create table tb_item_cat
(
   id                   bigint not null auto_increment,
   parent_id            bigint comment '父ID=0时，代表一级类目',
   name                 varchar(150),
   status               int(1) default 1 comment '默认值为1，可选值：1失常，2删除',
   sort_order           int(4) not null,
   is_parent            tinyint(1),
   created              datetime,
   updated              datetime,
   primary key (id)
);
    * */
}

2.6.5 页面URL剖析

2.6.6 编辑ItemCatController

package com.jt.controller;
import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("/item/cat")
public class ItemCatController {
    @Autowired
    private ItemCatService itemCatService;
    /**
     * 需要: 依据itemCatId查问商品分类名称
     * url:  http://localhost:8091/item/cat/queryItemName?itemCatId=163
     * 参数: itemCatId=163
     * 返回值: 商品分类名称
     */
    @RequestMapping("/queryItemName")
    public String queryItemName(Long itemCatId){
        ItemCat itemCat = itemCatService.findItemCatById(itemCatId);
        return itemCat.getName();
    }
}

2.6.7 编辑ItemCatService

package com.jt.service;
import com.jt.mapper.ItemCatMapper;
import com.jt.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class ItemCatServiceImpl implements ItemCatService{
    @Autowired
    private ItemCatMapper itemCatMapper;
    @Override
    public ItemCat findItemCatById(Long itemCatId) {
        return itemCatMapper.selectById(itemCatId);
    }
}

2.6.8 页面成果展示

2.6.9Ajax嵌套问题

阐明: 因为页面中发动2次ajax申请,并且2次Ajax是一种嵌套的关系.
解决方案: 如果遇到ajax嵌套问题 则个别将外部ajax设置为同步状态即可.
扩大常识: JS中闭包概念

3 树形构造展示

3.1 common.js的依赖问题


1.在index.jsp中引入了其余页面

<jsp:include page="/commons/common-js.jsp"></jsp:include>

2.页面引入

3.2 商品分类业务剖析

3.2.1 分级阐明

个别条件下商品分类分为3级.

3.2.2 表结构设计


3.3 树形构造问题

3.3.1 页面JS

3.3.2 JSON构造

[{"id":100,"text":"tomcat","state":"open/closed"}]

3.3.3 封装 EasyUITree 对象

在jt-manage中增加VO对象

3.4 新增页面剖析

3.4.1 页面流转过程

1.点击商品新增按钮
2.发动申请 /page/item-add
3.申请被IndexController中的restFul拦挡
4.实现页面跳转 /WEB/INF/views/item-add.jsp

3.4.2 页面构造剖析

1).页面按钮

2.页面树形构造展示详情

3.4.3 树形构造展示

树控件读取URL。子节点的加载依赖于父节点的状态。当开展一个关闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http申请参数并命名为’id’，通过URL发送到服务器下面检索子节点。
1.用户在默认条件下 如果没有开展子节点,则不会发送申请.
2.当用户关上关闭的节点时,则会将改节点的ID当做参数,向后端服务器申请.

3.4.4 编辑ItemCatController

/**
     * 业务需要: 实现商品分类树形构造展示
     * url地址:   http://localhost:8091/item/cat/list
     * 参数:      id= 父级节点的ID
     * 返回值:    List<EasyUITree>
     */
    @RequestMapping("/list")
    public List<EasyUITree> findItemCatList(Long id){
        //临时只查问一级商品分类信息
        long parentId = (id==null?0:id);
        return itemCatService.findItemCatList(parentId);
    }

3.4.5 编辑ItemCatService

@Override
public List<EasyUITree> findItemCatList(long parentId) {
    //思路.返回值的数据从哪来? VO 转化 POJO数据
 //1.实现数据库查问
 QueryWrapper queryWrapper = new QueryWrapper();
    queryWrapper.eq("parent_id", parentId);
    List<ItemCat> catList = itemCatMapper.selectList(queryWrapper);
    //2.筹备返回值数据
 List<EasyUITree> treeList = new ArrayList<>();
    //3.实现数据的转化 catList转化为 treeList for (ItemCat itemCat : catList) {
        long id = itemCat.getId();       //获取ID值
 String text = itemCat.getName(); //获取商品分类名称
 String state = itemCat.getIsParent() ? "closed" : "open";
        EasyUITree easyUITree = new EasyUITree(id, text, state);
        treeList.add(easyUITree);
    }
    return treeList;
}

3.4.6 页面成果展示

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章