知识补充---vue2+scss+elementui+vuex_vue2 scss

<style lang="scss" scoped></style> 中无法直接修改第三方组件样式

解决方法：

1.去掉scoped，但会影响其他组件样式

2.样式穿透（深度作用选择器）

• >>> 若出现编译错误则代表不支持

• /deep/ v3不支持

• ::v-deep 推荐使用✅

.el-button >>> span{
    color: '#f00'
 }
.el-button::v-deep{
    span{
       color: '#f00'
    }
}
/deep/.el-button{
    span{
       color: '#f00'
    }
}

HTTP请求

什么是http请求：

超文本传输协议，是一种实现客户端和服务器之间通信的响应协议，用作客户端和服务器之间的请求。客户端（浏览器）会向服务器提交HTTP请求；然后服务器向客户端返回响应；

http请求过程：

1、域名解析：使用DNS协议进行域名解析

2、建立连接：发起TCP三次握手

3、发起http请求：建立TCP连接成功后，浏览器发起http请求

4、响应http请求：服务端响应http请求，浏览器得到返回response

5、解析response：浏览器解析response，并请求其它的资源（如js、css等）

6、浏览器渲染展示页面：浏览器根据内核对页面进行渲染展示

7、断开连接：TCP四次挥手

http请求结构：

• 请求行：由请求方式，URL，和HTTP协议/版本，三部分构成

• 请求头：描述客户端的基本信息，从而把客户端相关的信息告知服务器

• 空行：最后一个请求头字段的后面是一个空行，通知服务器请求头至此结束，请求消息中的空行，用来分隔请求头部与请求体

• 请求体：请求体里放的是通过POST方式提交到服务器的数据

http响应结构：

• 状态行：包括协议版本的Version、状态码 Status Code 、回应短语；

• 响应头：包括搭建服务器的软件，发送响应的时间，回应数据的格式等信息；

• 响应正文：就是响应的具体数据;

8种请求方法：GET, POST, PUT, DELETE，OPTIONS，HEAD，CONNECT，TRACE

1. get请求，仅用于获取、查询数据，不对数据做更改，参数附在url上（各浏览器对url有长度限制，相对不安全）

2. post请求，数据发送到服务器以创建或更新资源，侧重于更新数据，参数放在请求体中

3. put请求，数据发送到服务器以创建或更新资源，侧重于创建数据

4. delete请求，用于删除相关数据

5. options请求，允许客户端查看服务端性能

6. head请求，与GET方法相同，但返回的内容中没有响应体，仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用，而无需传输整个内容。

7. connect请求，HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器

8. trace请求，回显服务器收到的请求，主要用于测试或诊断

axios传递参数：params和data

params，参数添加到url中，一般用于get

data，参数添加到请求体中，一般用于post

post通过data传递，就不会读取url中的数据，但在一些情况下post必须通过params传参后台才可以接收到，这与后台的接口有关--具体参考

//get请求
axios({
    method: 'GET',
    url: 'xxxxx',
    params: param,
  })
或者 
axios({
    method: 'GET',
    url: '/xxx?message=' + msg,
})
//post请求
axios({
    method: 'POST',
    url: '/xxxxx',
    data: param,
  })
或者
axios({
    method: 'POST',
    url: '/xxxxx',
    params: param,
})

vuex-mutations

第一个参数为state，第二个为自定义参数

//vuex下module---store.js
mutations:{
    handleData(state,num){
        console.log(state) //本文件下的数据
        console.log(num) //调用时，传递的参数
    }
}
//调用传参
this.$store.commit('store/handleData',666) // (模块名/方法名，参数)

elementui---el-table

多级表头--- el-table-column嵌套

<el-table :data='tableData'>
    <el-table-column prop="name" label="货物名称"></el-table-column>
    <el-table-column label="货物信息">
        <el-table-column label="重量">
            <el-table-column prop="gross_weight" label="毛重"></el-table-column> 
            <el-table-column prop="net_weight" label="净重"></el-table-column> 
        </el-table-column> 
        <el-table-column prop="volume" label="体积"></el-table-column> 
    </el-table-column>   
</el-table>
 
//数据
tableData:[{name:'糖果',gross_weight:'2.5kg',net_weight:'2kg',volume:'0.5cm³'}]

行列合并

给table传入span-method方法，可以返回对象或者数组

<el-table :data='tableData' :span-method="spanMethod"> 
</el-table>
 
