vue项目：登录表单验证及基本登录功能

14_Vue项目/day-2/vue2-shop/src/api/system.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+// user = {username: 'admin', password: '123457'}
+export function login(user) {
+  return Vue.$http.post('/user/login', user);
+}

14_Vue项目/day-2/vue2-shop/src/views/Login.vue

@@ -4,26 +4,38 @@
       <div class="login-body">
         <div class="body-top">后台管理系统</div>
         <div class="body-main">
-          <el-form ref="ruleForm" label-width="80px" class="demo-ruleForm">
-            <el-form-item label="账号" prop="name">
+          <!-- 在你想获取的组件上 通过绑定ref来获取该组件实例 -->
+          <!-- ref="userForm" -->
+          <el-form
+            ref="userForm"
+            label-width="80px"
+            :model="userForm"
+            :rules="rules"
+          >
+            <el-form-item label="账号" prop="username">
               <el-input
                 prefix-icon="el-icon-user"
                 placeholder="请输入账号..."
                 size="mini"
+                autofocus
+                v-model="userForm.username"
               ></el-input>
             </el-form-item>
-            <el-form-item label="密码" prop="region">
+            <el-form-item label="密码" prop="password">
               <el-input
                 prefix-icon="el-icon-key"
                 type="password"
                 show-password
                 placeholder="请输入密码..."
                 size="mini"
+                v-model="userForm.password"
               ></el-input>
             </el-form-item>
 
             <el-form-item :style="{ textAlign: 'right' }">
-              <el-button type="primary" round size="mini">登录</el-button>
+              <el-button type="primary" round size="mini" @click="onLogin"
+                >登录</el-button
+              >
             </el-form-item>
           </el-form>
         </div>
@@ -33,8 +45,59 @@
 </template>
 
 <script>
+import { login } from '../api/system';
 export default {
   name: 'Login',
+  data() {
+    return {
+      // 添加表单数据对象
+      userForm: {
+        // 下面的属性名称 尽量和后台接口对应上
+        username: '',
+        password: '',
+      },
+      rules: {
+        username: [
+          { required: true, message: '必须输入账号！', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '必须输入密码！', trigger: 'blur' },
+          {
+            min: 3,
+            max: 16,
+            message: '录入的密码长度在3-16之间！',
+            trigger: 'blur',
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    async onLogin() {
+      // $refs属性 存储所有 当前组件通过ref绑定dom对象或者组件实例
+      // console.log(this.$refs);
+      // 1 首先验证表单 通过才可以将用户名和密码提交给服务器
+      let valid = await this.$refs.userForm.validate().catch((err) => false);
+      console.log(valid);
+      if (valid) {
+        // 如果valid == true 表示表单验证通过，然后 发起http请求将账号和密码提交给服务器
+        let result = await login(this.userForm);
+        // 如果服务器返回的数据中code属性值为 200 表示登录成功
+        let { code, msg, data } = result.data;
+        alert(msg);
+        if (code === 200) {
+          // localStorage只能存储字符串类型
+          localStorage.setItem('token', data.token);
+          localStorage.setItem('userInfo', JSON.stringify(data.userInfo));
+
+          // 将页面导航到主页
+          this.$router.push('/');
+        }
+
+        console.log(result);
+      }
+    },
+  },
 };
 </script>
 <style lang="css" scoped>
@@ -53,13 +116,12 @@ export default {
 
 .login .login-body {
   width: 400px;
-  height: 300px;
+  height: 255px;
   box-sizing: border-box;
 
   background-color: #ccc;
   border-radius: 10px;
   padding-top: 20px;
-  padding-right: 56px;
 }
 
 .login .login-body .body-top {
@@ -70,12 +132,16 @@ export default {
   margin-bottom: 20px;
 }
 
+.login .login-body .body-main {
+  padding-right: 36px;
+}
+
 .fade-down-enter-active {
-  animation: fade-down 1s;
+  animation: fade-down 0.5s ease-in-out;
 }
 
 @keyframes fade-down {
-  0% {
+  from {
     transform: translateY(-100px);
     opacity: 0;
   }
@@ -84,7 +150,7 @@ export default {
     transform: scale(1.1);
   }
 
-  100% {
+  to {
     transform: translateY(0px);
     opacity: 1;
   }