1

src/前端/src/pages/Login.vue

@@ -0,0 +1,148 @@
+<template>
+	<div class="login-container-bg">
+	<div class="login-header">
+		<h1>自由同行</h1>
+	</div>
+  <div class="login-container">
+    <h2>登录</h2>
+    <form @submit.prevent="login" class="login-form">
+      <el-icon><User /></el-icon>
+	  <label for="phone">手机号：</label>
+      <input type="text" id="phone" v-model="phone" class="input-field"placeholder="世界这么大出去看看吧">
+      <br>
+	  <el-icon><Lock /></el-icon>
+      <label for="password">密码：</label>
+      <input type="password" id="password" v-model="password" class="input-field"placeholder="世界这么大出去看看吧">
+      <br>
+      <button type="submit" class="submit-button">登录</button>
+      <button @click="goToRegister" class="register-button">注册</button>
+    </form>
+  </div>
+  </div>
+</template>
+
+<style scoped>
+.login-header {  
+  /* 根据需要调整标题的样式 */  
+  text-align: center; /* 让标题居中对齐（如果水平宽度足够的话） */  
+  margin-bottom: 20px; /* 根据需要调整标题与登录盒子之间的距离 */  
+}  
+.login-container-bg {  
+  /* 为这个容器设置背景图片 */  
+  background-image: url('../data/picture/loginBackground.webp');
+  background-size: cover;  
+  background-position: center;  
+  background-repeat: no-repeat;  
+  height: 100vh; /* 根据需要设置高度，可以是视口高度 */    
+  display: flex;  
+  flex-direction: column; /* 如果需要垂直堆叠，默认如此 */  
+  align-items: center; /* 垂直居中 */  
+  justify-content: center; /* 水平居中 */  
+}  
+	
+.login-header h1 {  
+  color: #000000;  
+}
+  
+.login-form label {  
+  color: white;   
+}    
+.login-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.input-field {
+  margin: 10px 0;
+  padding: 5px;
+  width: 100%;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #003f3f;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.register-button {
+  padding: 10px 20px;
+  background-color: #ff6347;
+  color: #003f3f;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+</style>
+
+<script>
+import { login } from '../api/auth'
+import axios from "axios";
+
+export default { 
+  data() {
+    return {
+      phone: '',
+      password: ''
+    }
+  },
+  methods: {
+    login() {
+      console.log("手机号：", this.phone);
+      console.log("密码：", this.password);
+
+      axios.post('http://192.168.243.35:9000/Login/login', {
+        // 在请求体中传递用户名和密码字段
+        phone: this.phone,
+        password: this.password
+      }, {
+        // 配置跨域请求时携带 cookie
+        withCredentials: true,
+        // 设置请求头部为 JSON 格式
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {
+              if (response.data == 1) {  
+				sessionStorage.setItem('phone', this.phone);
+                // 登录成功，跳转到主页面  
+                this.$router.push('/home');   
+              }
+			  else if (response.data == 2) {
+			    alert('登录失败：账号或密码错误' );   
+			  } 
+			  else if(response.data == 3){  
+                alert('登录失败：账号未注册');  
+              }  
+			  else if(response.data == 6) {
+			    alert('登录失败：未输入账号密码');  
+			  }
+			  else if(response.data == 7) {
+			    alert('登录失败：未输入账号');  
+			  }
+			  else if(response.data == 8) {
+			    alert('登录失败：未输入密码');  
+			  }
+			  else  {
+			    alert('登录失败：未知原因');  
+			  }
+            })  
+            .catch(error => {  
+              console.error(error);  
+              // 处理网络错误或服务器错误等  
+              alert('登录失败：网络错误或服务器错误');  
+            });  
+          },  
+    goToRegister() {
+      this.$router.push('/register'); // 跳转到注册页面
+    }
+  }
+}
+</script>