【vue】vueCms后台管理系统(开源)
我的开源项目地址:[vueCms_xg](https://gitee.com/derekgo/vue-cms_xg)
# 🎮在线体验
- 开发文档：制作中
- 后台地址：https://www.vuecms.cn
# ⚡️ 简介
一个开箱即用，前端基于 `vite 2` + `vue 3` + `typeScript` + `element Plus` + `pinia` + `vue-router 4` 的PC端项目模板。
后端由`nestjs`构建高效、可扩展的 Node.js 服务器端应用程序的开发框架。
# 🚀 开发
1. 安装
```
#全局安装yarn
npm install yarn -g
#进入项目根目录
yarn install
```
2. 运行
```
#前端运行项目 默认端口号为8081
yarn dev
#后端运行项目 默认端口号为3000
nest start --watch
```
# 📦️ 环境打包
- 生产环境打包
```
yarn build
```
# 🔧 项目配置
- 后端配置(node_nest/src/utils/config.ts)
```bash
#进入node_nest/src/utils/config.ts
//系统基础设置
export const sysBase = {
host:"http://127.0.0.1",
port:3000
}
//jwt配置
export const jwtKey = {
secret: 'vueCms_xg',
expireTime:"10h"
};
//跨域配置
export const corsConfig = {
origin: '*',
optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}
//mysql配置
export const mysqlConfig:any = {
type: 'mysql',//数据库类型
host: '你的服务器ip',//ip
port: 3306,//端口号
username: '链接mysql的账号',//账号
password: '链接mysql的密码',//密码
database: 'g_vuecms_xg',//数据库名
synchronize: true,//是否自动将实体类同步到数据库
retryDelay:500,//重试连接数据库间隙
retryAttempts:10,//重试连接数据库的次数
// entities: [__dirname+"/**/*.entity{.ts,.js}"],//实体文件
autoLoadEntities:true,//如果为true，将自动加载实体 forFeature()方法注册的每个实体都将自动添加到配置对象的实体
cache:false,//要启用缓存
logging:true,//开启日志
}
//redis配置
export const redisConfig = {
port: 6379,
host: '你的服务器ip',
password: '你的redis链接密码',
db: 0
}
export const uploadImgConfig = {
imgBaseUrl:"./public/uploads/img",//图片上传路径
artContentImgBaseUrl:"./public/uploads/artContentImg",//文章图片上传路径
}
```
# 📚 目录
```
└─ vue3_vite //前端
│─ src
│─ App.vue // 根容器
│─ main.ts // 前端入口文件
├─ assets // 静态资源
├─ components // 组件
├─ network //项目api接口
├─ plugins //项目第三方插件
├─ router //路由
├─ store //状态管理器
├─ router // 路由
├─ utils // 工具库
├──directive //自定义指令 权限
│ config.ts //项目配置文件
│ storage.ts // 本地缓存
│ systemRules.ts // 系统规则
│ utils.ts // 公共工具函数
└─ test.js // 校验函数集合
├─ views // 视图
│
└─ v1 // 版本v1
├─ article // 文章管理
├─ common // 公共页面 .
├─ home // 首页 .
├─ layout // 公共页面模板
├─ login // 登陆
├─ pic // 图片管理
├─ system // 系统管理 .
├─ user // 用户管理 .
└─ redirect.vue // 重定向 .
├─ types // ts类型定义
├─ vite // vite项目配置
├─ .env.xxx // 各环境的配置文件
├─ vite.config.ts // 项目配置
├─ tsconfig.json // ts配置
└─ index.html // 入口文件
└─ node_nest //后端
│─ src
├─ common // 公共
├─ apiErr //api错误类
├─ enum //项目枚举
├─ filters //过滤器
├─ interceptor //拦截器
├─ middleware //中间件
├─ redis //redis缓存类
└─ validation // 管道校验
├─ logs // 日志
├─ accessRecords //访问本地记录
└─ operationBehavior //操作本地记录
├─ modules // 功能模块
├─ art //文章
├─ artColumn //文章栏目
├─ artSort //文章分类
└─ ...
├─ tasks // 定时任务
├─ tasks.module.ts //
└─ tasks.service.ts //
├─ utils // 工具库
│ config.ts //项目配置文件
└─ utils.ts // 公共工具函数
├─ app.controller.ts // 全局控制层
├─ app.module.ts // 全局模块
├─ app.service.ts // 全局服务层
└─ main.ts // 项目入口
└─ tsconfig.json // ts配置
```
# 🔨项目功能
- [x] 登录 -- 完成
- [x] 路由拦截 -- 完成
- [x] 文章管理（增加、编辑、搜索、删除、权限管理） -- 完成
- [x] 用户管理（增加、编辑、搜索、删除、权限管理） -- 完成
- [x] 图片管理（增加、编辑、搜索、删除、权限管理） -- 完成
- [x] 系统管理（增加、编辑、搜索、删除、权限管理） -- 完成
- [ ] 实时通信
- [ ] 系统监控-(在线人员，监控服务器)
- [ ] 系统文档-(接口文档)
- [ ] 未完待续...
# 💻系统截图
>✨$\textcolor{gray}{踩坑不易，还希望各位大佬支持一下}$ <br/>
>📃 $\textcolor{green}{我的开源项目：}$ [vueCms.cn](https://www.vuecms.cn/)<br/>
>🔥 $\textcolor{green}{技术交流QQ群：837051545}$ <br/>
>👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$ <br/>
>⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$ <br/>
>✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$ <br/>
>如果有不懂可以留言，我看到了应该会回复
>如有错误，请多多指教
