【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统（coderwhy）

news2025/1/18 18:48:36

是基于Vue3、Pinia、VueRouter、Vite、ElementPlus、TypeScript、Echarts等后台系统

效果

项目地址

https://gitee.com/yangyang993/vue3_ts_cms_admin.git

超级管理员

登录

请添加图片描述

系统总览

侧边栏是动态形成的：动态路由加载。路由地址路径和菜单相匹配。
注意：路由地址和侧边栏菜单的选中状态不匹配（通过判断当前路由来解决）

核心技术

请添加图片描述

请添加图片描述
请添加图片描述

商品统计

  • echarts5.x 设计：饼图、玫瑰图、柱状图、折线图、中国地图
  • 核心：封装一下echarts
    • 设计一个baseEcharts ，将echarts的初始化，和setOtion封装在这里；
    • 将每一种图形都封装成组件，引用baseEcharts
    • 设置个性化的option，通过props，将option传递给baseEcharts，

请添加图片描述
请添加图片描述

系统管理

这个部分，主要是对数据的增删改查。展示的布局和形式相似，通过抽取相同的部分，形成三个部分的公共组件（pageSearch、pageContent、pageModal）。

  • 个性化的部分，使用具名插槽
  • 页面的搭建使用配置文件，快速搭建（注意：配置的时候，把url也要写上）
  • 编辑和新增是同一个公共组件，注意一些回显问题
  • 表格时间需要格式化，通过utils
  • 分页注意：在第1页之后的任何一页上时，添加或者修改数据，点击确定要刷新，当前页要定位到第1页

用户管理

请添加图片描述
请添加图片描述
请添加图片描述

部门管理

请添加图片描述
请添加图片描述
请添加图片描述

菜单管理

请添加图片描述

角色管理

请添加图片描述

商品中心

商品类别

请添加图片描述

商品类别

请添加图片描述

随便聊聊

故事列表

请添加图片描述

其他身份角色

请添加图片描述
根据用户 coderdemo的角色，获取的动态路由权限
请添加图片描述

项目结构

