admin 管理员组

文章数量: 888299

使用vue写一个bilibili小组件

文章目录

  • 前言
  • 一、效果展示
  • 二、源代码
    • 使用方法
      • 1.设置代理
      • 2.新建vue组件
      • 3.设置自己的bilibili mid
  • 总结

前言

在别人的博客中看见了一个展示自己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:'/',mes:'',mid:'',//你的bilibili idinfom:'',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: '',changeOrigin: true,  // 是否跨域pathRewrite: {'^/api': ''}}},

再向main.js中添加

axios.defaults.baseURL = '/api'

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

2.新建vue组件

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

3.设置自己的bilibili mid

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

后面那一串数字就是mid。

总结

以后再写

本文标签： 使用vue写一个bilibili小组件

版权声明：本文标题：使用vue写一个bilibili小组件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1693584829h230699.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。