记录遇到的bug和一些工作心得

后端交互问题

传递的参数是什么数据类型
接口是什么
端口是什么
返回值的参数是什么
错误码
是什么请求方式
需不需要添加请求头
用postman测试，如果要传递入参的话，那么在raw/json格式，传递入参

7.6遇到的问题/收获总结

请求不到数据，一直返回undefined

export const dataWarnRank = data =>
Http.post(VIEW_IP + '/nanning/v4/controller/warn/rank',data).catch(response => {Message.error('获取历史数据告警排行数据失败')
})

nanning前面少加了一个斜杠，最后是组长用断点工具解决的。

在methods里面一直获取不到data里面的数据。他在mthods里面写了一个初始化e-chars的方法，在mounted里面调用了这个方法，我也在mounted里面请求的数据，因为请求数据是异步的，当我请求玩数据之后，再把数据放到data里面，他已经初始化完了，我在在methods里面获取data，自然获取不到数据，获取到的不是undefind，就是null
处理数据的时候，用的map方法，map方法用的有问题，回去好好看看map方法，我在map里面let了一个数组，然后往数组里push数据，最后返回数组，最后返回了一个二维数组。其实我只想要一个一维数组。因为map方法会映射(返回)一个数组，而且不会改变原来的数组。
我用postman测试的接口，没有问题，有返回数据字段，但是我在组件中请求数据，返回的状态码是200，但是字段没有数据。。不懂为什么，组长说是因为我入参的value没有没有传递字符串，说是long丢失精度导致的。将人参stationId = “99”传递进去就得到数据了。

总结：
1.除了console.log()调试，也可以使用断点工具来解决
2.map()方法需要深入了解 ==> let newarr = arr.map(xxx) 会返回一个数组，如果赋值了，会映射一个新的数组，不会改变原数组
3.找一个代码格式化工具 windows alt+shift+f可以自动格式化

7.7号遇到的问题/收获总结

关于git提交代码入库的规范

git commit “[DEV]代码说明”
上传的代码不能留下console.log()
无用代码需要删除
给用户的提示信息或者输入框这些的不能带有！！！，用户体验不好
不能更改之前的代码
前端的字段和后端的字段需要一致

关于git命令总结

先看状态 然后红字代表更改的 不需要更改的直接chekout掉  然后add添加都暂存区 然后在commit 然后在push
假如A先上传了代码，那么需要让c合并代码之后，然后我去拉去最新的代码，然后解决冲突问题，才能上传打印git loggit status
上库代码git add .git commit -m "[DEV]说明"git push origin HEAD:refs/for/master
下拉代码repo syncgit pull --rebase origin master
还原代码git reset --hard HEAD^         还原到上一个版本git reset --hard commit版本id  还原到指定版本号git reset HEAD 文件名          git status绿字变红字  文件回滚上一个版本高 （撤销add.）git checkout -- 文件名         git status红字变无    撤销本地的修改第一次提交需要有钩子
gitdir=$(git rev-parse --git-dir); scp -p -P 29418 pan_chenyang@amoi.tpddns.cn:hooks/commit-msg ${gitdir}/hooks/ && git commit --amend --no-edit

7.8号遇到的问题/收获总结

收获：1.可以给vue的原型绑定插件或者工具类，用的时候就可以直接用了，this.xxx了，然后可以在方法前面加$,然后区分自己写的方法什么的。

在main.js里面
Vue.prototype.moment = moment
Vue.prototype.$md5 = md5
Vue.prototype.$http = Http
Vue.prototype.$utils = utils
Vue.prototype.$sm4Util = SM4Util.sm4Util
Vue.prototype.$store = store
Vue.prototype.$cookieUtil = new CookieUtil()
Vue.prototype.$storageUtil = new StorageUtil()
Vue.prototype.$permissionUtil = new PermissionUtil()
Vue.prototype.$accountUtil = new AccountUtil()

