我要评论基于vue3+typescript+pinia的后台管理系统
是基于vue3、pinia、vuerouter、vite、elementplus、typescript、echarts等后台系统
接口地址
https://documenter.getpostman.com/view/12387168/tzzdkb12
baseurl = ‘http://codercba.com:5000’
postman详细使用可以自己搜 也可以使用其他接口管理的工具
给项目添加
环境变量 baseurl
项目地址
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
发表评论