项目实战遇到的问题汇总(宝贵经验)项目实战问题汇总 MIS系统 MIS ：（管理信息系统--Management Inf

项目实战问题汇总

MIS系统

MIS ：（管理信息系统--Management Information System）信息系统。针对企业使用的软件，都可以叫做MIS系统。

ERP系统

ERP：企业资源计划，也叫物料计划管理，主要功能是生产管理、进销存管理、财务管理。（比如大众汽车配件供应商的系统）

CRM系统

CRM：客户关系管理，主要管理企业的客户、销售管理，业务方面的软件系统。（比如装修公司的销售管理。员工提成等等）

OA系统

OA：协同办公系统，无纸化办公系统。（比如公司考勤、打卡、流程）

Saas系统

项目中遇到的最大的问题

问题一：环境问题

问题描述：

项目开发过程中基于react+antd来实现的，最近搭建一个新的项目，下载基于最新的5.2.3版本antd来开发。运行过程中出现错误。

问题表现：

问题的解决方案：

排查后降低了antd的版本，降低到5.2.2以及以下的版本。能够解决问题。

总结：antd最近更新了新的版本，但是版本还不够稳定。目前暂时不推荐用在最新的antd版本

问题二：业务问题

问题描述：

项目开发过程中，客户要求本地我们一次性要上传1000张图片到后台。上传流程没有问题，但是运行上传这个功能后，内存被消耗满了甚至达到100%。

问题表现：

开启文件上传，整个项目卡顿，排查后发现内存已经消耗90%-100%左右。

问题解决方案：

原来上传方案：上传一张图片就调用一次后端接口，导致前端上传多了，浏览器线程被占满，上传是异步的，服务器处理的时间如果不及时，前端会一直占用浏览器线程。导致前端开销很大。

解决方案：

批量上传，一次性上传多张图片，比如一次处理10、20、30个图片。异步处理上传过程。
前端分批压缩图片（前端js可以实现对图片压缩处理），后端拿到后解析图片（可以节省一些带宽）

问题三：业务问题

问题描述：

项目中动态将图片渲染出来了。甲方要求，图片需要一个盒子范围内部，放大和缩小功能。

要求：鼠标移入到图片指定的位置，放大的时候，就从图片指定位置开始放大，而不是默认图片中间开发放大

问题表现

鼠标移入图片后，能拿到鼠标的位置，滚动鼠标滑轮，放大图片默认每次都是图片正中间开始放大，鼠标放在右上角，想要达到的效果是右上角作为图片放大的中心。

解决方案

放大图片通过css动画来实现

transform：scale(倍数)

transform-origin:x轴、y轴

通过transform-origin来控制图片的基点，这样可以控制图片scale属性从哪个位置开始执行动画。

问题四：业务问题

问题描述:

前端动态渲染图片，这个图片不是采用文件服务器链接传递回前端（比如：baidu.com/1.jpg），后端采用…

问题表现：

前端拿到base64位编码后，解析不出来图片，页面无法加载图片。

但是如果直接将base64编码代码复制到浏览器后能显示出来，用转存失败，建议直接上传图片文件就是无法显示图片。

问题解决方案

通过在线一些base64网站，进行了后端传递回来的base64代码解析

发现无法通过base64代码反编译为图片。此刻提出了后端base64位编码有问题疑问。但是后端不认，说这个图片编码没有问题。

接下来前端通过二进制反编译得到图片的二进制编码

反编译出来后，发现这个base64编码压根就不是png图片。后端传递回来的base64编码明确标注位png格式

data:image/png;base64,vwNzA3EDeANtBMMDkgRPBHUE9gIcA0gDEAP+AgwD+wK5AxcDiwL9Ai0DAgMLA/0CZAQiA/sC7AL3AgEDBQPyArADFgP8AiIDMQP/AuECLAMkBBED8wIiA+4CCQMeAwoDSwP3AvcC2gLhAukC7gLoAvwCAgPuAkgDDAPhAvECxwI=

这个时候，一定是后端问题，把这些证据交给后端，后端发现了问题（自己编码图片格式写错了）。至此问题解决。

问题五：业务问题

问题描述:

使用vue的时候调用百度地图，地图页面开很多的时候（指的浏览器同时打开很多也地图页面，每个页面都在消耗浏览器内存导致内存不足）出现Uncaught RangeError: WebAssembly.Memory(): could not allocate memory。电脑内存疯狂暴涨导致浏览器崩溃

