已实现登录，视频数据获取显示，待完成数据播放，数据播放传参route

package-lock.json

@@ -12,6 +12,7 @@
         "element-plus": "^2.4.4",
         "video.js": "^8.9.0",
         "vue": "^3.3.11",
+        "vue-cookies": "^1.8.3",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
@@ -1518,6 +1519,11 @@
         }
       }
     },
+    "node_modules/vue-cookies": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
+      "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",

package.json

@@ -13,6 +13,7 @@
     "element-plus": "^2.4.4",
     "video.js": "^8.9.0",
     "vue": "^3.3.11",
+    "vue-cookies": "^1.8.3",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

src/main.js

@@ -5,7 +5,11 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from '@/router'
+import globalData  from '@/utils/global.js'
 
 
 
-createApp(App).use(router).use(ElementPlus).mount('#app')
+
+const app=createApp(App);
+app.provide('globalData',globalData);
+app.use(router).use(ElementPlus).mount('#app');

src/router/index.js

@@ -13,6 +13,12 @@ const routes = [
     {
         path: '/video',
         name: 'Video',
+        meta:{
+            name:'',
+            id:0,
+            userid:0,
+            token:"",
+        },
         component: VideoVue
     },
     {

src/utils/global.js

@@ -4,4 +4,13 @@ const token = ref(""); // 定义一个响应式全局变量
 const userId=ref(1); 
 const videoId=ref(1);
 const videoName=ref("");
-export default token; // 导出全局变量
+const globalData=ref({
+    token:"",
+    userId:0,
+    videoId:0,
+    videoName:"",
+})
+const updateLocation = (data) => {
+    globalData.token = data.token;
+  }
+export default  globalData;

src/views/Login.vue

@@ -88,14 +88,16 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref,inject } from "vue";
 import axios from "axios";
 import { loginService, registerService } from "@/api/user.js";
-import token from "@/utils//global.js";
 import router from "@/router/index.js";
 const isLogin = ref(true);
 
 
+
+const globalData=inject('globalData');
+
 const loginData = ref({
   username: "",
   email: "lijun.lj@foxmail.com",
@@ -153,8 +155,12 @@ const login = async () => {
   //     });
   let result = await loginService(loginData.value);
   alert(result.message);
-  token.value= result.data;
-  router.push("/videoList", {token:result.data});
+  globalData.token = result.data;
+  localStorage.setItem('token',result.data.token)
+  localStorage.setItem('userId',result.data.id)
+  localStorage.setItem('username',result.data.username)
+  //token.value= result.data;
+  router.push("/videoList");
 };
 const register = async () => {
   let result = registerService(registerData.value);

src/views/Video.vue

@@ -1,35 +1,39 @@
-<script setup>
-import token from "@/utils/global.js";
-import axios from "axios";
-import videojs from "video.js";
-const player = videojs(this.$refs.videoPlayer, this.options); // 初始化播放器
-axios
-  .post(
-    "/video/m3u8",
-    {
-      // 发送的POST数据
-      id: "",
-      userId: "",
-      filename: "",
-    },
-    {
-      headers: {
-        Authorization: token.value,
-      },
-    }
-  )
-  .then((response) => {
-    // 处理响应数据，response.data 应该包含m3u8视频流数据
-    player.src({ type: "application/x-mpegURL", src: response.data }); // 将m3u8数据流设置为视频源
-    player.play(); // 开始播放视频流
-  })
-  .catch((error) => {
-    // 处理错误
-  });
-</script>
-
 <template>
   <div>
-    <video ref="videoPlayer" class="video-js"></video>
+    <video-player :options="videoOptions" />
   </div>
-</template>
+</template>
+
+<script>
+import VideoPlayer from "@/views/VideoPlayer.vue";
+import router from "@/router/index.js";
+
+export default {
+  name: "VideoExample",
+  components: {
+    VideoPlayer,
+  },
+  data() {
+    return {
+      videoOptions: {
+        autoplay: true,
+        controls: true,
+        sources: [
+          {
+            src:
+              "/path/to/video.m3u8?filename=" +
+              router.meta.name +
+              "&id=" +
+              router.meta.id +
+              "&userid=" +
+              router.meta.userid +
+              "&token=" +
+              router.meta.token,
+            type: "video/m3u8",
+          },
+        ],
+      },
+    };
+  },
+};
+</script>

src/views/VideoList.vue

@@ -1,17 +1,25 @@
 <script>
 import axios from "axios";
+import { inject } from "vue";
 import { getVideoListService } from "@/api/video.js";
-import { onMounted, ref } from "vue";
-import token from "@/utils//global.js";
 import router from "@/router/index.js";
 
 export default {
   // data() 返回的属性将会成为响应式的状态
   // 并且暴露在 `this` 上
+  // setup: function() {
+  //   const globalData = inject("globalData");
+  //   const token = globalData.token;
+  //   return { token };
+  // },
   data() {
     return {
-      tableData: {},
-      tokenData: { token: "" },
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
     };
   },
 
@@ -19,7 +27,6 @@ export default {
   // 它们可以在模板中作为事件处理器绑定
   methods: {
     async getVideoList() {
-      this.tokenData.token = token.value;
       console.log(this.tokenData.token);
       let result = {};
       try {
@@ -39,12 +46,27 @@ export default {
     handleCurrentChange() {
       alert("页码发生变化" + val);
     },
+    playVideo(index) {
+      var id=this.tableData[index].id;
+      var name=this.tableData[index].name;
+      alert("id=" + id + " name=" + name);
+      router.push(
+        "/video",
+        {
+          name: name,
+          userid: this.tokenData.userId,
+          token: this.tokenData.token,
+          id: id,
+        }
+      );
+    },
   },
 
   // 生命周期钩子会在组件生命周期的各个不同阶段被调用
   // 例如这个函数就会在组件挂载完成后被调用
   mounted() {
-    getVideoList();
+    console.log("mounted");
+    this.getVideoList();
   },
 };
 </script>
@@ -89,16 +111,16 @@ export default {
 
           <!-- 表格 -->
           <el-table :data="tableData" border>
-            <el-table-column prop="id" label="id" width="250"></el-table-column>
+            <el-table-column prop="id" label="id" width="50"></el-table-column>
             <el-table-column
-              prop="video_name"
+              prop="name"
               label="视频名称"
               width="250"
             ></el-table-column>
-            <el-table-column label="是否有人" width="250">
-              <template human="human">
+            <el-table-column label="是否有人" width="50" prop="human">
+              <!-- <template human="human">
                 {{ human.row.human == 1 ? "有" : "无" }}
-              </template>
+              </template> -->
             </el-table-column>
             <el-table-column
               prop="create_time"
@@ -111,8 +133,16 @@ export default {
               width="250"
             ></el-table-column>
             <el-table-column label="操作">
-              <el-button type="primary" size="mini">播放</el-button>
-              <el-button type="danger" size="mini">删除</el-button>
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="playVideo(scope.$index)"
+                  >播放</el-button
+                >
+
+                <el-button type="danger" size="mini">删除</el-button>
+              </template>
             </el-table-column>
           </el-table>
           <br />

src/views/VideoPlayer.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+      <video ref="videoPlayer" class="video-js"></video>
+    </div>
+  </template>
+  
+  <script>
+  import videojs from 'video.js';
+  
+  export default {
+    name: 'VideoPlayer',
+    props: {
+      options: {
+        type: Object,
+        default() {
+          return {};
+        }
+      }
+    },
+    data() {
+      return {
+        player: null
+      }
+    },
+    mounted() {
+      this.player = videojs(this.$refs.videoPlayer, this.options, () => {
+        this.player.log('onPlayerReady', this);
+      });
+    },
+    beforeDestroy() {
+      if (this.player) {
+        this.player.dispose();
+      }
+    }
+  }
+  </script>