axios带上token,websocket使用,blob类型,git提交忽视文件配置,js删除所有子节点,行内添加多个类名,css修改png,svg图片颜色方

1.vue封装axios带上token

将token放在header的Authorization字段中

instance.interceptors.request.use(config => {
  if (sessionStorage.getItem('token')) {
     // config.headers['token'] = sessionStorage.getItem('token')
       config.headers['Authorization'] = 'Bearer ' + sessionStorage.getItem('token')
  }
  //   config.headers['Content-Type'] = 'application/json'
  return config
})

2.websocket使用

<template>
  <div style="position: relative" />
</template>

<script>
// import urlConfig from '../network/request'
// import urlConfig from '../urlConfig'
// import vueEvents from "./vueEvent"
export default {
  name: 'WebSocketUtil',
  props: {
    sId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.initWebSocket()
  },
  destroyed: function() {
    // 离开页面生命周期函数
    this.websock.close()
  },
  methods: {
    websocketSend(websock, agentData) {
      // 加延迟是为了尽量让ws连接状态变为OPEN
      setTimeout(() => {
        console.log(websock)
        console.log(websock.OPEN)
        console.log(websock.CLOSED)
        // 添加状态判断，当为OPEN时，发送消息
        if (websock.readyState === websock.OPEN) {
          // websock.OPEN = 1
          // 发给后端的数据需要字符串化
          websock.send(JSON.stringify(agentData))
        }
        if (websock.readyState === websock.CLOSED) {
          // websock.CLOSED = 3
          console.log('websock.readyState=3')
          console.log('ws连接异常，请稍候重试')
        }
      }, 500)
    },
    initWebSocket: function() {
      console.log('AAAAAAAAA')
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      // const wsUrl = 'ws://192.168.0.78:8899/sh-web-socket'
      // const wsUrl = urlConfig.webSocketUrl + (this.sId === '' ? '' : ('/' + this.sId))
      const wsUrl = 'ws://192.168.61.11/websocket/httpMessage'
      console.log('urlw', wsUrl)
      // var token = sessionStorage.getItem('token')
      this.websock = new WebSocket(wsUrl)
      this.websock.onopen = this.webSocketOnopen
      this.websock.onerror = this.webSocketOnerror
      this.websock.onmessage = this.webSocketOnmessage
      this.websock.onclose = this.webSocketOnclose
      this.websocketSend(this.websock, 'websock连接成功')
    },
    webSocketOnopen: function(e) {
      console.log('%c' + e.target.url, 'color: red; font-size: 10px')
      console.log('WebSocket连接成功')
    },
    webSocketOnerror: function(e) {
      console.log('WebSocket连接发生错误')
    },
    webSocketOnmessage(e) { // 接受来自服务器端的消息
      this.sendData(e.data)
      console.log(JSON.parse(e.data))
    },
    webSocketOnclose: function(e) {
      console.log(
        '%cwebSocket：' + e.target.url + '断开连接...',
        'color: red; font-size: 10px'
      )
      console.log('connection closed (' + e.code + ')')
    },
    getWebsocket: function() {},
    sendData(mes) { // 获取到消息进行某些操作
      console.log(mes)
      this.$emit('messageData', mes)
      // vueEvents.$emit('show-td', mes)
    }
  }
}
</script>

<style scoped></style>


// 在父组件中引入当前组件

<WebSocketUtil @messageData="getDate" />

components: {
  WebSocketUtil
},


// 获取websocket返回的数据
getDate(e) {
  console.log(e)
  e = JSON.parse(e)
  console.log(e) // 进行操作
},

3.js中blob全部类型

// 调用后端接口返回二进制流文件 res.data
axios({
  method: 'GET',
  url: `${baseURL}/cp/project/export?projectUuid=${ele.uuid}`,
  responseType: 'blob',
  timeout: 8000
}).then(async res => {
  const blob = new Blob([res.data], { type: 'application/zip' }) // 使用blob对象处理二进制流文件
  var dom = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  dom.href = href
  dom.download = 'outPut.zip' // 下载后文件名
  document.body.appendChild(dom)
  dom.click()
  document.body.removeChild(dom)
  })

4.git 提交代码忽视掉一些文件

通过 .gitignore

.DS_Store

node_modules

/dist

/dist.zip

5.js删除所有子dom元素

1.使用removeChild()方法

function deleteChild() { 
        var e = document.querySelector("ul"); 
        var child = e.lastElementChild;  
        while (child) { 
            e.removeChild(child); 
            child = e.lastElementChild; 
        } 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 

2.使用remove()方法

remove() 方法移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素；但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。

    function deleteChild() { 
        var e = document.querySelector("ul"); 
        var first = e.firstElementChild; 
        while (first) { 
            first.remove(); 
            first = e.firstElementChild; 
        } 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    } 

3.使用 innerHTML =“”属性

function deleteChild() { 
        var e = document.querySelector("ul"); 
        e.innerHTML = ""; 
    } 
    var btn = document.getElementById("btn").onclick = function() { 
        deleteChild(); 
    }

6.行内添加多个类名

<div :class="{active:bb==index,vv:cc==index}">55555555555</div>
<div :class="[bb==index?'active':'',cc==index?'vv':'']">55555555555</div>



<div :class="classS1()">55555555555</div>
 classS1(){
            let v = [];
            if (this.index == this.bb) {
                v.push("active");
            }
            if (this.index == this.cc) {
                v.push("vv")
            }
            return v;
        }

7.使用.png .svg格式的图片作为背景图,修改颜色方式

父元素添加 overflow:hidden

子元素:

1.使用mask-img

-webkit-mask-image: url(http://49.234.86.50:8888/group1/M00/00/12/rBEQBmOHIPGAGiVYAAAC_rd2uco115.png);
background-color: rgba(18, 92, 230, 0.5);
-webkit-mask-size: 100% 100%;

2.使用定位加上css中的filter属性实现

position: relative;
background-image: url(http://49.234.86.50:8888/group1/M01/00/23/rBEQBmOzoROAdE0kAAAHGTjlBXI588.svg);
background-size: 100% 100%;
filter: drop-shadow(rgba(78, 221, 43, 0.5) 50px 0px);
left: -100%;

3.修改png图片颜色:通过cssfilter: hue-rotate旋转色相

filter: hue-rotate(120deg);