22年3月工作笔记整理（前端）

工作内容开始有了挑战，也为我的博客提供了素材，但是疫情的影响，我还负责管部门的健康码行程码收集，还有招聘，导致效率不是很高，只要有收获就行啦。

一、视频播放遇到的问题

        <video
          width="100%"
          autoplay="autoplay"
          :poster="playvideo"
          :src="playvideo"
          controls="controls"
          id="video"
          preload
        ></video>

当使用video标签时，视频播放报403错误，触发了浏览器的防盗链机制，其中防盗链是利用http header中的referer来实现的，当浏览器向服务器发送请求时，会带上referer来告诉服务器，从哪个页面链接过来的，解决这个问题就在html头部加上

< meta name="referrer" content="never" />

二、日历上带有进程事件的组件

总结：这个需求的方案，我先是研究了好久，element-ui只提供了日历展示，很多日历上的交互也没提供，月底又要上线这个功能，感觉自己写来不及，于是找了很久找到了个日历管理进程组件fullcalendar，但是它是jq写的！看了半天还挺费劲的，（可能是我原生学得太差了吧555555）又找到个vue写的组件，叫vue-full-calendar，挺好的，但是没有农历和二十四节气，又找了找，发现有个vue-lunar-full-calendar组件，带了农历，于是决定用这个，好像封装得不太好，但勉强能用吧，后期我又把它源码改了，不想要里面一堆乱七八糟的节日，就把那段代码删掉了。其实现在反思一下，我明明可以把组件pull下来改造就行了，直接改源码写多方便，当时没这胆子也觉得自己看不懂，后悔了，只能等下次优化了。
接下来就是我对vue-lunar-full-calendar组件学习踩的坑了

1. 时间格式只支持标准时间格式，所以得转化一下，end也是，转化后老是变成前一天，所以得给它加一天时间

new Date（time） //转为标准格式
//加一天的方法
addOneDay(time) {
      let dateTime = new Date(time)
      dateTime = dateTime.setDate(dateTime.getDate() + 1)
      return new Date(dateTime)
    },

2.由于产品有放图标的需求，但是这个组件不提供，我当时也不会改源码，就用背景图加位移的形式加上了，排列组合写了一堆样式展示。

//写多个背景图，并给其进行布局
css获取到当前class之后，background:url() no-repeat x位移 y位移,...；

3.数据去重的时候忘记转化了，通过Array.from(new set(list))
4.为了去掉各种节日，我想修改源码
步骤：先去gitlab上下载源码，然后对源码进行修改，再传到自己的npm上，再在项目里下载我的npm包，引入我自己的包名。
本地修改后，修改一下文件名，我取名为vue-noday-full-calendar，package.json里面也要改，npm不允许重名。
然后登陆：npm login 输入注册时的账户密码邮箱还有验证码之后
如果报错的话有可能是源出错,因为国内用的是npm的淘宝镜像,登陆需要切换到npm的官方源,命令是npm config set registry https://registry.npmjs.org
运行npm publish发布

使用的时候，下载命令 npm install 名字，
package.json:
“dependencies”：{“名称”：“版本号”}
main.js:
import 组件名 from ‘包名’
Vue.use(组件名)

三、js异步调用引起的问题

有需求是先查询数据接口，获取数据，然后让第一条显示到选择组件里，并调用查询接口。但是如果不先让查询数据接口方法执行，后面查询是没有条件的，所以需要await/async，必须要是异步函数才能生效。

   const temp = async () => {
      try {
        await 调用获取数据的方法
      } catch (err) {
        //
      }
      await 拿到条件调用查询的方法
    }
    temp()

await后面的函数会先执行一遍，然后就会跳出async函数来执行后面代码