问题表现：

问题解决方案

百度地图js2.0，会在window对象上创建地图实例的引用，并无法销毁

造成内存泄漏最终内存溢出的问题

解决方案；

解决浏览器内存分配，但是这个太难太麻烦，而且影响很大
百度地图自身解决问题。版本更新之类的。代码重新设计之类的。
打开多个页面出现内存不足，离开页面的时候考虑销毁地图组件，释放内存，进入页面在重新加载。

问题六：代码问题

问题描述：

微信小程序中，实现了分享功能。将分享链接发送到微信群或者微信好友后，点击了分享链接。要判断用户来源（是通过分享链接进来的、还是直接搜索小程序主页加载进入）

问题表现：

开发者目前不直到如何判断用户是如何进入这个系统的。

微信分享出去的链接跳转进来如何判断。

问题解决方案：

分享链接的地址上面添加一个特殊参数，share=true。通过这个链接跳转进入系统，会进入应用程序的生命周期，可以获取这个参数
在小程序应用生命周期onLaunch，可以接受一个参数（onLaunch(params)）通过不同的方式跳转进来，params对象中会出现不同的code值

问题七：代码问题

问题描述：

在小程序中使用map组件，可以调用腾讯地图的API，将一些固定的点标记到地图界面上，点的经纬度获取是通过android端百度地图API获取的，所以此时将这个位置点信息直接设置上去会出现偏差，而且偏差还比较大

问题表现：

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

使用uniapp或者小程序map组件来渲染地图的时候，传递进入的longitude和latitude无法准确定位，出现位置差异。

原因：小程序中的定位方式默认的是wgs84,而百度地图中使用的是BD09 ，还有gcj02。所以这里会出现偏差。

问题解决方案：

使用离线的js库gcoord,将位置信息进行一次转换；

首先下载这个js库，放至某一个目录下，我这里是utils下

import gcoord from '../../../utils/gcoord.js'

var result = gcoord.transform(
       [resArr[i].JD, resArr[i].WD],  // 经纬度坐标
       gcoord.BD09,         // 当前坐标系（百度）
       gcoord.GCJ02);

这里在小程序中修改为gcj02,国测数据，因此转为gcj02；

目的就是讲小程序中遇到坐标，通过这个插件进行转化，识别度会更好。

问题八：业务问题

问题描述：

关于uniapp打包问题。

公司原来基于uniapp开发打包了一个app项目（android）。并且上架到了 chrome的应用市场。最近不知道怎么回事儿，app被下架了（原因是app里面包含了敏感信息）

公司要求：开发者现在排查项目，重新打包在本地测试数据，测试页面。

问题表现：

之前公司打包app为了上架到chrome的应用，但是最近被强制下架了。

公司负责人要求下来后排查问题

问题解决方案：

git克隆之前发布的源码，本地打包测试bug、测试数据。
测试完成后，修改对应的一些页面和数据。在打包为渠道包，继续上线chrome市场

问题九：代码问题

问题描述：

公司项目采用的是vite+vue3开发项目

现在要打包上线，前端负责npm run build打包后将资源交给后端进行部署。

打包过程中出现错误：打包文件体积过大，无法打包成功

问题表现：

其中我们会发现两个错误[skipped(large chunk)]

当看到这个错，说明打包的文件大小超过了vite框架的大小限制，一般默认500kb，但是我们看到有596kb和770kb

问题解决方案：

方案一：

打包的文件资源太大，可以考虑进行打包拆分。

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if(id.toString().split('node_modules/')[1].split('/')[0].includes('element-plus')){
                            return 'element-plus'
                        }else{
                            return 'wq'
                        }
            }
          }
      }
    }
  }

比如我发现element-plus这个包很大，那我们可以split拆分这个包，打包后体积相对来说会小一些。

方案二：打包体积过大，之前聊到vite有对文件大小进行限制。我们可以考虑修改这个配置

vite官方配置：cn.vitejs.dev/config/buil…

vite中配置如下：

build.chunkSizeWarningLimit
类型： number
默认： 500
规定触发警告的 chunk 大小。（以 kbs 为单位）。它将与未压缩的 chunk 大小进行比较，因为 JavaScript 大小本身与执行时间相关。

