基于 React 和 webpack 搭建的模板仓库，提供快速初始化前端代码仓库的能力。
yarn install
yarn dev-
API 中间件模式
洋葱模型的中间件模式，将每个通用处理逻辑抽象为一个函数，轻松管理 API 请求信息和响应数据，如在请求
header添加CSRF token，或把错误响应提示给用户...使项目 api 层代码更加健壮易于维护扩展。-
定义和使用中间件
src/service/middleware.js定义一个中间件函数
// 增加一个中间件函数 async function addMiddleWare(ctx, next) { // 请求发出之前执行 // 对请求数据做一些处理 // 调用 next 将控制权移交下一个中间件 await next(); // 收到响应数据后执行 // 对响应数据做一些处理 }
在 src/service/index.js 里引入中间件
import { ..., addMiddleWare, } from './middleware'; ... const middleware = [ ..., testMiddleWare, ]; ...
-
-
发起 API 请求
项目基础能力支持普通的
CRUD请求，也内置了对文件上传、下载的支持，示例代码如下：import request from '$src/service'; import { DOWNLOAD, UPLOAD } from '$src/service/const'; const APIS = { table: '/table/query', uploadFile: '/file/upload', tableDownload: '/table/download', chartDownload: '/chart/download', }; // simple api request function queryTableData(params) { return request(APIS.table, { params, }); } // 下载：通过 URL 路径下载文件 function downloadTableData(params) { return request(APIS.tableDownload, { params, type: DOWNLOAD, }); } // 下载：将服务端返回的 Stream 流解析并下载文件 function downloadChartData(params) { return request(APIS.chartDownload, { params, method: 'POST', type: DOWNLOAD, }); } // 上传：上传文件到服务端 function uploadFileList(params) { return request(APIS.uploadFile, { params, method: 'POST', type: UPLOAD, }); }
-
eslint & prettier
开发环境下
eslint会检查代码语法，提前暴露出使用方式可能有问题代码，为工程质量保驾护航；提交时拦截
git hooks，进行prettier格式化&eslint检查，使团队代码风格保持一致； -
git commit信息校验项目使用 Angular commit 规范 检测
git commit内容，如书写不规范会被git hooks拦截掉本次提交。这么做有利于信息的规范性，通过提交类型(type)即可了解到每条 commit 大概做了哪方面工作，方便统计管理。提交信息示例：
$ git commit -m "feat: 增加购物车功能"$ git commit -m "fix: 修复弹框样式丢失"<type>(<scope>): <subject> <BLANK LINE> <body> <BLANK LINE> <footer>页眉的格式指定为提交类型(
type)、作用域(scope，可选)和主题(subject)提交类型指定为下面其中一个：
build：对构建系统或者外部依赖项进行了修改ci：对 CI 配置文件或脚本进行了修改docs：对文档进行了修改feat：增加新的特征fix：修复bugpref：提高性能的代码更改refactor：既不是修复bug也不是添加特征的代码重构style：不影响代码含义的修改，比如空格、格式化、缺失的分号等test：增加确实的测试或者矫正已存在的测试
-
PWA 离线支持
借助
service-worker的能力缓存前端静态资源，成功注册后即可离线访问，提升用户体验度。如有需要甚至可以缓存 api 数据，但这个场景必须谨慎设置过期时间。
- 封装工程相关内容并抽离仓库
- TypeScript 支持