spanMethod({ row, column, rowIndex, columnIndex }) { //合并规则
    if (rowIndex % 2 === 0) {
      if (columnIndex === 0) {
        return [1, 2]; //[rowspan，colspan]
        或者
        return {
              rowspan: 2,
              colspan: 1
        }
      } else if (columnIndex === 1) {
        return [0, 0];
      }
    }
},

遍历对象后，顺序错乱

objectOrder(obj) {
    var newkey = Object.keys(obj).sort(); //对key值进行排序，此处为key的数组
    var newObj = {};//创建一个新的对象，用于存放排好序的键值对
    for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
        newObj[newkey[i]] = obj[newkey[i]];//将排好序的key附上对应的value
    }
    return newObj;//返回排好序的新对象
},
//使用
for(let key in this.objectOrder(obj)){
  //此时再做其他操作就是正确的顺序
}

vue-router传参的四种方式

参考

因展示不全，el-table出现的横线截断

/* 隐藏伪元素 */
.el-table::before {
  display: none !important;
}
 
/* 重现下自带下边框线 */
.el-table--border {
  border-bottom: 1px solid #EBEEF5 !important;
}

formdata

介绍：formdata是XMLHttpRequest 2（ Ajax 2.0）新增的一种对象，主要作用：1.提交表单：将form表单元素的name和value组合成键值对，实现表单数据序列化，提高开发效率 2. 异步上传文件

方法：

• FormData.append()向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

• FormData.set()给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。

• FormData.delete()从 FormData 对象里面删除一个键值对。

• FormData.get() 返回在 FormData 对象中与给定键关联的第一个值。

• FormData.getAll()返回一个包含 FormData 对象中与给定键关联的所有值的数组。

• FormData.has()返回一个布尔值表明 FormData 对象是否包含某些键。

• FormData.keys()返回一个包含所有键的iterator对象。

• FormData.values()返回一个包含所有值的iterator对象。

• FormData.entries()返回一个包含所有键值对的iterator对象。

let formData = new FormData()  --空的
formData.append('userName','xiaoming');  --添加key，value
formData.append('age','20');
formData.append('age','30');
formData.get('age')  --获取age的值20
formData.getAll('age')  --获取所有key为age的值，返回数组 ['20','30']
formData.set('userName','xiaohong')  --覆盖原值，此时username的值为xiaohong
formData.has('height')  --是否有此key，false
formData.delete('age') --删除key下所有的值
formData.keys();//返回当前表单数据对象所有的值
formData.values();//返回当前表单数据对象所有的值
for (const value of formData.values()) {
  console.log(value);
}
formData.entries(); --{['username':'xiaohong']}
for (var ele of formData.entries()){
    console.log(ele); --['username':'xiaohong']
}

使用：

1. 表单：

<form id="carList">
    <p>商品名称：<input type="text" name="productName"  value="耐克"></p>
    <p>商品数量：<select name="productNumber">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select></p>
    <p>商品价格：<select name="productPrice">
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>
    </select></p>
    <p><input type="button" id="payment" value="支付"></p>
</form>
 
 
//根据ID获得页面当中的form表单元素
var form = document.querySelector("#carList");
//将获得的表单元素作为参数，对formData进行初始化
var formData = new FormData(form);
//此时的formData中就包含了表单中的key value

2. 文件上传

upload(){
    let formData = new FormData()
    formData.append('file',this.form.file.raw) //file-接口所需key值，.raw el-upload中的文件
    formData.append('id',this.form.id) //接口所需的其他数据，注意其他数据在这里传哦~
    axios.post('接口'，formData).then().catch()
}

文件的上传和下载

1. 上传文件（仅支持上传一个，多次上传-后一个覆盖前一个）:

1. 结构：el-upload ---手动上传

<el-upload 
    action="#"  //手动上传
    ref="upload"  
    :auto-upload=false //关闭自动上传
    :show-file-list=true //是否显示上传文件列表
    accept=".xlsx" //上传文件格式                      
    :file-list="fileList" //上传的文件列表
    :on-change="handleChange" //文件改变时的钩子，包括添加、上传成功、上传失败
    :on-remove="handleRemove" //删除文件时的钩子
>
<el-button slot="trigger">浏览</el-button> //手动上传需要写slot
</el-upload>
<el-button @click="submit()">点击上传</el-button>

2. 行为：