配置过后

打包成功！！！！！

问题十：代码问题

问题描述：

在进行可视化页面开发的过程中，遇到地图行政区域的事件点击无法生效的问题。

比如：

点击剑阁县，可以弹出矩形框提示用户综合主题商家数量。

但是点击苍溪县无法弹框显示。

问题分析：

代码为

var myChart = echarts.init(document.getElementById('aamap'));
//绑定mouseover事件
myChart.on('mouseover', (e) => {
  。。。省略代码
  //设置置顶区域控制高亮效果
  myChart.dispatchAction({
    type: 'highlight',
    dataIndex: dataIndex    //所在区块变为高亮状态
  });
})

上面这段就是绑定鼠标移入后的地图显示代码。

测试代码后发现事件可以触发，但是图层弹不出来。猜测可能是地图加了贴图后遮盖的问题。

问题解决方案：

给贴图设置了一个属性

 pointer-events: none

可以解决这个问题，原因就是贴图加上过后，对地图模块有遮挡，导致鼠标移入后无法触发弹框的显示。

项目描述文档参考

项目名字：赤兔养车平台

项目技术：React+antd+axios+echarts+xlsx+xxxx插件

项目背景描述

要求：必须描述清楚这个项目的背景，说白了就是商业价值，或者他的社会价值。解决了什么痛点。

内容：赤兔养车是一款打造汽车服务的平台，随着汽车保有量上升、新能源汽车的普及，为了方便汽车的保养、维护、美容、改装、充电等等业务而开发设计出来的，车主可以在当前这个平台一站式解决问题，简化了之前车主繁琐的去各大平台寻找资源。当前这个赤兔养车平台，对标的竞品，天猫养车、途虎养车平台。

项目业务描述

必须整体介绍你的业务面，如果包含多端，就写清楚多端，如果只包含一端，就把那一端的业务板块描述清楚。

赤兔养车平台是一个综合性的运行平台，主要包含了多个端。toC利用的是uniapp开发的app端，toB平台端基于react开发的中后台系统，toB商家端也是基于React开发的后台系统。

App整个项目为车主提供了以下服务，车辆保养、车辆美容、快速维修、周边汽车商城、充电桩寻找、商家的分类、地图导航等等模块。我们可以利用app完成在线产品选择、下单、支付、生成订单、门店终端消费、并晒图评价、积分完整流程。

PC端：利用React+antd搭建完成后台管理系统，主要涵盖的模块：系统管理、服务项目分类管理、商铺商家管理、商城商品管理、订单管理、评价管理、以及运行支撑模块（优惠券、秒杀）、财务数据统计等等模块。

系统管理：

用户管理：包含这个系统所有登录的管理员账号
角色管理：对系统管理员进行了角色的分类，以及角色和权限的配置
菜单管理：动态配置菜单模块，主要是菜单和路由配置

服务项目管理：

类别管理：服务类别管理，主要类别包括：洗车、保养、汽车维修项目等等。
商户管理：管理提供对应服务类别的商户，每个商户可以自己维护服务项目，平台来统一管理这些服务类别。
抽成管理：配置每个服务类别，平台和商家的抽成比例

。。。。每个模块的内容，自己列出来。并用自己的白话文，描绘以下这个模块是干嘛的。

个人职责

要求：至少5条个人职责，并且每条个人职责一定要结合业务来描述。不要空谈

不合格的描述：

项目基于react+hook来编程开发，完成业务整体功能
参与项目设计，并完成项目性能优化

不合格理由：个人职责描述，应该跟业务相关，而不是纯写技术和架构层面的。

合格描述：

app端完成汽车商城模块，完成商品数据渲染，并基于onPullDownRefresh来完成数据瀑布流加载，根据用户滚动来优化数据显示。
app端完成地图模块开发，基于uniapp的map组件和百度地图SDK完成商家位置的定位，以及借助于第三方地图完完成导航功能。
PC平台端，参与商品分类管理。使用antd+Table完成多级分类的数据筛选和动态渲染，包括分类信息、分类排序规则等等。
PC平台端，参与了商品业务管理，包括商品数据管理、商品添加、商品数据回显。其中商品文件上传二次封装Upload组件完成对上传文件大小、格式进行了限制。
。。。。。继续写。