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路由传参
{
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拖拽不生效
<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事件中阻止默认事件
dragOver(e){
e.preventDefault()
}98.:key要放在真正的html元素上，不能放在 99. vue不能自动更新数组对象
- 解决:
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
//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里加变量
:style="'width:'+previewData.ticketWidth+'mm'"- 类似class变量的写法,花括号括起来，支持三元表达式
: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到服务器
//上传文件方法
//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失败
if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "'node" rebuild )
internal/modules/cjs/loader.js:582
throw err;
^
Error: Cannot find module 'C:\SVN\h3_web\trunk\h3_manager\node_modules\nodejieba\'node'- 解决：安装好的nodejieba,拷贝一份到node_modules
110.webstrom使用git拉gitlab代码报错：
Repository test failed Authentication failed ...解决:
- 管理员权限执行，清楚git账号缓存：git config --system --unset credential.helper，仅仅替换用户名、密码、邮箱还不行
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-01-17，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读