vue3_ts_cms
├── LICENSE
├── README.md
├── auto-imports.d.ts
├── components.d.ts
├── env.d.ts
├── index.html
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── img
│   │   │   ├── login-bg.svg
│   │   │   └── logo.svg
│   │   ├── index.less
│   │   ├── reset.css
│   │   └── reset.less
│   ├── components
│   │   ├── MainHeader
│   │   │   ├── HeaderCrumb
│   │   │   │   └── HeaderCrumb.vue
│   │   │   ├── HeaderInfo
│   │   │   │   └── HeaderInfo.vue
│   │   │   └── MainHeader.vue
│   │   ├── MainMenu
│   │   │   └── MainMenu.vue
│   │   ├── MainTable
│   │   │   └── MainTable.vue
│   │   ├── PageEcharts
│   │   │   ├── data
│   │   │   │   ├── china.json
│   │   │   │   ├── china_geo.json
│   │   │   │   └── location.json
│   │   │   ├── echart-src
│   │   │   │   ├── BarEchart.vue
│   │   │   │   ├── BaseEchart.vue
│   │   │   │   ├── LineEchart.vue
│   │   │   │   ├── MapEchart.vue
│   │   │   │   ├── PieEchart.vue
│   │   │   │   └── RoseEchart.vue
│   │   │   ├── index.ts
│   │   │   ├── types
│   │   │   │   └── index.ts
│   │   │   └── utils
│   │   │       ├── convert-data.ts
│   │   │       └── coordinate-data.ts
│   │   └── PageMain
│   │       ├── PageContent
│   │       │   └── PageContent.vue
│   │       ├── PageModal
│   │       │   ├── PageModal.vue
│   │       │   └── type.ts
│   │       └── PageSearch
│   │           └── PageSearch.vue
│   ├── global
│   │   ├── constance.ts
│   │   └── register-icons.ts
│   ├── hooks
│   │   ├── usePageContent.ts
│   │   ├── usePageModal.ts
│   │   └── usePermission.ts
│   ├── main.ts
│   ├── router
│   │   ├── AnalysisMain
│   │   │   ├── AnalysisOverview
│   │   │   │   └── AnalysisOverview.ts
│   │   │   └── AnalysisdDashboard
│   │   │       └── AnalysisdDashboard.ts
│   │   ├── ProductCenter
│   │   │   ├── ProductCategory
│   │   │   │   └── ProductCategory.ts
│   │   │   └── ProductGoods
│   │   │       └── ProductGoods.ts
│   │   ├── StoryChat
│   │   │   ├── ChatStory
│   │   │   │   └── ChatStory.ts
│   │   │   └── StoryList
│   │   │       └── StoryList.ts
│   │   ├── SystemMain
│   │   │   ├── SystemDepartment
│   │   │   │   └── SystemDepartment.ts
│   │   │   ├── SystemMenu
│   │   │   │   └── SystemMenu.ts
│   │   │   ├── SystemRole
│   │   │   │   └── SystemRole.ts
│   │   │   └── SystemUser
│   │   │       └── SystemUser.ts
│   │   └── index.ts
│   ├── service
│   │   ├── config
│   │   │   └── index.ts
│   │   ├── index.ts
│   │   ├── modules
│   │   │   ├── home.ts
│   │   │   ├── login
│   │   │   │   └── login.ts
│   │   │   └── main
│   │   │       ├── analysis
│   │   │       │   └── analysis.ts
│   │   │       ├── main.ts
│   │   │       └── system
│   │   │           └── index.ts
│   │   └── request
│   │       ├── index.ts
│   │       └── type.ts
│   ├── store
│   │   ├── index.ts
│   │   ├── login
│   │   │   └── login.ts
│   │   └── main
│   │       ├── analysis
│   │       │   └── analysis.ts
│   │       ├── main.ts
│   │       └── system
│   │           ├── system.ts
│   │           └── type.ts
│   ├── types
│   │   ├── index.ts
│   │   └── login.ts
│   ├── utils
│   │   ├── cache.ts
│   │   ├── format.ts
│   │   └── map-menus.ts
│   ├── views
│   │   ├── AnalysisMain
│   │   │   ├── AnalysisOverview
│   │   │   │   ├── AnalysisOverview.vue
│   │   │   │   └── OverviewCpn
│   │   │   │       ├── OverviewCard.vue
│   │   │   │       └── OverviewTree.vue
│   │   │   └── AnalysisdDashboard
│   │   │       ├── AnalysisdDashboard.vue
│   │   │       └── DashCpns
│   │   │           ├── CountCard
│   │   │           │   └── CountCard.vue
│   │   │           └── EchartCard
│   │   │               └── EchartCard.vue
│   │   ├── LoginAdmin
│   │   │   ├── LoginAccount.vue
│   │   │   ├── LoginAdmin.vue
│   │   │   └── LoginPhone.vue
│   │   ├── NotFound
│   │   │   └── NotFound.vue
│   │   ├── ProductCenter
│   │   │   ├── ProductCategory
│   │   │   │   ├── ProductCategory.vue
│   │   │   │   └── config
│   │   │   │       ├── content.config.ts
│   │   │   │       ├── modal.config.ts
│   │   │   │       └── search.config.ts
│   │   │   └── ProductGoods
│   │   │       ├── ProductGoods.vue
│   │   │       └── config
│   │   │           ├── content.config.ts
│   │   │           ├── modal.config.ts
│   │   │           └── search.config.ts
│   │   ├── StoryChat
│   │   │   ├── ChatStory
│   │   │   │   └── ChatStory.vue
│   │   │   └── StoryList
│   │   │       ├── StoryList.vue
│   │   │       └── config
│   │   │           └── content.config.ts
│   │   └── SystemMain
│   │       ├── SystemDepartment
│   │       │   ├── SystemDepartment.vue
│   │       │   └── config
│   │       │       ├── content.config.ts
│   │       │       ├── modal.config.ts
│   │       │       └── search.config.ts
│   │       ├── SystemMain.vue
│   │       ├── SystemMenu
│   │       │   ├── SystemMenu.vue
│   │       │   └── config
│   │       │       └── content.config.ts
│   │       ├── SystemRole
│   │       │   ├── SystemRole.vue
│   │       │   └── config
│   │       │       ├── content.config.ts
│   │       │       ├── modal.config.ts
│   │       │       └── search.config.ts
│   │       └── SystemUser
│   │           ├── SystemUser.vue
│   │           ├── UserCpns
│   │           │   ├── UserContent.vue
│   │           │   ├── UserModal.vue
│   │           │   └── UserSearch.vue
│   │           └── config
│   │               ├── content.config.ts
│   │               ├── modal.config.ts
│   │               └── search.config.ts
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

