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`)

啟動服務端

原生docker部署(不推薦), 會根據Dockerfile檔案中配置啟動會執行一個run.sh腳本,可按需求修改
非docker部署(極不推薦,需要服務器支持node18,并且較為繁瑣),可以運行pnpm start:server(請先執行打包命令),需要自己啟動以及配置資料庫,并且node>=18并不支持Centos7,極力推薦使用docker進行部署
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 鏡像下載問題

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

單獨打包

如果你有其他的需求,可以單獨打包,打包后的檔案在dist檔案夾下

打包服務端 pnpm build:server
打包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 遠程資源地址

注意事項

mysql使用了一主多從集群模式,如果您僅僅使用一個mysql的話,請修改server/.env檔案中的mysql配置,以及server/src/serve/db.ts檔案中sequelize的實體初始化代碼
開發環境下, 默認不啟動資料庫集群模式,如果需要啟動集群模式,請修改server檔案夾下的nodemon.json中的NODE_ENV為production
雖然使用了pnpm的workspace的模式,但是由于某些原因服務端在打包后,不能正確決議作業區間內的包名,所以禁止在服務端代碼內使用作業區間內的包,但是web端可以使用服務端的

前端

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

目錄結構

|-- ???client
    |-- ???.vscode
        |-- ??settings.json
    |-- ???deploy (一鍵上傳腳本,去掉deploy.config copy.json中的copy,并修改配置)
        |-- ??deploy.config copy.json
        |-- ??deploy.config.json
        |-- ??index.js
        |-- ??sysInfo.js
    |-- ???public
        |-- ??favicon.ico
        |-- ??logo.png
    |-- ???src
        |-- ???api (介面存放目錄)
        |-- ???assets (靜態資源存放目錄)
        |-- ???components (公共組件存放目錄)
            |-- ???Breadcrumb
            |-- ???CountTo
            |-- ???Cropper
            |-- ???GithubCorner
            |-- ???Hamburger
            |-- ???IconSelect
            |-- ???LangSelect
            |-- ???Notice
            |-- ???Page
            |-- ???Pagination
            |-- ???RightPanel
            |-- ???Screenfull
            |-- ???ScreenLock
            |-- ???SizeSelect
            |-- ???SvgIcon
            |-- ???UploadFile
            |-- ???WangEditor
        |-- ???directive (自定義屬性)
            |-- ???permission
            |-- ??index.ts
        |-- ???hooks (自定義hooks)
            |-- ??useForm.ts
        |-- ???lang (i18,目前還有一些小問題,不影響使用)
            |-- ??en.ts
            |-- ??index.ts
            |-- ??zh-cn.ts
        |-- ???layout (頁面布局組件)
            |-- ???components
            |-- ??index.vue
        |-- ???router (路由)
            |-- ??index.ts
        |-- ???store (pinia)
            |-- ???modules
            |-- ??index.ts
        |-- ???styles (公共class樣式)
            |-- ??element-plus.scss
            |-- ??index.scss
            |-- ??mixin.scss
            |-- ??sidebar.scss
            |-- ??tailwind.css
            |-- ??variables.module.scss
        |-- ???theme (主題配色)
            |-- ??blue_black.ts
            |-- ??default.ts
            |-- ??green_black.ts
            |-- ??green_white.ts
            |-- ??index.ts
            |-- ??purple_white.ts
            |-- ??red_black.ts
            |-- ??red_white.ts
            |-- ??violet_dark.ts
        |-- ???utils (工具方法)
            |-- ??addWaterMark.ts
            |-- ??config.ts
            |-- ??downloadFile.ts
            |-- ??encryption.ts
            |-- ??filter.ts
            |-- ??hospitalOptions.ts
            |-- ??i18n.ts
            |-- ??index.ts
            |-- ??mitter.ts
            |-- ??request.ts
            |-- ??resize.ts
            |-- ??scroll-to.ts
            |-- ??storage.ts
            |-- ??validate.ts
        |-- ???views (頁面組件存放處)
            |-- ???component
            |-- ???dashboard
            |-- ???demo
            |-- ???dept
            |-- ???error-page
            |-- ???login
            |-- ???redirect
            |-- ???shop
            |-- ???system
        |-- ??App.vue
        |-- ??components.d.ts
        |-- ??env.d.ts
        |-- ??main.ts
        |-- ??permission.ts (路由鑒權)
        |-- ??settings.ts (頁面配置)
    |-- ??.editorconfig
    |-- ??.env (公共的env)
    |-- ??.env.development (開發模式獨有的env)
    |-- ??.env.production (生產模式獨有的env)
    |-- ??.env.staging (.....)
    |-- ??.eslintignore
    |-- ??.eslintrc.js
    |-- ??.gitignore
    |-- ??.prettierignore
    |-- ??.prettierrc.js
    |-- ??commitlint.config.js
    |-- ??components.d.ts
    |-- ??global.d.ts (全域ts宣告,請不要import引入其他,否則會失效)
    |-- ??index.html (模板html)
    |-- ??package.json
    |-- ??postcss.config.js
    |-- ??tailwind.config.js (tailwind 組態檔)
    |-- ??tsconfig.json
    |-- ??tsconfig.node.json
    |-- ??vite.config.ts (vite 組態檔)

添加路由

在src/router/index.ts中添加路由,并且在src/views中添加頁面組件
在src/views中添加頁面組件, 系統管理=>選單管理中添加選單地址, 并在 系統管理=>角色管理為角色分配選單權限

代碼提交

根目錄下執行以下命令
git add .
pnpm commit
git push

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556434.html

標籤：JavaScript

上一篇：Prisma 避坑指南！

下一篇：返回列表

vane 一個適用于前端打工人的全堆疊框架,nodejs+vue3+typescript