N-Full-Kit:十年老牛马整理的一站式NodeJS全栈开发套件

1,139 阅读18分钟

前言

2024年年底的时候总结回想了这10年的程序员生涯,从懵懵懂懂的自学学徒到现在也算是久经沙场的老牛马,我也记不清做过多少项目了,什么类型都有,有web项目,有移动App项目,有桌面客户端项目,有各家小程序等等。

业务方面涉及了ERP进销存、旅游预定系统、医药系统、名表二手社区、cocos和unity游戏、小商品柔性定制saas、工厂生产物料管理和机器任务控制等等等等...

技术栈方面从早期的用JQuery+bootstrap+html+php,到前后端分离时用vue2,react(class时代),vue3等做前端pcweb和h5web,早期又因公司业务需要做移动端App,还接触使用了ionic cordova,再过几年后变成了uniapp,直到前几年发现了flutter真香,中途偶尔遇到需要开发桌面客户端的需求,于是又接触使用了NW.js,后换成electron。至于后端,由于我大部分时间都是使用js,所以nodejs顺理成章的成为了开发效率最高、最顺手的后端语言。

团队和运维方面,这个说起来也是有点巧合,除了我最开始自学的那一年,后面我所入职的公司无一例外都是刚开始成立公司或刚开始成立项目组,人员都是现招的,我基本属于最早进入团队的人,而且由于我大专学历,进的都是小公司,那些年公司给团队招人的预算非常低,几乎就是2-3个人,于是我被迫什么都要做,自己学习git,搭建团队仓库,搭建Jenkins自动化CI/CD,学习docker等等。

后来我一边上班一边接私单,全栈开发的需求越来越多,我经常整理一些时下常用的项目脚手架和文档作为笔记,方便我每次接项目时快速搭建一套工程项目,在24年年底时,一个同事问我能否将这些笔记分享给他,我才意识到,有很多人也有类似的全栈开发需求或学习欲望。于是我爆肝整理了所有旧文档,去除了一些过时的东西,然后做成项目脚手架,并将文档用vitepress写成在线网站,希望分享给有同样需求的人。我把这个项目命名为N-Full-Kit,即一个基于NodeJS的全栈开发套件

所谓的套件,包含:

  • 一个在线文档网站
  • 一个名为n-full-cli的命令行工具

通过命令行工具,快速创建由套件提供的项目脚手架模板、或快速导出开发常用基础设施的docker配置。

目前提供的项目模板:

  • 后端
    • NestJS+Mysql
    • NestJS+Mongo
  • 前端
    • Vue3+Arco Design Admin
    • Vue3+Arco Design Admin pure
    • Flutter+GetX
    • Uniapp+NutUI
    • Electron+Vue+Nest

docker配置:

  • MongoDB
  • MySQL
  • Redis
  • Traefik suite (traefik+grafana+prometheus+consul+loki+promtail的运维套装)

传送门:
在线文档
Github

项目模板简介

由于篇幅原因,无法详细介绍每一个项目模板,我将每一个模板截取一些说明描述一下。感兴趣的自行查看在线文档。

后端

后端这里采用的nodejs语言(不喜欢的可以无视后端部分,前端部分同样可以搭配任何后端语言),采用NestJs作为开发框架,提供了通用的开发环境和项目结构,封装了后端开发常用的功能模块。本套件中所有项目模板主打的是高效开发、高效前后端联动,所以在项目模板中会有一些别出心裁的,为了提升开发效率和联调效率的设计,例如,不太一样的RBAC权限系统枚举自动收集为字典Swagger自动生成前端代码等。

后端模板分为MySQL和MongoDB两个版本,适用于不同的数据库类型。

创建项目

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull create
  3. 选择:backend / 后端
  4. 选择:NestJS+Mysql或者NestJS+Mongo
  5. 输入项目名称并确定,它将会按照名称创建一个项目目录
