记录一下,大概的算是一个项目的概览。没有啥东西。
文档大纲
1、项目基本说明
2、项目目录说明
3、基础代码说明
4、其他
一、项目基本说明:
1、项目使用react+mbox,构建部分使用webpack,部署部分没有在前端实现。
2、接口部分因为使用了ProtoBuf数据序列化协议作为数据规范,该部分压缩和打包使用了makefile实现。
3、使用npm来管理包
建议和想法:后续可以通过做node服务方式来完成前端的自动部署,这样可以在测试环境下单功能点测试时有效提高效率。
二、项目目录说明:
1、api 这个文件夹是跟protobuff协议相关的文件,打包压缩协议在这个里边进行。打包使用的是make file ,还包含了通过git 子模块引入进来的proto协议 仓库。具体使用可以查看readme
2、app 页面文件夹
app
|— api封装的接口请求,包含了接口错误代码的处理
|— lib预计存放的外部库,如tv,但是这个有点儿跟vendor重合,可以移到外边
|—locales多语言资源包
|—pages页面文件(内部根据功能进一步细分文件夹)
|—router路由文件
|—stores一些公用数据或者静态数据,和本地存储接口(这货是封装的stroejs)
|—style样式
|—util一些工具方法🔧
|—index.js 入口文件呐。
3、config 运行配置。
4、docker 容器服务,作为服务器承载代码运行,后端同学负责维护。
5、md-image readme文件图片文件夹
6、node_modules…..
7、src 这个是目前官网的静态文件。
8、test 测试代码
9、vendor 直接引入的外部库,包括api的打包压缩文件,加密算法文件等
10、webpack 不解释。
三、基础代码说明
这个部分介绍一些网站的基础架构方面的东西。
1、网络请求处理
app>api文件夹下。
只是对grpc的调用做了简单的封装,内部对请求错误,和结果错误做了处理。并且封装了常用的几个方法,直接调用发送响应请求方便使用。
api 封装请求文件
errorStatus内是对错误码的处理。
common是封装的几个常用的请求。
2、错位码处理
错位码处理方式见在errorStatus内。调用在封装的api内
错位码的基础代码已经添加,目前错误码字典没有添加完成。
3、多语言处理
多语言处理使用的 react-intl-universal ,这个家伙是阿里出来的一个多语言包。
入口在home/home. ,语言资源包子locales内,目前只有中文和英文两种。
语言包内当前想要根据具体的业务模块划分不同的资源块。另外有一部分共用的块。
目前基础代码已经添加,只要添加语言资源包,替换文件内的静态文字即可以使用
4、路由
这个就说全家桶的router,没啥说的。加载方式清华已经调整过。
5、数据存储和传递
数据分两层,mobx和localStore
mobx解决数据传递和视图的跟新。由于数据存在于内存中,所以当页面刷新时数据会被丢掉。由于有些数据需要刷新页面后也可以使用,所以添加了localStore这一层存储。
mobx部分 ,公用数据存储,包括 用户,币种,及其他需要全站显示的数据,比如即时通知(不是通知列表,是指的新的需要当前通知用户知道的,不是用户已经查看过的数据)等,其他业务中可能用到的多次使用或者公用的数据也可以存储。
其他部分数据比如订单列表,交易记录,通知公告历史列表这 要存储公用数据,当前组件使用完即丢弃。其他业务逻辑相关的一次性使用的数据。
localStore层封装了storejs实现。后续计划在封装着一层,对存储的key/value进行加解密操作,避免用户可以直接可以通过浏览器查看明文数据。
四、其他
1、公用组件
位置:pages > components
Dialog 弹窗,对element-ui Dialog的二次封装
toast 提示,对element-ui Message的二次封装
pagination分页, 对element-ui Pagination的二次封装,这DidMount生命周期内手动添加“上一页,下一页 ”页码提示
imgUpload图片上传组件,这个目前是不符合产品需求的,这个实现是因为当时跟后端讨论时说要存储二进制数据。后续可以使用element-ui的图片上传组件。
Header,footer这两个就是通用页头和页脚。
由于以上的组件代码基本都是二次封装,没有其他的特别需要注意的逻辑,所以不进行代码展开。
2、关于加密算法,