ADD file via upload

src/前端/src/pages/changeInformation.vue

@@ -0,0 +1,119 @@
+<template>  
+  <div class="profile-edit">  
+    <h2>修改个人信息</h2>  
+    <form @submit.prevent="updateProfile">  
+      <div>  
+        <label for="nickname">昵称：</label>  
+        <input type="text" id="nickname" v-model="userInfo.nickname" class="input-field">  
+      </div>  
+      <div>  
+        <label for="email">邮箱：</label>  
+        <input type="email" id="email" v-model="userInfo.email" class="input-field">  
+      </div>  
+      <div>  
+        <label for="phone">手机号：</label>  
+        <input type="tel" id="phone" v-model="userInfo.phone" class="input-field">  
+      </div>  
+      <div>  
+        <label for="password">密码：</label>  
+        <input type="password" id="password" v-model="userInfo.password" class="input-field">  
+      </div>  
+      <button type="submit">保存</button>  
+    </form>  
+    <div v-if="message" class="message">{{ message }}</div>  
+  </div>  
+</template>  
+  
+<script>  
+export default {  
+  data() {  
+    return {  
+      userInfo: {  
+        nickname: '',  
+        email: '',  
+        phone: sessionStorage.getItem('phone') || '',  
+        password: '',  
+      },  
+      message: '',  
+    };  
+  },
+  mounted() {
+    this.fetchUser(this.phone);
+  },
+  methods: {  
+	fetchUser(phone) {
+	  // 从后端 API 请求
+	  axios.get(`http://192.168.243.35:9000/users/getByPhone?phone=${phone}`)
+	      .then(response => {
+			this.user = response.data
+	      })
+	      .catch(error => {
+	        console.error('Error fetching user:', error);
+	      });
+	},
+    updateProfile() {  
+      // 在这里，你应该发送一个请求到后端来更新用户信息  
+      // 这里只是模拟这个过程  
+  
+      // 假设验证和更新都成功  
+      this.message = '个人信息更新成功！';  
+  
+      // 清除表单（可选）  
+      this.userInfo = {  
+        nickname: '',  
+        email: '',  
+        phone: '',  
+        password: '',  
+      };  
+  
+      // 延迟后清除消息（可选）  
+      setTimeout(() => {  
+        this.message = '';  
+      }, 2000);  
+  
+      // 如果验证失败或更新失败，你可以设置不同的消息  
+      // 例如：this.message = '更新个人信息时出错！';  
+    },  
+  },  
+};  
+</script>  
+  
+<style scoped>  
+.profile-edit {  
+  max-width: 400px;  
+  margin: 0 auto;  
+  padding: 20px;  
+  border: 1px solid #ddd;  
+  border-radius: 5px;  
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
+}  
+  
+.input-field {  
+  margin-bottom: 10px;  
+  padding: 5px;  
+  border: 1px solid #ccc;  
+  border-radius: 3px;  
+}  
+  
+button {  
+  display: inline-block;  
+  padding: 5px 10px;  
+  margin-top: 10px;  
+  background-color: #4CAF50;  
+  color: white;  
+  border: none;  
+  border-radius: 4px;  
+  cursor: pointer;  
+  transition: background-color 0.3s;  
+}  
+  
+button:hover {  
+  background-color: #45a049;  
+}  
+  
+.message {  
+  color: #333;  
+  margin-top: 10px;  
+  text-align: center;  
+}  
+</style>