T  nfull create
|
o  Please select the project type / 请选择项目类型
|  ❯ backend / 后端 
|    frontend / 前端 
|
o  Please select a backend template / 请选择项目模板
|  ❯ NestJS+Mysql 
|    NestJS+Mongo
|
o  Please enter the project name: / 请输入你的项目名称
|  nest-project
| 
o  downloading template...
|
o  Template downloaded successfully to ./nest-project
|
|  To get started, navigate to the project directory:
|  cd nest-project
|  Then run the following command to install dependencies:
|  npm install or yarn install
-  npm run start:dev

项目目录

目录结构如下:

src
├── common // 公共目录
│   ├── decorators // 自定义装饰器
│   ├── dto // 公共dto
│   ├── filters // 自定义过滤器
│   ├── guards // 自定义守卫
│   ├── interceptors // 自定义拦截器
│   ├── interfaces // 公共接口
│   ├── logger // 日志
│   └── modules // 公共模块
│       ├── auth // 认证模块
│       ├── permission-collect // 权限信息收集模块
│       └── redis // redis模块
├── config // 配置目录
├── db // 数据库目录
│   ├── database.module.ts // 数据库入口模块
│   └── mongodb // mongodb数据库目录(如果是MongoDB版本)
│   └── mysql // mysql数据库目录(如果是MySQL版本)
├── endpoints // 服务端点入口目录
│   ├── admin // 管理后台端点
│   │   ├── admin-users // 管理员用户相关
│   │   └── admin.module.ts // 管理后台端点入口模块
│   ├── app // 前端应用端点
│   │   ├── app.module.ts // 前端应用端点入口模块
│   │   ├── error-example // 错误示例模块(可删除)
│   │   ├── rate-limit // 限流示例模块(可删除)
│   │   ├── redis-example // redis示例模块(可删除)
│   │   └── users // 用户管理模块(可删除)
│   └── endpoints.module.ts // 服务端点入口模块
├── main.ts // NestJs入口文件
└── root.module.ts // 根模块

说明: 基本上所有的业务代码都在endpoints目录中,初始模板的endpoints目录下有adminapp两个大模块,用于区分提供给admin后台管理和前台应用的接口。这个示例只是参照普遍的中小型软件架构,如果不合适你的项目,可以直接删除adminapp目录,重新创建业务入口模块。

更多文档请参阅在线文档:

Snipaste_2025-02-02_12-15-57.png

查看此模板在线文档

前端

前端部分分为Admin后台管理移动端App微信小程序桌面客户端等方向。

Admin后台管理

后台管理的模板为Vue3+Arco Design AdminVue3+Arco Design Admin pure,pure结尾表示是纯净的项目模板,不依赖于特定后端,不带pure的模板需要结合上文后端部分的NestJS+Mysql或者NestJS+Mongo模板使用。

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull create
  3. 选择:frontend / 前端
  4. 选择:Vue3+Arco Design Admin
  5. 输入项目名称并确定,它将会按照名称创建一个项目目录
T  nfull create
|
o  Please select the project type / 请选择项目类型
|    backend / 后端 
|  ❯ frontend / 前端 
|
o  Please select a backend template / 请选择项目模板
|  ❯ Vue3+Arco Design Admin 
|    Vue3+Arco Design Admin pure 
|    Flutter+GetX 
|    Uniapp+NutUI 
|    Electron+Vue+Nest 
|
o  Please enter the project name: / 请输入你的项目名称
|  admin-project
| 
o  downloading template...
|
o  Template downloaded successfully to ./admin-project
|
|  To get started, navigate to the project directory:
|  cd admin-project
|  Then run the following command to install dependencies:
|  npm install or yarn install
-  npm run dev

部分截图:

admin_demo1.BsiIWVcH.png

admin_demo1_dark.CKILgvOA.png

admin_demo2.C3StEKAA.png

admin_demo3.Cg9VQS5w.png

