修改登录请求为magic-api后台,测试账号登录跳转

src/components/Login.vue

@@ -4,7 +4,10 @@
       <div slot="header" class="clearfix">
         <span>后台管理系统</span>
       </div>
-      <el-form label-width="80px" :model="form" ref="form">
+      <el-form
+          label-width="80px"
+          :model="form"
+          ref="form">
           <el-form-item label="用户名" prop="username"
               :rules="[
                 {required: true, message:'请输入用户名', trigger: 'blur'},
@@ -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%;

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>

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',