export default {
    data(){
        return{
            fileList:[]
            fileData:{fileName:'',file:''}
        }
    },
    methods:{
        submit(){
            let formData = new FormData()
            formData.append('file',this.fileData.file.raw)
            formData.append('fileName',this.fileData.fileName)
            axios.post('上传文件接口', formData)
        },
        handleChange(file,fileList){
            this.fileData.file = file
            this.fileData.fileName = file.name
            if(fileList.length>1){  //如果上传了多个文件
                this.fileList=[fileList[fileList.length-1]] //只取最后一个
                this.$message.warning('只能上传一个文件')
            }
        },
        handleRemove(){
            this.fileData.file = ''
            this.fileData.fileName = ''
        }
 
    }
}

3. 样式：

<style lang="scss" scoped>
    ::v-deep .el-list-leave-active {  //去除文件移出除时的动画
      transition: none;
    }
</style>

2. 下载文件：

1. 存储在前端的文件

download() {
    let a = document.createElement("a"); //创建a标签
    a.href = '文件存储路径'; //文件下载地址（绝对路径）
    a.download = '文件名.xlsx'; //下载的文件名
    a.style.display = "none"
    document.body.appendChild(a)
    a.click()
    a.remove()
},

2. 通过后端下载的文件

download(){
    axios.get('下载文件接口',{responseType:'blob',params:{后端需要的数据} }).then(res => { //后端返回文件流
    if(res.data.type == 'application/json'){ //下载错误
        const reader = new FileReader(); //把文件内容读出来，即报错信息
        reader.readAsText(res.data, 'utf-8');
        reader.onload = () => {
            const { msg } = JSON.parse(reader.result);
            //reader.result里面含报错信息
            this.$message.warning(msg)
        }
    }else{
        this.downloadFile(res.data, this.fileName)
    }
       
}
downloadFile(res, name) {
    if (!res) return;
    const blob = new Blob([res], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",});
            if (window.navigator.msSaveOrOpenBlob) {
                //兼容IE10
                navigator.msSaveBlob(blob, name);
            } else {
                const href = URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.style.display = "none";
                a.href = href;
                a.download = name;
                a.click();
                a.remove()
                URL.revokeObjectURL(a.href); //释放URL对象
            }
},

el-table 横向滚动条固定在可视窗口底部--四种方法 参考

推荐方法： 地址
安装：npm install el-table-horizontal-scroll
注册：import horizontalScroll from 'el-table-horizontal-scroll' Vue.use(horizontalScroll)
添加指令：默认为hover展示
<el-table :data="data" v-horizontal-scroll="'always'"></el-table>

provide,inject

provide(){
return{
reload:this.reload,
refresh(){....}
}
}
inject:['reload','refresh']

proxy代理

当从一台主机访问一个网址，但是不会直接向服务端发起请求，而是通过代理服务器代替主机发送请求，解决由于同源策略出现的跨域问题，proxy拦截所有的请求查看是否有设定的key
一个项目的接口一般会有个相同的前缀比如/api/....，设置了target就是如果遇到了/api就用targetd的域名替换他之前的，比如之前是http://localhost:8080/api/...target为http://111.11.1.11:8080，代理之后就是http//111.11.1.11:8080/api/....
vuecli3 -- vue.config.js
devServer: {
proxy:{
"/api": {
target: "代理的域名",
ws: false, // 是否启用websockets
changeOrigin: true,
//开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
logLevel: 'debug', //在终端打印代理后的域名
pathRewrite: { //更改这个相同的接口前缀，如果不需要则改为空""
"^/api": "/api"
}
},
},
}
websocket---代理
vuecli2---config文件夹-index.js
dev: {
proxyTable:{
"/api": {
target: "代理的域名",
changeOrigin: true,
pathRewrite: {
"^/api": "/api"，
"demo.json": "index.json"
}
},
},
}

safari浏览器 el-table表头和列错位

全局样式中加入如下css
// 兼容safari列头与td对不齐问题
.el-table__header, .el-table__body, .el-table__footer{ width:100% !important; table-layout: fixed !important; }

el-form+el-select多选 首次触发校验、多选选了一个后直接失焦

原因：初始数据格式错误

解决方法：将多选的数据默认值设置为空数组[]

npm 打印依赖树

npm ls

npm ls > npmls.out 打印到文件

webpack 打包时清除console对象的函数（去除console.log）

在vue.config.js中配置

chainWebpack: config => {
    // 打包时清除console对象的函数
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
},