项目地址

https://gitee.com/yangyang993/vue3_ts_cms_admin.git

相关笔记

【Axios、TypeScript】基于vue3和typescript的axios二次封装

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/556582.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CAN总线上的报文帧类型（N_PCI）

CAN总线上的报文帧类型（N_PCI）

1.四种报文类型（简洁明了） 请记住对于CAN报文来说，可以通过识别每条CAN的首个字节来确定它的类型，4种： 单帧 0 首帧 1 连续帧 2 流控帧 3 2. 单帧（SF，Single Frame） 0X 单帧首个…
阅读更多...
【Spring MVC】后端处理多文件上传如何保持最大的灵活性

【Spring MVC】后端处理多文件上传如何保持最大的灵活性

文章目录 前言找文档Spring MVC 如何接收多文件formdata 接收其他传参结论 前言 有一个多文件上传的需求，翻看了Spring MVC的官网，总结一下： 如何根据版本号找官方文档后端如何声明Controller能保持较好的灵活性 找文档 spring-framework…
阅读更多...
Hive基础概论

Hive基础概论

HIVE 基础 Hive基础什么是Hive？为什么用Hive？Hive与Hadoop的关系Hive架构、组件组件用户接口元数据存储Driver驱动程序，包括语法解析器、计划编译器。优化器、执行器执行引擎 数据模型Data ModelDataBase 数据库Tables 表Partitions 分区Buck…
阅读更多...
LIMUML04数据标注（note）

LIMUML04数据标注（note）

数据标注的思维导图 目标：是提升模型还是提升标注，本小节讨论提升标准，提升模型后面介绍。 如果有足够标注：使用半监督学习 没有足够标注，有足够预算：请人标注 没有足够预算：使用弱监督学习 问题…
阅读更多...
每日学术速递5.22

每日学术速递5.22

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Drag Your GAN: Interactive Point-based Manipulation on the Generative Image Manifold(SIGGRAPH 2023) 标题：拖动你的 GAN：生成图像流形上基于点的交互…
阅读更多...
基础IO(总)

基础IO(总)

接口介绍 open&#xff1a; #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(const char *pathname, int flags); int open(const char *pathname, int flags, mode_t mode); pathname&#xff1a;要打开或创建的目标文件 fla…
阅读更多...
两数之和 C++实现（力扣题目1）

两数之和 C++实现（力扣题目1）

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出和为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回答案…
阅读更多...
SQL案例-高校信息管理系统实现要求

SQL案例-高校信息管理系统实现要求

SQL案例-高校信息管理系统实现要求 (1) 建表 stuInfo(学生信息表) 字段名称数据类型说明stuName字符学生姓名&#xff0c;该列必填&#xff0c;要考虑姓氏可能是两个字的&#xff0c;如欧阳俊雄stuNo字符学号&#xff0c;该列必填&#xff0c;学号不能重复&#xff0c;且必须…
阅读更多...
AC规则-4-规则和冲突解决

AC规则-4-规则和冲突解决

3.3 Introduction to Access Control Rule Conflict Resolution 3.3 访问控制规则冲突解决简介 本节从高层次讨论访问控制规则冲突解决。 本文档稍后会提供更多详细信息。 规则的优先级不是基于它在其他规则中的阅读顺序。 管理冲突规则的策略基于三个基本原则&#xff08;…
阅读更多...
linux中 list_entry 设计背景及原理解析

linux中 list_entry 设计背景及原理解析

Linux 2.4.22 在这一版本中的 list_entry的宏定义实现如下&#xff1a; #define list_entry(ptr, type, member) \((type *)((char *)(ptr)-(unsigned long)(&((type *)0)->member)))乍一看&#xff0c;会觉得特别复杂&#xff0c;其实分析之后&#xff0c;会发现清晰…
阅读更多...
LeetCode高频算法刷题记录8

LeetCode高频算法刷题记录8

文章目录 1. 零钱兑换【中等】1.1 题目描述1.2 解题思路1.3 代码实现 2. 最小栈【最小栈】2.1 题目描述2.2 解题思路2.3 代码实现 3. 最长有效括号【困难】3.1 题目描述3.2 解题思路3.3 代码实现 4. 从前序与中序遍历序列构造二叉树【中等】4.1 题目描述4.2 解题思路4.3 代码实…
阅读更多...
day8 域名解析与http服务器实现原理

