vue项目-后台管理系统

青提绿茶

已于 2023-03-02 22:56:25 修改

阅读量3.9k

点赞数 3

文章标签： javascript vue.js 前端

于 2023-03-01 00:39:35 首次发布

本文链接：https://blog.csdn.net/whcds/article/details/129206322

版权

本文记录了一款前端项目的创作思路，适合初学者实践。项目包括登录页、主页面（用户管理、权限管理、商品管理、订单管理和数据统计）。使用了ElementUI、Nprogress、vue-echarts和vue-quill-editor等组件库。登录页实现Token验证，主页包含头部、侧边栏和内容区。用户列表页面展示了如何使用Element的table组件和dialog组件。建议使用Vue CLI 3创建项目，方便后期优化。

摘要由CSDN通过智能技术生成

前言：
一个传唱度极高的前端项目，及其适合像博主这样的小白练手。特以此文章记录下项目基本的创作思路，并且文末附赠项目源码，思维导图及一些后台文件，有兴趣可自取。希望对朋友们有用。
结构：
一，登录页
二，主页面
1，用户管理
用户列表
2，权限管理
角色列表
权限列表
3，商品管理
商品列表
分类参数
商品分类
4，订单管理
订单列表
5，数据统计
组件库：
elementUi , Nprogress ， vue-echarts ， vue-quill-editor
登录页
Token验证:保存登录返回得的token值，设置请求拦截器，后续每次请求都携带token进行验证。

axios.interceptors.request.use((config)=>{
   
  //在请求头中使用 Authorization 字段提供 token 令牌
  config.headers['authorization'] = sessionStorage.getItem('Token')
  return