【Vue】项目：尚品汇后台管理系统(中)

饭啊饭°

已于 2022-04-17 14:26:09 修改

阅读量3.1k

点赞数 5

分类专栏： Vue项目文章标签： javascript ajax vue.js css3 css

于 2022-04-17 14:09:26 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/124228661

版权

前言

记录尚品汇后台管理系统的开发过程，功能模块包括登录、首页、品牌管理、平台属性管理、SKU管理、SPU管理、用户管理、角色管理、菜单管理模块。后台管理系统是CMS内容管理系统的一个子集，通过项目实战可以彻底搞明白菜单权限、按钮权限如何实现，掌握市场中数据可视化ECharts、V-charts的运用。

主要涵盖的技术点：Vue-cli、Axios、Vuex、Element-UI、菜单权限、按钮权限、数据可视化、Scss……

由于项目写的太长了，编辑器真的很卡呜呜呜，因此将项目分成了上、中、下三部分.
【Vue】项目：尚品汇后台管理系统(上)
【Vue】项目：尚品汇后台管理系统(下)

十三、平台属性管理的三级联动静态组件

1.由于属性管理、Spu、Sku模块都需要三级联动，因此我们把三级联动封装成静态组件，存放在components中，新建一个文件夹CategorySelect/index.vue。
2.静态组件的注册，在main.js中引入并注册。

//引入并注册CategorySelect
import CategorySelect from '@/components/CategorySelect'
Vue.component(CategorySelect.name,CategorySelect)

3.CategorySelect组件中有两个有阴影的盒子，也可以在element-ui中找到，是card卡片，行内表单为Form表单，因此大致的布局为

<div>
<el-form :inline="true" class="demo-form-inline">
    <el-form-item label="一级分类">
    <el-select  placeholder="请选择" value="">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
    <el-select  placeholder="请选择" value="">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
    <el-select  placeholder="请选择" value="">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
    </el-select>
    </el-form-item>
</el-form>
</div>

4.当前效果
三级标题组件静态效果

十四、获取数据动态的展示三级联动

获取三级联动的数据是有响应接口的,每一级对应一个接口,其中二级和三级的接口包含参数,原因是,二级展示什么数据是由一级决定的,而三级是由二级决定的,因此后面两个请求需要包含参数.
接口的获取需要在api/product/attr.js中书写代码,代码简单,略过.
一级标题的获取需要在组件挂载的时候就进行,因为一级标题是固定的.定义函数获取数据,在mounted中执行函数.需要的数据用三个数组和一个对象来收集.

data() {
   
  return {
   
      Category1List:[],
      Category2List:[],
      Category3List:[],
      cForm:{
   
          category1Id:'',
          category2Id:'',
          category3Id:'',
      }
  }
},
mounted(){
   
    this.getCategory1List();
},
methods:{
   
    async getCategory1List(){
   
        const result = await this.$API.attr.reqCategory1List()
        if(result.code === 200){
   
            this.Category1List = result.data
        }
    },
}

el-form与el-select中需要的数据展示.
el-form :model ------------表单元素收集到的位置
el-select v-model -------------给下拉框绑定数据
@change --------当下拉框数据改变的时候触发事件
el-option :label -----------下拉框展示的内容
:value ----------下拉框内容对应的值
一级标题的展示

<el-form :inline="true" class="demo-form-inline" :model="cForm">
   <el-form-item label="一级分类">
     <el-select
       placeholder="请选择"
       v-model="cForm.category1Id"
       @change="handler1">
       <el-option
         :label="c1.name"
         :value="c1.id"
         v-for="(c1, index) in Category1List"
         :key="c1.id"></el-option>
     </el-select>
   </el-form-item>
</el-form>

二级标题数据的获取(数据展示和三级数据的获取同理)

async handler1(){
   
  //   结构出一级分类的Id
  const {
   category1Id} = this.cForm;
  const result = await this.$API.attr.reqCategory2List(category1Id)
    if(result.code === 200){
   
        this.Category2List = result.data
    }
},

十五、完成三级联动业务

完成表单清除功能:当一级标题修改以后,二级三级标题应该置空,二级标题修改同理.

async handler1(){
   
   this.Category2List = []
   this.Category3List = []
   this.cForm.category2Id = '';
   this.cForm.category3Id = '';
  }
async handler2(){
   
	this.Category3List = []
	this.cForm.category3Id = '';
}

三级联动业务在子组件中,但需要数据的确实父组件,因此子组件需要给父组件其需要的3个标题id,需要用到自定义事件实现.在父组件中定义事件,子组件中触发事件,传递数据.
如果子组件更换一级二级标题,同样的下面的id要置空,且传递过来的id要用level进行标记.

// 父组件:Attr.vue中
<CategorySelect @getCategoryId="getCategoryId"></CategorySelect>

// 父组件:Attr.vue中
data(){
   
  return{
   
    category1Id:'',
    category2Id:'',
    category3Id:'',
  }
},
methods:{
   
  getCategoryId({
    categoryId,level}){
   
    if(level === 1){
   
      this.category1Id = categoryId
      this.category2Id = ''
      this.category3Id = ''
    }else if(level === 2){
   
      this.category2Id = categoryId
      this.category3Id = ''
    }else{
   
      this.category3Id = categoryId
      this.getAttrList()
    }
  },
  getAttrList(){
   
    console.log('发请求');
  }
}

//子组件中
this.$emit('getCategoryId',{
   categoryId:category1Id,level:1})
this.$emit('getCategoryId',{
   categoryId:category2Id,level:2})
this.$emit('getCategoryId',{
   categoryId:category3Id,level:3})

十六、获取平台属性数据与展示平台属性

从这节开始就不再仔细分析每个模块的静态代码了,因为很多都是重复的,且element-ui中都可以查看到.从此开始用图片的方式展示网页的静态结构,但是业务逻辑还是要仔细分析的.

结构分析

最低0.47元/天解锁文章

饭啊饭°

关注

5
点赞
踩
32

收藏

觉得还不错? 一键收藏
0
评论
【Vue】项目：尚品汇后台管理系统(中)

记录尚品汇后台管理系统的开发过程，功能模块包括登录、首页、品牌管理、平台属性管理、SKU管理、SPU管理、用户管理、角色管理、菜单管理模块。后台管理系统是CMS内容管理系统的一个子集，通过项目实战可以彻底搞明白菜单权限、按钮权限如何实现，掌握市场中数据可视化ECharts、V-charts的运用。
复制链接

扫一扫