获取uuid与由uuid获取状态成功，待修复二维码生成功能

package-lock.json

@@ -11,9 +11,11 @@
         "axios": "^1.6.5",
         "cors": "^2.8.5",
         "element-plus": "^2.4.4",
+        "js-md5": "^0.8.3",
         "video.js": "^8.9.0",
         "vue": "^3.3.11",
         "vue-cookies": "^1.8.3",
+        "vue-qr": "^4.0.9",
         "vue-router": "^4.2.5"
       },
       "devDependencies": {
@@ -961,6 +963,11 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -970,6 +977,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -1042,6 +1057,20 @@
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -1183,6 +1212,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1197,6 +1231,25 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -1229,6 +1282,21 @@
       "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
       "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
     },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1276,6 +1344,16 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/js-binary-schema-parser": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz",
+      "integrity": "sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg=="
+    },
+    "node_modules/js-md5": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
+      "integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ=="
+    },
     "node_modules/keycode": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
@@ -1360,6 +1438,17 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-document": {
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
@@ -1368,6 +1457,17 @@
         "dom-walk": "^0.1.0"
       }
     },
+    "node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/mpd-parser": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.0.tgz",
@@ -1437,6 +1537,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parenthesis": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
+      "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1587,6 +1700,49 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -1595,6 +1751,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string-split-by": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string-split-by/-/string-split-by-1.0.0.tgz",
+      "integrity": "sha512-KaJKY+hfpzNyet/emP81PJA9hTVSfxNLS9SFTWxdCnnW1/zOOwiV248+EfoX7IQFcBaOp4G5YE6xTJMF+pLg6A==",
+      "dependencies": {
+        "parenthesis": "^3.1.5"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1749,6 +1913,17 @@
       "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.8.3.tgz",
       "integrity": "sha512-VBRsyRMVdahBgFfh389TMHPmDdr4URDJNMk4FKSCfuNITs7+jitBDhwyL4RJd3WUsfOYNNjPAkfbehyH9AFuoA=="
     },
+    "node_modules/vue-qr": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/vue-qr/-/vue-qr-4.0.9.tgz",
+      "integrity": "sha512-pAISV94T0MNEYA3NGjykUpsXRE2QfaNxlu9ZhEL6CERgqNc21hJYuP3hRVzAWfBQlgO18DPmZTbrFerJC3+Ikw==",
+      "dependencies": {
+        "glob": "^8.0.1",
+        "js-binary-schema-parser": "^2.0.2",
+        "simple-get": "^4.0.1",
+        "string-split-by": "^1.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
@@ -1762,6 +1937,11 @@
       "peerDependencies": {
         "vue": "^3.2.0"
       }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     }
   }
 }

package.json

@@ -12,9 +12,11 @@
     "axios": "^1.6.5",
     "cors": "^2.8.5",
     "element-plus": "^2.4.4",
+    "js-md5": "^0.8.3",
     "video.js": "^8.9.0",
     "vue": "^3.3.11",
     "vue-cookies": "^1.8.3",
+    "vue-qr": "^4.0.9",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

src/api/user.js

@@ -1,8 +1,13 @@
 import request from '@/utils/request.js'
+import md5 from 'js-md5';
 
 export const loginService = (loginData) => {
     const params = new URLSearchParams();
     for (let key in loginData) {
+        if (key === 'password') {
+            params.append(key, md5(loginData[key]))
+            continue;
+        }
         params.append(key, loginData[key])
     }
     return request.post('/user/login', params)
@@ -15,3 +20,22 @@ export const registerService = (registerData) => {
     }
     return request.post('/user/register', params)
 }
+
+
+
+export const getUUIDService = (registerData) => {
+    const params = new URLSearchParams();
+    for (let key in registerData) {
+        params.append(key, registerData[key])
+    }
+    return request.post('/user/uuid', params)
+}
+
+export const getQRService = (qrData) => {
+    const params = new URLSearchParams();
+    console.log("qrdata=",qrData);
+    for (let key in qrData) {
+        params.append(key, qrData[key])
+    }
+    return request.post('/user/gqr', params)
+}

src/views/Login.vue

@@ -85,20 +85,28 @@
       </el-form-item>
     </el-form>
   </el-row>
+  <div>
+    <div class="qrcode" ref="qrCodeUrl"></div>
+    <vue-qr :logoSrc="imageUrl" text="https://blog.csdn.net/weixin_42601136" :size="200"></vue-qr>
+  </div>
 </template>
 
 <script setup>
 import { ref, inject } from "vue";
 import axios from "axios";
-import { loginService, registerService } from "@/api/user.js";
+import { getQRService, getUUIDService, loginService, registerService } from "@/api/user.js";
 import router from "@/router/index.js";
+import VueQr from 'vue-qr'
 const isLogin = ref(true);
 if (localStorage.getItem("token") !== null) {
   router.push("/videoList");
 }
 
+
 const globalData = inject("globalData");
 
+var uuid = "";
+//表单数据
 var loginData = ref({
   username: "",
   email: "lijun.lj@foxmail.com",
@@ -135,6 +143,17 @@ const rules = {
   email: [{}],
 };
 
+const creatQrCode =async () =>{
+      var qrcode = new qrcode(this.$refs.qrCodeUrl, {
+        text: uuid, // 需要转换为二维码的内容
+        width: 100,
+        height: 100,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    };
+
 //登录接口调用
 const login = async () => {
   //   let req = axios.create({
@@ -155,7 +174,7 @@ const login = async () => {
   //     .catch((error) => {
   //       console.error(error);
   //     });
-  let result = await loginService(loginData.value);
+  let result = await loginService(loginData);
   globalData.token = result.data;
   localStorage.setItem("token", result.data.token);
   localStorage.setItem("userId", result.data.id);
@@ -165,6 +184,41 @@ const login = async () => {
   //token.value= result.data;
   router.push("/videoList");
 };
+
+const getUUID= async() => {
+      try {
+        const response = await getUUIDService({"device":"windows"});
+        uuid =response.data.toString();
+        let uid =uuid.toString();
+        console.log("uuid=",uuid);
+        await creatQrCode(uid);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+const getQRStatus = async () => {
+  let result = await getQRService({"uuid":uuid});
+  if (result.code === 0) {
+    if(result.data==="0"){
+    }else if(result.data==="1"){
+      alert("等待确认");
+    }else{
+      globalData.token = result.data;
+      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");
+    }
+
+  } else {
+    alert(result.message);
+  }
+}
+
 const  getIpClient= async() => {
       try {
         const response = await axios.get("https://ipinfo.io/json");
@@ -181,6 +235,9 @@ const  getIpClient= async() => {
     };
 
 getIpClient();
+await getUUID();
+getQRStatus();
+setInterval("getQRStatus()","1000");//showLogin()函数名一定要带括号
 const register = async () => {
   let result = registerService(registerData.value);
   if (result.code === 0) {