分布式day06

最新推荐文章于 2024-06-04 22:42:23 发布

北溟有渔1024

最新推荐文章于 2024-06-04 22:42:23 发布

阅读量89

点赞数

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

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

版权

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

18 篇文章 2 订阅

订阅专栏

1.解析js

1.1为什么要用eval呢？

因为不用eval的情况下，‘100’*100,那么程序会报错，我们这里要转为js对象（number）来进行计算

$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);

ajax参数的写法有两种，一种是对象形式来写的，一种是k=v&k=v等号连接的方式

在这里插入图片描述

1.1.1 系统返回值SysResult对象

由于这个是一个系统对象，所以我们应该定义到hcds-common中，创建com.hc.vo包

package com.hc.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
//通过SysResult 对象实现前后端数据交互的载体
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult {
    private Integer status; //如果后端服务器正常运行 返回200 否则返回201 表示失败
    private String msg;     //服务起返回提示
    private Object data;    //服务器返回业务数据

    public static SysResult fail(){
        return new SysResult(201,"服务器异常请求稍后",null);
    }
    public static SysResult success(){
        return new SysResult(200,"服务器执行成功",null);
    }
    public static SysResult success(Object data){
        return new SysResult(200,"服务器执行成功",data);
    }
    public static SysResult success(String msg,Object data){
        return new SysResult(200,msg,data);
    }

}

1.1.2 编辑ItemController

/**
	 * 业务说明：商品新增
	 * url:http://localhost:8091/item/save
	 * 请求参数： form表单  item对象接收
	 * 返回值  SysResult
	 */
	@RequestMapping("/save")
	public SysResult saveItem(Item item){
		try{
		itemService.saveItem(item);
		return SysResult.success();
		}catch (Exception e){
			e.printStackTrace();
		return SysResult.fail();
		}

	}

1.1.3 编辑ItemService

@Override
	public void saveItem(Item item) {
	//因为add页面没有没有状态和时间，所以我们需要传入
		item.setStatus(1).setCreated(new Date()).setUpdated(item.getCreated());
		itemMapper.insert(item);
	}

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

1.2 全局异常处理

说明：在hcds-common中添加全局异常处理机制
新建一个包叫aop,类名叫SysResultException

package com.hc.aop;

import com.hc.vo.SysResult;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
//spring中的通知  核心原理：Spring AOP机制
@RestControllerAdvice  //只对controller代码层有效
public class SysResultException {
    //该注解只拦截运行时异常
    @ExceptionHandler({RuntimeException.class})
    public SysResult exception(Exception e){
        e.printStackTrace();
        return  SysResult.fail();
    }

}

优化下ItemController

在这里插入图片描述
测试异常处理

虽然我们这里出现了一个异常，但是它在插入之后出现的，那么这个数据插入成功了吗？很显然，成功了，因为我们没有对事务进行控制，所以我们需要添加一个注解

然后运行项目，发现数据库插不进去了

1.3 MP自动填充实现

1.3.1 业务说明

说明：由于入库时需要手动的完成时间字段操作，但是操作比较通用，任何一张表都有创建时间/更新时间，需求：能否简化代码
在这里插入图片描述

1.3.2 标识属性

说明:将需要自动填充的属性 进行标识
package com.hc.pojo;

import java.io.Serializable;
import java.util.Date;

import com.baomidou.mybatisplus.annotation.FieldFill;
import com.baomidou.mybatisplus.annotation.TableField;
import lombok.Data;
import lombok.experimental.Accessors;

//pojo基类，完成2个任务，2个日期，实现序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
	@TableField(fill = FieldFill.INSERT)
	private Date created;	//新增操作有效

	@TableField(fill = FieldFill.INSERT_UPDATE)
	private Date updated;	//新增和更新操作有效

}

但是咱们虽然自动填充了，但是填充的内容还是要配置一下的，毕竟mp不知道我们想填充什么
在common中创建一个包config

package com.hc.config;

import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler;
import lombok.extern.slf4j.Slf4j;
import org.apache.ibatis.reflection.MetaObject;
import org.springframework.stereotype.Component;

import java.util.Date;

@Slf4j
@Component
public class MyMetaObjectHandler implements MetaObjectHandler {

    //因为我们新增操作的时候，需要维护created/updated
    @Override
    public void insertFill(MetaObject metaObject) {
        Date date=new Date();
        this.setFieldValByName("created", date, metaObject);
        this.setFieldValByName("updated", date, metaObject);
    }

    @Override
    public void updateFill(MetaObject metaObject) {

        this.setFieldValByName("updated", new Date(), metaObject);
    }
}

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

2. 商品后台的业务操作

2.1 工具栏的操作

2.1.1 工具栏入门案例

