;

1.fetch formData let data = new FormData() data.append(‘client_key’,’111111′) data.append(‘client_secret’,’222222′) data.append(‘grant_type’,’client_credential’) fetch(‘/douyinOpen/oauth/client_token/’,{ method: ‘post’, body:data }) 备注:省略了content-type因为浏览器自动填入了正确的值 2.fetch json fetch("/douyinOpen/oauth/client_token/", { headers: { "content-type": "application/json" }, body: ‘{"client_key":"111111","client_secret":"222222","grant_type":"client_credential"}’, method: "POST" });…

抖音POI获取token,分别通过axios,fetch发送json和form-data 29 天前
;

配置会以一个优先顺序进行合并。这个顺序是:在 lib/defaults.js 找到的库的默认值,然后是实例的 defaults 属性,最后是请求的 config 参数。后者将优先于前者。这里是一个例子: // 使用由库提供的配置的默认值来创建实例 // 此时超时配置的默认值是 `0` var instance = axios.create(); // 覆写库的超时默认值 // 现在,在超时前,所有请求都会等待 2.5 秒 instance.defaults.timeout = 2500; // 为已知需要花费很长时间的请求覆写超时设置 instance.get(‘/longRequest’, { timeout: 5000 }); 备注:不同版本可能配置不同,0.27.2版本中contentType为application/json,但是在0.18.1版本中contentType为application/json;charset=utf-8,多出了charset=utf-8,在抖音POI获取token的接口中,多出来的这部分就会导致请求报错。

axios配置的优先顺序 29 天前
;

<el-upload :headers="uploadHeaders" :data ="{hotelId:hotelID}"</el-upload> data(){ return { uploadHeaders:{Authorization: ‘bearer ‘ + getToken()} } }

el-upload设置headers和参数 2022年7月26日
;

1.get let obj = { supplier_ext_id:” } this.$ajax.get(‘/douyinOpen/poi/supplier/query/’,{ params:obj, headers:{ "access-token":this.token } }) 2.post let obj = { supplier_ext_id:”, name:”, attributes:{}, poi_id:”, type:1, status:1 } this.$ajax.post(‘/douyinOpen/poi/supplier/sync/’,obj,{ headers:{ "access-token":this.token } }) 差异 get中headers位于第二个参数中和参数并列,post中位于第三个参数中

axios设置headers值get和post的不同 2022年7月11日
;

1.依据现有table导出 import XLSX,{WorkSheet} from ‘xlsx’ let worksheet = XLSX.utils.table_to_sheet(document.getElementById(‘table’)) let workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook,worksheet,’数据报表1′) XLSX.writeFile(workbook,’数据报表2.xlsx’) 2.依据data数据导出 https://zhuanlan.zhihu.com/p/268835049 3.封装一下 import XLSX from ‘xlsx’ export function tableExport(tableId=’table’,sheetName=’导出数据’){ let worksheet = XLSX.utils.table_to_sheet(document.getElementById(tableId)) let workbook = XLSX.utils.book_new() XLSX.utils.book_append_sheet(workbook,worksheet,sheetName) XLSX…

vue中导出table数据 2022年7月1日
;

babel降级为8.x npm install babel-eslint@8.2.2 –save

vue报错Syntax Error: TypeError: token.type.endsWith is not a function 2022年4月21日
;

<template> <div> <el-table ref="multipleTable" :data="links" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="roomNo" label="房间" width="180"> </el-table-column> <el-table-column prop="isCheckOut" label="是否已离店"> <template slot-scope="scope"> <span>{{scope.row.isCheckOut?’是’:’否’}}</span> </template> </el-table-col…

el-table中checkbox多选框的回显 2021年12月8日
;

表头中添加按钮 <el-table :data="tableData" style="width: 100%" border> <el-table-column prop="amount" label="金额" align="center"> <template slot="header"> <span class="link" @click="handleDetail">查看详情</span> </template> </el-table-column> </el-table> 备注:slot=”header”

el-table自定义表头 2021年12月8日
;