day8 域名解析与http服务器实现原理

域名解析gethostbyname函数 主机结构在 <netdb.h> 中定义如下 结构的成员包括&#xff1a; h_name &#xff1a;主机的正式名称 h_aliases&#xff1a;主机的备用名称数组&#xff0c;以 NULL 结尾指针 h_addrtype&#xff1a;地址类型;&#xff08;AF_INET或AF_INET…
阅读更多...
基础知识6

基础知识6

知乎上的面试题&#xff1a;https://zhuanlan.zhihu.com/p/546032003 一、Topk问题以及变种&#xff0c;各种解法 微博的热门排行就属于 TopK 问题 TopK 一般是要求在 N 个数的集合中找到最小或者最大的 K 个值&#xff0c;通常 N 都非常得大。 算法的优点是不用在内存中读入全…
阅读更多...
经典组件知识（kafka,ngix）

经典组件知识（kafka,ngix）

消息队列的作用 解耦、削峰、 异步&#xff08;非必要逻辑异步运行&#xff0c;加快响应速度&#xff09; kafka 首先有个topic的概念&#xff0c;类似于表。 Partition 分区&#xff1a;一个topic下面有多个分区&#xff0c;这些分区会存储到不同的服务器上面&#xff0c;或者…
阅读更多...
如何使用 Django 进行测试驱动开发，我来告诉你

如何使用 Django 进行测试驱动开发，我来告诉你

所谓测试驱动开发(TDD)&#xff0c;就是先编写测试用例&#xff0c;然后编写代码来满足测试用例&#xff0c;具体包含以下步骤&#xff1a; 编写测试用例。编写代码满足测试用例中的需求。运行测试用例。如果通过&#xff0c;说明代码满足了测试用例所定义的需求。如果未通过&…
阅读更多...
armday2

armday2

.text .global _start _start: bl LED1_INITbl LED1_ONbl delay_1sbl LED1_OFFbl LED2_INITbl LED2_ONbl delay_1sbl LED2_OFFbl LED3_INITbl LED3_ONbl delay_1sbl LED3_OFFbl _start/**********LED1点灯PE10**************/ LED1_INIT:1.通过RCC_HB4_ENSETR寄存器设置GPIOE组…
阅读更多...
PoseiSwap：为何青睐 Layer3？又为何选择 Celestia 作为技术伙伴？

PoseiSwap：为何青睐 Layer3？又为何选择 Celestia 作为技术伙伴？

自 PoseiSwap 在 Nautilus Chain 上线后&#xff0c;该 DEX 的整体市场进展十分顺利。我们看到&#xff0c;其不仅在 4 月&#xff0c;以 1000万美元的估值&#xff0c; 获得了来自于 Zebec Labs 的首轮 150 万美元的融资。而在本月&#xff0c;在 Zebec 生态的帮助下&#xff…
阅读更多...
利用prusa 3d打印地形模型 如何合理切片并提高打印速度

利用prusa 3d打印地形模型 如何合理切片并提高打印速度

如上图&#xff0c;我们选择打印一个宽10cm 的地形模型&#xff0c;通过prusa切片&#xff0c;显示时间为22小时31分钟。这个速度大概一天&#xff0c;确实不是我们要的速度&#xff0c;如何提高速度又不失去打印细节且不增加失败风险呢。 1.减少填充 10%的填充对于创想三维en…
阅读更多...
RK3568平台开发系列讲解（驱动基础篇）RK平台UART的使用

RK3568平台开发系列讲解（驱动基础篇）RK平台UART的使用

🚀返回专栏总目录 文章目录 一、引脚定义1.1 UART91.2 RS232和RS485二、设备树配置三、调试3.1 连接硬件3.2 打开主机的串口终端3.3 板子发送数据3.4 板子接收数据3.5 主机退出kermit串口连接四、UART2普通串口配置沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇…
阅读更多...
C++——模板初阶

C++——模板初阶

文章目录 一.泛型编程二.函数模板1.函数模板的概念2.函数模板的格式3.函数模板的原理4.函数模板的实例化&#xff08;1&#xff09;隐式实例化&#xff08;2&#xff09;显式实例化 5.模板参数的匹配原 三.类模板1.类模板的定义格式2.类模板的实例化 前言&#xff1a; 本章我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023