财审平台

qinlaiqiao 0b6156e90e feat: 全局获取项目 ID 3 år sedan
src 0b6156e90e feat: 全局获取项目 ID 3 år sedan
.eslintignore 2fe6b8c963 feat: 集成 eslint 3 år sedan
.eslintrc.js 2fe6b8c963 feat: 集成 eslint 3 år sedan
.gitignore 27242a69da feat: 修改 gitignore 3 år sedan
bootstrap.js 22443e0544 feat: 项目流汇总subject tree & 集成上下文组件 3 år sedan
index.html 8c0ca47ac2 feat: 初始化项目 3 år sedan
jest.config.js 8c0ca47ac2 feat: 初始化项目 3 år sedan
midway.config.ts 8c0ca47ac2 feat: 初始化项目 3 år sedan
package.json 2ae205c6f6 feat: 布局本地化 3 år sedan
postcss.config.js 8c0ca47ac2 feat: 初始化项目 3 år sedan
readme.md d2678d883a feat: main 页面结构搭建 3 år sedan
tailwind.config.js 8c0ca47ac2 feat: 初始化项目 3 år sedan
tsconfig.json 22443e0544 feat: 项目流汇总subject tree & 集成上下文组件 3 år sedan
vite.config.ts 44591bf075 feat: 上下文菜单迁移完成 3 år sedan

readme.md

Platform ⚡

本项目基于 midway hooks ,大多数情况下遵循了官方建议。

但考虑到实际项目的复杂性与工作量,在某些代码的组织上沿用了之前项目的习惯。

具体情况如下:

目录结构

.
├── bootstrap.js // 应用启动
├── jest.config.js // 单元测试
├── midway.config.ts // Midway 配置文件
├── src
│   ├── apis // 后端目录
│   │   ├── configuration.ts // Midway Hooks 配置文件
│   │   ├── controller // Api 目录
│   │   │   ├── index.test.ts // Api 测试文件
│   │   │   └── index.ts // Api 文件
│   │   ├── dto // 请求参数验证目录
│   │   ├── middleware // 中间件目录
│   │   ├── model // 数据库模型目录
│   │   └── service // service目录
│   ├── main.ts // 前端框架入口文件
│   └── ... // 剩下的都是前端相关文件
├── tsconfig.json
└── vite.config.ts

相关目录说明

apis

apis 目录用于存放后端代码。

这里没有使用 midway hooks 官方建议的那样,将目录简单的划分为 lambda(路由)hooks(逻辑处理),而是沿用了大司空后端的结构。

一些通用的结构,如 utils 目录已经被移到 src/utils 下。

随着项目的迭代开发,可能会在各级目录中增加多个子目录,这是允许的。 但要保持一个原则:

目录结构尽可能精简。

想象一下,某个目录下有几十个子目录是什么体验?实际上,很多子目录的创建,都是“临时起意”,比如 typesinterface

再有,新建的目录在其父级目录下,要有明确的语义,比如 utils/common,结合其他子目录,可以很容易的猜到其含义,但是你能猜到 src/common 是什么含义吗?没人知道。

utils

utils 目录用于存放相关工具方法,并拆分为了 3 个子目录:

  • common 用于存在前后端都可能会用到的一些方法,比如封装 http 请求的函数
  • backend 只存在后端会用到的方法,比如数据库相关的函数
  • frontend 之存放前端会用到的方法,比如自行封装的 Alert 函数

相关技术

Vite

使用 Vite 进行打包,速度快。

midway 函数式和一体化

文档:Midway Hooks - 介绍

CSS

本项目使用 scss + tailwindcss。

本打算使用原生 css 变量 + PostCSS ,这也是 Vite 推荐的方式。但是考虑到大家的学习成本和项目进度,依然选择了熟悉的 scss。

在使用 tailwindcss 的时候,为了保持 html 精简,建议在 <style> 标签内使用 @apply 命令加载 tailwindcss 的 class 类。

VS Code 需要下载 Tailwind CSS IntelliSense 插件。

别名

  1. @ : src

  2. controller : src/apis/controller

  3. service : src/apis/service

  4. utils : src/utils

相关命令

开发 server

$ npm run dev

构建

$ npm run build

生产环境运行

$ node bootstrap.js