Densewillow 是一个全栈应用的 monorepo,采用了现代化的技术栈来提供高效、可维护的开发体验。 主要框架包括 NestJs 和 Next.js,同时使用 NX 作为项目的构建工具和工作区管理工具。此外,采用了 TS-REST 等第三方库,实现了完全类型化的类 RPC 开发体系结构。
## 📚 文件结构结构概览:
.
├── dist
│ ├── ...
├── ecosystem.config.js #pm2 配置
├── env.example #next+nest 环境变量示例
├── logs #pm2 日志
│ ├── ...
├── node_modules
│ ├──...
├── nx.json
├── package.json
├── packages
│ ├── api-contracts # ts-rest的api协议
│ │ ├── ...
│ │ ├── src
│ │ │ ├── index.ts
│ │ │ ├── lib # 具体协议
│ │ │ │ ├── ...
│ │ │ └── zod # zod-prisma-types的各种类型
│ │ │ └── index.ts
│ │ ├── ...
│ ├── frontend # Next.Js前台
│ │ ├── actions #serer actions
│ │ │ └── ...
│ │ ├── app
│ │ │ ├── api #next方面的后端api
│ │ │ │ └── ...
│ │ │ ├── i18n #国际化组件+文本
│ │ │ │ ├── ...
│ │ │ ├── [lng]
│ │ │ │ ├── (admin) # 网站的简单admin后台
│ │ │ │ │ ├── ...
│ │ │ │ ├── (front) # 网站的前台
│ │ │ │ │ ├── ...
│ │ │ ├── ...
│ │ ├── components
│ │ │ ├── ...
│ │ ├── ...
│ │ ├── public
│ │ │ ├──...
│ ├── frontend-e2e #cypress的e2e示例
│ │ ├── ...
│ ├── nest-api #NestJs 网站api
│ │ ├── jest.config.ts
│ │ ├── project.json
│ │ ├── src
│ │ │ ├── assets
│ │ │ ├── config # 各个模块的配置文件
│ │ │ │ ├── ...
│ │ │ ├── main.ts
│ │ │ └── modules
│ │ │ ├── content # 内容模块
│ │ │ │ ├── ...
│ │ │ ├── core # 动态配置系统、全局验证管道、拦截器、过滤器
│ │ │ │ ├── ...
│ │ │ ├── media # 文件上传/下载
│ │ │ │ ├── ...
│ │ │ ├── rbac# 基于CASL的动态权限模块
│ │ │ │ ├── ...
│ │ │ └── user # 用户模块
│ │ │ ├── ...
│ │ ├── ...
│ ├── nest-api-e2e #NestJs e2e示例
│ │ ├── ...
│ └── prisma-schema-blog #Prisma 配置
│ ├── ...
├── pnpm-lock.yaml
├── ...
DenseWillow 构建在强大的技术堆栈之上,并依赖各种库和工具来提供其功能。 以下是项目中使用的主要技术和依赖项的列表:
- Nest.js: 一个使用typescript构建的企业级node.js框架
- Next.js: Next.js是一个React框架,它使构建React应用程序变得更简单。它提供服务器渲染,SEO和简化的路由配置等。
- TypeScript:TypeScript是一种由Microsoft开发的编程语言,是JavaScript的超集,添加了静态类型支持,提高了代码的可维护性和可读性 。
- TS-REST: 一个端到端类型安全的 RPC-like 库,协同NestJs与Next.Js。
- Nx: Nx是一个用于构建、测试和维护大型Monoreop库的开发工具。
- Tailwind CSS: Tailwind CSS是一个实用的CSS框架,通过提供一组预定义的类,使构建用户界面变得更加简单和灵活
- Prisma: Prisma是一个现代数据库访问工具,它简化了数据库操作,并提供类型安全的查询和模型定义。
- Fastify: Fastify是一个快速、低开销的Node.js框架,专注于提供高性能的HTTP服务。
- Zod: Zod是一个JavaScript的数据验证库,通过简单的API提供强大的类型验证功能,有助于确保应用程序数据的完整性。
- Passport:Passport是一个用于Node.js的身份验证中间件,支持多种身份验证策略,使用户认证变得简单且可扩展。
除了这些核心技术之外,Densewillow还利用各种其他库和工具来支持其功能。 完整的依赖项列表可以在项目的“package.json”文件中找到。
DenseWillow是一个Monorepo程序,具备全面的前后端功能集成,以下突出了该项目的主要特点和功能:
- 完全类型化的类RPC Monorepo程序,通过Prisma + Zod辅助生成类型声明文件,确保端到端的类型安全性和数据完整性。
- 强大的内容管理系统,支持多种内容类型的创建、更新和删除,包括文章、媒体文件等,为用户提供灵活而直观的内容管理体验。
- 全面的用户身份验证和授权功能,采用JWT令牌和基于角色的访问控制(RBAC)系统,有效管理用户对资源的访问权限,提高系统的安全性和可控性。
- 文件处理和存储功能,使得在项目中轻松处理和存储各种文件,为用户提供高效的文件管理解决方案。
- SEO优化: 利用Next.js的服务端渲染(SSR)和静态生成(SSG)功能,实现对搜索引擎友好的页面结构,提高网站在搜索结果中的排名,并增强用户体验。
- 页面动效: 利用Next.js的客户端路由和生命周期方法,实现平滑的页面过渡和动画效果,提升用户对网站的交互体验。
- Responsiveness(响应式设计): 利用Next.js的组件和样式处理,确保网站在不同设备上的良好展示,提供一致的用户界面和用户体验。
- 国际化(i18n): 利用Next.js的国际化插件,实现多语言支持,使得用户能够在不同语言环境中访问和使用网站。
-
集成waline
-
admin添加新功能
- 下载源码并安装依赖
git clone https://github.com/ksdaylight/densewillow.git
cd densewillow
pnpm i
-
配置环境变量:在项目根目录下创建
.env
文件,并配置必要的环境变量。 您可以使用提供的“.env.example”文件作为参考。 -
运行数据库迁移:首先运行以下命令通过Prisma进行数据库配置:
(相关命令可从package.json的"scripts"中查看具体内容)
pnpm db:migrate
接下来,运行以下命令来生成相关type定义文件:
pnpm db:generate-types
pnpm start:nest-api:dev
pnpm start:frontend:dev
根据自己需要的调试方式,随意调整./vscode/launch.json
文件,并在VSCode 的debug 页面选择需要调试的NestJs或Next.Js程序。在任意文件打上断点,按F5
一键Debug
TDD测试编写请参考packages/nest-api/src/modules/content/services/post.service.spec.ts
E2E测试编写请参考packages/nest-api-e2e/src/backend-api/backend-api.spec.ts
运行测试命令
TDD: pnpm test:nest-api:tdd
,E2E: pnpm test:nest-api:e2e
TDD测试编写请参考packages/frontend/__test__/example.test.tsx
E2E测试编写请参考packages/frontend-e2e/src/e2e/app.cy.ts
运行测试命令
TDD: pnpm test:frontend:tdd
,E2E: pnpm test:frontend:e2e
NestJs 同时运行了一个标准的swagger(open api)文档(可关闭)。通过访问nestJs的运行地址如 http://127.0.0.1:3100/api-docs
来访问swagger页面进行测试,也可通过此swagger文档下载json文档,导入postman、insoma等来进行调试。