在Vue中使用baberrage插件实现弹幕效果

什么是baberrage?

链接:https://github.com/superhos/vue-baberrage/blob/master/docs/zh/README.md

是一位大佬制作的插件,实现弹幕的效果

效果

这里用作留言界面

1. 创建所需要的数据库

DROP TABLE IF EXISTS `tb_message`;
CREATE TABLE `tb_message`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
  `nickname` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '昵称',
  `avatar` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '头像',
  `message_content` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '留言内容',
  `time` tinyint(1) NULL DEFAULT NULL COMMENT '弹幕速度',
  `create_time` datetime(0) NOT NULL COMMENT '发布时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 3432 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

2. 在Vue中加入baberrage

• npm install vue-baberrage
  

  全局引入

• import { vueBaberrage } from 'vue-baberrage'
  Vue.use(vueBaberrage)
  

3. 创建留言页面

Message.vue

<template>
  <div>
    <Nav></Nav>
    <!-- banner -->
    <div class="message-banner">
      <!-- 弹幕输入框 -->
      <div class="message-container">
        <h1 class="message-title">留言板</h1>
        <div class="animate__animated animate__fadeInUp message-input-wrapper">
          <input v-if="userVo == null"
              style="color: #1b1c1d; width: 20%"
              v-model="messageNickname"
              @click="show = true"
              @keyup.enter="addToList"
              placeholder="昵称"
          />
          <input
              style="color: #1b1c1d;"
              v-model="messageContent"
              @click="show = true"
              @keyup.enter="addToList"
              placeholder="说点什么吧"
          />
          <el-button
              round
              type="info"
              class="ml-3 animate__animated animate__backInRight"
              @click="addToList"
              v-show="show"
          >
            发送
          </el-button>
        </div>
      </div>
      <!-- 弹幕列表 -->
      <div class="barrage-container">
        <vue-baberrage :barrageList="barrageList">
          <template v-slot:default="slotProps">
            <span class="barrage-items">
              <img
                  :src="slotProps.item.avatar"
                  width="30"
                  height="30"
                  style="border-radius:50%"
              />
              <span class="ml-2">{{ slotProps.item.nickname }} :</span>
              <span class="ml-2">{{ slotProps.item.messageContent }}</span>
            </span>
          </template>
        </vue-baberrage>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/index/Nav";

export default {
  name:"Message",
  components:{Nav},
  mounted() {
    this.listMessage();
  },
  data() {
    return {
      show: false,
      messageNickname: "",
      messageContent: "",
      barrageList: [],
      avatar: '',
      userVo: null
    }
  },
  methods: {
    addToList() {
      const _this = this;
      if (this.messageNickname.trim() == ""){
        this.$message.error("昵称不能为空")
        return false;
      }
      if (this.messageContent.trim() == ""){
        this.$message.error("留言不能为空")
        return false;
      }
        //如果本地有用户数据则使用本地用户头像
        //否则随机赋予头像(本地存放了30个头像)
      if (this.userVo != null){
        this.avatar = this.userVo.avatar
      }else {
        this.avatar = "/images/commentAvatar/" + "avatar" +Math.floor((Math.random() * 30) + 1) + ".png"
      }

      var message = {
          avatar: this.avatar,
          nickname: this.messageNickname,
          messageContent: this.messageContent,
          time: Math.floor(Math.random() * (10 - 7)) + 7,
          userVo: this.userVo
      };
      this.barrageList.push(message);
      this.messageContent = "";

      this.$axios.post('http://localhost:8181/tbMessage',message)
    },
    listMessage() {
      this.$axios.get("http://localhost:8181/tbMessage").then(res => {
        this.barrageList = res.data.data;

      });
    }
  },
  created() {
    this.userVo = JSON.parse(localStorage.getItem("userInfo"))
    //将localStorage中的用户名取出
    this.messageNickname = this.userVo.username;
  }
};
</script>

<style scoped>
.message-banner {
  position: absolute;

  left: 0;
  right: 0;
  height: 100vh;
  background-image: url("../../../public/images/message.jpg");

  animation: header-effect 1s;
}
.message-title {
  color: #eee;
  animation: title-scale 1s;
}
.message-container {
  position: absolute;
  width: 360px;
  top: 35%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  margin: 0 auto;
  color: #fff;
}
.message-input-wrapper {
  display: flex;
  justify-content: center;
  height: 2.5rem;
  margin-top: 2rem;
}
.message-input-wrapper input {
  outline: none;
  width: 70%;
  border-radius: 20px;
  height: 100%;
  padding: 0 1.25rem;
  color: #eee;
  border: #fff 1px solid;
}
.message-input-wrapper input::-webkit-input-placeholder {
  color: #eeee;
}
.message-input-wrapper button {
  outline: none;
  border-radius: 20px;
  height: 100%;
  padding: 0 1.25rem;
  border: #fff 1px solid;
}
.barrage-container {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100% -50px);
  width: 100%;
}
.barrage-items {
  background: rgb(0, 0, 0, 0.7);
  border-radius: 100px;
  color: #fff;
  padding: 5px 10px 5px 5px;
  align-items: center;
  display: flex;
}
.ml-3{
  margin-left: 12px!important;
}

.ml-2{
  margin-left: 8px!important;
}
</style>

4. 后台接收数据

(后台前面就是基本的查询和添加就不列举了)

MessageController

/**
 * 留言板留言
 */
@RestController
public class TbMessageController {

    @Autowired
    private TbMessageService tbMessageService;

    @GetMapping("/tbMessage")
    public Result getAll(){

        List<TbMessage> allTbMessage = tbMessageService.getAllTbMessage();

        return Result.success(allTbMessage);
    }

    @PostMapping("/tbMessage")
    public Result saveAll(@RequestBody TbMessage tbMessage){

       // System.err.println("tbMessage=>" + tbMessage);


        int i = tbMessageService.saveTbMessage(tbMessage);

        if (i == 0){
            return Result.fail("发布失败");
        }else{
            return Result.success("发布成功");
        }
    }
}