凯发娱乐代理官方正网:cgb2008-京淘day04

本文来源:http://www.bo884.com/www_hiapk_com/

申博太阳城亚洲微信支付充值,外汇局有关负责人表示,中长期看,良好的经济基本面是我国跨境资金流动基本稳定的根本保障。密涿高速的建成,也标志着长约近千公里的首都地区环线高速公路替代路线全线贯通,该线路将环绕整个北京,也被民间俗称为北京大外环或者北京“七环”。  第三节开始后不久汤普森连得5分,他率队打出7-1的攻击波,勇士队领先19分。  春华秋实,耕耘收获。

至于香水事件,梁小斌当即就联系了办公室的同事冯小姐,她证实那天的确是自己和办公室另一位女同事喷香水时不小心误喷到了梁小斌。共计9款车型,售价区间为7.99-13.49万元。没有奥运冠军坐镇,没有国外大牌加盟的这支平民球队现在以9战9胜的全胜战绩高居联赛排名榜首。李泽爱当即表示同意,并安排专人与林涛洽谈对接。

”他开始学着体谅别人,照顾家人和朋友,而这些也是他学习烹饪的初衷。  习近平指出,做好高校思想政治工作,要因事而化、因时而进、因势而新。与槙野智章相比,森重真人在12强赛上保持全勤,是日本国家队的绝对主力。

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 = "/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:  /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;


	/**
	 * 分页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);*/

		/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:  /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 编辑ItemCatController

在这里插入图片描述

已标记关键词 清除标记
??2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 申博太阳城亚洲微信支付充值
申博娱乐登入 申博官网代理登入 百家乐手机版登入网址 申博138线上娱乐直营网 申博sunbet登入 www.88msc.com
申博代理登录 菲律宾申博太阳城娱乐 申博娱乐场直营网 申博138介绍人直营网 www.38333.com 太阳城申博官网登入
www.55msc.com www.288msc.com 申博正网存取款直营网 申博会员登入 申博会员登录 申博代理直营网