# 开发介绍在经过漫长的学习后，我们终于可以开始开发了。公司的主营业务为财务共享产品的销售和财务共享方案咨询等，现在我们生产环境（[https://fol.ztessc.com.cn](https://fol.ztessc.com.cn/)）使用的即为公司标准产品，除了用于公司费用报销及共享业务以外，也用于销售时的功能演示。销售给客户之后需要对标准产品进行功能定制，即二次开发，因此产品的开发质量尤为重要。产品核心业务功能主要围绕报账和共享两部分展开，同时包含了其他财务功能。报账即为填写报账单据，共享则是指财务可以对单据进行共享审核。 # 产品开发 ## 如何定位一个页面一开始，你可能只会接受到一些简单的任务或者BUG，比如对页面上的字段或按钮进行调整。所以，我们先来了解如何**定位页面**以及**页面上的组件**。在接受到任务或者BUG时，请务必让对应的同事提供**页面地址的完整路径**，确保你能快速的定位到代码。众所周知，Vue-Router的路由模式有两种：`history`模式和 `hash`模式。 1. 如果你获取到的页面地址是这种形式：http://192.168.0.249/base/employeeInfo，说明这是一个history模式的工程，这样的页面一般在主工程zfs-fssc-web中。 2. 如果你获取到的页面地址是这种形式：http://192.168.0.249/fms/#/index，说明这是一个hash模式的工程，这样的页面是在各个工程内部，工程的名字就是地址中间的路径名fms。以第一种情况为例，路由模式告诉我们工程是zfs-fssc-web，路径第一部分base则是**微服务名**，第二部分employeeInfo则是页面名。使用我们之前的学习到的VSCode快捷键Ctrl+P，把路径中ip或者域名之外的部分复制进去，就能快速定位到页面。 ![image-20210721155525718](https://image.deepe.ren/2023/10/07/16966396176520aa813cb51.png) 有时候你可能会碰到重名的页面，特别是index.vue这种，这时候你就需要仔细查看文件的相对路径，是不是在你想要的微服务下。 ![image-20210721155759164](https://image.deepe.ren/2023/10/07/16966396196520aa83a582d.png) 相反，有一些地址你可能找不到同名的页面，因为它被命名为同名文件夹下的index.vue。 ![image-20210721161036353](https://image.deepe.ren/2023/10/07/16966396266520aa8a2464a.png) 这样的页面是不符合代码规范的，同时增加了后续维护的工作量。我们正在试图修复这个问题，希望你在以后的代码编写中也不要使用这种命名方式。 ## 如何新增一个页面新增一个页面是最常见的需求，在我们的工程中，与所有的Vue工程基本保持一致，一个.vue文件即为一个页面。在主工程zfs-fssc-web中新增页面分为两种，一种不需要后端返回菜单鉴权的页面，新建页面时需要在对应的微服务文件夹中的common文件夹中新增，路径为service/{微服务名}/views/common；另一种需要鉴权的页面则需要放置在除common以外的任意文件夹，一般来说会根据菜单分组自行建立相应的文件夹。 vue文件的name属性将作为url注册到当前微服务的路由下，所以无需在vue-router中手动配置路由信息，因此请严格遵守相关规范。在zfs-fssc-web中也提供了脚本用于快速新增符合规范的vue页面，命令为: `npm run nf 微服务名页面名称` 这里的微服务名一定是我们系统中已经存在的微服务，所有的微服务名你可以在src\services.json配置文件中查看。这里的页面名可以是小驼峰或者是短横线分割，脚本会自动帮你处理。 ![image-20210721164124801](https://image.deepe.ren/2023/10/07/16966396346520aa92dc261.png) 这两种命名，都会生成相同的页面，运行后可在对应的微服务中看到生成的空白页面。 ![image-20210721164158779](https://image.deepe.ren/2023/10/07/16966396366520aa94a153c.png) ## 如何开发一个列表作为后台管理系统，公司最常见也是最简单的页面，就是查询列表。开发一个列表页面，算的上是公司前端的基本功了。在前面学习的基础上，我们在自动生成的页面中，用Emmet语法引用公共组件zte-table，分分钟就能生成一个列表。 ![image-20210721164811901](https://image.deepe.ren/2023/10/07/16966396496520aaa16f3b4.png) 写好temlate层之后，我们在script的data中添加一个变量，一个列表页面就已经初步成型。保存文件时，VSCode插件会自动帮助你按照ESLint规范格式化代码。 ![image-20210721164907749](https://image.deepe.ren/2023/10/07/16966396426520aa9abf5ab.png) 作为一个列表，最基础的元素至少有三样： 1. 接口请求 2. 列表字段 3. 查询条件所以我们要根据组件参数，给ZteTable对象添加三个基础属性： ![image-20210721165154714](https://image.deepe.ren/2023/10/07/16966396536520aaa5a744d.png) 你应该知道，requestUrl（接口地址）是由后端提供的；tableColumn（列表字段）的展示名称是根据需求文档来编写的，字段的编码值是由后端提供的；searchInfo（查询条件）也是根据文档和后端接口来配置。特别的是，查询条件会根据字段的类型不同而配置不同的参数，这需要你对zte-item组件有所了解，而且熟悉之前学过的快速编码、LOV会对你配置查询条件有所帮助。 ## 如何开发一个增删改查增删改查的界面就是列表界面的升级版，如果你已经能很熟练的实现列表界面，增删改查也不在话下。一个基础的增删改查，只比列表界面多一个元素： 1. 新增字段将之前的zte-table组件和变量都换成config-data也可以无缝衔接。此时页面上已经多出了相应的按钮，只需要再配置一个itemInfo（新增字段）变量，就能轻松的通过新增弹窗维护数据。 ![image-20210721171010802](https://image.deepe.ren/2023/10/07/16966396566520aaa870c57.png) 很幸运的是，itemInfo中的字段类型配置和searchInfo中的基本一致，你只需要参考之前的配置再根据需求文档进行调整即可。虽然如此，我们还是把查询条件和新增字段分为了两个参数，这是基于单一功能原则的考虑。而在实际业务场景中，两者之间往往会存在一些微小的差别，而为了这些差别增加更多的配置反而增加了配置难度、减少了配置的灵活度。 # 项目开发 ## 派生代码到项目仓库首先项目仓库新建一个叫FrontEnd的子群组（以东胶项目为例） ![1](https://image.deepe.ren/2023/10/07/16966407756520af077b496.png) ## 获取项目代码 - 如图所示三个目录为项目所用 ![2](https://image.deepe.ren/2023/10/07/16966409056520af892cb06.png) - **派生代码**到项目的仓库（项目必选目录都需要**派生**，按需目录派生项目需要的工程，移动端工程同样派生需要的移动工程） ![3](https://image.deepe.ren/2023/10/07/16966409266520af9e4df46.png) - 点击**派生**找到对应的**项目仓库派生**即可（以东胶项目为例） ``` ``` ![4](https://image.deepe.ren/2023/10/07/16966409336520afa56a63a.png) - 派生完以后根据对应的版本创建**develop**分支后续在**develop分支开发**（版本开发完合入**release分支**提测） - ![5](https://image.deepe.ren/2023/10/07/16966414016520b179d2369.png) ![6](https://image.deepe.ren/2023/10/07/16966414016520b179cf4e7.png) ![7](https://image.deepe.ren/2023/10/07/16966414016520b179b89cd.png) ![8](https://image.deepe.ren/2023/10/07/16966414016520b179c5f3d.png) ## 克隆代码到本地 ![9](https://image.deepe.ren/2023/10/07/16966474556520c91f5dfa6.png) ## 依赖安装说明 **1、老项目** （各个微服务单独分开的项目）直接 npm i **2、新项目（如图1所示项目）** 1. 安装nrm ``` npm i -g nrm ``` 1. 增加注册表 ``` nrm add zte http://ztc.ztccloud.com.cn:4873/ ``` 1. 使用私服安装zfs相关依赖 ``` nrm use zte npm i zfs-common@2.1.2 zfs-service@2.1.2 zfs-ui@2.1.2 （适用于2.1.2和2.1.3版本以上版本,例子以2.1.2为例其它版本同理） npm i @zfs/common@2.1.4 @zfs/service@2.1.4 @zfs/ui@2.1.4（适用于2.1.4及以上版本，例子以2.1.4为例） ``` 1. 使用国内镜像安装其他依赖 ``` nrm use taobao npm i ``` ## **怎样新增一个页面** 假如有一个需求要新增一个如下图所示的”全新页面“（图2、图3） ![22](https://image.deepe.ren/2023/10/07/16966474566520c92030933.png) 图2 ``` ``` ![23](https://image.deepe.ren/2023/10/07/16966474576520c921a28b3.png) 图3 首先我们需要在基础数据平台-菜单管理（图4、图5）配置页面的菜单（这个一般是后端配置）。 ``` ``` ![24](https://image.deepe.ren/2023/10/07/16966474576520c921e3efc.png) 图4 ![25](https://image.deepe.ren/2023/10/07/16966474576520c921f20e0.png) 图5 加好菜单后代码中如何新增我们所需要的页面！ 1. 我们新增的菜单是在报表平台report（图3）单据报表下面，那么我们需要找到单据报表所在组件中的位置 ![26](https://image.deepe.ren/2023/10/07/16966440616520bbdd65446.png) 图6 1. 在本地src/service下面新建一个和（图6）一样的目录。在common下面再新建一个vue文件，名字就是我们在菜单管理中所配置的路径名（图5），这样就完整的新增了一个页面，接下来只要在这个budgetStatistics.vue中完成开发即可。 ![27](https://image.deepe.ren/2023/10/07/16966437176520ba852c70d.png) 图7 ## **怎样修改一个页面** 假如有一个需求是要在员工信息页面中，单据编号旁边加一个叫”员工生日“的字段 ``` ``` ![28](https://image.deepe.ren/2023/10/07/16966460596520c3ab15cf8.png) 图8 ![29](https://image.deepe.ren/2023/10/07/16966460716520c3b7055f6.png) 图9 首先我们需要找到页面所在位置 ![30](https://image.deepe.ren/2023/10/07/16966460936520c3cdc90a9.png) 图10 和新增页面一样在src/service下面新建一个和图10一样同样的目录 ![31](https://image.deepe.ren/2023/10/07/16966461096520c3ddf0d1b.png) 图11 因为是已有的页面所以我们vue文件的名字也要相同叫employeeInfo.vue。然后就可以进行修改了。我们的需求是在员工姓名后面新增一个叫员工生日的字段，那么把组件中的tableColumn复制过来然后添加员工生日即可。（或者也可以created生命周期中对tableColumn数组进行处理） ``` ``` ![32](https://image.deepe.ren/2023/10/07/16966461226520c3ea777ee.png) 图12 保存后查看页面，修改成功。 ``` ``` ![33](https://image.deepe.ren/2023/10/07/16966461286520c3f0af44b.png) 图13 ## **怎么新增微服务** - 目录结构以功能较少的PUBLIC工程为例分析后可得 ![51](https://image.deepe.ren/2023/10/07/16966463706520c4e2718e8.png) 仿照产品的目录结构在项目代码 /src/service/目录下新建 `fundsplan`文件夹，目录结构如下（具体文件可以直接从zfs-service依赖中复制出来进行修改） ![52](https://image.deepe.ren/2023/10/07/16966463766520c4e8c108a.png) - 注册微服务修改/src/services.json文件，吧需要添加的微服务写入json文件，zfs-common依赖将会读取此配置并注册该微服务 ![53](https://image.deepe.ren/2023/10/07/16966464236520c517771aa.png) - 修改路由配置 ![54](https://image.deepe.ren/2023/10/07/16966464316520c51f29b67.png) - 修改入口文件中的内容 ![55](https://image.deepe.ren/2023/10/07/16966464426520c52a15803.png) 这样一个新的微服务就完成了 - 其他方法添加微服务也可以采用2.1.2之前新增微服务的方法，直接init一个项目，自行配置webpck、路由等配置，如果要和2.1.2版本混用的话，推荐路由模式也改成history以适配2.1.2版本，防止微服务之间跳转可能出现的url错误。 ![56](https://image.deepe.ren/2023/10/07/16966464486520c530bc4fe.png) ## **怎么修改报账单** **1、老项目（3.0版本以前）** 3.0以前的版本是源码可以直接修改 **2、新项目（3.0以后的版本包含3.0）** 从3.0.0版本开始，boe支持依赖升级，和zfs-fsss-web-prj使用方式类型 - 切到私服(nrm use zte)安装带有@zfs开头的npm包 ![61](https://image.deepe.ren/2023/10/07/16966465536520c599cb472.png) @zfs/boe 报账单主工程，包括入口文件、公共页面、单据大类等 @zfs/boe-core 报账单核心代码，包括单据设计器、单据解析器（不可重写） @zfs/boe-ia 报账单智能审核模块（不可重写） - 切到taobao(nrm use taobao)然后安装其他包npm i - 启动服务npm run serve - 页面开发和zfs-fssc-web-prj类似，二次开发需要继承依赖中文件并重写，可重写的文件分为2部分：（1）单据大类模版子类继承文件放在路径 /src/boeType 目录中，父类继承自 @zfs/boe/src/boeType 目录。所有单据大类均可继承，新增的大类直接在目录中添加即可。（2）公共页面子类继承文件放在路径 /src/views 目录中，父类继承自 @zfs/boe/src/views目录。可继承重写的页面如下： batchPrint : 单据批量打印 billSSO : 单据单点登录 billView : 单据查看 bizApproval : 业务审批 initialApproval : 财务初审 printBill : 单据打印 reExamine : 财务复审 shareView : 共享单据查看 taskInspect : 任务稽核单据 # 项目分支规范 - develop分支为最新分支，release为提测分支，提测阶段打包都需拉取release分支进行打包，提测完成再合到master分支上线。 - **打包之前切记要提交代码和拉取最新代码合到release分支，并切到release分支再打包** # 移动端开发 ## 克隆代码 ### i. 历史项目如果所开发的项目已有移动端，在git仓库里面直接克隆代码到本地即可，工程名一般为boe-h5 ![image-20220112163402879](https://image.deepe.ren/2023/10/07/16966397526520ab088410c.png) ### ii.新项目如果是新项目或者说原项目没有移动端，从产品移动端fork一个工程到项目仓库 ![image-20220112163414895](https://image.deepe.ren/2023/10/07/16966397536520ab09dc23e.png) ## 安装依赖 ### **i.** \>=2.1.4版本移动端依赖中 @zfs/ui 或者zfs-ui需要在私服安装 ![image-20220112163426092](https://image.deepe.ren/2023/10/07/16966397666520ab16c2b63.png) 执行如下指令从私服按照@zfs/ui(或zfs-ui) ```b nrm use zte # (需要安装nrm并设置私服地址) npm i @zfs/ui nrm use taobao npm i ``` ### **ii.** 2.1.2 - 2.1.3版本 ```bash nrm use zte # (需要安装nrm并设置私服地址) npm i zfs-ui nrm use taobao npm i ``` ### iii.<2.1.2版本 npm i ## 运行 npm run serve # 二开说明 ## **i.** 目录结构做开发之前，需要先了解下移动端工程的目录结构 ![image-20220112163443724](https://image.deepe.ren/2023/10/07/16966397656520ab15c1980.png) ## **ii.** 新增页面如果需求是新增页面的话，在views文件夹内新建文件，并在路由配置里添加路由即可进行开发/调试。新增页面时要求，统一三个名称：文件名camelCase、根元素样式名kebab-case、组件名camelCase，名称保持和页面功能相关 ![image-20220112163455870](https://image.deepe.ren/2023/10/07/16966397656520ab15c4c31.png) # 小程序部署 ## 申请小程序由客户方申请小程序，申请成功后提供相关信息和分配权限。 ## 提供小程序登陆账号和密码登陆地址：https://mp.weixin.qq.com ![img](https://image.deepe.ren/2023/10/07/16966397796520ab23da010.png) ## 管理员分配权限客户方人员作为管理员，将我司开发人员添加为项目成员，并分配三个权限。 ![img](https://image.deepe.ren/2023/10/07/16966398106520ab42e820a.png) ## 提供小程序AppID和AppSecret 管理员提供小程序AppID和AppSecret给开发人员，开发人员后续在配置文件中进行配置 ## 申请域名客户方需为后台代码部署的服务器申请https域名，并提供给开发者在微信公众平台进行配置。 ![img](https://image.deepe.ren/2023/10/07/16966398106520ab42bea5e.png) ## 申请公众号由于票据识别需通过微信调用相机，这个调用接口属于公众号，所以还需用户申请一个公众号提供AppID和AppSecret。 ## 下载小程序壳子 ![img](https://image.deepe.ren/2023/10/07/16966398136520ab459256e.png) ## 修改地址用微信开发者工具打开并修改地址 ![img](https://image.deepe.ren/2023/10/07/16966398186520ab4ac8652.png) ## 上传代码，提交审核真机测试没问题，上传代码。登录小程序后台提交审核 ![img](https://image.deepe.ren/2023/10/07/16966398216520ab4d74c6c.png) # 联调介绍 ## Nginx的配置前后端联调，就是将双方的服务集成在一个端口下。将前端指向自己，后端指向对应的后端IP+port服务。使用Nginx的反向代理，我们可以轻松的完成这一操作。 - 将前端指向自己，即将location规则的**根路径（/）**块中的代理地址设置为前端服务地址； - 将后端指向对应的后端，就是将locaiton规则的**接口路径（/sys/）**块中的代理地址设置为后端的网关地址，一般是IP+28080. - 补充1：如果发生Nginx配置和服务都一切正常，但是接口请求长时间无响应的情况，可以通过ping命令来检查可访问性，一般检查防火墙配置，把所有防火墙都关闭即可。 - 补充2：在3.0.0版本之后的联调中，后端会通过注册到服务器上通过请求头中的关键字来分发请求。 ```nginx proxy_set_header n-d-region 'keyword'; ``` 将以上代码添加到接口路径的location块中，可以给请求头添加自定义参数【n-d-region】，引号内的关键字内容由后端提供。 ## 接口请求与参数 ### 请求方式一般的增删改查都是由代码生成器生成，接口请求遵守RESTful规范。其他在页面中主动调用的接口，基本只有GET和POST两种方式。前端使用axios插件进行请求处理，你可以使用 `this.$http.get`或者 `this.$http.post`来进行请求。 axios中文文档：https://www.axios-http.cn/docs/intro ### 参数格式需要特别注意的是，前端发起POST请求，请求参数格式一般有2种： 1. JSON格式，通过请求体传送，默认为这种格式；对于后端来说，使用requestBody进行参数接收 2. FormData格式，使用 `this.$qs.stringify`方法进行转换；对于后端来说，使用requestParam进行参数接收返回参数的格式也有严格要求，必须按照以下格式，进行返回： ![image-20210721172107879](https://image.deepe.ren/2023/10/07/16966488386520ce8668eba.png) 否则将被前端拦截器拦截，无法获取到返回值。 ## 开发工具 ## **zfs-cli** - 使用npm install -g zfs-cli 进行安装用来快速安装有依赖zfs-common、zfs-service、zfs-ui库的项目，使用zfs-cli setup即可安装依赖，如果有依赖zte的库会自动切换zte源，读取package.json库对应的版本来进行安装，其它起来默认会使用国内源安装，安装完成会切回安装之前的状态，保证整个项目文件夹只新增了node_modules目录，其它还是原样，npm的源也会还原成安装之前的状态添加默认@zfs依赖的支持。但默认配置只支持内网，鉴于域名和端口号的安全考虑，默认配置暂未支持外网，所以外网要用请先执行以下命令： zfs-cli setup http://fssc215.ztccloud.com.cn:4873/ @zfs/ui @zfs/common @zfs/service @zfs/element-ui zfs-ui zfs-common zfs-service ## **auto-realod-nginx** [nginx监听配置文件自动重启工具（解压放到nginx根目录下即可）.zip](http://fssc.csztessc.com.cn:8090/download/attachments/12845070/nginx监听配置文件自动重启工具（解压放到nginx根目录下即可）.zip?version=2&modificationDate=1602290784000&api=v2)（点击可下载）；具体代码在工具auto.reload-nginx.js里； ![img](https://image.deepe.ren/2023/10/07/16966398246520ab50b6537.gif) ## Mock服务当后端接口尚未完成，或者调试组件时，前端需要一些虚拟数据来协助开发，这是可以使用我们部署的EasyMock来模拟数据。 EasyMock的源码地址为：http://gitlab.ztccloud.com.cn:18088/FrontEnd/privates/easy-mock EasyMock服务的访问地址为：http://192.168.0.215:7300/login 可以使用任意账号（3-20位）密码（6-20位）进行登录，如果没有此账户会默认注册并登录。 ![img](https://image.deepe.ren/2023/10/07/16966398356520ab5b3eebc.jpg) 网站的具体使用说明可以通过http://192.168.0.215:7300/docs在线文档进行学习。关于Mock的语法，可以通过http://mockjs.com/官方文档进行学习。可以通过帐号密码 zte/zfs123456 登录查看演示项目。

前端二开必看

前端二开必看

关于作者

目录