vue1

src/App.vue

@@ -1,17 +1,18 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
+  <div id="app">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <MyComponent />
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import MyComponent from './components/MyComponent.vue';
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    MyComponent
   }
-}
+};
 </script>
 
 <style>
@@ -24,3 +25,7 @@ export default {
   margin-top: 60px;
 }
 </style>
+
+
+
+

src/components/MyComponent.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+    <form @submit.prevent="login">
+      <input  placeholder="用户名"  v-model="formData.username" required />
+      <input v-model="formData.password" type="password" placeholder="密码" />
+      <button  type="submit">登录</button>
+    </form>
+    </div>
+  </template>
+  
+  <script>
+  import axios from 'axios';
+  
+  export default {
+    data() {
+      return {
+        formData:{
+            username: '',
+            password: ''     
+        }
+        
+      };
+    },
+    methods: {
+      async login() {
+        
+        const response = await axios.post('http://127.0.0.1:8000/register', this.formData);
+        console.log(response.data); // 后端返回的数据
+
+        if(response.data.code === 200){
+            alert("登录成功")
+        }else if (response.data.code === 400){
+            alert("密码错误")
+        }else{
+            alert("用户不存在")
+        }
+            // 根据后端返回判断是否登录成功
+       
+      }
+    }
+  };
+  </script>

src/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "axios": "^1.7.7"
+  }
+}