今日需求：获取数据去渲染e-charts，首先在methods里初始化e-charts的方法，然后他又写了个刷新e-charts的的方法，然后用watch里监听，一旦数据发送变化就刷新，在刷新e-charts方法里面，获取数据，然后组成自己想要的格式的数组，然后在nexttick的回调里面调用初始化e-charts的方法，将组好的数组传递下去，然后初始化e-charts方法里接受参数。就觉得他写的很好，我自己怎么想不到呢？

然后数据需要处理，出现的一点问题，需要将let arr = [{1: 0, 2: 0, 3: 0}, {1: 33, 2: 3, 3: 8}]，这样的数组转化为{1:[0,33],2:[0,3],3:[0,8]}这样，然后再处理，然后生成自己想要的的数组

 let arr = [{1: 0, 2: 0, 3: 0}, {1: 33, 2: 3, 3: 8}]let newarr = {}arr.forEach(item=>{// console.log(item);for(let key in item){let value = newarr[key]if(value){value.push(item[key])}else{newarr[key] = [item[key]]}}})console.log(newarr);// {1:[0,33],2:[0,3],3:[0,8]}

先遍历这个数组，然后拿到每一个对象，在for..in遍历每个对象，这个时候就把value想成一个数组，刚进来value肯定为undefined，所以走else，就是将[0]赋值给value，第一个item循环完应该是这个{1:[0],2:[0],3:[0]},当第二个item进来value就有值了，然后走上面的push，将他push到vallue里面，都循环完就变成我想要的数据格式了{1:[0,33],2:[0,3],3:[0,8]}。       我为什么想不到？我好烦.......草

后来问了朋友发现reduce也可以实现，不过实现逻辑是一样的。代码实现逻辑是一样的。reduce很强大，我理解的很浅薄，需要学习

   let arr = [{ 1: 0, 2: 0, 3: 0 },{ 1: 33, 2: 3, 3: 8 },{ 1: 33, 2: 3, 3: 10 },];let ret = arr.reduce((pre, ele, index) => {let keys = Object.keys(ele);for (const i of keys) {if (index === 0) pre[i] = [];pre[i].push(ele[i]);}return pre;}, {});console.log(ret);

7.9号遇到的问题/收获总结

收获：
1.收到测试给的问题bug，如果自己复现不了，或者自己觉得没问题，那么就要找测试沟通，找他复现bug
2.处理问题：一定要考虑周全，往最差的情况去考虑，多想一想
3.解决问题：如果有些问题，你能准确的描述出来，那么就可以去百度，一定要先准确的知道问题所在，然后再去解决问题
4.写代码，需要考虑代码的可复用性，健壮性（ps:先实现功能）
(先是echarts柱状图x轴显示问题，如果说x轴的数据超过多少我就让他竖着显示，否则就横着显示，再其次就是我所有数据都是填的5个字，然后横向排列一排刚好显示10个，如果超过10个让他竖向显示。但是我还有一个问题没有考虑到，那就是如果用户填的数据不都是5个字，有的7个字，有的8个字，一排显示10条数据，就会叠加在一切，很丑，所以应该设置超过7条数据让他竖排显示，留有一定的空间，要考虑的很周全)
今日需求：解决测试测出来的一个bug，就是说echars的柱状图，如果数据过多，导致右边显示的数据，和图表的数据不对应，后来在e-charts的配置项中，配置了，然后解决了不对应和当数据过多，柱状图x轴竖向或者横向显示的问题

xAxis: [axisLabel: {textStyle: {color: '#929caa'},interval: 0,    //横轴信息全部显示formatter: function (value) {if(xAxisData.length > 7){//当数据大于7，x轴的文字改为竖版显示var str = value.split("");return str.join("\n");}else{return value}             }},data: xAxisData, // ['湿度传感器', '水浸传感器', '电流互感器', '烟感']}],

7.10号遇到的问题/收获总结

自动格式化：

On Windows Shift + Alt + F
On Mac Shift + Option + F
On Ubuntu Ctrl + Shift + I

vscode插件：

JavaScript (ES6) code snippets
Prettier - Code formatter
Beautify
ESLint

vscode配置项：

//settings.json
{// "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", // tab 大小为2个空格"window.zoomLevel": 1,"workbench.tree.indent": 20,"editor.tabSize": 2, // tab 大小为2个空格"editor.wordWrapColumn": 200, // 100 列后换行"editor.formatOnSave": true, // 保存时格式化"prettier.semi": false, // prettier 设置强制单引号"prettier.singleQuote": true, // prettier 设置语句末尾不加分号"breadcrumbs.enabled": true,"vetur.format.defaultFormatter.html": "prettyhtml", // 选择vue文件中 template 的格式化工具// vetur 的自定义设置"vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": true,"semi": true}},"javascript.updateImportsOnFileMove.enabled": "always","editor.codeActionsOnSave": null,"files.associations": {"*.extension": "language"},"files.autoSave": "onFocusChange","[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

7.13 14号遇到的问题/收获总结

13号写了静态页面没有收获

1. …运算符的灵活使用

这是一个查询的api,当我传递相关地段进来,我传递给后端,就可以获取对应的数据渲染,但是我当时就在想怎么传递啊,他写成这样,我调的时候怎么传递呢.

export const deviceTypeQuery = () =>Http.post(BASE_IP + '/iot/v4/controller/equipment_type/find_all', { pageIndex: null, pageSize: null, }).catch(response => {Message.error('查询设备类型报错！')})

后来想到,接受一个data,然后用展开运算符写到 { pageIndex: null, pageSize: null, }后面就可以了,也不会影响这两个参数的传递

export const deviceTypeQuery = data =>Http.post(BASE_IP + '/iot/v4/controller/equipment_type/find_all', { pageIndex: null, pageSize: null, ...data }).catch(response => {Message.error('查询设备类型报错！')})

所以活学活用真的很关键!

2. 关于解构赋值的灵活使用

 一般我喜欢.then后面res,然后res.xxx.

 deviceTypeQuery().then(res=>{let deviceTypeEntities = res.deviceTypeEntitiesif(res.statusCode === 0){tableData = deviceTypeEntities}})

如果解构赋值可以这么写

 deviceTypeQuery().then( ({statusCode,deviceTypeEntities}) =>{if(statusCode === 0){tableData = deviceTypeEntities}})

3. 关于const的使用

比如有些变量我不需要改的,比如唯一id,或者我定义的状态码,要用const去定义,而不是let var

4. 关于elements el-row 和 el-col的使用

只有在一种情况下可以用el-row 和 el-col , 那就是你想让他们一排显示,然后他们的大小,位置关系不会发生改变,那么用el-row el-col 很好
但是大多数情况下,这些输入框按钮的位置都不是固定死的,那么用el-row配合el-col 就不是很好,单用el-row就可以了

5. 关于语义化,一定要语义化,不然代码很难读懂,定义变量,定义接口名,定义常量名

6. 如果这一行我直接这么写,会出现空指针的问题,所以需要先把他解构出来,在判断,当状态码等于多少的时候那么我才怎么怎么样

deviceTypeQuery().then(res=>{if(res.statusCode === 0){  //看这里++++++++++++++//if(res&&res.statusCode===0)  // 这样判断也不会有问题...}})

这样写就不会有问题

deviceTypeQuery().then(res=>{const code = res.statusCode if(code === 0){  ...}})

7. 写的时候一定要判断状态码,多少多少的时候我才执行什么逻辑

今日未完成的: 1. 分页功能=>如果第一页加满了在加会怎么样,如果一页删完了会怎么样,如果在第二页修改了是留在当前页面还是回到首页… 2. 后端返回的数据没处理

需要看的知识点: $emit set render函数过滤器自定义指令指令