- 这节课来实现新增商品，首先是点击【添加商品】按钮实现跳转页面，在定义点击方法跳转页面之前，要先新建一个页面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方法
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插件直传到七牛云图片仓库
