前端2：工作涉及的问题及总结

1.端口占用

cmd：netstat -aon|findstr "3000"   任务管理器杀掉对应PID

这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入"cmd"后点击确定按钮,进入DOS窗口,接下来分别运行以下命令:
        >netstat -aon | findstr "80"
                Proto  Local Address          Foreign Address        State            PID
                ====  ============      ==============  ==========  ======
                TCP    0.0.0.0:80                    0.0.0.0:0                LISTENING      1688
可以看出80端口被进程号为1688的程序占用.
        >tasklist | findstr "1688"
图像名                                                PID            会话名                    会话#       内存使用
               ========================= ====== ================ ======== ============
               inetinfo.exe                                        1688           Console                      0              2,800 K
很明显,是inetinfo占用了80端口;inetinfo.exe主要用于支持微软Windows IIS网络服务的除错,这个程序对你系统的正常运行是非常重要的.
        当然,并不是只有inetinfo.exe进程会占用80端口,这只是我机器上的情况.如果你并不了解此进程是干什么用的,千万不要盲目地将其kill掉,最好先百度或Google搜索一下;当然如果你很了解它,并确定可以终止,那么继续下面的命令.
        >taskkill /pid 1688 /F
成功: 已终止 PID 为 1688 的进程。
如果你很熟悉此进程,并确定可以终止,那么就直接使用上面的命令把PID为1688的进程终止.(这一步同样可以在任务管理器中执行,inetinfo.exe就是任务管理器中的映像名称,选中它,点击"结束进程"即可)
        >tasklist | findstr "1688"
再次确认是否成功终止,如果成功终止此次执行命令后应返回空.

2.笔记本 cnpm 安装 modules 不报错，未找到模块

请用 cmd 进行 cnpm install

3.渐渐开始使用 es6 ，常用的例如 let，const，箭头函数等。

箭头函数的利弊：this 指向问题（一般为上下文作用域），可在函数体中测试 

 () => { console.log(this === window)// or console.log(this); return this.balabala... } 

故字面量定义方法的正确姿势： 

 const calculator = { sum () {console.log(this ===calculator)}; return this.bala... } 

注意区别且禁止使用：

 const calculator = { sum : () => {console.log(this ===calculator)}; return this.bala...} 

总结箭头函数应用场景：原型 （构造函数），字面量，事件回调函数 （addEventListener ）不能用。Promise（then & catch），循环，定时，回调地狱能用

 Promise参考：promise 白话

4.flex布局，容器设 display: flex ，子元素用 flex：num，届时子元素 float，clear，vertical-align 将失效。

5.博客添加小说模块，布置服务器一直报405，原因：nginx.conf 未设置事件转发 proxy-pass

6.服务器语言开发，提供的 swagger 接口文档，一般只能供后端语言环境测试，前端需要设置 Access-control-allow-origin: "*"。

7.dot net 工程项目加载失败，右击项目.csproj，修改字段： <UseIIS>False</UseIIS>

8.在原有的UI框架基础上覆盖样式，需要更高层级的选择器为开头避免污染，此时配以 !important。并在总样式表，例如 vue中的App.vue内公共样式即非 scope 中设置。

#login .el-form-item.is-error .el-input__inner {
border-color: rgba(204, 63, 68, 0.5) !important;
}

 9.今年用了饿了么框架+vue 开发公司的餐厅和机器人项目，遇到问题诸多：

　　@input.native

　　饿了么样式修改需要在外 global.js

10.vue 检测 空对象 {} ，由于 observer 机制，即使 obj = {}，返回时也会变成处理后的 {__ob__: Observer} ，

　　故打印 {} 可使用:

var objpro = JSON.parse(JSON.stringify(obj))
console.log(objpro )

 

　　检测 boolean 可使用:

var objpro = JSON.stringify(obj)
if ( objpro === '{}') {}

扩展：数组也会被 observe 影响，可检测 length 

空数组的判断可以判断长度length === 0；！！！！！！！

11.vue 中的 $set ： https://www.jianshu.com/p/358c1974d9a5  如果在实例创建之后添加新的属性，不会触发视图刷新

12.token 由header传递，存于localStorage， refresh 刷新 token。注意：storage 不支持跨域，请配合 cookie 或其他解决方方案。

13.微信小程序：

　　刷新值：this.setData({obj:obj})

　　赋值：let obj = this.data.obj

　　复杂数据的刷新，例如一个search数组下的对象：this.setData({ ['search[0].open'] })

　　息屏后唤醒，执行onshow。

　　不断滚动到顶部或底部，出现闪动，原因可能为：滚动设置了限制高度，删除或注释即可 body {/* height: 100vh; */       /* overflow-y: auto; */  }

　

14.关于 vue+element-UI 分页显示需要注意的：

　　1.搜索后结果通常为第 1 页

　　2.搜索结果后，修改或删除某项，回调成功后需保持搜索结果

　　3.搜索结果后，选择第 2 页，第 3 页，始终为搜索的条件；此时改变搜索条件，重新展示新条件的第 1 页结果。

　　4.搜索与重置避免重复请求。

　　5.单页切换显示 pageSize 展现数据无误，包括此时正在非pageNo=1的情况下，和搜索后

　　6.回车触发搜索

　　...

15.关于 element-UI el-input 组件的事件区分：

　　1.@input 实时输出变化

　　2.@change 取消焦点后才输出

16.vue 的 slot，个人理解：组件模板（自定义或官方定义）中含 <slot></slot>，当该组件被父组件调用时，子组件的它新增的数据即为 slot

　　

<!-- 父组件 -->
<parent>
<!-- add content 即为 slot -->
<demo>add content</demo>
</parent>
<!-- demo子组件的template -->
<template id="demo">
<div>content</div>
<slot><slot>
<!-- slot 中可以放置默认html -->
</template>

 

slot 详细的介绍请参考 https://www.w3cplus.com/vue/vue-slot.html

17.排序

sortBy: function (field) {
return function (a, b) {
// 升序
return a[field] - b[field];
}
},

　//以seq排序

   data.sort(that.sortBy("seq"))

 18.如果想让浏览器能访问到其他的 响应头的话 需要在服务器上设置 Access-Control-Expose-Headers

 19.code review 备注: ship it