docs: 完善README以提供全面的项目概览和开发指南
补充详细的项目描述、技术栈、功能模块、运行构建指令、环境变量说明、项目结构、关键实现说明、可复用能力清单以及项目优缺点分析,便于新成员快速上手和项目维护。
Showing
1 changed file
with
136 additions
and
2 deletions
| 1 | -西园寺预约 | 1 | +## 西园寺预约(xysBooking) |
| 2 | + | ||
| 3 | +面向游客的预约 H5(以微信内打开为主),包含预约下单/支付/预约码展示/预约记录;同时提供义工端登录与扫码核销能力。 | ||
| 4 | + | ||
| 5 | +### 技术栈 | ||
| 6 | + | ||
| 7 | +- Vue 3 + Vue Router(Hash) | ||
| 8 | +- Vite(含动态导入增强、Vant 组件自动注册、AutoImport) | ||
| 9 | +- Pinia(全局状态、keep-alive include) | ||
| 10 | +- Vant 4(移动端 UI) | ||
| 11 | +- axios(统一拦截器与错误处理) | ||
| 12 | +- weixin-js-sdk(JSSDK 初始化、扫码) | ||
| 13 | +- Less(全局变量注入:src/assets/styles/base.less) | ||
| 14 | + | ||
| 15 | +### 业务功能概览 | ||
| 16 | + | ||
| 17 | +- 预约链路 | ||
| 18 | + - 预约须知:/notice | ||
| 19 | + - 选择日期/时段:/booking | ||
| 20 | + - 参观者管理(新增/删除/选择):/me、/addVisitor、/submit | ||
| 21 | + - 提交预约 + 支付跳转:/submit(支付落地页由后端返回/拼接) | ||
| 22 | + - 支付回跳反馈:/callback | ||
| 23 | + - 预约成功页:/success | ||
| 24 | + - 预约码展示:/bookingCode(组件化二维码展示) | ||
| 25 | + - 预约记录列表/详情/取消:/bookingList、/bookingDetail(含取消预约退款入口) | ||
| 26 | +- 查询链路 | ||
| 27 | + - 身份证查询预约码:/search | ||
| 28 | +- 授权与环境 | ||
| 29 | + - 微信授权页:/auth(401 自动跳转) | ||
| 30 | + - 微信扫码能力测试:/wxScanTest | ||
| 31 | +- 义工核销 | ||
| 32 | + - 义工登录:/volunteerLogin | ||
| 33 | + - 扫码核销结果页:/verificationResult | ||
| 34 | + | ||
| 35 | +### 运行与构建 | ||
| 36 | + | ||
| 37 | +- 安装依赖:`npm i` | ||
| 38 | +- 本地开发:`npm run dev`(或 `npm run start` 以 host 方式启动) | ||
| 39 | +- 构建:`npm run build` | ||
| 40 | +- 构建(含 vue-tsc):`npm run build-ts` | ||
| 41 | + | ||
| 42 | +### 发布 | ||
| 43 | + | ||
| 44 | +- 一键编译上传(部署到 jcedu):`npm run jcedu_upload` | ||
| 45 | +- 其它环境:`npm run oa_upload`、`npm run dev_upload` | ||
| 46 | +- 旧发布脚本:publish.sh(本地构建后搬运到指定目录并提交) | ||
| 47 | + | ||
| 48 | +### 环境变量(.env*) | ||
| 49 | + | ||
| 50 | +- VITE_BASE:资源公共路径(生产通常为 `/f/reserve/`) | ||
| 51 | +- VITE_PORT:本地端口 | ||
| 52 | +- VITE_PROXY_PREFIX:代理前缀(默认 `/srv/`) | ||
| 53 | +- VITE_PROXY_TARGET:代理目标 | ||
| 54 | +- VITE_OUTDIR:构建输出目录名(默认 `reserve`) | ||
| 55 | +- VITE_CONSOLE:是否开启调试(项目内按需使用) | ||
| 56 | +- VITE_OPENID / VITE_ID 等:开发/测试辅助字段(以实际后端规则为准) | ||
| 57 | + | ||
| 58 | +### 项目结构 | ||
| 59 | + | ||
| 60 | +```text | ||
| 61 | +. | ||
| 62 | +├── build/ 开发代理配置 | ||
| 63 | +├── src/ | ||
| 64 | +│ ├── api/ 接口层(业务接口、微信相关、核销相关) | ||
| 65 | +│ │ ├── fn.js 接口统一包装:fn / fetch | ||
| 66 | +│ │ ├── index.js 预约业务 API 集合 | ||
| 67 | +│ │ ├── redeem.js 义工核销 API | ||
| 68 | +│ │ └── wx/ 微信签名/JSAPI 列表/支付等 | ||
| 69 | +│ ├── assets/ 静态资源(图片、全局 less) | ||
| 70 | +│ ├── common/ 公共工具(mixin/tool/vueuse 示例等) | ||
| 71 | +│ ├── components/ 通用组件(二维码、预约卡片等) | ||
| 72 | +│ ├── composables/ 组合式能力(登录流程、分享等) | ||
| 73 | +│ ├── hooks/ hooks(路由跳转、节流防抖、keep-alive 控制等) | ||
| 74 | +│ ├── store/ Pinia store | ||
| 75 | +│ ├── utils/ 工具库(axios、环境判断、版本更新检测等) | ||
| 76 | +│ ├── views/ 页面(与 route.js 一一对应) | ||
| 77 | +│ ├── App.vue 应用根组件(JSSDK 初始化、版本更新提示) | ||
| 78 | +│ ├── main.js 入口(注册 Vant、Pinia、Router,挂载 axios) | ||
| 79 | +│ ├── route.js 静态路由表(页面 meta.title) | ||
| 80 | +│ └── router.js 路由实例 + 动态路由注入(mock + generateRoute) | ||
| 81 | +├── vite.config.js Vite 配置(别名、代理、Less 注入、构建输出等) | ||
| 82 | +└── package.json 脚本与依赖 | ||
| 83 | +``` | ||
| 84 | + | ||
| 85 | +### 关键实现说明(便于快速定位) | ||
| 86 | + | ||
| 87 | +- 微信 JSSDK 全局初始化 | ||
| 88 | + - 入口:[App.vue](file:///Users/huyirui/program/itomix/git/xysBooking/src/App.vue) | ||
| 89 | + - 行为:启动时调用后端签名接口 `wxJsAPI`,执行 `wx.config`,并把初始化 Promise 复用到 `window.__wx_ready_promise` 供页面等待 | ||
| 90 | +- 接口统一返回/错误处理 | ||
| 91 | + - axios 拦截器:[src/utils/axios.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/axios.js) | ||
| 92 | + - 默认公共参数:`f=reserve`、`client_name=智慧西园寺` | ||
| 93 | + - 401 时跳转 `/auth`(核销端 reserve_admin 请求不跳) | ||
| 94 | + - API 包装:[src/api/fn.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/api/fn.js) | ||
| 95 | + - 约定后端结构:`{ code, data, msg, show }`,`code === 1` 视为成功 | ||
| 96 | +- 版本更新提示(生产环境) | ||
| 97 | + - 实现:[src/utils/versionUpdater.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/versionUpdater.js) | ||
| 98 | + - 思路:轮询拉取 `VITE_BASE` 指向的入口 HTML,对比 `<script>` 快照,提示用户刷新 | ||
| 99 | +- 路由与页面 | ||
| 100 | + - 路由表:[src/route.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/route.js) | ||
| 101 | + - 路由实例:[src/router.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/router.js) | ||
| 102 | + | ||
| 103 | +### 可复用能力(迁移到其它项目的候选清单) | ||
| 104 | + | ||
| 105 | +- 通用网络层 | ||
| 106 | + - axios 拦截器基座(公共参数、401 重定向、可静默错误):[axios.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/axios.js) | ||
| 107 | + - API 调用封装(`fn/fetch/uploadFn`):[fn.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/api/fn.js) | ||
| 108 | +- 微信能力基座 | ||
| 109 | + - JSSDK 初始化复用(`window.__wx_ready_promise` 约定 + 统一入口初始化逻辑):[App.vue](file:///Users/huyirui/program/itomix/git/xysBooking/src/App.vue) | ||
| 110 | + - 扫码结果归一化/核销流程模板(适合复制到其它“扫码核销/验票”类项目):[verificationResult.vue](file:///Users/huyirui/program/itomix/git/xysBooking/src/views/verificationResult.vue) | ||
| 111 | +- 前端工程化工具 | ||
| 112 | + - 版本更新检测器 Updater(适合静态部署、文件名带 hash 的站点):[versionUpdater.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/versionUpdater.js) | ||
| 113 | + - 动态路由组装(后端路由 -> vue-router 结构):[generateRoute.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/generateRoute.js) | ||
| 114 | + - 路由跳转 hooks(useGo/useReplace):[useGo.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/hooks/useGo.js) | ||
| 115 | +- 业务 UI 组件雏形 | ||
| 116 | + - 预约记录卡片、二维码展示组件(可沉淀为“订单卡片/票码”组件库能力):src/components/* | ||
| 117 | + | ||
| 118 | +### 项目优缺点(当前状态) | ||
| 119 | + | ||
| 120 | +**优点** | ||
| 121 | + | ||
| 122 | +- 业务主链路完整:预约 -> 支付 -> 预约码 -> 记录/详情/取消;另有核销端闭环 | ||
| 123 | +- 网络层与接口层有统一入口,页面调用成本低(`fn(fetch.xxx)`) | ||
| 124 | +- 微信 JSSDK 做了全局初始化复用,页面侧只需要等待 Promise | ||
| 125 | +- 生产环境具备“版本更新提示”,降低缓存导致的线上问题 | ||
| 126 | +- Vite 工具链与 Vant 按需自动注册已接入,上手开发快 | ||
| 127 | + | ||
| 128 | +**缺点 / 风险点** | ||
| 129 | + | ||
| 130 | +- 包管理与锁文件混用(npm/yarn lock 同时存在,未见 pnpm-lock),依赖一致性风险较高 | ||
| 131 | +- 缺少显式的 `lint/test` 脚本与 CI 校验,回归风险主要依赖人工 | ||
| 132 | +- `router.js` 里使用 `import.meta.globEager`;在 Vite v3+ 已废弃,建议改为 `import.meta.glob('...', { eager: true })`(来源:https://v3.vitejs.dev/guide/migration) | ||
| 133 | +- 项目内存在 TypeScript 相关产物/依赖(d.ts、tsconfig、vue-tsc),但主体代码以 JS 为主,规范不够统一 | ||
| 134 | +- `generatePackage.js` 统一导出常用依赖虽然省 import,但会增加页面与项目工具集的耦合度(迁移/重构成本上升) | ||
| 135 | + | ||
| 136 | +--- | ||
| 2 | 137 | ||
| 3 | 库:git@gitlab.kmlab.com:hooke1234/xysBooking.git | 138 | 库:git@gitlab.kmlab.com:hooke1234/xysBooking.git |
| 4 | -编译上传:jcedu_upload 命令 | ... | ... |
-
Please register or login to post a comment