CGB2102-京淘项目day16

1.虚拟机安装Vmware

1.1 安装虚拟机14-15

1.2 Vt-x问题

开机-F2(F1-ESC-F8)----CPU设置–VT-X(虚拟化技术) 设置为启动即可 F8保存
1.找班里同学 帮助设置
2.找项目经理

1.3 检查网卡

1.4 运行Linux系统

用户名和密码: root/root

2.商品分类参数实现

2.1 商品分类参数说明

1).动态参数

2).静态属性

2.2 商品分类参表设计

2.3 实现商品分类参数页面跳转

3.商品分类参数业务实现

3.1 实现商品分类参数列表

3.1.1 页面HTML

3.1.2 页面JS

3.1.3 商品分类参数接口文档

3.1.4 编辑ItemCatParamController

@RestController
@CrossOrigin
@RequestMapping("/itemCatParam")
public class ItemCatParamController {

    @Autowired
    private ItemCatParamService itemCatParamService;

    /**
     * 实现商品分类参数的查询
     * URL: /itemCatParam/findItemCatParamListByType?itemCatId=564&paramType=1
     * 参数: itemCatId,paramType
     * 返回值: SysResult对象
     */
    @GetMapping("findItemCatParamListByType")
    public SysResult findItemCatParamListByType(ItemCatParam itemCatParam){

        List<ItemCatParam> paramList =
                itemCatParamService.findParamListByType(itemCatParam);
        return SysResult.success(paramList);
    }
}

3.1.5 编辑ItemCatParamService

@Service
public class ItemCatParamServiceImpl implements ItemCatParamService{

    @Autowired
    private ItemCatParamMapper itemCatParamMapper;

    //Sql:select * from item_cat_param where item_cat_id = xxx and param_type=1
    @Override       //参数中只有2个数据不为null
    public List<ItemCatParam> findParamListByType(ItemCatParam itemCatParam) {
        //QueryWrapper<ItemCatParam> queryWrapper = new QueryWrapper<>(itemCatParam);
        return itemCatParamMapper.selectList(new QueryWrapper<>(itemCatParam));
    }
}

3.1.6 页面效果展现

3.2 商品分类参数新增

3.2.1 页面分析

1).页面添加按钮

<!-- 定义添加参数按钮-->
          <el-button type="primary" size="mini" :disabled="isDisableBtn" 
          	@click="addDialogVisible = true">添加动态参数
          </el-button>

2).对话框窗口

3).页面JS

3.2.2 业务接口

3.2.3 编辑ItemCatParamController

3.2.4 编辑ItemCatParamService

3.3 商品分类参数的修改

3.3.1 页面分析

3.3.2 编辑ItemCatParamController

	/**
     * 商品分类参数更新
     * 请求路径: /itemCatParam/updateItemCatParam
     * 请求类型: put
     * 请求参数: 使用itemCatParam对象接收
     */
    @PutMapping("/updateItemCatParam")
    public SysResult updateItemCatParam(ItemCatParam itemCatParam){
        itemCatParamService.updateItemCatParam(itemCatParam);
        return SysResult.success();
    }

3.3.3 编辑ItemCatParamService

	@Override
    @Transactional
    public void updateItemCatParam(ItemCatParam itemCatParam) {
        itemCatParamMapper.updateById(itemCatParam);
    }

4. 商品业务实现

4.1 实现页面跳转

4.2 商品数据结构分析

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

/**
 * @author 刘昱江
 * 时间 2021/4/7
 */
@TableName("item")
@Data
@Accessors(chain = true)
public class Item extends BasePojo{
    @TableId(type = IdType.AUTO)
    private Integer id;         //商品Id号
    private String title;       //商品标题信息
    private String sellPoint;   //卖点信息
    private Integer price;      //商品价格 一般采用整数避免小数的精度问题 9.98
    private Integer num;        //商品数量
    private String images;       //商品图片  1.jpg,2.jpg
    private Integer itemCatId;  //商品分类ID号
    private Boolean status;     //状态信息    0 下架 1 上架
}

2）.表结构

4.3 商品列表展现

4.3.1 页面结构

4.3.2 业务接口

4.3.3 编辑ItemController

@RestController
@CrossOrigin
@RequestMapping("/item")
public class ItemController {
    @Autowired
    private ItemService itemService;