rbac_demo1.qLB-MV_T.png

Vue3+Arco Design Admin后台管理模板与Nest后端模板是联动使用的,内置已经对接好RBAC权限控制系统,字典系统。其特色是以一种较为新颖的思路实现权限系统,使得前端和后端不必提前手工录入菜单和权限key。同时,作为非开发人员的最终使用者(例如:运营人员,业务经理等),无需开发者协助即可自定义任意角色。

在线体验: admin-demo.xbzweb.com

查看此模板在线文档

Uniapp模板

Uniapp + NutUI + Vue3 + Vite的小程序开发模板,当然,也可以用来开发H5和App。

  • 集成NutUI组件库,提供丰富的UI组件
  • 使用Pinia进行状态管理
  • 支持TypeScript开发
  • 使用Vite构建工具,开发体验更佳
  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull create
  3. 选择:frontend / 前端
  4. 选择:Uniapp+NutUI
  5. 输入项目名称并确定,它将会按照名称创建一个项目目录
T  nfull create
|
o  Please select the project type / 请选择项目类型
|    backend / 后端 
|  ❯ frontend / 前端 
|
o  Please select a backend template / 请选择项目模板
|    Vue3+Arco Design Admin 
|    Vue3+Arco Design Admin pure 
|    Flutter+GetX 
|  ❯ Uniapp+NutUI 
|    Electron+Vue+Nest 
|
o  Please enter the project name: / 请输入你的项目名称
|  uniapp-project
| 
o  downloading template...
|
o  Template downloaded successfully to ./uniapp-project
|
|  To get started, navigate to the project directory:
|  cd uniapp-project
|  Then run the following command to install dependencies:
|  npm install or yarn install
-  npm run dev:mp-weixin

查看此模板在线文档

Electron模板

Electron + Vue3 + Nest 的桌面应用开发模板,基于electron-vite框架进行封装,集成了以下特性:

  • 使用 Vite 进行快速构建
  • 集成 NestJS 作为主进程框架
  • 自动生成preload预加载脚本
  • 支持 Windows、Mac、Linux 多平台打包

这个模板的特色是将nestjs作为主进程代码框架,不再是千人千面的任意js代码书写方式,全部统一为nestjs的模块化风格,通过微服务的方式与渲染进程通信,结合装饰器自动生成preload预加载脚本,极大程度的提高了开发效率和代码规范。

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull create
  3. 选择:frontend / 前端
  4. 选择:Electron+Vue+Nest
  5. 输入项目名称并确定,它将会按照名称创建一个项目目录
T  nfull create
|
o  Please select the project type / 请选择项目类型
|    backend / 后端 
|  ❯ frontend / 前端 
|
o  Please select a backend template / 请选择项目模板
|    Vue3+Arco Design Admin 
|    Vue3+Arco Design Admin pure 
|    Flutter+GetX 
|    Uniapp+NutUI 
|  ❯ Electron+Vue+Nest 
|
o  Please enter the project name: / 请输入你的项目名称
|  electron-project
| 
o  downloading template...
|
o  Template downloaded successfully to ./electron-project
|
|  To get started, navigate to the project directory:
|  cd electron-project
|  Then run the following command to install dependencies:
|  npm install or yarn install
-  npm run dev

查看此模板在线文档

Flutter模板

本模板主要作为开发移动端App方向的模板,有人肯定会问了,既然是以js/node为核心的全栈套件,为什么不选用React Native?主要是因为我是Flutter的忠粉,哈哈。其次就是,RN的适用范围太窄了,虽然Flutter主要是拿来开发移动端App,但是我经常会拿来开发一些网页、桌面客户端,尽管它目前在web、desktop有一些不完美,但是未来还是可期的。

