web前端学习/工作笔记(六)

跨域

CORS 同源策略，浏览器会禁止一些行为
同源（协议、域名/域名、端口相同）不限制，任一不同则限制
跨域只针对浏览器，后端不存在跨域问题（比如代理）
可以发，但是浏览器拒绝接收,http协议拒绝发跨域请求
解决跨域：后端给浏览器返回 “Access-Control-Allow”
预检请求：当跨域发送非简单请求，会触发预检请求：Options,后端需要响应预检请求来决定是否发送实际请求 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vVt2GN2G-1579275919279)(https://note.youdao.com/yws/res/3466/F8CC354418B24727954ED28076F4E7AC)]
- 可设置预检请求校验一次还是每次都校验

web安全：处理XSRF(跨站请求伪造)： *后端生成的唯一token通过cookie发给前端，前端从cookie里取token，再通过自定义头信息把token传给后台，前端传过来的token和登录对应的token比对，如果一致，请求合法。伪造的请求没有头信息

axios可以自动从cookie里拿信息放到头信息，按照配置来就可以 xsrfCookieName:“A”,xsrfHeadName:“X-H”,xsrfCookieName要和后台发过来的cookie名称对应，xsrfHeadName要和后台接收的名称对应。

vue双向通知原理图

vue路由传参

代码语言：javascript复制

{
    path: '/h3/data-source-edit/:state/:id',//- state 新增/编辑  ,id 数据行
    name: 'dataSourceEdit',
    component: dataSourceEdit,
    meta: {
      title: '数据源列表',
      code: 20801,
      keepAlive: true, // 需要被缓存
    }
  },

96.activated钩子函数

keep-alive 组件激活时触发（在mounted后也会），keepAlive为false时不触发

vue拖拽不生效

代码语言：javascript复制

<li v-for="_item in item.list" @mousedown="mouseDown($event,_item,item.type)"  draggable="true" @ondragstart="dragStart" @ondragend="dragEnd">{{_item.name}}</li>

解决：去掉on
drop不生效解决：需要在dragover事件中阻止默认事件

代码语言：javascript复制

dragOver(e){
    e.preventDefault()
}

98.:key要放在真正的html元素上，不能放在 99. vue不能自动更新数组对象

解决:

代码语言：javascript复制

import Vue from 'vue'

Vue.set(arr,index, newItem)
//or
// cols.splice(colIndex 1,0,dragItem)
// cols.splice(colIndex,1)

100.兄弟组件通信方式

方案1：子传父，然后父再传子
方案2：以Vue建立总线，在A组件$emit，在B组件on

代码语言：javascript复制

//bus.js
import Vue from 'vue'
export default new Vue()

//组件A
import Bus from './bus.js'

Bus.$emit('val', this.elementValue)

//组件B
import Bus from './bus.js'

Bus.$on('val', (data) => {
    console.log(data)
   })

101.子组件修改父组件的属性：

①在watch里修改，比如show,否则报错
②事件通知父组件，事件回调控制变量

emit(‘事件名’)必须和调用处的事件名称对应大小写或者带横杠
emit传递多个参数，正常传递

通知 this.$emit(‘eventname’,arg1,arg2)
回调 event(arg1,arg2){}

104 .flex布局导致滚动条消失或者内容遮挡：

解决:设置滚动条所在div的min-height

style动态显示

style里加变量

代码语言：javascript复制

:style="'width:' previewData.ticketWidth 'mm'"

类似class变量的写法,花括号括起来，支持三元表达式

代码语言：javascript复制

:style="{'font-size':col.fontSize 'px;',width:col.width 'mm','font-weight':col.bold?'bold':'normal','font-style':col.italic?'italic':'normal'}"

106.js常用数组操作

数组赋空 let arr=[1,2,3]:
- arr&&(arr.length=0) //效率最高
- arr=[]
- arr.slice(0,arr.length)
数组克隆 let arrNew
- arrNew=arr.slice()
- arr遍历赋值
- arrNew=arr.concat()//可传多个数组
- es6: Object.assign(arrNew,arr)//会覆盖arrNe原有值
- es6: arrNew=[…arr]

107.上传txt到服务器

代码语言：javascript复制

//上传文件方法
//MDN File说明：https://developer.mozilla.org/zh-CN/docs/Web/API/File/File
    upladFile(str,callback) {
      try {
        let that=this
        let fileObj = new File([str],'template.txt',{type:"text/plain"})//创建file文件
        let url =  this.$H3HYDEE.upload.FILEUPLOADURL; // 接收上传文件的后台地址

        let form = new FormData(); // FormData 对象
        form.append("file", fileObj); // 文件对象

        let xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
        xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.onload = (evt)=>{
          let data = JSON.parse(evt.target.responseText);
          if(data.file) {
            callback(data.file)
          }else{
            this.handlerMessage.error('模板上传失败！')
          }
        }; //请求完成
        xhr.onerror =  (evt)=>{
          this.handlerMessage.error('模板上传失败！')
        };

        let ot,oloaded
        xhr.upload.onloadstart = function(){//上传开始执行方法
          ot = new Date().getTime();   //设置上传开始时间
          oloaded = 0;//设置上传开始时，以上传的文件大小为0
        };
        xhr.send(form); //开始上传，发送form数据
      }catch(e){
        
      }

108.两个坑

arr.forEach((v,index))//错误，可以加 *arr.forEach((item,index)=>{ console.log(index) item.tongzhi() })
js find要有return
- group.rows.find(v=>{return v.cols&&v.cols.length>0})

109.安装nodejieba失败

代码语言：javascript复制

if not defined npm_config_node_gyp (node "C:Program Filesnodejsnode_modulesnpmnode_modulesnpm-lifecyclenode-gyp-bin\....node_modulesnode-gypbinnode-gyp.js" rebuild )  else (node "'node" rebuild )
internal/modules/cjs/loader.js:582
    throw err;
    ^

Error: Cannot find module 'C:SVNh3_webtrunkh3_managernode_modulesnodejieba'node'

解决：安装好的nodejieba,拷贝一份到node_modules

110.webstrom使用git拉gitlab代码报错：

代码语言：javascript复制

Repository test failed Authentication failed ...

解决:

管理员权限执行，清楚git账号缓存：git config --system --unset credential.helper，仅仅替换用户名、密码、邮箱还不行

vue.js 网络安全编程算法 git node.js

0 人点赞