vue提供了watch方法,用于监听实例内data数据的变化。通常写法是: new Vue({ data: { count: 10, blog:{ title:’my-blog’, categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内的某一属性值的变化,直接watch对象blog是检测不到变化的,这是因为blog这个对象的指向并没有发生改变。有几个解决方法 1.深度监测 new Vue({ data: { count: 10, blog:{ title:’my-blog’, categories:[] } }, watch: { blog:{ handler(newVal,oldVal){ console.log(`new: ${newVal}, old: ${oldVal}`); }, deep:true } } }) 里面的deep设为了true,这样的话,如果修改了这个blog中的任何一个属性,都会执行handler这个方法。不过这样会造成更多的性能开销,尤其是对象里面属性过…

Vue中watch对象内属性的方法 2021年9月14日
;

<el-table-column type="selection" :selectable=’checkboxSelect’ width="120"></el-table-column> checkboxSelect (row, rowIndex) { if (rowIndex == 0) { return false // 禁用 }else{ return true // 不禁用 } }

el-table中type=’selection’的禁用 2021年8月25日
;

1. <template> <el-select v-model="hotel" filterable :filter-method="filterHotel" placeholder="请选择" clearable @clear="hotelClear"> <el-option v-for="item in options" :key="item.hotelcode" :label="item.hotelname" :value="item.hotelcode"> <span>{{ item.hotelname }}</span> <span>/{{ item.hotelcode }}</span> </el-option> </el-select> </template> 2. hotel:”, options: [ { hotelname: ‘选项1’, hotelcode: ‘aaa’ }, { hotelname: ‘选项2’, hotelcode: ‘b…

el-select多字段搜索filter-method 2021年8月24日
;

window.tinymce.init({ toolbar: [‘fontsizeselect’], fontsize_formats: ‘8px 10px 12px 14px 18px 24px 36px 72px 96px 140px 280px’ })

tinymce设置工具栏显示字体大小 2021年8月19日
;

1. <template> <div res="box" @click="action($event,123)"></div> </template> 2. action(e,index){ let boxWidth = this.$refs.box.clientWidth // box的宽度 let screenLeft = e.pageX // 鼠标距离屏幕左侧的距离 let boxLeft = this.$refs.box.getBoundingClientRect().left // box距离屏幕左侧的距离 let overHalf = (screenLeft – boxLeft) > boxWidth / 2 // 鼠标位置是否超过了容器的一半 }

vue中判断鼠标是否超过了容器X轴一半 2021年8月13日
;

1.相关库 axios, vue-awesome-swiper 2.处理 npm install babel-polyfill –save npm install es6-promise –save 3.文件 main.js import Es6Promise from ‘es6-promise’ require(‘es6-promise’).polyfill() Es6Promise.polyfill() build/webpack.base.conf.js,enter下添加babel-polyfill entry: { "babel-polyfill":"babel-polyfill", app: ‘./src/main.js’ } 4.vue-awesome-swiper的处理 npm install –save vue-awesome-swiper@3.1.3 //指定版本,最新版不兼容旧浏览器 https://www.npmjs.com/package/vue-awesome-swiper

vue项目兼容安卓4.4的处理 2021年8月6日
;

1.场景描述 通过select选择的目标中有多个属性要拿出,此时需要给v-model指定某一个属性用于回显,list结构如下 list:[{id:1,name’a’,age:12},{id:2,name:’b’,age:15}], form:{ name:” } 2.模板部分 给value绑定item,然后v-mode部分指定value-key <el-select placeholder="请选择" v-model="form.name" value-key="name" @change="change"> <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item"></el-option> </el-select> 3.绑定change事件 change(e){ console.log(‘e=’,e) }

element中el-select绑定多个值的处理 2021年7月13日
;

前言 本文讲述的最佳实践是从日常业务中总结而出的,不一定适合所有项目。毕竟每个公司或个人的项目不同,最佳实践也会有所不同。但是可以从这篇文章借鉴吸收一点有用的东西,有问题的地方也欢迎大家积极吐槽指正。 为了避免出现 我这明明可以,你那怎么不行 的尴尬情况,这里列一下文章涉及到依赖的版本号。 ├── webpack 5.39.1 ├── webpack-cli 4.7.2 ├── node 12.8.0 ├── npm 6.10.2 正文 初始化项目 1. mkdir test-app && cd test-app 2. npm init 首先添加一个入口文件 /src/index.js 和 webpack 配置文件 webpack.config.js,现在我们的目录结构如下 test-app ├── src | └── index.js ├── package.json ├── webpack.config.js 安装 webpack npm install webpack webpack-cli -D 开始搞事情 在 src/index.js 中随便写点东西 class Test { constructor() { document.writeTest(‘hello world’) } } new Test() 先来打个包看…

webpack 最佳实践 2021年7月9日
;

1.代码 axios.get(`/ExcelExamLogByExamPlan?id=123`,{responseType: ‘blob’}).then(res => { const data = res.data const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})) const link = document.createElement(‘a’) link.style.display = ‘none’ link.href = url link.setAttribute(‘download’, ‘excel.xls’) document.body.appendChild(link) link.click() document.body.removeChild(link) }) 2.后记 文件下载后windows自带的excel打开始终提示格式类型错误,但是用wps可以打开,后来发现setAttribute部分设置把xlsx改为xls即可

axios下载excel表格流 2021年7月2日
;

1.文件路径 ./config/index.js 2.内容 这里我们对应了两个后端服务器,特殊的/api写在前面,通用的卸载后面 proxyTable: { ‘/api’:{ target:’http://abc.com:3101/’, changeOrigin: true, pathRewrite:{ ‘^/api’:” } }, ‘/’:{ target:’http://100.100.100.100:8001′, changeOrigin: true } } 页面内请求写法: axios.get(‘/api/list’) axios.get(‘/list’) 3.其他 配置保存后,记得重启npm开发环境,否子配置不会生效

vue脚手架配置代理proxyTable 2021年6月30日
;

watch:{ shroleid:{ immediate:true, handler(id){ this.getData(id) }} }

vue watch 第一次不触发 2021年6月28日
;

1.场景 btnB下的button位于btnB组件之中 2.点击btnA,触发btnB组件内的button的事件 <div ref="btnA" @click="clickA">直接点击</div> <div ref="btnB"> <button @click="clickB">被点击</button> </div> this.$refs.btnB.$el.firstChild.click()

vue中点击一个元素触发另一个元素的点击事件 2021年6月28日
;

<el-link class="link" type="warning" href="/static/商品资料导入文件.xlsx" download>下载excel模板(商品资料)</el-link> 文件实际存放路径public/static/商品资料导入文件.xlsx

Vue下载本地静态资源 2021年6月22日
;

1.说明 ‘Content-Type’为’multipart/form-data’ 数据添加使用new FormData() <input type="file" accept=".xlsx, .xls" @change="handleClick"> import axios from ‘axios’ handleClick(e){ const files = e.target.files const rawFile = files[0] let formData = new FormData() formData.append("files", rawFile) axios({ method: ‘post’, url: ‘/SZM/WuZiGuanLi/UpLoadWuZiImgExcel’, data: formData, headers: { ‘Content-Type’: ‘multipart/form-data’, ‘Authorization’: localStorage.getItem("authorization") } }) } 2.jquery上传文件 <form> <input type=&q…

axios文件上传 2021年6月22日
;

import axios from ‘axios’ const CancelToken = axios.CancelToken const requestMap = new Map() let lastUniqueCode = ” const apiAxios = axios.create({ baseURL:’/’, timeout:10000 }) apiAxios.interceptors.request.use(function (config) { const uniqueCode = config.method + config.baseURL + config.url lastUniqueCode = uniqueCode if(requestMap.get(uniqueCode)){ config.cancelToken = new CancelToken(cancel => cancel(‘请不要重复提交!’)) } else { config.cancelToken = new CancelToken(cancel => requestMap.set(uniqueCode, cancel)) } return config; }) apiAxios.interceptors.response.use(func…

axios.CancelToken防止重复发请求 2021年6月18日
;

<div class="editor-slide-upload" :class="multiple==false&&imgCount>0?’disabled’:”"></div> 方法一 icon可以是变量也可以是常亮,isLike只能是字符串,是类名,且likeClass为true时才有 <i :class="[icon,{‘isLike’:likeClass}]"></i> 方法二: classB和classC都是类名,都是字符串 <i :class=" { classB: true, classC: isC }"></i> 方法三: class绑定一个三元表达式 <i :class=" isRed?’class1′, ‘class2’ "></i>

vue根据条件动态添加类名 2021年6月17日