前端工程师想要做一个Vue-ts后台管理系统，如何完成？
作者：互联网
项目准备
一.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);
}
);
....
标签：Vue,name,管理系统,component,ts,fa,import,path,errMsg 来源： https://blog.51cto.com/15128443/2655742