CGB2005 0901 jt6

前台时http格式
https://blog.csdn.net/qq_16804847/article/details/108334833
对应jt06
1
在这里插入图片描述
在这里插入图片描述
添加和删除的共性 vo

package com.jt.vo;

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

import java.io.Serializable;


@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult implements Serializable {
    private Integer status;         //定义状态信息 200业务处理成功, 201业务处理失败.
    private String  msg;            //服务器返回的提示信息.
    private Object  data;           //服务器返回业务数据.

    //封装一些静态API 简化用户调用过程.
    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);
    }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.京淘后台商品维护

商品修改页面跳转

页面工具栏的说明
toolbar是怎么写的呢
在这里插入图片描述

修改
$符号
在这里插入图片描述
获得是否选中的状态

在这里插入图片描述
在这里插入图片描述
两个页面即是动态回显
在这里插入图片描述
js读懂即可

商品分类名称回显实现

需求分析

在这里插入图片描述
说明:需要将 商品类目 3 改为具体的名称. 如何实现?
实现步骤:
1.通过选择器动态的获取商品分类ID 3
2.发起Ajax请求,根据3获取商品分类的名称. 电子书.
3.在指定的位置完成赋值操作.`
在这里插入图片描述
在这里插入图片描述

select 那么

编辑页面js的说明
查询当前页面元素 不需要查数据库

取值

在这里插入图片描述
在这里插入图片描述

赋值

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

//1.通过data数据返回商品分类id
        			var cid = data.cid;
                    //alert("我是商品分类目录id:"+cid);
                    //2.发起ajax请求,注意请求参数问题 必须与方法接收一致
                    $.get("/item/cat/queryItemName",{"itemCatId":cid},function(data){
                        //alert("动态获取数据:"+data);
                        //3.将数据回显到指定位置.
                        //$("#itemeEditForm input[name='cid']").siblings("span").text(data);
                        $("#itemeEditForm input[name='cid']").prev().text(data);
                    });

页面效果展现

在这里插入图片描述

商品修改 页面分析

需要回显的原因是 查询页面编辑和(相当于新增)更新页面是两个页面 不是画中画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
更新操作还需id
在这里插入图片描述
在这里插入图片描述
延申 对数据库表进行操作
如下图 这两数据都得改
在这里插入图片描述
在这里插入图片描述
第一步 配置注解
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

添加注解

//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;

}

编辑配置类完成自动赋值操作

package com.jt.auto;

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

import java.util.Date;

//完成自动填充功能
@Component  //将该对象交给spring容器管理
public class MyMetaObjectHandler implements MetaObjectHandler {
    /**
     * 在POJO中添加了 新增/更新的注解,但是必须在数据库的字段中完成赋值的操作.
     * 所以.必须明确,新增/更新时操作的是哪个字段,及值是多少
     * * * @param metaObject
     */
    @Override
    public void insertFill(MetaObject metaObject) {

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

    @Override
    public void updateFill(MetaObject metaObject) {

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


时间操作都不用写了
在这里插入图片描述

商品删除

页面分析

$.messager.confirm('确认','确定删除ID为 '+ids+' 的商品吗?',function(r){
        	    if (r){
        	    	var params = {"ids":ids};
                	$.post("/item/delete",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('提示','删除商品成功!',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}else{
            				$.messager.alert("提示",data.msg);
            			}
            		});
        	    }
        	});

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

编辑ItemController

	/**
	 * 商品删除
	 * url: /item/delete
	 * 参数: {"ids":"100,101,102"}    ids数据类型是字符串!!!
	 * 返回值: 系统返回值变量
	 *
	 * 注意事项: 取值与赋值操作的key必须相同!!!
	 */
	@RequestMapping("/delete")
	public SysResult deleteItems(Long... ids){

		itemService.deleteItems(ids);
		return SysResult.success();
	}

没有mvc的时候
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
有了mvc之后 性质不变 变得更简便了 (周四补)
在这里插入图片描述
为什么是long 晚上补
在这里插入图片描述
List集合 参数类型是long类型 把longlist的参数给传过来
要的一个集合
自我实现

14.25前 晚上补(over)
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

删除 使用老方法去实现 不用面向对象的方法

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

Xddfathe r 14:34:41
疑问

Xddfathe r 14:34:57
批量操作

得加注解
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
把数据封装成一个数组 测不同 识别的是array 是单值 所以需要注解
在这里插入图片描述
如上图 因为ids是多值传输 所以加注解转变了Map集合

总结:注解的功能和用法

在这里插入图片描述
如上图 不想加注解的话 把collection的改为array就行

如下图 加了注解就变成Map了
在这里插入图片描述
在这里插入图片描述
分清什么时候加注解什么时候不加注解

<mapper namespace="com.jt.mapper.ItemMapper">

	<!--完成商品的删除
		 void deleteItems(Long[] ids); 接口方法
		sql: delete from tb_item where id in (id1,id2,id3...)

		collection:
			分类1:  List集合   collection="list"
			分类2:  Array数组  collection="array"
			分类3:  Map集合    collection="map中的key"  规范
	-->
	<delete id="deleteItems">
		delete from tb_item where id in (
			<!--循环遍历数组,之后获取其中的数据,完成删除.-->
			<foreach collection="array" item="id" separator=",">
				#{id}
			</foreach>
		)
	</delete>
</mapper>

总结 都是要变成集合的形式 数组转集合(加注解)

上架/下架URL地址说明

任务: 利用一个方法实现商品的上架/下架操作!!!

在这里插入图片描述
在这里插入图片描述

$.post("/item/instock",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('提示','下架商品成功!',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}
            		});

$.post("/item/reshelf",params, function(data){
            			if(data.status == 200){
            				$.messager.alert('提示','上架商品成功!',undefined,function(){
            					$("#itemList").datagrid("reload");
            				});
            			}
            		});

url 分析

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
改成我们自己的规则
在这里插入图片描述
为了便利性 可以修改js中不影响核心功能的代码
在这里插入图片描述
在这里插入图片描述

@PathVariable注解的作用漏的知识点

@PathVariable 映射 URL 绑定的占位符
通过 @PathVariable 可以将 URL 中占位符参数绑定到控制器处理方法的入参中:URL 中的 {xxx} 占位符可以通过

@PathVariable(“xxx”) 绑定到操作方法的入参中。

一般与@RequestMapping(method = RequestMethod.GET)一起使用

@RequestMapping("/getUserById/{name}")
    public User getUser(@PathVariable("name") String name){
        return userService.selectUser(name);
    }

若方法参数名称和需要绑定的uri中变量名称一致时,可以简写:
@RequestMapping("/getUser/{name}")
    public User getUser(@PathVariable String name){
        return userService.selectUser(name);
    }

总结分析 把POJO中的status值传到接收到的参数那 因为注解 再和url的status绑定 不分先后
在这里插入图片描述

15.20前 晚上(over)

service层
在这里插入图片描述
在这里插入图片描述
也可能为了多选 state晚上了解(over)

在这里插入图片描述
如下图 都得加上事务
在这里插入图片描述

/**
	 * update(arg1,arg2)
	 * arg1: 需要修改的数据
	 * arg2: 修改的条件构造器
	 * @param status
	 * @param ids
	 */
	 @Override
	public void updateStatus(Integer status, Long[] ids) {
		Item item = new Item();
		item.setStatus(status);
		UpdateWrapper<Item> updateWrapper = new UpdateWrapper<>();
		List<Long> idList = Arrays.asList(ids);
		updateWrapper.in("id",idList);
		itemMapper.update(item,updateWrapper);
	}

商品详情实现

富文本编辑器的说明

在这里插入图片描述
在这里插入图片描述
入门案例

<%@ 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">
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>

<script type="text/javascript">
	$(function(){
		KindEditor.ready(function(){
			KindEditor.create("#editor")
		})
	})
</script>
</head>
<body>
<h1>富文本编辑器</h1>
<textarea style="width:700px;height:350px" id="editor"></textarea>
</body>
</html>

**

编辑ItemDesc 商品描述(说明 详情)表

POJO对象vo表

**

在这里插入图片描述

在这里插入图片描述

Dao层

在这里插入图片描述

商品详情入库操作

添加的时候
在这里插入图片描述

在这里插入图片描述
controller层
在这里插入图片描述
在这里插入图片描述
一起进行入库操作
在这里插入图片描述
service层
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

主键自增
先入库之后 才有主键

在这里插入图片描述
在这里插入图片描述

上图 商品信息的主键得入库才能查到 不然id无法一致 得增加配置才行

主键回显的一般配置 手写回显不推介(太繁琐了) 示例
在这里插入图片描述

需求 入库之后想做主键的返回

mp插件自带可回显
在这里插入图片描述
在这里插入图片描述

断点 入库之后就有了

自我实现 晚上 16.45前

商品详细数据回显

在这里插入图片描述
分析
item-list 编辑的js页面
在这里插入图片描述

业务逻辑

在这里插入图片描述

分析url的请求地址

在这里插入图片描述
在这里插入图片描述
controller层
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不光需要回传200状态码 还需要返回业务数据
如下
在这里插入图片描述

返回回显信息 在点
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
自我实现
先新增
在这里插入图片描述

实现错误

在这里插入图片描述

Field 'created' doesn't have a default value

在这里插入图片描述
加注解 不然就少两个值 不上报错 无法新增 无法更新
新增完成
在这里插入图片描述
选中后的回显操作
如下图 暂无
在这里插入图片描述
添加完商品描述后 回显的自我实现
在这里插入图片描述
在这里插入图片描述

http://localhost:8091/item/query/item/desc/1474391968

分析需求

controller层
在这里插入图片描述
补充

/*
		*点击编辑 回显添加的详细表数据 ItemDesc对象
		* url:http://localhost:8091/item/query/item/desc/1474391968
		* 参数:和查询Item表时的id一模一样restFul形式 ItemId
		* 返回值:SysResult对象 返回数据data
	 */
	@RequestMapping("/query/item/desc/{itemId}")
	public SysResult findItemDescById(@PathVariable Long itemId){

		ItemDesc itemDesc = itemService.findItemDescById(itemId);

		return SysResult.success(itemDesc);//我要返回详细数据
	}

service层
在这里插入图片描述
客户端页面
在这里插入图片描述

回显成功!!

虚拟机

在这里插入图片描述
独立运行任何操作系统

作业实现 作业

完成商品的修改操作 item itemDesc
完成商品的删除操作 item itemDesc 10分钟
独立完成京淘后台的实现 要求 6个小时 自己完成

商品的修改操作 item itemDesc

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
空 无法修改

在这里插入图片描述
url:http://localhost:8091/item/param/item/query/1474391968

有没有必要去分析呢 更新都是同一个id 留着疑惑 按照惯例

Controller层

在这里插入图片描述

在这里插入图片描述

需求:也是根据itemId 去更新数据

/**
	 * 业务说明: 商品修改操作
	 * url: /item/update
	 * 参数: 整个form表单(多个) 单个还是多个
	 * 返回值: SysResult对象
	 */
	@RequestMapping("/update")
	public SysResult updateItem(Item item,ItemDesc itemDesc){

		itemService.updateItem(item,itemDesc);
		return SysResult.success();
	}

Service层

@Override
	@Transactional
	public void updateItem(Item item, ItemDesc itemDesc) {
		//更新时需要修改更新时间!!!
		//item.setUpdated(new Date());
		itemMapper.updateById(item);
		
		itemDescMapper.updateById(itemDesc);
	}

在这里插入图片描述
无效果 return需要返回data 有数据的值

不知道从哪里入手 继续研究 放心没错 参照save方法8
在这里插入图片描述

得先取值再赋值(对应item的id)

删除
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值