尚品汇后台管理系统

尚品汇后台管理系统

• 1、登录（退出登录）
• 2、路由设置（***）
• • 路由表component属性
• 3、品牌列表模块
• • 3.1 el-pagination layout属性
  • 3.2 封装四个模块api
  • 3.3 this滥用和参数解构
  • 3.4 品牌列表展示(插槽)
  • 3.5 品牌信息新增和修改
  • 3.6 表单验证
  • 3.7 删除品牌信息
• 4、商品属性
• • 4.1 三级联动
  • 4.2 商品属性展示

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: () =>