【VUE项目实战】43、参数管理模块基本结构搭建

光仔December

已于 2022-04-04 10:15:05 修改

阅读量2.2k

点赞数

分类专栏： vue入门与实战文章标签： vue.js el-alert show-icon closable el-cascader

于 2022-03-27 13:17:32 首次发布

本文链接：https://blog.csdn.net/acmman/article/details/123771735

版权

vue入门与实战专栏收录该内容

95 篇文章 596 订阅

订阅专栏

接上篇《42、添加商品分类功能（三）》
上一篇我们完成添了商品分类模块的所有功能，本篇我们来准备开发新的模块————参数管理。

一、参数管理概述

商品参数用于显示商品的固定的特征信息，可以通过电商平台详情页面直观的看到。例如下图：

参数分为动态参数和静态属性，其中动态参数就是用户在选择商品的时候可以动态选择不同的属性（颜色、版本）；同时，商品固定的（上市年份、机身宽度等）不会变化的参数为静态属性。

我们要实现的参数管理模块的效果如下（动态参数和静态属性）：

这里要先选择需要设置的商品，这里因为是具体商品，所以必须只能选择三级分类：

二、创建新分支

开发新的模块，我们需要创建新的git分支，在VScode打开终端，在控制台输入“git branch”查看我们所在的分支（可以看到是在master主分支上），然后我们使用“git checkout -b goods_params”创建一个名为“goods_params”的分支，可以看到自动切换到了新的分支上：

然后我们将本地的分支推送到云端：

然后我们前往gitee云端，可以看到新增了一个分支：

三、创建组件并定义路由规则

我们在components/goods下创建一个“Params.vue”文件（参数管理组件），然后在“Params.vue”文件中编写基本代码结构：

<template>
    <div>
        <h3>参数管理组件页面</h3>
    </div>
</template>
 
<script>
export default {
    data(){
        return{}
    },
    created(){},
    methods:{}
}
</script>
 
<style scoped>
 
</style>

然后我们在“router/index.js”下引入Params组件，并在路由规则中定义路由规则（“/params”菜单的路由）：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 
import Welcome from '../components/Welcome.vue' 
import Users from '../components/user/Users.vue' 
import Rights from '../components/power/Rights.vue' 
import Roles from '../components/power/Roles.vue' 
import Cate from '../components/goods/Cate.vue' 
import Params from '../components/goods/Params.vue' 
 
Vue.use(VueRouter)
const routes = []
 
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }, //定义访问页面的路由地址
    { 
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        {path:'/welcome',component:Welcome},
        {path:'/users',component:Users},
        {path:'/rights',component:Rights},
        {path:'/roles',component:Roles},
        {path:'/categories',component:Cate},
        {path:'/params',component:Params}
      ]
    }
  ]
})
//挂载路由导航守卫
//to是我们跳转的路径，from是来自的路径，next为放行函数
router.beforeEach((to,from,next)=>{
  //如果用户访问登录页，直接放行
  if(to.path ==="/login") return next();
  //从sessionStorage中获取到保存的token值
  const tokenStr = window.sessionStorage.getItem("token");
  //没有token，强制跳转到登录页面
  if(!tokenStr) return next("/login");
  next();//有token，直接放行
})
 
export default router

然后我们刷新页面，点击分类参数菜单，就被路由到刚刚创建的组件上了：

三、渲染分类参数页面的基本结构

我们要渲染的页面效果如下：

首先左上角是一个面包屑导航，下面是一个卡片视图。卡片视图里分类三个部分，头部是一个提示注意项，中间是一个选择商品分类的级联选择框，下面是一个Tab页签，供我们选择不用的参数。
我们编写“Params.vue”文件，复制之前的代码，添加面包屑导航，然后下面添加卡片视图，然后在卡片视图里放个提示注意事项：

<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <!-- 头部的警告区域 -->
            <el-alert title="注意：只允许为第三季分类设置相关参数！" type="warning"></el-alert>
        </el-card>
    </div>
</template>
 
<script>
export default {
    data(){
        return{}
    },
    created(){},
    methods:{}
}
</script>
 
<style scoped>
 
</style>

注：需要在element.js中按需引入“Alert”组件。el-alert的closable属性用来控制是否关闭叉叉按钮，show-icon展示默认的图标：

最终效果：

然后我们来绘制选择商品分类的级联选项框：

<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <!-- 头部的警告区域 closable=false关闭叉叉按钮 show-icon 展示默认的图标-->
            <el-alert title="注意：只允许为第三季分类设置相关参数！" type="warning"
            :closable="false" show-icon></el-alert>

            <!-- 选择商品分类区域 -->
            <el-row class="cat_opt">
                <el-col>
                    <span>选择商品分类：</span>
                    <!-- 选择商品分类的级联选择框 -->
                    <el-cascader
                        v-model="selectedKeys"
                        :options="catelist"
                        :props="cascaderProps"
                        @change="handleChanged()"
                        clearable>
                    </el-cascader>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            //商品分类列表
            catelist: [],
            //指定级联选择器的配置对象
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                leaf: 'cat_level',
                expandTrigger: 'hover', //悬浮显示
            },
            //选中的商品分类的ID
            selectedKeys :[]
        }
    },
    created(){
        this.getCateList();
    },
    methods:{
        //获取所有的商品分类列表
        async getCateList(){
           //只发起请求，不传参数（type不传的话默认获取所有分类，而下拉框也不需要分页，故也不需要传递pagenum和pagesize分页参数）
           const {data: res} = await this.$http.get('categories');
           if(res.meta.status!==200){
               return this.$message.error('获取商品分类失败！')
           }
           console.log(res.data);
           //把数据列表，赋值给catelist
           this.catelist = res.data;
        },
        //商品级联选择项发生变化触发这个函数
        handleChanged(){
            //选中的不是三级分类就清空选中数组
            if(this.selectedKeys.length!==3){
                this.selectedKeys = [];
                return;
            }
            console.log(this.selectedKeys);
        },
    }
}
</script>
 
<style scoped>
.cat_opt {
    margin: 15px 0px;
}
</style>

这里我们依然使用的是之前在商品分类添加功能中使用的el-cascader级联选择框组件，并且在数据请求时依然请求“categories”API，只发起请求，不传参数（type不传的话默认获取所有分类，而下拉框也不需要分页，故也不需要传递pagenum和pagesize分页参数）。

效果：