分布式day05

最新推荐文章于 2024-06-12 10:09:34 发布

北溟有渔1024

最新推荐文章于 2024-06-12 10:09:34 发布

阅读量127

点赞数

分类专栏：分布式与微服务

本文链接：https://blog.csdn.net/qq_35671247/article/details/118541037

版权

分布式与微服务专栏收录该内容

18 篇文章 2 订阅

订阅专栏

本文介绍了如何在后台页面中格式化时间，将数据库时间转换为用户友好的格式；处理商品状态的显示，通过1/2符号表示正常和下架；以及实现商品分类动态查询和树形结构展示，涉及Ajax请求和EasyUI组件的使用。

摘要由CSDN通过智能技术生成

1. 1数据格式化操作

1.1.1 格式化时间

我们看一下后台页面，更新日期和创建日期都是以年月日，时分秒来标示的，但是本身数据库时间并不这样的，那么如何给他整齐的展现出来呢？
点击item-list.jsp
1.编辑页面HTML代码

 <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>

2.编辑页面JS
在我们项目下有一个js文件夹，里面的commom.js存放的是相关函数

// 格式化时间
	formatDateTime : function(val,row){
		//打印我们数据库的时间
		console.log(val);
		console.log(row);
		//将数据库时间封装成js对象
		var now = new Date(val);
    	return now.format("yyyy-MM-dd hh:mm:ss");
	},

1.1.2 格式化状态

业务说明：正常情况下，我们的查询商品之后的状态，返回的应该是数字（1/2）,因为我们调用 formatItemStatus
1.编辑页面
在这里插入图片描述
2.编辑js

// 格式化商品的状态
	formatItemStatus : function formatStatus(val,row){
        if (val == 1){
            return '<span style="color:green;">正常</span>';
        } else if(val == 2){
        	return '<span style="color:red;">下架</span>';
        } else {
        	return '未知';
        }
    },

1.2 商品分类的回显功能

1.2.1 业务说明

业务说明：根据我们商品分类的id，动态的查询数据库获取分类的名称，进行展现

在这里插入图片描述

1.2.2 编辑页面的HTML

   <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>

找到common.js下的findItemCatName函数，将里面内容删除，重新编写
在这里插入图片描述
那么我们在item-list.jsp里面发送的是第一次ajax请求，那么 findItemCatName这里就是第二次ajax请求
val是什么？val就是我们现在商品分类表在页面上展现出来的具体id

  //格式化名称
    findItemCatName : function(val,row){
     $.ajax({
     type:"get",
     url:"/item/cat/queryItemName",
     data:{id:val},
     success:function(result){},
     error:function(result){},
     async:false

     })
	},

写到这里，我们试着访问一下，看看ajax请求发送有没有成功
在这里插入图片描述

 findItemCatName : function(val,row){
    let name=''

     $.ajax({
     type:"get",
     url:"/item/cat/queryItemName",
     data:{id:val},
     success:function(result){
     //result返回的是什么对象 ItemCat对象
     name=result.name
     },
     error:function(result){
     console.log("查询失败")
     },
     async:false
     })
     return name
	},

写完ajax，访问页面，查看效果
在这里插入图片描述

1.2.3 编辑ItemCatController

package com.hc.controller;

import com.hc.pojo.ItemCat;
import com.hc.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("/itemCat")
public class ItemCatController {
    @Autowired
    private ItemCatService itemCatService;
    /**
     * 业务需求：根据商品的分类id查询商品分类对象
     *    url:"/itemCat/findItemCatById",
     *    请求类型：get
     *    参数 id
     *    返回值对象：ItemCat
     */
    @RequestMapping("/findItemCatById")
    public ItemCat findItemCatById(Long id){
        return itemCatService.findItemCatById(id);
    }
}

1.2.4 编辑ItemCatService

package com.hc.service;

import com.hc.pojo.ItemCat;

public interface ItemCatService {

    ItemCat findItemCatById(Long id);
}

1.2.4 编辑ItemCatServiceImpl

package com.hc.service;

import com.hc.mapper.ItemCatMapper;
import com.hc.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 id) {
        return itemCatMapper.selectById(id);
    }
}

1.2.5 页面效果展现

在这里插入图片描述

2. 关于common.js导入说明

2.1 问题说明

华电项目的js是如何导入的呢？
我们item-list.jsp里面没有任何引入，没有发现js文件的声音，在我们这个页面下只有一个script标签，那么我们的formatter:KindEditorUtil.formatItemStatus的函数是如何引入的呢？
其实有些时候，大部分前端框架会将一个页面当成一个整体来看，比如我们的后台页面，localhost:8091,但是实质上他的url为localhost:8091/WEB-INF/views/index.jsp
然后我们发现点击商品新增和查询商品，右侧会出现一个页面，但是无论出现多少页面，他们都是在index.jsp这个页面下，我们的url从来没有变过，之前说过，我们的页面分成3部分，一个整体，两个小部分，如果问父子级关系，那么整体是父，两个小部分为子，那么我们在两个小部分找不到src，那么我们不如看看父里面有没有？
导入过程：index.jsp
在这里插入图片描述
发现/commons/common-js.jsp",找到/js/common.js

在这里插入图片描述

2.2 商品分类树型结构展现

2.2.1 弹出框效果

现在我们点击查询商品，已经出现了页面的数据，那么接下来，我们点击新增商品的操作，我们点击新增商品，点击类目，我们会出现一个弹出框，那么我们这个弹出框效果是如何显现的呢？
首先我们看一个小demo，去找easy-ui目录下easyui-5-window.html，访问一下看一下效果

