## 介绍
  项目名称：SaasWeb

## 软件架构
  本项目为react[https://react.docschina.org/]项目，使用dva[https://dvajs.com/]作为数据流管理方案,使用3x版本的Ant Design[https://3x.ant.design/docs/react/introduce-cn] UI库进行开发

### 目录结构
```
.
├── .editorconfig             # 编缉器ide 规则配置
├── .eslintrc                 # 代码规则 ESLint
├── .gitignore                # git 忽略文件
├── .istanbul.yml             # 
├── .npmrc                    # 
├── README.md                 # 介绍文件.
├── dist                      # 生成生产环境文件
├── package.json              # Package 库配置文件
├── src                       # 资源代码
│   ├── actions               # Flux/Redux 的 actions 方法
│   ├── components            # React components 组件
│   ├── constants             # redux 常量文件
│   ├── containers            # 每个页面的入口文件
│   ├── favicon.ico           # favicon
│   ├── index.ejs             # Template 模板页面
│   ├── index.js              # 应用入口文件
│   ├── reducers              # Redux reducers. 状态改变方法
│   ├── store                 # Redux store 
│   ├── public                # CSS Styles, js, img 等静态文件目录
│   └── utils                 # 常用框.
├── tools                     # build 配置
│   ├── build.js              # Runs the production build
│   ├── chalkConfig.js        # 错语信息美化
│   ├── distServer.js         # 生产环境服务器
│   ├── nodeVersionCheck.js   # 确认node版本是否支持
│   ├── srcServer.js          # 开发环境服务器
│   ├── startMessage.js       # 开是运行时显示的信息
├── webpack.config.dev.js     # webpack 开发环境配置文件
└── webpack.config.prod.js    # webpack 生产环境配置文件
```

## 安装教程
  1、下载项目
    git clone https://codehub.devcloud.huaweicloud.com/Front00001/Front-saas-web.git
  2、下载项目依赖
    npm install 或者使用 yarn 安装
  3、本地运行开发环境
    npm start
  4、打包项目上线
    运行npm run build 打包好的dist文件夹为需要上线的静态资源
  5、项目chunk分析
    运行npm run analyze 以后会打开一个分析页面，分析每个chunk的大小


## 使用说明
  1、发布到测试环境

![image-20220414102852963](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220414102852963.png)

​    1)运行npm run build 以后直接将代码提交到git仓库
​    2)打开jenkins页面[http://114.116.164.42:8002/jenkins/view/Front/job/Front-saas-web-node-public/]配置好项目的版本号
​    3)点击jenkins页面上的【立即构建】按钮，等待构建完成
​    4)打开测试环境[http://saasweb.test.baibaodun.cn]对代码进行验证
  2、发布到生产环境
​    1)运行npm run build 以后直接将代码提交到git仓库
​    2)提交审批单，等待审批通过后运维构建
​    3)等待构建完成，打开生产环境[http://qiye.baibaodun.cn]对代码进行校验

## 项目接口说明
  1、项目后期有做改造，从原来的tomcat服务改成现在node服务，在node服务中新增了对接百课堂等其他项目接口的转发
  2、接口访问地址以saas_api开头的为对接saas的接口，对接人员-->廖刘超
     接口访问地址以bkt_api开头的为对接saas的接口，对接人员-->罗鹏
  3、具体对接地址可以查询Node-proxy-saas-web项目，看README快速了解

## 项目部署说明
  1、项目打包以后生成的dist文件会放在node服务端（Node-proxy-saas-web）的public中。
  2、替换node服务端的public目录中的内容后会可以立即查看效果
  3、测试环境地址和生产环境具体查看上面的使用说明
  4、由于历史遗留问题，在生产环境有两个地址（两个都可以正常使用）：
    1）http://qiye.baibaodun.cn
    2）http://qiye.baibaodun.cn:7006/
    ---->两个地址都由运维那边使用nginx配置代理，其实访问的均为Node-proxy-saas-web中的public项目

## 项目命名规范
****命名规范
  1、组件文件命的命名使用大驼峰的命名方式  例子-->支付状态组件:PayStatus.js
  2、非组件文件使用小驼峰命名方式  例子-->支付模块功能:pay.js
  3、utils中的自定义的方法使用$命名  例子-->自定义的弹窗方法： $modal();
  4、接口命名使用普通的小驼峰，和后端对应名字即可  例子-->获取薪资代发记录汇总： selectGrantDetailTotalMap();
  5、第三方的方法直接引用  例子-->antd的Modal： Modal.info();
  6、组件中的方法使用"_"开头代表方法属于私有的  例子-->点击事件： _clickHandler;
  7、页面组件中如果是初始化数据的方法使用"__"开头代表方法属于私有的  例子-->初始化获取用户信息： __getUserInfo();
  8、"_"和"__"都代表内部的私有方法，为了更好找到初始化页面的一些方法，但是不做细致的区分，如果在不确定使用那种命名方式的时候都使用"_"作为命名方式
****css
  1、自己定义的样式类名使用"_"区分单词  例子-->订单详情样式： className="order_detail"


## 补充说明
  1、项目中有嵌套了百课堂的项目，具体访问项目地址由后端菜单接口控制[system/oauth/get-user-menus]，前端使用iframe展示对应的项目。当由服务公司进行登录的时候，培训模块对应的内容为百课堂门户网站(Front-train-office)的内容；当培训机构登录时，培训模块显示的内容为百课堂后台系统（Front-train-sys）的内容。
  2、关于如何快速创建一个表格页面-->在utils的hoc文件夹中封装了一个tablePage高阶组件，在页面中使用装饰器的形式注入所需要的组件，快速的搭建一个表格页面，具体看有使用到tablePage的页面。
  3、public目录下的data内容为第三方开发的代码，使用iframe嵌套在项目中
  4、项目中使用了cos-js-sdk-v5第三方代码，windows防火墙会将里面/lib/md5.js文件识别为病毒文件并将其隔离，需要再windows中的威胁防护中将其还原项目才可以正常运行。