工企佳项目笔记

项目背景

该项目是服务于保定市满城区政府、工信局以及大中小型企业的。

是为了方便政府、工信局监管企业的产值波动的，同时在当下疫情的大环境下，企业的产值也有所下降，提供对企业的推广以推动企业的发展。

其中企业的推广业务是通过企业自己上传的宣传视频来进行推广的。

项目描述

1. 企业首先需要注册用户来进行登陆，在注册用户时提供了用户的审核功能，防止恶意注册，只用管理员通过了企业用户的审核之后，企业用户才可以正常登陆。

2. 企业用户登陆需要填写账号及密码，该项目选择企业用户的联系方式作为账号进行登陆，降低用户忘记账号名的风险。

3. 企业用户登陆之后可以进行企业的绑定，只有绑定企业后才可以上报上月的产值。对于企业的绑定，该项目提供了审核机制，只用通过审核之后的企业才可以进行产值上报。

4. 对于产值上报，该项目设置了产值上报逾期日，方便进行统计汇总。

5. 对于上报的产值，该项目设置了产值异常波动百分比，在企业相邻两月的产值波动较大时提示管理员，方便对该企业的产值进行审核等操作。

6. 对于管理端的产值上报提供了根据产值上报模板进行批量上报，在上报内容与当前数据库中的内容存在冲突时，为管理员提供覆盖或者忽略此次操作的选择，方便进行批量导入，也防止了数据的冲突。

7. 该项目在疫情的大环境下，还需要帮助众多中小型企业渡过难关，通过在app端对普通用户展示宣传视频来实现对企业的推广。

8. 对于企业上传的视频及替换的视频，需在管理端通过审核之后方可推送，防止存在违规内容信息的视频在平台展示。

9. 该项目的视频推广机制如下：在有政府推荐视频时，随机推送政府优推视频；在无政府优推视频时，选择企业优推视频进行随机推送，若不存在企业优推视频，则在所有企业宣传视频中进行随机推送。

10. 同时该项目在app端提供了热搜词的搜索，热搜词的排序规则如下：排序权值越高则热搜词越靠前

在管理端，提供了统计分析的总览页面

统计分析页面提供展示以下信息：

• 当天注册用户数量及总注册用户数量
• 当天上报企业数量及当月总上报企业数量
• 当天新增产值及当月新增总产值
• 当天入驻企业数量及总入驻企业数量
• 所有企业当年的同比环比分析图及指定企业当年的同比环比分析图
• 产值上报异常分析饼状图
• 待办事项：待审核企业、待审核视频、产值异常列表 其中的图表类使用的是 echarts 来展示

企业的选择下拉框使用远程搜索来实现，减少从数据库获取的数据量

该页面在 vue 声明周期的 activated 阶段会进行页面刷新，防止信息不同步

项目模块

工企佳项目分为以下模块：

• 首页 - 统计分析
• 企业管理模块
• 产值管理模块
• 视频管理模块
• 政策管理模块
• 公告管理模块
• 热搜管理模块
• 企业用户管理模块
• 配置管理模块

负责的模块

企业用户管理、企业分类管理、企业视频审核、产值配置管理、企业用户审核、公函模板管理、运营状态管理

遇到的问题及解决方案

远程搜索

问题：

element ui 官网提供的远程搜索是一种模拟的远程搜索，手动设置了延迟 setTimeOut ，但在项目中需要使用真正的远程搜索

解决：

如果是使用 input 的 autoComplete 组件，则需在其 fetch-suggestions 属性绑定请求数据库的 axios函数，无论成功与否都需要调用 cb() 函数，该函数的参数即查询得出的内容（显示出的内容）

查询成功需要调用 cb(res) ，若查询失败则调用 cb(error) ；其中 res 为查询成功的结果集，error为查询失败的错误信息

如果是使用 select 远程搜索组件，则是需要在 remote-method 属性绑定请求数据库的远程方法，该远程方法无需调用 cb()
函数，查询结果集赋值给对应的 form 表单即可

el-upload的fileList

问题：

在使用 element ui 上传组件中的 fileList 时候，虽然删除了已经上传的文件，但是数据库未修改

解决：

在使用该组件时，上传成功后会自动在 fileList 数组中插入当前文件的名称及 url ，在取消该已上传文件时，需要手动清空fileList 数组，否则导致在发起请求时，请求参数中的文件路径依旧对应之前的文件

form表单自定义验证规则

问题：

自定义验证规则无效

解决：

在 vue 文件的 data(){} 中，写入自定义校验规则，该自定义校验规则可以包含请求数据库的操作，在该匿名函数中，需要在数据异常时提供callback(new Error(‘message content’)) 回调函数，来对校验规则进行回显。

同时，在 rules:{} 中，对应的 prop 中加入 validator: validateName 并提供 trigger:‘blur’， 及在失焦时校验该规则

只允许输入数字的输入框

问题：

不采用自定义校验规则的方式实现仅允许输入纯数字的输入框

解决：

采用正则表达式的方式直接对输入框的 oninput 属性赋值

即 οninput=“value=value.replace(/[^\d]/g,‘’)”

form表单的规则未进行刷新

问题：

form 表单的规则未刷新，持续显示红色提示

解决：

在触发某些事件（确定、取消）成功时，直接重置规则 this.$refs[formName].resetFields()

vue 中使用 ueditor 同时实现上传

controller中调用两个 service

问题：

在一个 controller 中调用不同的两个 service 中的方法

解决：

在当前 controller 中注入两个 service

即：

@Autowired
private OneService oneService;
@Autowired
private TwoService twoSrevice;

总结
该项目是我第一个从需求分析到流程图设计到原型图设计再到数据库设计，每一步都完全参与的项目，收获颇多。在这个过程中我了解了该项目的所有流程

同时通过这个项目也知道了一个产品是怎么从无到有，从零到产生的。