后端交互问题
- 传递的参数是什么数据类型
- 接口是什么
- 端口是什么
- 返回值的参数是什么
- 错误码
- 是什么请求方式
- 需不需要添加请求头
用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 log
git status
上库代码
git add .
git commit -m "[DEV]说明"
git push origin HEAD:refs/for/master
下拉代码
repo sync
git 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.deviceTypeEntities
if(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){
...
}
})