From f1d079f9c0b3d384090477ca54e0548373d62b57 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Thu, 16 Jan 2025 11:56:39 +0800
Subject: [PATCH] 配置修改
---
web_src/src/components/Login.vue | 128 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 128 insertions(+), 0 deletions(-)
diff --git a/web_src/src/components/Login.vue b/web_src/src/components/Login.vue
new file mode 100644
index 0000000..37c8a83
--- /dev/null
+++ b/web_src/src/components/Login.vue
@@ -0,0 +1,128 @@
+<template>
+<div class="login" id="login">
+ <div class="limiter">
+ <div class="container-login100">
+ <div class="wrap-login100">
+ <span class="login100-form-title p-b-26">WVP视频平台</span>
+ <span class="login100-form-title p-b-48">
+ <i class="fa fa-video-camera"></i>
+ </span>
+
+ <div class="wrap-input100 validate-input" data-validate = "Valid email is: a@b.c">
+ <input :class="'input100 ' + (username==''?'':'has-val')" type="text" v-model="username" name="username">
+ <span class="focus-input100" data-placeholder="用户名"></span>
+ </div>
+
+ <div class="wrap-input100 validate-input" data-validate="Enter password">
+ <span class="btn-show-pass">
+ <i :class="'fa ' + (!showPassword?'fa-eye':'fa-eye-slash')" @click="showPassword = !showPassword"></i>
+ </span>
+ <input :class="'input100 ' + (password==''?'':'has-val')" :type="(!showPassword?'password':'text')" v-model="password" name="password">
+ <span class="focus-input100" data-placeholder="密码"></span>
+ </div>
+
+ <div class="container-login100-form-btn">
+ <div class="wrap-login100-form-btn" :class="{'login-loading': isLoging}" v-loading="isLoging" element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
+ <div class="login100-form-bgbtn"></div>
+ <button class="login100-form-btn" @click="login">登录</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</template>
+
+<script>
+import crypto from 'crypto'
+export default {
+ name: 'Login',
+ data(){
+ return {
+ isLoging: false,
+ showPassword: false,
+ loginLoading: false,
+ username: '',
+ password: ''
+ }
+ },
+ created(){
+ var that = this;
+ document.onkeydown = function(e) {
+ var key = window.event.keyCode;
+ if (key == 13) {
+ that.login();
+ }
+ }
+ },
+ methods:{
+
+ //登录逻辑
+ login(){
+ if(this.username!='' && this.password!=''){
+ this.toLogin();
+ }
+ },
+
+ //登录请求
+ toLogin(){
+ //需要想后端发送的登录参数
+ let loginParam = {
+ username: this.username,
+ password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
+ }
+ var that = this;
+ //设置在登录状态
+ this.isLoging = true;
+ let timeoutTask = setTimeout(()=>{
+ that.$message.error("登录超时");
+ that.isLoging = false;
+ }, 1000)
+
+ this.$axios({
+ method: 'get',
+ url:"/api/user/login",
+ params: loginParam
+ }).then(function (res) {
+ window.clearTimeout(timeoutTask)
+ console.log(JSON.stringify(res));
+ if (res.data.code === 0 ) {
+ that.$cookies.set("session", {"username": that.username,"roleId":res.data.data.role.id}) ;
+ //登录成功后
+ that.cancelEnterkeyDefaultAction();
+ that.$router.push('/');
+ }else{
+ that.isLoging = false;
+ that.$message({
+ showClose: true,
+ message: '登录失败，用户名或密码错误',
+ type: 'error'
+ });
+ }
+ }).catch(function (error) {
+ console.log(error)
+ window.clearTimeout(timeoutTask)
+ that.$message.error(error.response.data.msg);
+ that.isLoging = false;
+ });
+ },
+ setCookie: function (cname, cvalue, exdays) {
+ var d = new Date();
+ d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+ var expires = "expires=" + d.toUTCString();
+ console.info(cname + "=" + cvalue + "; " + expires);
+ document.cookie = cname + "=" + cvalue + "; " + expires;
+ console.info(document.cookie);
+ },
+ cancelEnterkeyDefaultAction: function() {
+ document.onkeydown = function(e) {
+ var key = window.event.keyCode;
+ if (key == 13) {
+ return false;
+ }
+ }
+ }
+ }
+}
+</script>
+
--
Gitblit v1.9.3