关于java:CGB2010京淘项目Day06

36次阅读

共计 7685 个字符,预计需要花费 20 分钟才能阅读完成。

cgb2010- 京淘我的项目 Day06

  1. 实现京淘我的项目后盾治理

==============

1.1 实现商品批改操作

1.1.1 页面构造剖析

1). 页面 html 剖析

`<div style="padding:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()"> 提交 </a>
    </div>` 



2). 页面 JS 剖析

1.1.2 编辑 ItemController

 `/**
     * 业务: 实现商品更新操作
     * URL:  /item/update
     * 参数: 整个 form 表单   利用对象接管
     * 返回值: SysResult 对象
     */
    @RequestMapping("update")
    public SysResult updateItem(Item item){itemService.updateItem(item);
        return SysResult.success();}` 


1.1.3 编辑 ItemService

`@Override
    @Transactional
    public void updateItem(Item item) {itemMapper.updateById(item);
    }` 


1.2 实现商品删除操作

1.2.1 页面 JS 剖析

1). 页面 URL 剖析

2). 提交参数

3). 页面JS剖析

1.2.2 SpringMVC 数据获取的底层原理是什么

阐明:SpringMVC 中通过 getParameter 的形式实现数据的获取.

1.2.3 编辑 ItemController

`/**
     * 业务阐明: 实现商品删除
     * URL 地址:     /item/delete
     * 参数:     ids: 1474392223,1474392222,1474392220,1474392215
     * 返回值:   SysResult 对象
     * 外围规定: 参数的名称必须与页面中提交的名称统一!!!!
     *              String request.getParameter("ids");
     * 对于 SpringMVC 参数取值的阐明:
     *     1. 如果参数与参数之间采纳, 号的形式进行链接能够主动的将其转化为
     *     数组构造
     *     Long[]  longIds = new Long[strIds.length];
     *         // 实现数据类型的转化
     *         for(int i=0;i<strIds.length;i++){*             longIds[i] = Long.parseLong(strIds[i]);
     *                }
     */
    @RequestMapping("/delete")
    public SysResult deleteItems(Long... ids){itemService.deleteItems(ids);
        return SysResult.success();}` 



1.2.4 编辑 ItemService

`/**
     * 要求应用 2 种形式实现
     *         1. 手写 Sql 的形式
     *         2. 利用 MP 的形式实现
     * @param ids
     */
    @Override
    public void deleteItems(Long[] ids) {itemMapper.deleteItems(ids);
    }` 



1.2.5 编辑 ItemMapper 映射文件

`<!-- 实现商品的删除操作
        Mybatis 参数传递的规定:
         1. 单值传参
         void deleteItems(String name);
         Mybatis 的源码中要求单值传参, 取值时通过下标的形式取值(取值值参数名称能够任意..)

         2. 多值传参需要
         void deleteItems(String name,String sex);
         Mybatis 高版本的源码中做了规定, 主动的将多值转化为单值(封装为 MAP 汇合 K -V)

         3. 如果未来参数格局如下时, 采纳对应的形式变量
             1. 单值传参   Array 类型  collection="array"
             2. 单值传参   List 类型   collection="list"
             3. 单值传参   Map 汇合    collection="map 中的 key"
    -->

    <delete id="deleteItems">
        delete from tb_item where id in (
            <foreach collection="array" item="id" separator=",">
                #{id}
            </foreach>
        )
    </delete>` 


1.3 利用 MP 的形式实现删除操作

`/**
     * 要求应用 2 种形式实现
     *         1. 手写 Sql 的形式
     *         2. 利用 MP 的形式实现
     * @param ids
     */
    @Override
    public void deleteItems(Long[] ids) {//itemMapper.deleteItems(ids);
        // 如果须要应用 MP 的形式实现参数的传递, 则须要封装为 List 汇合
        // 参数中应用 get 办法获取数据
        List idList = Arrays.asList(ids);
        itemMapper.deleteBatchIds(idList);
    }` 


1.4 实现商品上架 / 下架操作

1.4.1 需要阐明

阐明: 用户通过下架 / 上架操作, 其实批改的是 status 状态码信息 上架 status=1 下架 status=2
要求: 要求应用 restFul 形式, 实现一个办法实现该性能.

1.4.2 页面剖析

1). 页面 html 编辑

2). 参数阐明

3). 从新编辑页面 JS

