蓝桥第四课-新增商品页面开发以及接口调用

• 这节课来实现新增商品，首先是点击【添加商品】按钮实现跳转页面，在定义点击方法跳转页面之前，要先新建一个页面addShop
• 在【src/views/shopModel】文件夹下，新建一个【addShop】文件夹，在文件夹内新建【index.vue】
• 在【index.vue】内敲快捷键vbase（前提是你的vscode已经安装了Vue VSCode Snippets插件），快速生成vue组件基础结构
• 然后就是新建页面路由
• 打开【src/router/index.js】，在【商品列表】路由下面，和其同级，新建一个【新增商品】的页面路由

children: [
      {
        path: '/shopModel/shopList',
        name: 'ShopList',
        component: () => import('@/views/shopModel/shopList/index'),//引入的是页面的路径，这是一种懒加载形式
        meta: { title: '商品列表', icon: 'table' }
      },
      {
        path: '/shopModel/addShop',
        name: 'AddShop',
        hidden: true,//在左侧隐藏，不会显示在左侧
        component: () => import('@/views/shopModel/addShop/index'),//引入的是页面的路径，这是一种懒加载形式
        meta: { title: '新增商品', icon: 'table' }
      },
    ]

• 然后找到【添加商品】按钮，定义一个点击事件@click="handleAdd"
• 在然后在methods里映射这个方法，然后跳转到新增商品的页面

handleAdd(){
      this.$router.push("/shopModel/addShop")
},

• 下面根据设计图开发页面

image.png

• 首先是该页面也是基于在el-card卡片上开发的，最外层先包裹一层el-card

<template>
  <div class="addShop">
    <el-card>
      新增商品  
    </el-card>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.addShop {
  margin: 12px;
}
</style>

• 首先开发 折叠面板

<!-- 折叠面板 -->
<el-collapse v-model="activeNames">
     <el-collapse-item title="添加商品" name="1">
         <div class="tip">操作提示</div>
         <div>
            1. 该页面展示了商城所有的商品信息，可对商品进行编辑修改操作。
         </div>
         <div>2. 商品下架后将无法在前台展示，请慎重操作。</div>
     </el-collapse-item>
</el-collapse>

• css

// 推荐::v-deep 叫样式穿透  /deep/ 这种也许会不生效
  ::v-deep .el-collapse-item__header {
    color: #55ca7d;
    font-size: 14px;
  }
  ::v-deep .el-collapse-item__wrap {
    border: 1px dashed #55ca7d;
    background-color: #f0fdf5;
  }
  ::v-deep .el-collapse-item__content {
    padding: 10px;
  }

• 下面开发form表单

<div class="from">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品类型" prop="region">
            <el-select
              v-model="ruleForm.type"
              placeholder="请选择商品类型"
            >
              <el-option
                v-for="(item, index) in typeArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input
              v-model="ruleForm.price"
              type="number"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input-number
              v-model="ruleForm.stock"
              placeholder="请输入商品名称"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="编号">
            <el-input-number
              v-model="ruleForm.number"
              placeholder="请输入商品名称"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number
              v-model="ruleForm.sort"
              placeholder="请输入商品名称"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="是否上架">
            <el-switch
              v-model="ruleForm.status"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
          <el-form-item label="商品描述">
            <el-input
              v-model="ruleForm.desc"
              type="textarea"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
</div>

• data中的代码

data() {
    return {
      ruleForm: {
        type: "",
        name: "",
        price: "",
        stock: "",
        number: "",
        sort: "",
        status: 1,
      },
      rules: {},
      typeArr: [
        {
          name: "儿童用品",
          id: 1,
        },
        {
          name: "厨房用品",
          id: 2,
        },
        {
          name: "生活用品",
          id: 3,
        },
      ],
    };
  },

• mehods 中的方法

methods: {
    onSubmit() {
      
    }
  },

