同步操作将从 Big0range/vane 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
最新文档内容以GitHub为准
写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱
后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级清晰的反映出接口之间的关系(虽然类似nuxt,next这种的框架确实很好, 但是好处同样也是坏处,很难完全的前后端分离, 不能只写前端,或者后端,而且也不需要再去学习相关的知识), 于是就有了这个项目, 能够节省很大一部分时间, 也能够让接口更加清晰, 也能够让接口更加清晰, 也能够让接口更加清晰, 重要的事情说三遍。
节省下来的时间用来休息和摸鱼多好(不是让你接着内卷的)。
如果真的帮到了你的话,觉得这个项目还不错的话, 可以给我一个star, 也可以给我一个star, 也可以给我一个star, 重要的事情说三遍。
web
Vue3
, TypeScript
, Vite
node
server
node
, TypeScript
, express
, sequelize
, mysql
, redis
server进阶
docker
, docker-componse
, pm2
node版本: ^18
pnpm版本: ^8
目录结构
|-- 🗂️server
|-- 🗂️logs (日志)
|-- 🗂️api (api 日志)
|-- 📄api-20230628.log
|-- 📄api-20230629.log
|-- 🗂️sql (sql 日志)
|-- 📄sql-20230628.log
|-- 📄sql-20230629.log
|-- 🗂️public (express 公开资源)
|-- 📄favicon.ico
|-- 🗂️src
|-- 🗂️hooks (自定义hook)
|-- 📄useLogger.ts (记录日志hook)
|-- 📄useRouters.ts (注册路由hook)
|-- 🗂️middlewares (中间件)
|-- 📄authorization.ts (校验登录状态)
|-- 📄errorHandler.ts (错误捕捉)
|-- 📄index.ts
|-- 📄resultHandler.ts (接口返回数据封装方法)
|-- 📄upload.ts (multer 接受上传文件 目前支持的是图片)
|-- 🗂️routes (接口路由)
|-- 🗂️dept
|-- 🗂️logs
|-- 🗂️menu
|-- 🗂️msg
|-- 🗂️mysql-demo
|-- 🗂️role
|-- 🗂️server-routes
|-- 🗂️shop
|-- 🗂️upload
|-- 🗂️user
|-- 📄config.ts
|-- 📄demo.ts
|-- 📄demo[a,b,c].post.ts
|-- 📄index.get.ts
|-- 📄index.post.ts
|-- 📄types.ts
|-- 📄xlsx.post.ts
|-- 🗂️serve (数据库相关)
|-- 🗂️sys (系统相关)
|-- 📄comm.serve.ts (公共类)
|-- 📄db.ts (数据库初始化文件)
|-- 📄dept.serve.ts (...)
|-- 📄employee.serve.ts (...)
|-- 📄index.ts
|-- 📄shop.serve.ts (...)
|-- 🗂️utils
|-- 📄alias.ts (路径别名)
|-- 📄encryption.ts (数据加密, 可逆)
|-- 📄index.ts
|-- 📄isPrivateIP.ts (校验是否是本地ip 没用到....)
|-- 📄loadEnv.ts (加载.env)
|-- 📄md5.ts (md5加密)
|-- 📄redis.ts (redis)
|-- 📄sleep.ts (延迟函数)
|-- 📄token.ts (token的创建与销毁)
|-- 📄validate.ts (数据校验)
|-- 📄app.ts
|-- 📄server.ts
|-- 🗂️views
|-- 📄error.pug
|-- 📄index.pug
|-- 📄layout.pug
|-- 📄.env (默认环境变量,无论什么环境都会加载,需要自己创建,为了项目安全,请勿直接保存在代码库中)
|-- 📄.env.development (开发测试环境)
|-- 📄.env.example (env文件示例)
|-- 📄.env.production (生产环境)
|-- 📄.eslintignore
|-- 📄.eslintrc.js (eslint)
|-- 📄.gitignore
|-- 📄.prettierignore
|-- 📄.prettierrc.js
|-- 📄cao_ni_ma.txt (神兽)
|-- 📄del_dist.js
|-- 📄ecosystem.config.js (pm2相关配置)
|-- 📄global.d.ts
|-- 📄nodemon.json (nodemon启动配置)
|-- 📄package.json
|-- 📄renovate.json
|-- 📄tsconfig.json
如果是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
)启动服务端
不推荐
), 会根据Dockerfile文件中配置启动 会执行一个run.sh
脚本,可按需求修改极不推荐,需要服务器支持node18,并且较为繁琐
),可以运行pnpm start:server
(请先执行打包命令),需要自己启动以及配置数据库,并且node>=18并不支持Centos7,极力推荐使用docker进行部署
推荐
), 一键脚本 sh docker_start.sh all/server/db
(参数按需选择all或者server或者db,不传入的话默认为server)
/home/docker-volumes
目录下,正确的目录应该是/home/docker-volumes/vane
,也可以自己修改db/docker-compose.yml
文件中的相关配置,自己配置数据库server/docker-compose.yml
文件中的相关配置docker_start.sh
中第三行至第八行8gyc
如果你有其他的需求,可以单独打包,打包后的文件在dist
文件夹下
pnpm build:server
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(可选)
在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],
log: '上传成功',// 如果你的接口需要记录日志,请在这里传入相关信息(非必填)
});
} 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
接口日志会自动记录在server/logs/api
文件夹下,文件名为access-${日期}.log
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
|-- 🗂️fonts (字体文件)
|-- 📄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 配置文件)
项目中默认使用的为PingFang(苹方)字体,已经做了切片处理,无需担心加载过慢问题,字体文件放置在client/public/fonts
文件夹下,如果你的项目中没有使用到该字体,请自行删除,并且取消client/src/styles/index.scss
文件的引用(styles/index中
),否则会导致打包后的文件过大
强烈建议您在使用此字体的时候,把字体文件放置在对象存储或CDN上,否则会加大服务器流量的压力,当您放置在对象存储或CDN上时请修改client/src/styles/fonts/*.scss
文件中的url地址为自己的地址
src/router/index.ts
中添加路由,并且在src/views
中添加页面组件src/views
中添加页面组件, 系统管理=>菜单管理
中添加菜单地址, 并在 系统管理=>角色管理
为角色分配菜单权限dev
启动服务端以及web端开发模式dev:server
启动服务端开发模式dev:client
启动web端开发模式build:server
打包服务端build:client
打包web端start:server
启动打包后的服务端(非docker启动模式下使用)lint:server
格式化服务端代码lint:client
格式化web端代码deploy:client
一键部署web端tree
生成目录结构树lines
统计源代码行数(好像是软著还是啥来着的需要)commit
提交代码username: admin
password: Vane888888
登录之后可在用户管理页面修改密码,以及用户的添加删除封号等处理
根目录下执行以下命令
git add .
pnpm commit
git push
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。