1.4.3 编辑 ItemController

`/**
     * 业务需要: 实现商品上架 / 下架操作
     * URL 地址:  /item/1   /item/2
     * 参数:  status 状态码,ids 参数
     * 返回值: SysResult 对象
     */
    @RequestMapping("{status}")
    public SysResult updateStatus(@PathVariable Integer status,Long[] ids){itemService.updateItemStatus(ids,status);
        return SysResult.success();}` 



1.4.4 编辑 ItemService

 `// 作业: 本人手写 Sql 实现该操作
    //Sql: update tb_item set status=#{status},updated=#{updated}/now()
    //where id in (id1,id2,id3.....)
    @Override
    @Transactional
    public void updateItemStatus(Long[] ids, Integer status) {
        // 封装须要批改的数据
        Item item = new Item();
        item.setStatus(status);
        // 构建 where 条件
        UpdateWrapper updateWrapper = new UpdateWrapper();
        updateWrapper.in("id", Arrays.asList(ids));
        itemMapper.update(item,updateWrapper);
    }` 


2. 商品详情实现

2.1 商品详情和商品形容业务关系

2.1.1 表设计说明

阐明: 商品表与详情信息都是一对一映射关系.
业务原理: 为什么须要设定 2 张表? 为什么不是一张表实现了所有的业务属性?
起因: 商品详情信息个别采纳的都是文本域, 文本域在数据库中占用了很大的磁盘地址, 所以检索速度校慢. 如果所有的数据都保留到一张表构造中, 则整体的效率不高.
解决方案: 采纳 tb_item 表 保留的是商品的次要信息 tb_item_desc 表专门存储商品详情信息.

2.1.2 编辑 ItemDesc POJO 对象

`package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author 刘昱江
 * 工夫 2021/1/25
 */

@TableName("tb_item_desc")
@Data
@Accessors(chain = true) // 重构了 set 办法 返回值 void 当初变成 this 对象
public class ItemDesc extends BasePojo{

    @TableId                    // 须要与商品 Id 号保持一致
    private Long itemId;        // 商品 ID 号
    private String itemDesc;    // 商品详情信息

}` 


2.1.3 编辑 ItemDescMapper 接口

2.2 对于富文本编辑器阐明

2.2.1 kindeditor 介绍

KindEditor 是一套开源的 HTML 可视化编辑器,次要用于让用户在网站上取得 所见即所得编辑成果,兼容 IE、Firefox、Chrome、Safari、Opera 等支流浏览器。

2.2.2 富文本入门案例

`<%@ 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>` 


2.2.3 页面成果展示

2.3 重构商品新增

2.3.1 业务需要阐明

当用户增加商品时, 须要同时入库 2 张表数据, 别离为 tb_item 和 tb_item_desc 表数据.
1). 页面标识

2). 参数相干阐明

2.3.2 编辑 ItemController 办法

`/**
     * 业务阐明: 实现商品的入库操作
     * URL 地址:    http://localhost:8091/item/save
     * 申请参数: 整个 form 表单 利用对象进行接管 /itemDesc 属性
     * 返回值:   SysResult 对象
     */
     @RequestMapping("/save")
     public SysResult saveItem(Item item, ItemDesc itemDesc){itemService.saveItem(item,itemDesc);
         return SysResult.success();
         /*try {itemService.saveItem(item);
            return SysResult.success();}catch (Exception e){e.printStackTrace();
            return SysResult.fail();}*/
     }` 


2.3.3 编辑 ItemService 办法

`/**
     * 实现商品 / 商品分类的入库操作
     * @param item
     * @param itemDesc
     * 难点剖析:
     *         1.item 表主键自增  入库之后才会有主键信息.
     *         2.itemDesc 表 要求必须写主键. itemDesc 中的主键要求和 item 中的值统一.
     * 想法:
     *         1. 刚实现入库之后, 再次查询数据库记录, 获取主键 之后为 itemDesc 属性赋值  不平安
     *         2. 让数据库实现入库操作时, 实现主键的动静回显?
     *
     * 理论案例:
     *         1. 因为实现应用的是 MP 形式操作数据库. 利用对象的形式操作
     *     数据库, 所以入库之后, 主动的实现了回显性能.
     *     该性能是 MP 中主键自增的设定办法
     */
    @Override
    @Transactional    // 增加事务管制
    public void saveItem(Item item, ItemDesc itemDesc) {//Date date = new Date();
        //item.setStatus(1).setCreated(date).setUpdated(date);
        item.setStatus(1);
        itemMapper.insert(item);    // 实现商品入库操作

        // 实现商品详情入库操作
        itemDesc.setItemId(item.getId());
        itemDescMapper.insert(itemDesc);
    }` 