    /**
     * 实现商品列表展现
     * URL: /item/getItemList?query=&pageNum=1&pageSize=10
     * 参数: 使用分页参数
     * 返回值: SysResult对象(pageResult对象)
     */
    @GetMapping("/getItemList")
    public SysResult findItemList(PageResult pageResult){
        //查询分页数据 返回分页对象
        pageResult = itemService.findItemList(pageResult);
        return SysResult.success(pageResult);
    }
}

4.3.4 编辑ItemService

@Service
public class ItemServiceImpl implements ItemService{

    @Autowired
    private ItemMapper itemMapper;

    /**
     * 1.使用分页查询
     *      1.1手写sql
     *      1.2利用MP
     * @param pageResult
     * @return
     */
    @Override
    public PageResult findItemList(PageResult pageResult) {
        IPage page = new Page(pageResult.getPageNum(),
                          pageResult.getPageSize());
        QueryWrapper<Item> queryWrapper = new QueryWrapper<>();
        //用户是否传递参数
        boolean flag = StringUtils.hasLength(pageResult.getQuery());
        queryWrapper.like(flag,"title", pageResult.getQuery());

        page = itemMapper.selectPage(page,queryWrapper);
        long total = page.getTotal();
        List<Item> itemList = page.getRecords();
        return pageResult.setTotal(total).setRows(itemList);
    }
}

4.3.5 页面效果展现

4.3.6 添加过滤器

说明: 在main.js中添加过滤器.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
import './assets/ali-icon/iconfont.css'

/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8091/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios


//定义格式化价格的过滤器
Vue.filter('priceFormat',(price) => {
  return (price/100).toFixed(2)
})


Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.4 商品状态修改

4.4.1 页面JS分析

1).页面JS

2).页面ajax请求

4.4.2 编辑ItemController

	/**
     * url地址：/item/updateItemStatus
     * 请求参数： id: item.id,
     *           status: item.status
     * 返回值结果: SysResult
     */
    @PutMapping("/updateItemStatus")
    public SysResult updateItemStatus(@RequestBody Item item){
        itemService.updateItemStatus(item);
        return SysResult.success();
    }

4.4.3 编辑ItemService

	@Override
    public void updateItemStatus(Item item) { //id主键 /status
        itemMapper.updateById(item);
    }

4.5 商品删除自己实现

练习

4.6 商品新增页面跳转

4.6.1 跳转新增页面

1.点击按钮发送请求

2.编辑导航路由

4.6.2 跳转页面效果

4.7 文件上传

4.7.1 官网API介绍

4.7.2 编辑文件上传页面

		<!--
              class="upload-demo" 图片上传的类型
              :action="uploadUrl" 必选参数，上传的地址
              :on-preview="handlePreview" 当上传图片之后预览的回调
              :on-remove   删除图片的回调函数
              :on-success  上传成功的回调
              list-type="picture"  上传文件的类型 只允许上传图片
              multiple 是否支持多选文件
              drag  是否允许拖拽
              请求的参数名称: file
             -->
            <el-upload class="upload-demo" :action="uploadUrl"
            	 :on-preview="handlePreview" :on-remove="handleRemove"
              :on-success="handleSuccess" list-type="picture" multiple drag>
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

4.7.3 文件上传接口文档

4.7.4 编辑FileController

@RestController
@CrossOrigin
@RequestMapping("/file")
public class FileController {

    /**
     * Demo
     * URL:http://localhost:8091/file/upload
     * 参数: file:二进制信息
     * 返回值: SysResult对象
     * MultipartFile:SpringMVC 对外提供的接口 专门实现文件上传操作
     * 高级API 默认的文件大小 最大1M
     * 如果需要优化则需要编辑配置类 重新定义大小(一般不这么做)
     * 优化:  1.防止文件重名
     *        2.防止恶意程序 jpg|png|gif
     */
    @PostMapping("/upload")
    public SysResult upload(MultipartFile file) throws IOException {
        //1.获取文件名称
        String fileName = file.getOriginalFilename();
        //2.准备文件上传的本地目录
        String fileDir = "D:/JT_IMAGE/";
        //3.是否需要判断目录是否存在
        File filePath = new File(fileDir);
        if(!filePath.exists()){
            //可以创建多级目录
            filePath.mkdirs();
            //只创建一级目录
            //filePath.mkdir();
        }

        //4.准备输出的对象 文件的全路径="文件目录"/+"文件的名称"
        String realFilePath = fileDir + fileName;
        File realFile = new File(realFilePath);
        //5.实现文件上传
        file.transferTo(realFile);
        return SysResult.success();
    }
}