Fri May 19 16:23:00 UTC 2023 inscode

src/components/Login.vue

+<template>
+    <div class="login">
+      <h1>登录</h1>
+      <form>
+        <label>用户名:</label>
+        <input type="text" v-model="username" />
+        <label>密码:</label>
+        <input type="password" v-model="password" />
+        <button type="button" @click="login">登录</button>
+      </form>
+      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "Login",
+    data() {
+      return {
+        username: "",
+        password: "",
+        errorMessage: "",
+      };
+    },
+    methods: {
+      login() {
+        // 调用后端接口进行登录验证
+        // 假设接口返回一个对象，包含成功或失败的信息
+        let response = { success: true };
+  
+        if (response.success) {
+          // 登录成功
+          this.$router.push("/home"); // 跳转到主页
+        } else {
+          // 登录失败
+          this.errorMessage = "用户名或密码错误";
+        }
+      },
+    },
+  };
+  </script>
+  
+  <style>
+  .login {
+    margin: 50px auto;
+    width: 400px;
+    text-align: center;
+  }
+  
+  h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  label {
+    display: inline-block;
+    width: 80px;
+    text-align: right;
+    margin-right: 10px;
+  }
+  
+  input[type="text"],
+  input[type="password"] {
+    width: 200px;
+    padding: 5px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+  }
+  
+  button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #009688;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  .error-message {
+    color: red;
+    margin-top: 10px;
+  }
+  </style>
+  
\ No newline at end of file