首先打开我们的easy-ui,复制easyui-6-datagrid.html的路径，访问localhost:8091/easy-ui/easyui-6-datagrid.html,查看页面信息
toolbar在我们ui框架中他属于一个特殊的关键字，有特殊含义
iconCls 代表图标的样式
handler代表点击之后的动作

在这里插入图片描述
咱们点击新增商品之后，鼠标右键，检查，查看网页元素
我们会发现新增商品这个span元素，但是span元素是什么呢？他是一个行内元素，那么我们想把他变成块级元素，取一下他的父级，这个div也就是所谓的块级元素
取到我们的父级元素之后，点击，实现发送url,进行跳转
在这里插入图片描述
点击编辑按钮，什么都不选点击，会出现一个提示

输出用户选中的数据，刷新页面，点击查询，选中多项数据，点击编辑

function getSelectionsIds(){
    //选中的所有表格数据信息
    	var itemList = $("#itemList");
    	/*[item,item,item,item]*/
    //获取用户选中的元素
    	var sels = itemList.datagrid("getSelections");
        console.log(sels)
    	var ids = [];
    	for(var i in sels){
    		ids.push(sels[i].id);
    	}
    	//将数组拼接成串 1,2,3,4,5
    	ids = ids.join(",");
    	return ids;
    }

在这里插入图片描述

<div id="itemEditWindow" class="easyui-window" title="编辑商品" data-options="modal:true,closed:true,iconCls:'icon-save',href:'/page/item-edit'" style="width:80%;height:80%;padding:10px;">
</div>

itemEditWindow这个选择器下有href属性，href属性这里是一个请求路径，执行之后我们得到一个jsp页面（item-edit.jsp）我们点击之后出现的弹出框效果时item-edit.jsp给的

$("#itemeEditForm").form("load",data);

这里的load属性，会根据我们的data属性，和form表单中的name一一对应进行数据的回显，根据$("#itemEditForm").form(“load”,data);找到item-edit.jsp,发现这个form表单进行商品分类回显（问题：回显数字）
在这里插入图片描述
我们进行回显操作的时候会发显商品类目里面回显的是一个数字，能不能动态的获取这个cid属性

//根据id 动态获取商品分类名称
        			var cid=data.cid;
        			//通过ajax请求动态的获取用户数据
        			$.get("/itemCat/findItemCatById",{id:cid},function(data){
        			var name=data.name;
        			//如何将name属性绑定到分类表格中
        			//.text("xxxx") 给标签中的文本值赋值  .val("xxxx") 给value赋值
        			$("#itemeEditForm input[name='cid']").prev().text(name)

        			})

查看网页，发现没有span这个标签，说明这个标签时ui给我们生成的，不需要我们写，但是既然是框架渲染出来的，那么我们怎么改呢？我们总不能改源码吧
在这里插入图片描述
页面效果

2.2 商品更新操作

2.2.1 页面分析

我们表单里面的数据已经填充进弹出框了，那么我们点击提交按钮试一试，结果发现一些属性和对应属性值，这是怎么回事呢，在我们item-edit.jsp 102行有一个弹出form表单数据的应用
在这里插入图片描述
将alert注释，影响我们业务

2.2.2 页面JS分析

在这里插入图片描述

2.2.3 编辑ItemController

/**
	 * 完成商品修改操作
	 * url地址：http://localhost:8091/item/update
	 * 参数： form 表单  Item对象
	 * 返回值：SysResult
	 */
	@RequestMapping("/update")
	public SysResult updateItem(Item item){

		itemService.updateItem(item);
		return SysResult.success();

	}

2.2.4 编辑ItemService

@Transactional  //标记方法使用事务控制
	@Override
	public void updateItem(Item item) {
		itemMapper.updateById(item);
	}

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

在这里插入图片描述

2.3 商品删除

2.3.1 页面URL分析

在这里插入图片描述

2.3.2 页面参数

在这里插入图片描述

2.3.3 页面JS分析

在这里插入图片描述

2.3.4 编辑ItemController

/**
	 * 批量完成商品删除操作
	 * url地址：http://localhost:8091/item/delete
	 * 参数： ids=100,101,102
	 * 返回值：SysResult对象
	 * 所以我们采用...
	 * ...是可变参数
	 * 它的实质就是一个数组
	 * 简化操作：当我们参数采用，号分隔时，会自动转化为数组
	 */
	@RequestMapping("/delete")
	public SysResult deleteItems(Long... ids){
		itemService.deleteItems(ids);
		return SysResult.success();
	}

2.3.4 编辑ItemService

/**
	 * sql:delete from tb_item where id in (xxx,xxxx,xxxxx...)
	 * @param ids
	 */
	@Override
	@Transactional  //标记方法使用事务控制
	public void deleteItems(Long[] ids) {
		itemMapper.deleteByIds(ids);
	}