2.4 手动实现数据回显性能

2.4.1 编辑 ItemService 办法

2.4.2 编辑 ItemMapper/ItemMapper.xml 文件

`<!-- 实现主键主动的回显!!!-->
    <insert id="insertItem" useGeneratedKeys="true" keyProperty="id" keyColumn="id">
        INSERT INTO tb_item (image, sell_point, price, created, num, title, barcode, updated, status, cid)
        VALUES (#{image}, #{sellPoint}, #{price}, #{created}, #{num}, #{title}, #{barcode}, #{updated}, #{status}, #{cid} )
    </insert>` 



2.5 实现商品详情回显

2.5.1 业务阐明

阐明: 商品的编辑页面的数据回显, 本质就是将列表页面中的数据进行了填充. 然而只能实现 item 数据的回显. 不能展示 itemDesc 属性. 因为数据库中没有查问…
解决: 在点击编辑按钮时, 要发动 Ajax 申请, 动静的实现商品详情的回显…

2.5.2 页面剖析

1). 页面 URL 地址

2). 页面 JS 剖析

2.5.3 编辑 ItemController

`/**
     * 业务: 实现商品详情的获取
     * url:     http://localhost:8091/item/query/item/desc/1474392229
     * 参数: itemId
     * 返回值: SysResult 对象
     */

    @RequestMapping("/query/item/desc/{itemId}")
    public SysResult findItemDescById(@PathVariable Long itemId){

        // 依据 Id 查问商品详情
        ItemDesc itemDesc = itemService.findItemDescById(itemId);
        return SysResult.success(itemDesc);
    }` 



2.5.4 编辑 ItemService

`@Override
    public ItemDesc findItemDescById(Long itemId) {return itemDescMapper.selectById(itemId);
    }` 



2.5.5 页面成果展示

2.6 重构商品批改操作

2.6.1 业务阐明

2.6.2 页面参数

2.6.3 重构 ItemController

2.6.4 重构 ItemService

2.7 重构删除操作

2.7.1 业务阐明

当点击删除商品时, 应该同时删除 item/itemDesc 属性信息.

2.7.2 编辑 ItemService

3 实现文件上传

3.1 文件上传入门案例

3.1.1 入门案例页面

3.1.2 编辑 FileController

package com.jt.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.*;

/**
 * @author 
 * 工夫 2021/1/25
 */
@RestController     // 示意返回的数据为 JSON
public class FileController {

    /**
     * url 地址:/file
     * 参数: fileImage
     * 返回值: 返回胜利的提示信息
     *
     * 常识回顾:    IO 流的操作的形式  作业
     *  1. 低级流  FileInputStreamFile/FileOutputStream
     *  2. 缓存流  BufferedInputStream/BufferedOutputStream
     *  3. 高级流字符流  Reader/Writer
     *
     *  最大的艰难:   1.API 不好记.....  多
     *               2. 代码的格局 不好了解
     *               3. 经常性的呈现不关流的失误.
     *
     *  MultipartFile: SpringMVC 专对文件的上传开发的 API
     *                 默认的最大只容许上传 1M 的数据
     * @return
     */

    @RequestMapping("/file")
    public String upload(MultipartFile fileImage) throws IOException {
        //1. 获取图片的实在名称
        String fileName = fileImage.getOriginalFilename();
        //2. 设定文件上传的地址  写成 / 更加合乎 Linux 的语法特点 为了当前通用应用 /
        String dir = "E:/JT_IMAGE";
        //3. 最好对目录进行校验  判断是否存在.
        File dirFile = new File(dir);
        if(!dirFile.exists()){
            // 如果文件不存在, 则创立一个文件目录
            dirFile.mkdirs();}
        //4. 实现文件上传 须要指定文件的全门路 目录门路 / 文件名称
        String filePath = dir + "/" + fileName;
        //5. 实现文件上传操作
        fileImage.transferTo(new File(filePath));

        return "文件上传胜利!!!!";
    }
}

正文完
 0