尚品汇后台管理系统
1、登录(退出登录)
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文件中,然后统一暴露。