【vue】vueCms后臺管理系統(tǒng)(開源)
我的開源項目地址:[vueCms_xg](https://gitee.com/derekgo/vue-cms_xg)
# ??在線體驗
- 開發(fā)文檔：制作中
- 后臺地址：https://www.vuecms.cn
# ?? 簡介
一個開箱即用，前端基于 `vite 2` + `vue 3` + `typeScript` + `element Plus` + `pinia` + `vue-router 4` 的PC端項目模板。
后端由`nestjs`構(gòu)建高效、可擴展的 Node.js 服務(wù)器端應(yīng)用程序的開發(fā)框架。
# ?? 開發(fā)
1. 安裝
```
#全局安裝yarn
npm install yarn -g
#進入項目根目錄
yarn install
```
2. 運行
```
#前端運行項目 默認端口號為8081
yarn dev
#后端運行項目 默認端口號為3000
nest start --watch
```
# ??? 環(huán)境打包
- 生產(chǎn)環(huán)境打包
```
yarn build
```
# ?? 項目配置
- 后端配置(node_nest/src/utils/config.ts)
```bash
#進入node_nest/src/utils/config.ts
//系統(tǒng)基礎(chǔ)設(shè)置
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',//數(shù)據(jù)庫類型
? host: '你的服務(wù)器ip',//ip
? port: 3306,//端口號
? username: '鏈接mysql的賬號',//賬號
? password: '鏈接mysql的密碼',//密碼
? database: 'g_vuecms_xg',//數(shù)據(jù)庫名
? synchronize: true,//是否自動將實體類同步到數(shù)據(jù)庫
? retryDelay:500,//重試連接數(shù)據(jù)庫間隙
? retryAttempts:10,//重試連接數(shù)據(jù)庫的次數(shù)
? // entities: [__dirname+"/**/*.entity{.ts,.js}"],//實體文件
? autoLoadEntities:true,//如果為true，將自動加載實體 forFeature()方法注冊的每個實體都將自動添加到配置對象的實體
? cache:false,//要啟用緩存
? logging:true,//開啟日志
}
//redis配置
export const redisConfig = {
? port: 6379,
? host: '你的服務(wù)器ip',
? password: '你的redis鏈接密碼',
? db: 0
}
export const uploadImgConfig = {
? imgBaseUrl:"./public/uploads/img",//圖片上傳路徑
? artContentImgBaseUrl:"./public/uploads/artContentImg",//文章圖片上傳路徑
}
```
# ?? 目錄
```
└─ vue3_vite? ? ? ? //前端
? │─ src
? ? │─ App.vue? ? ? // 根容器
? ? │─ main.ts? ? ? // 前端入口文件
? ? ├─ assets? ? ? ?// 靜態(tài)資源
? ? ├─ components? ?// 組件
? ? ├─ network? ? ? //項目api接口
? ? ├─ plugins? ? ? //項目第三方插件
? ? ├─ router? ? ? ?//路由
? ? ├─ store? ? ? ? //狀態(tài)管理器
? ? ├─ router? ? ? ?// 路由
? ? ├─ utils? ? ? ? // 工具庫
? ? ? ├──directive? ? ? ? ? //自定義指令 權(quán)限
? ? ? │? config.ts? ? ? ? ? //項目配置文件
? ? ? │? storage.ts? ? ? ? ?// 本地緩存
? ? ? │? systemRules.ts? ? ?// 系統(tǒng)規(guī)則
? ? ? │? utils.ts? ? ? ? ? ?// 公共工具函數(shù)
? ? ? └─ test.js? ? ? ? ? ? // 校驗函數(shù)集合
? ? ├─ views // 視圖
? ? ? │??
? ? ? └─ v1 // 版本v1
? ? ? ? ├─ article? ? ? ? ? ? // 文章管理
? ? ? ? ├─ common? ? ? ? ? ? ?// 公共頁面? ?.
? ? ? ? ├─ home? ? ? ? ? ? ? ?// 首頁? ?.
? ? ? ? ├─ layout? ? ? ? ? ? ?// 公共頁面模板
? ? ? ? ├─ login? ? ? ? ? ? ? // 登陸
? ? ? ? ├─ pic? ? ? ? ? ? ? ? // 圖片管理
? ? ? ? ├─ system? ? ? ? ? ? ?// 系統(tǒng)管理? ?.
? ? ? ? ├─ user? ? ? ? ? ? ? ?// 用戶管理? ?.
? ? ? ? └─ redirect.vue? ? ? ?// 重定向? ?.? ? ? ? ??
? ├─ types? ? ? ? ? ? ? // ts類型定義
? ├─ vite? ? ? ? ? ? ? ?// vite項目配置
? ├─ .env.xxx? ? ? ? ? ?// 各環(huán)境的配置文件
? ├─ 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? ? ? ? // 定時任務(wù)
? ? ? ├─ tasks.module.ts? ? ? ? //?
? ? ? └─ tasks.service.ts? ? ? ?//?
? ? ├─ utils? ? ? ? // 工具庫
? ? ? │? config.ts? ? ? ? ? ? ? //項目配置文件
? ? ? └─? utils.ts? ? ? ? ? ? ? // 公共工具函數(shù)
? ? ├─ app.controller.ts? ? ? ? // 全局控制層
? ? ├─ app.module.ts? ? ? ? ? ? // 全局模塊
? ? ├─ app.service.ts? ? ? ? ? ?// 全局服務(wù)層
? ? └─ main.ts? ? ? ? ? ? ? ? ? // 項目入口
? └─ tsconfig.json? ? ? // ts配置
```
# ??項目功能
- [x] 登錄 -- 完成
- [x] 路由攔截 -- 完成
- [x] 文章管理（增加、編輯、搜索、刪除、權(quán)限管理） -- 完成
- [x] 用戶管理（增加、編輯、搜索、刪除、權(quán)限管理） -- 完成
- [x] 圖片管理（增加、編輯、搜索、刪除、權(quán)限管理） -- 完成
- [x] 系統(tǒng)管理（增加、編輯、搜索、刪除、權(quán)限管理） -- 完成
- [ ] 實時通信
- [ ] 系統(tǒng)監(jiān)控-(在線人員，監(jiān)控服務(wù)器)
- [ ] 系統(tǒng)文檔-(接口文檔)
- [ ] 未完待續(xù)...
# ??系統(tǒng)截圖
>?$\textcolor{gray}{踩坑不易，還希望各位大佬支持一下}$ <br/>
>?? $\textcolor{green}{我的開源項目：}$ [vueCms.cn](https://www.vuecms.cn/)<br/>
>?? $\textcolor{green}{技術(shù)交流QQ群：837051545}$ <br/>
>?? $\textcolor{green}{點贊，你的認可是我創(chuàng)作的動力！}$ <br/>
>?? $\textcolor{green}{收藏，你的青睞是我努力的方向！}$ <br/>
>?? $\textcolor{green}{評論，你的意見是我進步的財富！}$ <br/>
>如果有不懂可以留言，我看到了應(yīng)該會回復(fù)
>如有錯誤，請多多指教
