尚品汇后台管理系统

1、登录（退出登录）

后台接口swagger在线文档：
后台接口1
后台接口2

1、将所有的api接口url更换为和swagger在线文档相同的url。
2、跨域解决
devServer部分（proxy代理解决跨域）

devServer: {
   
    port: port,
    open: true,
    overlay: {
   
      warnings: false,
      errors: true
    },
    proxy: {
   
      // 会把请求路径中的/api换为后面的代理服务器
      '/dev-api': {
   
        // 提供数据的服务器地址
        target: 'http://39.98.123.211',
        pathRewrite: {
    '^/dev-api': '' }
      }
    }

  },

记得重启项目
3、切记将请求拦截器的X-Token改为token，否则后台会返回jwt空错误。
config.headers['token'] = getToken()
退出登录部分可以不做修改。

2、路由设置（***）

路由部分代码

export const constantRoutes = [
  {
   
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
   
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
   
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
   
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {
    title: '首页', icon: 'dashboard' }
    }
    ]
  },
  {
   
    path: '/product',
    name: 'Product',
    component: Layout,
    meta: {
    title: '商品管理', icon: 'el-icon-goods' },
    children: [{
   
      path: 'trademark',
      name: 'TradeMark',
      component: () => import('@/views/tradeMark'),
      meta: {
    title: '品牌管理' }
    }, {
   
      path: 'attr',
      name: 'Attr',
      component: () => import('@/views/Attr'),
      meta: {
    title: '平台属性管理' }
    }, {
   
      path: 'sku',
      name: 'Sku',
      component: () => import('@/views/Sku'),
      meta: {
    title: 'Sku管理' }
    }, {
   
      path: 'spu',
      name: 'Spu',
      component: () => import('@/views/Spu'),
      meta: {
    title: 'Spu管理' }
    }
    ]
  },
  // 404 page must be placed at the end !!!
  {
    path: '*', redirect: '/404', hidden: true }
]

路由表component属性

component用法一：

path: 'trademark',
name: 'TradeMark',
component: () => import('@/views/tradeMark'),

当访问path为trademark时，会显示tradeMark这个组件。上面只是component最简单的应用。
component用法二

 	path: '/product',
    name: 'Product',
    component: Layout,
    meta: {
    title: '商品管理', icon: 'el-icon-goods' },
    children: [{
   
      path: 'trademark',
      name: 'TradeMark',
      component: () => import('@/views/tradeMark'),
      meta: {
    title: '品牌管理' }
    }]

如果一个路由只是一个菜单项，并不对应相应的组件，那么此时的component为本菜单项所在的路由组件。

例如：上面代码中product只是一个菜单项，并不对应相应组件。所以他的component应该为他所在的组件，即component: Layout。trademark为子菜单项，有具体对应的组件，所以component: () => import('@/views/tradeMark'),trademark的component原理就是用法一。

前端菜单栏显示的实现具体如下：

遍历路由信息数组，将路由项渲染为菜单项。菜单项的信息在路由信息中获取。
（1）如果路由项只有一个子路由，则将该子路由信息作为作为菜单项信息。
（2）如果路由项有多个子路由，将父路由信息作为一级菜单项信息。然后，遍历所有的子路由，生成相应的二级菜单项。

这个前端菜单项显示代码值得研究，写的非常好。

3、品牌列表模块

3.1 el-pagination layout属性

layout是指分页器各组件的排列方式，例如：
layout=" prev, pager, next, jumper,->,sizes,total"

->后面的组件会被放在页面的最右边。如下图所示：

3.2 封装四个模块api

四个模块分别为attr、sku、spu、tradeMark。
每个模块的api封装为对应的js文件，如下图所示：

为了方便使用，将四个模块再次封装到一个js文件中，然后统一暴露。