• 下面实现表单校验，Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
• 给每个form-item都加一个prop属性

 <el-form-item label="商品类型" prop="type">
            <el-select
              v-model="ruleForm.type"
              placeholder="请选择商品类型"
            >
              <el-option
                v-for="(item, index) in typeArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input
              v-model="ruleForm.name"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input
              v-model="ruleForm.price"
              type="number"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="库存" prop="stock">
            <el-input-number
              v-model="ruleForm.stock"
              placeholder="请输入商品名称"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="编号" prop="number">
            <el-input-number
              v-model="ruleForm.number"
              placeholder="请输入商品名称"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="ruleForm.sort"
              placeholder="请输入商品名称"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="是否上架" prop="status">
            <el-switch
              v-model="ruleForm.status"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </el-form-item>
          <el-form-item label="商品描述" prop="desc">
            <el-input
              v-model="ruleForm.desc"
              type="textarea"
              placeholder="请输入商品名称"
            ></el-input>
          </el-form-item>

• 然后在data中的rules里写入这样的校验规则

 rules: {
        type: [
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        stock: [
          { required: true, message: "请输入商品库存", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入商品排序", trigger: "blur" },
        ],
        number: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择是否上下架", trigger: "change" },
        ],
        desc: [
          { required: true, message: "请输入商品简介", trigger: "blur" },
        ],
      },

• onSubmit方法改成这样

onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

• 下面开始调用新增商品的接口
• 先定义api方法
• 在【src/api/user.js】内新建api方法

/**
 * 新增商品 
 */
 export function addShop(data,id) {
  return request({
    url: '/api/add/goods',
    method: 'post',
    data
    // get 传参数   使用  params
    // put  post  delete  传参 使用 data
  })
}

• 在addShop页面引入这个方法

import {addShop} from '@/api/user';

• 在调用新增方法之前，要先完善下【商品分类】，要从后端接口获取真的分类信息
• 先定义api方法,获取分类列表
• 在【src/api/user.js】内新建api方法

/**
 * 获取商品分类 /api/query/menu
 */
 export function getShopMenu(data) {
  return request({
    url: '/api/query/menu',
    method: 'get',
    data
    // get 传参数   使用  params
    // put  post  delete  传参 使用 data
  })
}

• 在addShop页面引入这个方法

import {getShopMenu} from '@/api/user';

• 在methods新建一个方法，来获取商品分类列表

methods:{
 /**获取商品分类 */
    getShopMenuFun(){
      getShopMenu().then(res=>{
        this.typeArr = res.data
      })
    }
}

• 然后调用这个方法在mounted生命周期内调用

 mounted () {
    this.getShopMenuFun();
  },

• 然后根据接口的返回值 修改select下拉框的属性参数, label对应的是展示文字，valye对应的是绑定的id

<el-select v-model="ruleForm.type" placeholder="请选择商品类型">
              <el-option
                v-for="(item, index) in typeArr"
                :key="index"
                :label="item.name"
                :value="item._id"
              ></el-option>
</el-select>

• select下拉框绑定的值是type，为了方便传参，我们把 type 改成 category_id

<el-form-item label="商品类型" prop="category_id">
            <el-select v-model="ruleForm.category_id" placeholder="请选择商品类型">
              <el-option
                v-for="(item, index) in typeArr"
                :key="index"
                :label="item.name"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>

ruleForm: {
        category_id: "",//改这个
        name: "",
        price: "",
        stock: "",
        number: "",
        sort: "",
        status: 1,
      },

rules: {
        category_id: [ //改这个
          { required: true, message: "请选择商品分类", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        stock: [{ required: true, message: "请输入商品库存", trigger: "blur" }],
        sort: [{ required: true, message: "请输入商品排序", trigger: "blur" }],
        number: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择是否上下架", trigger: "change" },
        ],
        desc: [{ required: true, message: "请输入商品简介", trigger: "blur" }],
      },

• 现在可以先调用下 我们的 新增商品 接口

onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addShop(this.ruleForm).then((res) => {
            console.log(res);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

• 触发提交按钮会提示 图片不能为空

image.png

• 是因为少传了cover字段，下面来学习下如何封装一个图片上传的组件，使用七牛云js插件直传到七牛云图片仓库

接下章