CGB2102-京淘项目day16

1.虚拟机安装Vmware

1.1 安装虚拟机14-15

VMware Workstation Pro 15.5.6

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

3.3.3 编辑ItemCatParamService

4. 商品业务实现

4.1 实现页面跳转

4.2 商品数据结构分析

4.2.1 POJO对象

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

4.4.3 编辑ItemService

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();
    }
}