vane

寫這個的初衷是因為每次用node寫介面的時候總是需要一些寫大一堆的東西, 也有些人把很多介面都放在一個js文件內, 看起來很是雜亂, 後來用到nuxt寫的時候, 感覺用文件名來命名介面路徑很是方便, 無論是query參數還是params參數,都可以通過文件名來命名, 也可以通過文件夾層級清晰的反映出介面之間的關係(雖然類似nuxt,next這種的框架確實很好,但是好處同樣也是壞處,很難完全的前後端分離,不能只寫前端,或者後端,而且也不需要再去學習相關的知識), 於是就有了這個項目, 能夠節省很大一部分時間, 也能夠讓介面更加清晰, 也能夠讓介面更加清晰, 也能夠讓介面更加清晰, 重要的事情說三遍。
節省下來的時間用來休息和摸魚多好(不是讓你接著內捲的)。
如果真的幫到了你的話,覺得這個項目還不錯的話, 可以給我一個star, 也可以給我一個star, 也可以給我一個star, 重要的事情說三遍。

github傳送門

gitee傳送門

介面文檔

技術棧

web
Vue3, TypeScript, Vite node
server
node, TypeScript, express, sequelize, mysql, redis
server進階
docker, docker-componse, pm2

node版本: ^18
pnpm版本: ^8

服務端

配置hosts

如果是windows的話,請在C:\Windows\System32\drivers\etc\hosts文件中添加以下內容

請替換為自己真實的mysql以及redis資料庫ip地址, 192.168.31.202僅為示例

192.168.31.202 vane-redis-master
192.168.31.202 vane-mysql-master
192.168.31.202 vane-mysql-node1
192.168.31.202 vane-mysql-node2

安裝依賴

npm install -g pnpm (也可以指定版本安裝pnpm npm install -g pnpm@8)
pnpm install

請勿使用淘寶鏡像源,會導致依賴安裝失敗
還原設置: pnpm config set registry https://registry.npmjs.org/

啟動命令

開發環境

啟動服務端: pnpm dev:server
啟動web端: pnpm dev:client
全部啟動: pnpm dev\

正式環境(Centos)

啟動服務端

1. 原生docker部署(不推薦), 會根據Dockerfile文件中配置啟動 會執行一個run.sh腳本,可按需求修改
2. 非docker部署(極不推薦,需要伺服器支持node18,並且較為繁瑣),可以運行pnpm start:server(請先執行打包命令),需要自己啟動以及配置資料庫,並且node>=18並不支持Centos7,極力推薦使用docker進行部署
3. docker-componse部署(推薦), 一鍵腳本 sh docker_start.sh all/server/db (參數按需選擇all或者server或者db,不傳入的話預設為server)
   1. db: 啟動mysql以及redis資料庫 如果你是第一次啟動的話需要下載GitHub中releases符合自己本地代碼版本的資料庫文件(版本可在根目錄下package.json中查看),並解壓到/home/docker-volumes目錄下,正確的目錄應該是/home/docker-volumes/vane,也可以自己修改db/docker-compose.yml文件中的相關配置,自己配置資料庫
   2. server: 啟動node服務端和nginx,預設埠映射為80,如果你想修改的話,請自行修改server/docker-compose.yml文件中的相關配置
   3. all: 資料庫以及服務端全部啟動
   4. 建議: 資料庫如無修改,啟動一次即可

docker 鏡像下載問題

1. 如果你的伺服器無法下載docker鏡像,請嘗試修改docker鏡像源,具體操作請自行查詢(帖子太多了,沒必要寫在這裡.....)
2. 如果你嘗試修改docker鏡像源後,仍然無法下載,在網盤中下載對應的壓縮包,docker導入鏡像,雲盤內有使用說明,按照操作即可
   網盤地址 提取碼: 8gyc

單獨打包

如果你有其他的需求,可以單獨打包,打包後的文件在dist文件夾下

1. 打包服務端 pnpm build:server
2. 打包web端 pnpm build:client

環境配置

開發環境配置

node>=18, pnpm>=8, mysql:5.7, redis:6.2

正式環境

node>=16.14.0(如果可以安裝18版本的最好,16版本只是能保證基本的安裝依賴), mysql, redis, pnpm>=8,docker(可選), docker-componse(可選)

配置env文件

在server文件夾下創建.env文件,並按照.env.example文件中的格式進行配置

添加介面路由

路由添加

在server/src/routes文件夾中添加.ts文件即可,路由會根據所在位置以及文件名自動載入,無需顯示引入

文件名示例

routes/user/list.ts => http://localhost:9999/user/list(get請求)
routes/user/index.ts => http://localhost:9999/user(get請求)
routes/user/list.post.ts => http://localhost:9999/user/list(post請求)
routes/user/list[a,b].post.ts => http://localhost:9999/user/list(post請求,並req.params中帶有a和b兩個參數)

文件內容示例

import { Request, Response } from '@/routes/types';
export default async function (req: Request, res: Response) {
  try {
    /**
     * 某些操作
     */
    res.ok({
      message: '操作成功',
      data: data.Location.split('/images/')[1],
    });
  } catch (error) {
    /**
     * 失敗之後的操作
     */
    res.fail(error);
  }
}

// 中間件 非必填
export const middleware = [()=>{}];

介面白名單(不需要登錄鑒權)

系統固定白名單(不可修改)

修改server\src\serve\sys\routes.serve.ts中的constantRouteWhiteList數組, 修改之後需要清空mysql中的sys_routes表和redis中的routeWhitelist緩存,否則無法生效

自定義白名單(可修改)

啟動前端服務,在http://localhost:4000/vane/system/white-api中進行配置,無需修改mysql和redis

日誌記錄

api日誌

介面日誌會自動記錄在server/logs/api文件夾下,文件名為access-${日期}.log

sql日誌

sql日誌會自動記錄在server/logs/sql文件夾下,文件名為sql-${日期}.log

文件上傳

本項目使用了騰訊雲對象存儲,如果您沒有騰訊雲對象存儲的話,請自行修改server/src/server/routes/upload.ts文件中的上傳邏輯,並修改client/src/utils/config.ts文件中的CDNURL 遠程資源地址

註意事項

1. mysql使用了一主多從集群模式,如果您僅僅使用一個mysql的話,請修改server/.env文件中的mysql配置,以及server/src/serve/db.ts文件中sequelize的實例初始化代碼

2. 開發環境下, 預設不啟動資料庫集群模式,如果需要啟動集群模式,請修改server文件夾下的nodemon.json中的NODE_ENV為production

3. 雖然使用了pnpm的workspace的模式,但是由於某些原因服務端在打包後,不能正確解析工作區間內的包名,所以禁止在服務端代碼內使用工作區間內的包,但是web端可以使用服務端的

前端

如果你用過vue2版本的vue-admin的話,上手應該會非常快,因為本項目的前端是模仿vue-admin的vue3版本,並且使用了typescript,所以如果你不熟悉vue3的話,建議先學習一下vue3的基礎知識

目錄結構

|--