当前位置：Vue-ts后台管理系统如何完成？
2020/12/09 11:46 分类： 技术交流 浏览：0
项目准备
一.1. 项目描述
- 该项目是基于vue和ts的后台管理系统
- 具体包含了登录、数据管理、账号管理模块
- 用户登录系统后，可以查看自己学习情况和添加最新的学习任务等
一.2. 项目功能界面
一.3. 开发环境与技术
|
开发环境 |
Window10 |
|
开发工具 |
vscode |
|
技术栈 |
Vue + ts + vuex + axios + element-ui |
一.4. 项目收获
- 熟悉vue项目开发流程
- 熟悉ts使用
- 熟悉element-UI使用
....
应用开发详解
一.5. 引入element-ui
//element-ui
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI
一.6. 引入axios
//挂载axios
Vue.prototype.$axios = axios;
一.7. 路由分配
//外部可访问 用于动态渲染路由信息
export const asyncRouterMap = [
{
path: '/',
name: 'dashboard',
component: Layout,
//在左侧菜单中显示
hidden: true,
//实际跳转页面
redirect: '/home',
children: [
{
path: '/home',
name: 'home',
//对应在左侧菜单中显示的名称和icon
meta: { title: '首页', icon: 'fa fa-home' },
component: () => import('@/views/Home.vue')
}
]
},
// 数据管理
{
path: '/dataManage',
name: 'dataManage',
//在左侧菜单中显示
hidden: true,
//对应在左侧菜单中显示的名称和icon
meta: { title: '数据管理', icon: 'fa fa-database' },
component: Layout,
redirect: '/tableData',
children: [
//表格管理
{
path: '/tableData',
name: 'tableData',
meta: { title: '表格管理', icon: 'fa fa-table' },
component: () => import('@/views/DataManage/TableData.vue')
},
//图表管理
{
path: '/chartsData',
name: 'chartsData',
meta: { title: '图表管理', icon: 'fa fa-bar-chart' },
component: () => import('@/views/DataManage/ChartsData.vue')
},
//表单管理
{
path: '/formData',
name: 'formData',
meta: {
title: '表单管理',
icon: 'fa fa-file-text-o',
// 限制访问权限 只有管理员和客服能够访问
roles: ['admin', 'editor']
},
component: () => import('@/views/DataManage/FormData.vue')
}
]
},
//账户管理
{
path: '/userManage',
name: 'userManage',
component: Layout,
//显示
hidden: true,
redirect: '/accountData',
children: [
// /账户管理
{
path: '/accountData',
name: 'accountData',
meta: { title: '账户管理', icon: 'fa fa-user-plus', roles: ['admin'] }, // 只有管理员能够访问
component: () => import('@/views/UserManage/AccountData.vue')
}
]
},
//个人中心
{
path: '/user',
component: Layout,
redirect: '/userInfo',
//不需要在左侧菜单中显示
hidden: false,
children: [
{
path: '/userInfo',
name: 'userInfo',
meta: { title: '个人中心' },
component: () => import('@/views/UserManage/UserInfo.vue')
}
]
},
// 404页面
{
path: '/404',
name: '404',
hidden: false,
meta: { title: '404' },
component: () => import('@/views/404.vue')
},
{
path: '*',
redirect: '/404'
},
// login
{
path: '/login',
name: 'login',
hidden: false,
meta: { title: '系统登录' },
component: () => import('@/views/Login/login.vue')
},
//password
{
path: '/password',
name: 'password',
hidden: false,
meta: { title: '找回密码' },
component: () => import('@/views/Login/password.vue')
}
];
一.8. 请求拦截
// 请求拦截
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
//是否在发起请求
if (localStorage.tsToken) {
config.headers.Authorization = localStorage.tsToken;
}
return config;
},
(err: any) => {
Promise.reject(err);
}
);
一.9. 响应拦截
// 响应拦截
service.interceptors.response.use(
(response: AxiosResponse) => {
return response;
},
(err: any) => {
let errMsg = '';
if (err && err.response.status) {
switch (err.response.status) {
case 401:
errMsg = '登录状态失效，请重新登录';
//删除储存的token
localStorage.removeItem('tsToken');
router.push('/login');
break;
case 403:
errMsg = '拒绝访问';
break;
case 408:
errMsg = '请求超时';
break;
case 500:
errMsg = '服务器内部错误';
break;
case 501:
errMsg = '服务未实现';
break;
case 502:
errMsg = '网关错误';
break;
case 503:
errMsg = '服务不可用';
break;
case 504:
errMsg = '网关超时';
break;
case 505:
errMsg = 'HTTP版本不受支持';
break;
default:
errMsg = err.response.data.msg;
break;
}
} else {
errMsg = err;
}
Message.error(errMsg);
return Promise.reject(errMsg);
}
);
....
赞 0
