111.(前端)商品管理页面布局——子组件挂载的方式与分类管理vue的结构搭建

1.概述

在此之前，我们已经实现了商品分类、商品管理(参数)的所有功能，并且，也已经做好了商品信息的模型，这里就需要我们先布局好商品管理页面的信息，之后再填充对应功能

1.2最终效果展示

2.流程

2.1结构搭建

1. goods目录下创建Goods.vue组件
2. 去到index.js中导入子组件

2.2展示结构

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Welcome from '../components/Welcome.vue'
import Home from '../components/Home.vue'
import User from '../components/user/User.vue'
import Menu  from '../components/power/Menu.vue'
import Role  from '../components/power/Role.vue'
import Cate  from '../components/goods/Cate.vue'
import Attr  from '../components/goods/Attribute.vue'
import Goods  from '../components/goods/Goods.vue'
// 引入全局样式
import '../assets/css/global.css'


Vue.use(VueRouter)

const routes = [
  // 为login组件创建路由
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    // 引入子组件，创建子路由
    redirect: '/welcome',
    children: [
      {
        path: '/welcome', component: Welcome
      },
      {
        path: "/user_list", component: User
      },
      {
        path: "/menu_list", component: Menu
      },
      {
        path: "/role_list", component: Role
      },
      {
        path:'/cate_list', component: Cate
      },
      {
        path:'/attr_list', component: Attr
      },
      {
        path:'/goods_list', component: Goods
      }
    ]
  }
]
const router = new VueRouter({
  routes
})

export default router



// 根据用户当前是否登录，在访问之前做一个判断
router.beforeEach ((to, from, next) => {
  if (to.path == '/login') return next() // 如果直接访问login界面，那就跳转过去
  // 如果不是直接访问登录界面，看一下他有没有token，如果没有的话，先让他登录，有就想去哪去哪
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

2.3页面布局搭建

1. 面包屑
2. 查询输入框
3. 添加按钮
4. 查槽对数据的操作按钮

2.4代码展示

<!-- src/components/goods/Goods.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>
            <!-- 内容1 -->
            <el-row>
                <!-- 搜索框 -->
                <el-col :span="8">
                    <el-input>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <!-- 添加商品按钮 -->
                <el-col :span="4">
                        <el-button type="primary" icon="el-icon-plus">添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 内容2：具体内容显示 -->
            <el-table border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="商品名称" prop="name"></el-table-column>
                <el-table-column label="商品价格(员)" prop="price"></el-table-column>
                <el-table-column label="商品库存" prop="number"></el-table-column>
                <el-table-column label="操作">
                    <!-- 创建查槽获取当前列的值 -->
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" icon="el-icon-edit">编辑</el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


        </el-card>
    </div>
</template>

<script>

</script>

<style lang="less" scoped>
    .el-col{
        margin: 5px;
    }
</style>