From 3d45f5259ca52d85c4970d6b901a67716f44658b Mon Sep 17 00:00:00 2001 From: junleea <354425203@qq.com> Date: Fri, 19 Apr 2024 19:34:39 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=8E=B7=E5=8F=96=E6=9C=AC?= =?UTF-8?q?=E6=9C=BAip=E5=B9=B6=E5=8F=91=E9=80=81=E5=88=B0=E6=9C=8D?= =?UTF-8?q?=E5=8A=A1=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 29 +++++++ package.json | 1 + src/api/user.js | 2 +- src/api/video.js | 32 ++++++-- src/main.js | 2 +- src/utils/request.js | 2 +- src/views/Login.vue | 19 ++++- src/views/Video.vue | 4 +- src/views/VideoList.vue | 178 +++++++++++++++++++++++++++++++++------- vite.config.js | 18 ++-- 10 files changed, 235 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index eda5a92..b1c3932 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "axios": "^1.6.5", + "cors": "^2.8.5", "element-plus": "^2.4.4", "video.js": "^8.9.0", "vue": "^3.3.11", @@ -1019,6 +1020,18 @@ "node": ">= 0.8" } }, + "node_modules/cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -1416,6 +1429,14 @@ "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz", "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==" }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -1591,6 +1612,14 @@ "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz", "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==" }, + "node_modules/vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "engines": { + "node": ">= 0.8" + } + }, "node_modules/video.js": { "version": "8.9.0", "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.9.0.tgz", diff --git a/package.json b/package.json index ef6decd..825e977 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "axios": "^1.6.5", + "cors": "^2.8.5", "element-plus": "^2.4.4", "video.js": "^8.9.0", "vue": "^3.3.11", diff --git a/src/api/user.js b/src/api/user.js index a36631c..80792f2 100644 --- a/src/api/user.js +++ b/src/api/user.js @@ -5,7 +5,7 @@ export const loginService = (loginData) => { for (let key in loginData) { params.append(key, loginData[key]) } - return request.post('/user/login', params,) + return request.post('/user/login', params) } export const registerService = (registerData) => { diff --git a/src/api/video.js b/src/api/video.js index 6eacae3..87647d3 100644 --- a/src/api/video.js +++ b/src/api/video.js @@ -7,19 +7,33 @@ export const playVideoService = (data) => { } return request.post('/video', params, Headers = { 'Accept': 'application/vnd.apple.mpegurl', Authorization: data.Authorization }); } +export const delayVideoService = (data) => { + const params = new URLSearchParams(); + for (let key in data) { + params.append(key, data[key]) + } + return request.post('/video/delay_video', params, Headers = {Authorization: data.Authorization }); +} export const getVideoListService = (data) => { const params = new URLSearchParams(); + let hour = data['hour']; for (let key in data) { - if(key === 'entrydate' && data[key].length > 0){ - console.log(data[key]); - let begin=data[key][0].toLocaleString().slice(0,10)+" 00:00:00"; - console.log("begin="+begin.toString()); - params.append("begin", begin); - let end=data[key][1].toLocaleString().slice(0,10)+" 23:59:59"; - console.log("end="+end.toString()); - params.append("end", end); - continue; + if (key === 'entrydate' && data[key].length > 0) { + if (hour === "33") { + let begin = data[key][0].toLocaleString().slice(0, 10) + " 00:00:00"; //begin=data[key][0].toLocaleString().slice(0,10)+hour+":00:00"; + params.append("begin", begin); + let end = data[key][1].toLocaleString().slice(0, 10) + " 23:59:59"; + params.append("end", end); + continue; + } else { + let begin = data[key][0].toLocaleString().slice(0, 10) + hour + ":00:00"; //begin=data[key][0].toLocaleString().slice(0,10)+hour+":00:00"; + params.append("begin", begin); + let end = data[key][1].toLocaleString().slice(0, 10) + hour + ":59:59"; + params.append("end", end); + continue; + } + } params.append(key, data[key]) } diff --git a/src/main.js b/src/main.js index c9eb13f..b470628 100644 --- a/src/main.js +++ b/src/main.js @@ -7,7 +7,7 @@ import App from './App.vue' import router from '@/router' import globalData from '@/utils/global.js' - const app=createApp(App); app.provide('globalData',globalData); + app.use(router).use(ElementPlus).mount('#app'); diff --git a/src/utils/request.js b/src/utils/request.js index edca1a8..5249918 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,6 +1,6 @@ import axios from "axios"; import router from "@/router/index.js"; -const baseURL = "/api"; +const baseURL = "https://jp.ljsea.top/"; const request = axios.create({ baseURL: baseURL, }); diff --git a/src/views/Login.vue b/src/views/Login.vue index eaf70a0..65a74e5 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -99,10 +99,11 @@ if (localStorage.getItem("token") !== null) { const globalData = inject("globalData"); -const loginData = ref({ +var loginData = ref({ username: "", email: "lijun.lj@foxmail.com", password: "", + ip:"", }); const registerData = ref({ username: "", @@ -159,9 +160,25 @@ const login = async () => { localStorage.setItem("token", result.data.token); localStorage.setItem("userId", result.data.id); localStorage.setItem("username", result.data.username); + let now=new Date(); + localStorage.setItem("end_time", now.setDate(now.getHours() + 12));//过期时间 //token.value= result.data; router.push("/videoList"); }; +const getIpClient= async() => { + try { + const response = await axios.get("https://ipinfo.io/json"); + loginData.value.ip =response.data.ip; + // console.log("ip:",response.data.ip); + // console.log("login ip:",loginData.ip); + // console.log(response.data); + // console.log(loginData); + } catch (error) { + console.error(error); + } + }; + +getIpClient(); const register = async () => { let result = registerService(registerData.value); if (result.code === 0) { diff --git a/src/views/Video.vue b/src/views/Video.vue index 5bdd874..21dbca4 100644 --- a/src/views/Video.vue +++ b/src/views/Video.vue @@ -30,10 +30,12 @@ nextTick(() => { sources: [ { src: - "/api/video/m3u8?filename=" + + "https://jp.ljsea.top/video/m3u8?filename=" + localStorage.getItem("video_name") + "&id=" + localStorage.getItem("video_id") + + "&ip=" + + localStorage.getItem("ip")+ "&userId=" + localStorage.getItem("userId") + "&token=" + diff --git a/src/views/VideoList.vue b/src/views/VideoList.vue index 12ff7bd..d55531f 100644 --- a/src/views/VideoList.vue +++ b/src/views/VideoList.vue @@ -2,6 +2,7 @@ import axios from "axios"; import { inject } from "vue"; import { getVideoListService } from "@/api/video.js"; +import { delayVideoService } from "@/api/video.js"; import router from "@/router/index.js"; export default { @@ -14,9 +15,12 @@ export default { // }, data() { return { + ip: "", tableData: [], + file_sum_size: 0, tokenData: { token: localStorage.getItem("token"), + ip: localStorage.getItem("ip"), userId: localStorage.getItem("userId"), username: localStorage.getItem("username"), hour: 0, @@ -33,15 +37,23 @@ export default { // 它们可以在模板中作为事件处理器绑定 methods: { async getVideoList() { - console.log(this.tokenData.token); let result = {}; try { result = await getVideoListService(this.tokenData); } catch (e) { console.log(e); } - this.tableData = JSON.parse(result.data); - console.log(this.tableData[0]); + let data = result.data; + let len = data.length; + + for (let i = 0; i < len; i++) { + //this.file_sum_size += parseFloat(data[i].file_size); + data[i].file_size = parseFloat(data[i].file_size / 1024 / 1024).toFixed( + 2 + ); + } + console.log("file_size", this.file_sum_size, "len=", len); + this.tableData = data; }, onSubmit() { getVideoList({ token: token }); @@ -60,6 +72,84 @@ export default { //alert("id=" + id + " name=" + name); router.push("/video"); }, + async downloadVideo(index) { + var id = this.tableData[index].id; + var name = this.tableData[index].video_name; + var vurl = + "https://jp.ljsea.top/video/m3u8?filename=" + + name + + "&id=" + + id + + "&userId=" + + localStorage.getItem("userId") + + "&ip=" + + this.ip + + "&token=" + + localStorage.getItem("token"); //视频地址 + //下载文件 + try { + // 发送请求到后端获取视频文件 + const response = await axios({ + url: vurl, + method: "GET", + responseType: "blob", // 告诉axios我们期望的响应是一个blob + headers: { + // 如果有必要，设置其他请求头 + "Content-Type": "video/mp4", + }, + }); + + // 创建Blob对象 + const videoBlob = new Blob([response.data], { type: "video/mp4" }); + + // 创建一个指向Blob对象的URL + const videoUrl = URL.createObjectURL(videoBlob); + + // 使用a标签下载文件 + const link = document.createElement("a"); + link.href = videoUrl; + link.download = name; // 设置下载文件的名称 + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + // 释放URL对象 + URL.revokeObjectURL(videoUrl); + } catch (error) { + console.error("下载视频时发生错误:", error); + } + }, + async delayVideo(index) { + var id = this.tableData[index].id; + var days = 10; + var delay_data = { + id: id, + ip:this.ip, + delay: days, + userId: this.tokenData.userId, + token: this.tokenData.token, + }; + try { + var d_re = await delayVideoService(delay_data); + if (d_re.code == 0) { + alert("延迟成功"); + } else { + alert("操作失败"); + } + } catch (e) { + console.log(e); + } + }, + async getIpClient() { + try { + const response = await axios.get("https://ipinfo.io/json"); + this.ip=response.data.ip; + localStorage.setItem("ip", this.ip); + //console.log(response); + } catch (error) { + console.error(error); + } + }, + // 修改条纹颜色 tableRowClassName({ row, rowIndex }) { if (row.human === 1) { @@ -74,11 +164,13 @@ export default { // 生命周期钩子会在组件生命周期的各个不同阶段被调用 // 例如这个函数就会在组件挂载完成后被调用 - mounted() { - if (localStorage.getItem("token") === null) { + async mounted() { + let now=new Date(); + if (localStorage.getItem("token") === null ) { router.push("/login"); } - console.log("mounted"); + // console.log("mounted"); + await this.getIpClient(); this.getVideoList(); }, }; @@ -105,17 +197,18 @@ export default { - + 查询 + - - + :row-style="this.tableRowClassName" - border - > - + - + + - + + + diff --git a/vite.config.js b/vite.config.js index 66a0d2e..4c34f3a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -13,13 +13,13 @@ export default defineConfig({ '@': fileURLToPath(new URL('./src', import.meta.url)) } }, - server : { - proxy: { - '/api': { - target: 'https://jp.ljsea.top', - changeOrigin: true, - rewrite: path => path.replace(/^\/api/, '') - } - } - } + // server : { + // proxy: { + // '/api': { + // target: 'https://jp.ljsea.top', + // changeOrigin: true, + // rewrite: path => path.replace(/^\/api/, '') + // } + // } + // } })