本模板结合流行的GetX框架,封装了一个较为纯净的项目起始模板,用于快速创建基于Flutter项目。模板内包含主题定制切换、多语言等基础功能,但不包含针对特定平台的功能,以便模板能适应不同目标平台而非仅仅是移动端App。

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull create
  3. 选择:frontend / 前端
  4. 选择:Flutter+GetX
  5. 输入项目名称并确定,它将会按照名称创建一个项目目录(注意,flutter项目的名称不能出现-中划线,请用下划线代替_
T  nfull create
|
o  Please select the project type / 请选择项目类型
|    backend / 后端 
|  ❯ frontend / 前端 
|
o  Please select a backend template / 请选择项目模板
|    Vue3+Arco Design Admin 
|    Vue3+Arco Design Admin pure 
|  ❯ Flutter+GetX 
|    Uniapp+NutUI 
|    Electron+Vue+Nest 
|
o  Please enter the project name: / 请输入你的项目名称
|  flutter_project
| 
o  downloading template...
|
o  Template downloaded successfully to ./flutter_project
|
|  To get started, navigate to the project directory:
|  cd flutter_project
|  Then run the following command to install dependencies:
|  flutter pub get
-  flutter run

查看此模板在线文档

关于项目模板

所有模板都是基于我个人的喜好和经验搭建的,它们都有以下共同特点:

  • 项目里的目录和代码组织尽可能的具有共识性规范
    什么是共识性规范,即该技术栈内的大多数开发者普遍认同的规范,例如NestJs的modulecontrollerservice,例如Vue项目中看到views目录就知道是存放视图组件的等等。这也是为什么我在electron模板的主进程中使用NestJs的原因。因为这样的共识规范,方便个人维护,也方便企业团队中人员流动时,下一个接手代码的人快速熟悉代码。
  • 项目模板尽可能的简单,不封装过多组件
    我不太喜欢市面上大部分的脚手架模板,里面一大堆封装好的组件,比如什么表格、表单、图表、等等各种演示页面,其实大部分用不到,或者与自己的业务不匹配,还得手动删除半天,还不如需要用到什么的时候,再自己封装什么。
  • 尽可能提高前后端开发的效率
    这些项目模板前后端是分离的,既合适单人全栈,也合适多人分工,或者干脆只用后端模板或只用前端模板。除了Flutter以外,其他前端项目模板都配置了基于swagger-typescript-api的接口请求代码自动生成功能,只要后端提供swagger文档,即可一键生成前端接口代码。(Flutter我尚在挑选合适的方案,后续会更新模板)

模板使用情景:

  • 全栈情景1:当需要创建一个App项目时,用n-full-cli命令行工具创建一个Nest后端、一个Admin管理端、一个Flutter App端。
  • 全栈情景2:当需要创建一个小程序项目时,用n-full-cli命令行工具创建一个Nest后端、一个Admin管理端、一个Uniapp端。
  • 单栈情景1:已有java后端,只需要开发admin,用n-full-cli命令行工具创建一个Vue3+Arco Design Admin pure模板。
  • 单栈情景2:已有后端+admin+app,只需要新增一个小程序,用n-full-cli命令行工具创建一个Uniapp+NutUI模板。

运维相关

从全栈出发的角度来看,要么是自己接单的项目,要么是小公司里身兼多职,大概率运维基础设施也是要自己来搭建的。如果没有这方面的需求可以忽略此部分。

docker

作为全栈角度,为了搭建MySQL、Redis或者其他运维软件,首选推荐使用docker。特别是后端部分,必须搭配MySQL/MongoDB、Redis才能顺利启动项目,所以本套件提供了基于docker的配置文件,配置文件分为docker composedocker swarm两个版本,本地开发或单台服务器推荐docker compose模式,2台及以上服务器推荐docker swarm模式。

MySQL

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull docker
  3. 选择:MySQL
  4. 选择:docker-compose或者docker-swarm(根据自己的docker模式选择)
T  nfull docker
|
o  ? Please select the configuration you want to pop up / 请选择想要弹出的配置
|  ❯ MySQL 
|    MongoDB 
|    Redis 
|    Traefik suite - (traefik+grafana+prometheus+consul+loki+promtail)
|
o  ? Please select a docker run mode / 请选择docker运行模式
|  ❯ docker-compose 
|    docker-swarm
|
o  configuration file inject in ./docker-compose.yml
|
|  You can use 'docker-compose up -d' to start the service

以下是docker配置样板文件源码,可在启动前根据自身需求修改配置:

version: '3.8'

services:
  mysql:
    image: mysql:8.0
    container_name: mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root123
      MYSQL_DATABASE: testdb
      MYSQL_USER: admin
      MYSQL_PASSWORD: admin123
      MYSQL_USER_PRIVILEGES: ALL
      TZ: Asia/Shanghai
    ports:
      - "3306:3306"
    volumes:
      - ./data:/var/lib/mysql
    command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    networks:
      - mysql_network

networks:
  mysql_network:
    driver: bridge

MongoDB

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull docker
  3. 选择:MongoDB
  4. 选择:docker-compose或者docker-swarm(根据自己的docker模式选择)
T  nfull docker
|
o  ? Please select the configuration you want to pop up / 请选择想要弹出的配置
|  ❯ MongoDB 
|    MySQL 
|    Redis 
|    Traefik suite - (traefik+grafana+prometheus+consul+loki+promtail)
|
o  ? Please select a docker run mode / 请选择docker运行模式
|  ❯ docker-compose 
|    docker-swarm
|
o  configuration file inject in ./docker-compose.yml
|
|  You can use 'docker-compose up -d' to start the service

以下是docker配置样板文件源码:

version: '3.8'

services:
  mongodb:
    image: mongo:latest
    container_name: mongodb
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: admin
      MONGO_INITDB_ROOT_PASSWORD: admin123
    ports:
      - "27017:27017"
    volumes:
      - ./data:/data/db
      - ./mongo-keyfile:/data/keyfile/mongo-keyfile
    command: mongod --auth --replSet rs0 --keyFile /data/keyfile/mongo-keyfile --bind_ip_all
    networks:
      - mongo_network

networks:
  mongo_network:
    driver: bridge

为了支持事务,此配置为MongoDB副本集模式(如果有更高可用的追求,推荐使用分片集群模式)。 启动docker前需要先创建mongo-keyfile密钥文件,在docker-compose.yml或者docker-swarm.yml同级目录下:

# 创建密钥文件
openssl rand -base64 756 > ./mongo-keyfile
# 设置权限
chmod 600 ./mongo-keyfile

# 启动mongodb
docker compose up -d

首次启动后需要初始化副本集:

# 使用mongosh工具连接到数据库
> mongosh "mongodb://admin:admin123@localhost:27017/?authSource=admin"

# 初始化副本集
> rs.initiate({
  _id: 'rs0',
  members: [
    {
      _id: 0,
      host: 'localhost:27017'
    }
  ]
})

mongosh工具安装:mongodb-shell

Redis

  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull docker
  3. 选择:Redis
  4. 选择:docker-compose或者docker-swarm(根据自己的docker模式选择)
T  nfull docker
|
o  ? Please select the configuration you want to pop up / 请选择想要弹出的配置
|    MySQL 
|    MongoDB 
|  ❯ Redis 
|    Traefik suite - (traefik+grafana+prometheus+consul+loki+promtail)
|
o  ? Please select a docker run mode / 请选择docker运行模式
|  ❯ docker-compose 
|    docker-swarm
|
o  configuration file inject in ./docker-compose.yml
|
|  You can use 'docker-compose up -d' to start the service

以下是docker配置样板文件源码:

version: '3.8'

services:
  redis:
    image: redis:latest
    container_name: redis
    restart: always
    ports:
      - "6379:6379"
    volumes:
      - ./data:/data
    command: redis-server --appendonly yes --requirepass admin123
    networks:
      - redis_network

networks:
  redis_network:
    driver: bridge

Traefik 套件

Traefik 套件是一个完整的服务代理和监控解决方案,包含以下组件:

  • Traefik:现代化的反向代理和负载均衡器(代替Nginx)
  • Grafana:强大的可视化监控仪表盘
  • Prometheus:指标收集和存储系统
  • Consul:服务发现和配置管理
  • Loki:日志聚合系统
  • Promtail:日志收集代理
  • Portainer:轻量级 Docker 容器管理界面,提供可视化的容器管理功能

该套件适用于以下场景:

  • 微服务架构的服务代理
  • 实时监控和告警
  • 日志集中管理
  • 服务发现和配置管理
  1. 在准备存放项目的目录下,使用n-full-cli工具输入命令创建:
  2. 输入命令:nfull docker
  3. 选择:Traefik suite
T  nfull docker
|
o  ? Please select the configuration you want to pop up / 请选择想要弹出的配置
|    MySQL 
|    MongoDB 
|    Redis 
|  ❯ Traefik suite - (traefik+grafana+prometheus+consul+loki+promtail)
|
o  Template downloaded successfully to ./traefik-suite
|  
|  To get started, navigate to the project directory:
|  cd traefik-suite
|  docker-swarm: run 'docker stack deploy -c docker-compose.yml traefik'
|  docker-compose: run 'docker-compose up -d

导出的目录结构如下:

.
├── acme/                  # Let's Encrypt 证书存储目录
│   └── acme.json          # ACME 证书文件,存储自动申请的 SSL 证书
├── config/                # 配置文件目录
│   ├── prometheus.yml     # Prometheus 监控系统配置文件
│   ├── traefik.yml        # Traefik 主配置文件,包含全局配置和入口点设置
│   └── vhost/             # 虚拟主机配置目录
│       └── config.yml     # 各服务的路由规则配置
├── logs/                  # 日志文件目录
│   ├── access.log         # Traefik 访问日志,记录所有 HTTP 请求
│   └── traefik.log        # Traefik 运行日志,记录服务运行状态和错误信息
├── loki/                  # Loki 日志系统配置目录
│   └── config.yaml        # Loki 配置文件,定义日志收集和存储规则
├── promtail/              # Promtail 日志收集代理配置目录
│   └── config.yml         # Promtail 配置文件,定义日志收集规则和目标
├── docker-compose.yml     # Docker Compose 配置文件
└── docker-swarm.yml       # Docker Swarm 配置文件

示例截图

Traefik

traefik.CX5MKa7Q.png

Grafana

grafana.B1BYm6AP.png

Consul

consul.lDdljTGB.png

Portainer

portainer.DDvtaQF7.png

详细文档请查看在线文档

结语

此项目从代码到文档均是我一个人爆肝整理和测试,我目前也在用这个工具来创建和开发新的项目。但一个人精力始终有限,代码或文档中可能存在描述不清和错误的地方,可以在GitHub提issue,也可以在创建项目后自行修改。这些项目模板更多的是提供一个结构和思路,细节之处还需要根据自身情况去改动,每一个模板文档都没有从技术栈基础教程开始说明,是因为默认所有使用者具备一定的基础经验,例如如果使用Flutter模板,文档不会从头教你如何使用Flutter开发,如何使用GetX框架,这些需要你已具备经验或自行去学习。

项目中的模板可能会在未来的日子里,不定期更新或新增新的模板,感兴趣的可以持续关注。 最近在研究关于AI的东西,像什么AI Agent,MCP之类的,用于构建定制化AI应用的开发流程和技术架构的,手上也有正在开发的基于AI MCP的项目,如果后续发现可以整理成快速开发模板的,也会抽空放出来。

另外小打一个广告:本人在深圳,2025年想重新找一份工作,如果有合适的岗位(非外包、区块链、996),请私我,兼职或私单也可以私我😉😉😉