From 067d62f0fc4f4da954ab0f149cd41bd87dee20dc Mon Sep 17 00:00:00 2001
From: xuewuerduo <53554701+xuewuerduo@users.noreply.github.com>
Date: Mon, 29 Apr 2024 00:01:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E5=BD=95=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82=E4=B8=BAmagic-api=E5=90=8E=E5=8F=B0,=E6=B5=8B?=
 =?UTF-8?q?=E8=AF=95=E8=B4=A6=E5=8F=B7=E7=99=BB=E5=BD=95=E8=B7=B3=E8=BD=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Login.vue     | 55 ++++++++++++++++----------
 src/components/Login_ONE.vue | 76 ++++++++++++++++++++++++++++++++++++
 src/router/index.js          |  4 +-
 3 files changed, 113 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Login_ONE.vue

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 8ac3589..e1ad12c 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -4,24 +4,27 @@
       <div slot="header" class="clearfix">
         <span>后台管理系统</span>
       </div>
-      <el-form label-width="80px" :model="form" ref="form">
-        <el-form-item label="用户名" prop="username"
-        :rules="[
-              {required: true, message:'请输入用户名', trigger: 'blur'},
-              {min: 4, max: 10, message: '长度在4-10位数之间', trigger: 'blur'}
-              ]">
-          <el-input v-model="form.username"></el-input>
-        </el-form-item>
-        <el-form-item label="密码" prop="password"
-         :rules="[
-              {required: true, message:'请输入密码', trigger: 'blur'},
-              {min: 6, max: 12, message: '密码长度在6-12位数之间', trigger: 'blur'}
-              ]">
-          <el-input type='password' v-model="form.password" ></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="login('form')">登录</el-button>
-        </el-form-item>
+      <el-form
+          label-width="80px"
+          :model="form"
+          ref="form">
+          <el-form-item label="用户名" prop="username"
+              :rules="[
+                {required: true, message:'请输入用户名', trigger: 'blur'},
+                {min: 4, max: 10, message: '长度在4-10位数之间', trigger: 'blur'}
+                ]">
+            <el-input v-model="form.username"></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="password"
+             :rules="[
+                {required: true, message:'请输入密码', trigger: 'blur'},
+                {min: 6, max: 12, message: '密码长度在6-12位数之间', trigger: 'blur'}
+                ]">
+            <el-input type='password' v-model="form.password" ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="login('form')">登录</el-button>
+          </el-form-item>
       </el-form>
     </el-card>
   </div>
@@ -41,8 +44,20 @@ export default {
   methods: {
     login(form) {
       this.$refs[form].validate((valid) => {
-        if(valid) {
+        if (valid) {
           console.log(this.form)
+          this.axios.post('http://127.0.0.1:9999/web/login', this.form)
+              .then(res => {
+                console.log(res)
+                if(res.status === 200) {
+                  localStorage.setItem('username',res.data.username)
+                  this.$message({message: '登录成功', type: 'success'})
+                  this.$router.push('/home')
+                }
+              })
+              .catch(err => {
+                console.error(err)
+              })
         } else {
           console.error(this.form)
         }
@@ -50,8 +65,8 @@ export default {
     }
   }
 }
-
 </script>
+
 <style lang="scss">
 .login {
   width: 100%;
diff --git a/src/components/Login_ONE.vue b/src/components/Login_ONE.vue
new file mode 100644
index 0000000..8ac3589
--- /dev/null
+++ b/src/components/Login_ONE.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="login">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>后台管理系统</span>
+      </div>
+      <el-form label-width="80px" :model="form" ref="form">
+        <el-form-item label="用户名" prop="username"
+        :rules="[
+              {required: true, message:'请输入用户名', trigger: 'blur'},
+              {min: 4, max: 10, message: '长度在4-10位数之间', trigger: 'blur'}
+              ]">
+          <el-input v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password"
+         :rules="[
+              {required: true, message:'请输入密码', trigger: 'blur'},
+              {min: 6, max: 12, message: '密码长度在6-12位数之间', trigger: 'blur'}
+              ]">
+          <el-input type='password' v-model="form.password" ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="login('form')">登录</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+
+
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        username: '',
+        password: ''
+      }
+    };
+  },
+  methods: {
+    login(form) {
+      this.$refs[form].validate((valid) => {
+        if(valid) {
+          console.log(this.form)
+        } else {
+          console.error(this.form)
+        }
+      })
+    }
+  }
+}
+
+</script>
+<style lang="scss">
+.login {
+  width: 100%;
+  height: 100%;
+  position: absolute;;
+  background: #017CB9;
+  .box-card {
+    width: 450px;
+    margin: 200px auto;
+    .el-card__header {
+      font-size: 34px;
+    }
+    .el-button {
+      width: 100%;
+    }
+
+  }
+
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d114c00..a849c7f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,12 +8,12 @@ export default new Router({
         {
             path: '/',
             redirect: '/login',
-            component: () => import('@/components/Login')
+            component: () => import('@/components/Login.vue')
         },
         {
             path: '/login',
             name: 'Login',
-            component: () => import('@/components/Login')  // 异步引入
+            component: () => import('@/components/Login.vue')  // 异步引入
         },
         {
             path: '/home',