在这里插入图片描述

$("#btn1").bind("click",function(){
			
			$("#win1").window({
				title:"弹出框",
				width:400,
				height:400,
				modal:true   //这是一个模式窗口，只能点击弹出框，不允许点击别处
			})
		})

在这里插入图片描述

2.2.2 商品分类数据结构展现

在这里插入图片描述
基于商品分类的结构，那么我们采用什么方式展现商品分类信息比较好呢？
树形结构控件

2.2.3 树形结构控件

在目录/easy-ui/easyui-7-tree.html下

$(function(){
		$("#tree").tree({
			url:"tree.json",		//加载远程JSON数据
			method:"get",			//请求方式  POST
			animate:true,			//表示显示折叠端口动画效果
			checkbox:true,			//表述复选框
			lines:true,				//表示显示连接线
			dnd:true,				//是否拖拽
			onClick:function(node){	//添加点击事件
				//控制台
				console.info(node);
			}
		});
	})

2.2.4 树形结构数据展现

打开我们目录easy-ui tree.json
发现最外层是数组[ ],数组中的每一个元素都是一个对象{id,text,state}
在这里插入图片描述

2.2.5 封装树形结构节点

package com.hc.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree {
    private Long id;        //节点编号
    private String text;    //节点名称
    private String state;   //节点状态  open打开 closed关闭
}

2.2.6 树形控件JS分析

href=“javascript:void(0)” 不进行任何跳转操作

<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>

在这里插入图片描述

2.2.7 编辑ItemCatController

/**
 * 查询商品分类树形结构控件
 * url:http://localhost:8091/item/cat/list
 * 参数：暂时没有
 * 返回值：List<EasyUITree>
 *
 */
@RequestMapping("/item/cat/list")
public List<EasyUITree> findItemCatList(Long id){
    //查询商品分类信息  1级菜单
    long parentId=0;
    return itemCatService.findItemCatList(parentId);
}

2.2.8 编辑ItemCatService

/**
     * 1.根据parentId查询商品分类列表信息  一级商品分类信息
     * 2.将商品分类列表转化为vo对象
     * 3.返回vo对象的List集合
     * sql： select * from tb_item_cat where parentId=0
     * @param parentId
     * @return
     */
    @Override
    public List<EasyUITree> findItemCatList(long parentId) {
        //1.根据父级id查询子级信息
        QueryWrapper<ItemCat> queryWrapper=new QueryWrapper<>();
        queryWrapper.eq("parent_id", parentId);
        List<ItemCat> itemCatList=itemCatMapper.selectList(queryWrapper);
        //2.将itemCat对象转换为vo对象
        List<EasyUITree> voList=new ArrayList<>(itemCatList.size());
        for(ItemCat itemCat:itemCatList){
            long id=itemCat.getId();
            String text=itemCat.getName();
            //如果是父级则关闭，否则打开
            String state=itemCat.getIsParent()?"closed":"open";
            EasyUITree tree=new EasyUITree(id, text, state);
            voList.add(tree);
        }

        return voList;
    }

页面展示
在这里插入图片描述

2.2.9 关于异步树形控件的说明

打开我们华电新版本资料，找到课上资料，easyUIAPI ，里面有一个ui的api手册

在这里插入图片描述
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为’id’，通过URL发送到服务器上面检索子节点。

 /**
     * 查询商品分类树形结构控件
     * url:http://localhost:8091/item/cat/list
     * 参数：暂时没有
     * 返回值：List<EasyUITree>
     *
     */
    @RequestMapping("/item/cat/list")
    public List<EasyUITree> findItemCatList(Long id){
        //查询商品分类信息  1级菜单
        //如果用户没有点击按钮，将不会传递id值，应该设置默认值
        long parentId=(id==null?0:id);

        return itemCatService.findItemCatList(parentId);
    }

说明：如果用户初始化时，没有进行点击节点时，不会传递id，所以需要默认值

3. 后台商品CRUD操作

3.1 商品新增

3.1.1 页面url分析

首先我们看一下item-add.jsp页面，选择类目我们就不用看了，刚才已经看过了，我们看一下商品标题这里， data-options=“required:true” ，这个属性是前端很多框架都能看到的，代表必选项
在这里插入图片描述
商品价格这里，我们试试能不能输入字母，结果发现不能，因为他已经设置了数字类型，并且最大值和最小值都已经给出来了，precision:2 这个代表保留小数点后两位
那么我们这个页面添加参数该从哪里开始研究呢？我们从这个提交按钮开始，F12,z找到NetWork
1.请求路径
在这里插入图片描述
2.请求参数

3.1.2 检查页面JS

看一下前后端调用流程，那么这个新增页面的话，从哪里入手呢？是不是οnclick="submitForm()这个提交按钮开始入手啊，然后搜索一下这个函数

function submitForm(){
		//表单校验
		//表单校验，如果满足校验规范 则返回true 否则返回false
		if(!$('#itemAddForm').form('validate')){
			$.messager.alert('提示','表单还未填写完成!');
			return ;
		}

那我们少写一个必选项，然后点击提交试试
在这里插入图片描述

$("#itemAddForm [name=price]"）它代表了三种选择器
//转化价格单位，将元转化为分
	//找到id为itemAddForm元素的子孙后代中含有属性name=price的元素
	// $("xxx").val()   $("xxx").val(xxx)
	//第一个是取值操作   第二个是赋值操作
	$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);