使用vue写一个bilibili小组件

---

前言

在别人的博客中看见了一个展示自己bilibili账号的组件，看着挺不错的，自己就用vue尝试写了一个。

一、效果展示

其实写这个东西并不难，自己写的也是非常简陋，还有挺多细节没有实现，不过基本的功能还是有的，剩下的以后再说。

二、源代码

代码如下（示例）：

<template>
  <div class="bilibili">
  <!--头像部分-->
    <div class="head">
      <!--头像-->
      <div style="left: 19px;top:16px;position: absolute;z-index: 1;">
        <el-avatar :size="65" :src="infom.face"></el-avatar>
      </div>
      <!--头像框-->
      <div style="left: 0;top:0;position: absolute;z-index: 2;">
        <img :src="infom.pendant.image" height="100px">
      </div>
    </div>
    <div class="name">
      <!--昵称-->
      {{infom.name}}
      <!--会员-->
      <div class="vip" v-if="have_vip">
        {{infom.vip.label.text}}
      </div>
      <!--关注数量-->
      <div class="num">
        关注数：{{this.mystate.following}}
      </div>
    </div>
    <!--等级-->
    <div class="level">
      LV{{infom.level}}
    </div>
    <a :href=this.mes+this.mid :underline="false" target="_blank">
      <div class="mes" @mouseover="change" @mouseout="unchange" id="mes">
        私信
      </div>
    </a>
    <a :href="aten+mid" target="_blank">
      <div class="atten" id="atten">
        关注{{this.mystate.follower}}
      </div>
    </a>
    <div></div>
  </div>
</template>

<script>
export default {
  name: "bilibili",
  data(){
    return{
      aten:'https://space.bilibili.com/',
      mes:'https://message.bilibili.com/#/whisper/mid',
      mid:'',//你的bilibili id
      infom:'',
      mystate:'',
      have_vip:false
    }
  },
  mounted() {
    this.$axios.get("/x/space/acc/info?mid="+this.mid).then((res)=>{
      this.infom = res.data.data;
      if(this.infom.vip.label.text){
        this.have_vip =true;
      }
    });
    this.$axios.get("/x/relation/stat?vmid="+this.mid).then((res)=>{
      this.mystate = res.data.data;
    })
  },
  methods:{
   change(){
     document.getElementById('mes').style.backgroundColor='#fb7299';
     document.getElementById('mes').style.color='#ffffff';
   },
   unchange(){
     document.getElementById('mes').style.backgroundColor='#ffffff';
     document.getElementById('mes').style.color='#fb7299';
   }
 }
}
</script>

<style scoped>
.bilibili{
  height: 200px;
  width: 240px;
  margin-bottom: 20px;
  position: relative;
  /*background-color: #b8b8ba;*/
}
.head{
  height: 80px;
  width: 80px;
  left: 0;
  top:0;
  float: left;
  position: relative;
}
.name{
  top:20px;
  margin-left: 15px;
  position: relative;
  float: left;
  color: rgb(251, 114, 153);
}
.vip{
  position: relative;
  top:5px;
  width: 85px;
  height: 18px;
  color: #FFFFFF;
  background-color: #FB7299;
  border-radius: 4px;
}
.level{
  float: left;
  top:20px;
  font-size: 10px;
  position: relative;
  margin-left: 10px;
  height: 20px;
  width: 30px;
  background-color: #ff6c00;
  color: #ffffff;
  line-height: 20px;
  border-radius: 5px;
}
.num{
  color: #bbbbbb;
  position: relative;
  top: 10px;
  font-size: 5px;
}
.mes{
  position: absolute;
  top: 100px;
  left: 20px;
  width: 68px;
  height: 32px;
  color: rgb(251, 114, 153);
  background-color: #ffffff;
  border: 1px solid rgb(251, 114, 153);
  line-height: 32px;
  cursor: pointer;
  border-radius: 5px;
}
.atten{
  position: absolute;
  top: 100px;
  left: 100px;
  width: 68px;
  height: 32px;
  color: #FFFFFF;
  background-color: #00a1d6;
  border: 1px solid #00a1d6;
  line-height: 32px;
  cursor: pointer;
  border-radius: 5px;
}
</style>

使用方法

1.设置代理

因为直接用axios请求的话会出现一个跨域问题，所以要先设置一个代理才能正确请求的数据，
找到config目录下的index.js文件

向proxyTable中添加以下内容

proxyTable: {
      '/api': {
        target: 'https://api.bilibili.com',
        changeOrigin: true,  // 是否跨域
        pathRewrite: {
          '^/api': ''
        }
      }
    },

再向main.js中添加

axios.defaults.baseURL = '/api' 

之后就可以正常请求到数据了 。

2.新建vue组件

将代码复制到上面，然后导入该组件就可以使用了。

3.设置自己的bilibili mid

用网页登录bilibili，点击头像进入空间，查看一下mid，再将代码中的mid更改为你的mid就可以了 。

后面那一串数字就是mid。

总结

以后再写