From 3f241a6a466421483e0ce27824477d7acf769a0c Mon Sep 17 00:00:00 2001
From: zcx <1078327420@qq.com>
Date: Sat, 11 May 2024 16:03:53 +0800
Subject: [PATCH] 1

---
 .../walktofree/src/components/Login.vue       | 110 ++++++++++
 .../walktofree/src/components/Register.vue    |  97 +++++++++
 src/前端/walktofree/src/components/mine.vue | 189 ++++++++++++++++++
 3 files changed, 396 insertions(+)
 create mode 100644 src/前端/walktofree/src/components/Login.vue
 create mode 100644 src/前端/walktofree/src/components/Register.vue
 create mode 100644 src/前端/walktofree/src/components/mine.vue

diff --git a/src/前端/walktofree/src/components/Login.vue b/src/前端/walktofree/src/components/Login.vue
new file mode 100644
index 0000000..2eab151
--- /dev/null
+++ b/src/前端/walktofree/src/components/Login.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="login-container">
+    <h1>登录页面</h1>
+    <form @submit.prevent="login" class="login-form">
+      <label for="username">用户名：</label>
+      <input type="text" id="username" v-model="username" class="input-field">
+      <br>
+      <label for="password">密码：</label>
+      <input type="password" id="password" v-model="password" class="input-field">
+      <br>
+      <button type="submit" class="submit-button">登录</button>
+      <button @click="goToRegister" class="register-button">注册</button>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #28a7a3;
+  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 {
+      username: '',
+      password: ''
+    }
+  },
+  methods: {
+    login() {
+      console.log("用户名：", this.username);
+      console.log("密码：", this.password);
+
+      axios.post('http://192.168.254.35:8080/Login/login', {
+        // 在请求体中传递用户名和密码字段
+        username: this.username,
+        password: this.password
+      }, {
+        // 配置跨域请求时携带 cookie
+        withCredentials: true,
+        // 设置请求头部为 JSON 格式
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      .then(response => {  
+              // 假设服务器在登录成功时返回一个包含 status 或其他表示成功状态的字段  
+              if (response.data == 1) {  
+                // 登录成功，跳转到主页面  
+                this.$router.push('/home');   
+              }
+			  else if (response.data == 2) {
+			    alert('登录失败：账号或密码错误' );   
+			  } 
+			  else if(response.data == 3){  
+                alert('登录失败：账号未注册');  
+              }  
+			  else if(response.data == 0) {
+			    alert('登录失败：未知原因');  
+			  }
+			  else  {
+			    alert('登录失败：未知原因');  
+			  }
+            })  
+            .catch(error => {  
+              console.error(error);  
+              // 处理网络错误或服务器错误等  
+              alert('登录失败：网络错误或服务器错误');  
+            });  
+          },  
+    goToRegister() {
+      this.$router.push('/register'); // 跳转到注册页面
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/components/Register.vue b/src/前端/walktofree/src/components/Register.vue
new file mode 100644
index 0000000..b4e724d
--- /dev/null
+++ b/src/前端/walktofree/src/components/Register.vue
@@ -0,0 +1,97 @@
+<template>  
+  <div class="register-container">  
+    <h1>注册页面</h1>  
+    <form @submit.prevent="register" class="register-form">  
+      <label for="username">用户名：</label>  
+      <input type="text" id="username" v-model="username" class="input-field">  
+      <br>  
+      <label for="password">密码：</label>  
+      <input type="password" id="password" v-model="password" class="input-field">  
+      <br>  
+      
+      <button type="submit" class="submit-button">注册</button>
+	  <button class="return-button" @click="gotoLogin()">返回登录</button>   
+    </form>  
+  </div>  
+</template>  
+  
+<style scoped>  
+.register-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 30px;
+  border: 1px solid #cccc7b;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.input-field {
+  margin: 10px 0;
+  padding: 5px;
+  width: 100%;
+}
+
+.submit-button {
+  padding: 10px 20px;
+  background-color: #28a7a3;
+  color: #abd4ee;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.return-button {  
+  padding: 10px 20px;  
+  background-color: #ff6347; /* 例如，设置为红色 */  
+  color: white;  
+  border: none;  
+  border-radius: 5px;  
+  cursor: pointer;  
+  margin-top: 10px; /* 可以添加一些上边距来分隔按钮 */  
+}  
+</style>
+
+<script>
+import { register } from '../api/auth'
+import axios from "axios";
+
+export default {
+  data() {
+    return {
+      username: '',
+      password: ''
+    }
+  },
+  methods: {
+    register() {
+      console.log("用户名：", this.username);
+      console.log("密码：", this.password);
+
+      axios.post('http://192.168.254.35:8080/Login/register', {
+        // 在请求体中传递用户名和密码字段
+        username: this.username,
+        password: this.password
+      }, {
+        // 配置跨域请求时携带 cookie
+        withCredentials: true,
+        // 设置请求头部为 JSON 格式
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+          .then(response => {
+            console.log(response.data)
+            // 处理注册成功后的逻辑
+            alert(response.data);
+          })
+          .catch(error => {
+            console.error(error)
+            // 处理注册失败后的逻辑
+            alert(response.data);
+          })
+    },
+	gotoLogin(){
+		this.$router.push('/login');
+	},
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/components/mine.vue b/src/前端/walktofree/src/components/mine.vue
new file mode 100644
index 0000000..faa3a24
--- /dev/null
+++ b/src/前端/walktofree/src/components/mine.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="profile">
+    <h2>个人主页</h2>
+	
+	<div v-if="showNicknameInput">
+	  <label for="nickname">昵称：</label>
+	  <input type="nickname" id="nickname" v-model="nickname" class="input-field">
+	  <button @click="updateNickname">保存</button>
+	</div>
+	<div v-else>
+	  <p>昵称：{{ user.nickname }}</p>
+	  <button @click="toggleNicknameInput">更换</button>
+	</div>
+	
+    <h1>{{ user.name }}</h1>
+	
+    <p>身份证号：{{user.IDCard}}</p>
+	
+    <div v-if="showEmailInput">
+      <label for="email">邮箱：</label>
+      <input type="email" id="email" v-model="email" class="input-field">
+      <button @click="updateEmail">保存</button>
+    </div>
+    <div v-else>
+      <p>邮箱：{{ user.email }}</p>
+      <button @click="toggleEmailInput">编辑</button>
+    </div>
+
+    <div v-if="showPhoneInput">
+      <label for="PhoneNumber">手机号：</label>
+      <input type="phone" id="phone" v-model="phone" class="input-field">
+      <button @click="updatePhone">保存</button>
+    </div>
+    <div v-else>
+      <p>手机号：{{ user.phone }}</p>
+      <button @click="togglePhoneInput">更换</button>
+    </div>
+	
+	<div class="footer-nav">
+	  <button @click="gotohome()">首页</button>  
+	  <button @click="gotomessage()">消息</button>  
+	  <button>我的</button>  
+	</div>
+	
+  </div>
+</template>
+
+<style scoped>
+/* 在这里添加样式 */
+.profile {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.input-field {
+  margin-bottom: 10px;
+}
+
+button {
+  margin-top: 10px;
+}
+
+.home-container {  
+    /* 添加你的样式 */  
+    text-align: center;  
+    padding: 20px;  
+    /* 可能需要为内容添加一些底部空间以容纳底部导航 */  
+    padding-bottom: 50px;  
+}  
+    
+.footer-nav {  
+    /* 定义底部导航的样式 */  
+    position: fixed;  
+    bottom: 0;  
+    left: 0;  
+    right: 0;  
+    display: flex;  
+    justify-content: space-around;  
+    padding: 10px;  
+    background-color: #f5f5f5; /* 示例背景色 */  
+}  
+    
+.footer-nav button {  
+    /* 定义按钮的样式 */  
+    flex: 1;  
+    border: none;  
+    padding: 10px;  
+    background-color: #ccc;  
+    color: #333;  
+    cursor: pointer;  
+}  
+    
+.footer-nav button:hover {  
+    /* 按钮点击时的样式 */  
+    background-color: #bbb;  
+}
+</style>
+
+<script>
+import axios from 'axios';
+
+export default {
+  props: ['phone'],
+  data() {
+    return {
+      user: {},
+	  nickname:'',
+	  showNicknameInput: false,
+      email: '',
+      showEmailInput: false,
+      phone: '',
+      showPhoneInput: false,
+      IDCard: '',
+      createtime: '',
+	  status: 0,
+    };
+  },
+  created() {
+    // 在组件创建时根据账号获取用户信息
+    this.fetchUser(this.phone);
+  },
+  methods: {
+    fetchUser(phone) {
+      // 从后端 API 请求
+      axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`)
+          .then(response => {
+			alert(response.data);
+            this.user = response.data;
+          })
+          .catch(error => {
+            console.error('Error fetching user:', error);
+          });
+    },
+	
+	toggleNicknameInput(){
+	  this.showNicknameInput = !this.showNicknameInput;
+	  this.nickname = this.user.nickname;
+	},
+	updateNickname(){
+	  axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { nickname: this.nickname })
+	      .then(response => {
+	        this.user.nickname = this.nickname;
+	        this.toggleNicknameInput(); // 切换回展示模式
+	      })
+	      .catch(error => {
+	        console.error('Error updating nickname:', error);
+	      });
+	},
+    toggleEmailInput() {
+      this.showEmailInput = !this.showEmailInput;
+      this.email = this.user.email;// 在切换到编辑模式时显示当前邮箱地址
+    },
+    updateEmail() {
+      // 这里发送请求更新用户邮箱
+      axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { email: this.email })
+          .then(response => {
+            this.user.email = this.email;
+            this.toggleEmailInput(); // 切换回展示模式
+          })
+          .catch(error => {
+            console.error('Error updating email:', error);
+          });
+    },
+    togglePhoneInput(){
+      this.showPhoneInput = !this.showPhoneInput;
+      this.phone = this.user.phone;
+    },
+    updatePhone(){
+      axios.get(`http://192.168.254.35:8080/users/getByPhone?phone=15616168609`, { phone: this.phone })
+          .then(response => {
+			alert(this.phone);
+            this.user.phone = this.phone;
+            this.togglePhoneInput(); // 切换回展示模式
+          })
+          .catch(error => {
+            console.error('Error updating phone:', error);
+          });
+    },
+	gotohome() {
+	  this.$router.push('/home'); 
+	},
+	gotomessage() {
+	  this.$router.push('/message'); 
+	},
+  }
+};
+</script>
+