diff --git a/src/前端/walktofree/src/api/auth.js b/src/前端/walktofree/src/api/auth.js
index 7d0b820..6ecd1c2 100644
--- a/src/前端/walktofree/src/api/auth.js
+++ b/src/前端/walktofree/src/api/auth.js
@@ -1,6 +1,6 @@
 import axios from 'axios'
 
-const baseURL = 'https:106.52.218.118:12607'
+const baseURL = 'https:106.52.218.118:8081'
 
 export const login = (data) => {
     return axios.post(`${baseURL}/Login/login`, data)
diff --git a/src/前端/walktofree/src/components/NavigationBar.vue b/src/前端/walktofree/src/components/NavigationBar.vue
new file mode 100644
index 0000000..c3b0c86
--- /dev/null
+++ b/src/前端/walktofree/src/components/NavigationBar.vue
@@ -0,0 +1,67 @@
+<template>
+	<div class="footer-nav">
+		<div class="button-with-icon" @click="gotohome()">
+		    <el-icon><House /></el-icon>  
+		    <span>首页</span>  
+		</div>
+		<div class="button-with-icon" @click="gotomessage()()">
+		    <el-icon><ChatDotSquare /></el-icon>  
+		    <span>消息</span>  
+		</div>
+		<div class="button-with-icon" @click="gotomine()">  
+	        <el-icon><User /></el-icon>  
+	        <span>我的</span>  
+		</div> 
+	</div>  
+</template>
+
+<script>
+	export default {
+	  name: 'Home',  
+	  methods: {   
+		gotohome() {
+		    this.$router.push('/home'); 
+		},
+		gotomessage() {
+		  this.$router.push('/message'); 
+		},
+		gotomine() {
+		  this.$router.push('/mine'); 
+		},
+		gotoSearchPage() {
+		  this.$router.push('/searchPage'); 
+		},
+		gotoAddDemandPage() {
+		  this.$router.push('/addDemandPage'); 
+		},
+	  }  
+	}  
+</script>
+
+<style>
+	.footer-nav {
+	  /* 定义底部导航的样式 */  
+	  position: fixed;  
+	  bottom: 0;  
+	  left: 0;  
+	  right: 0;  
+	  display: flex;  
+	  justify-content: space-around;  
+	  padding: 10px;  
+	  background-color: #f5f5f5; /* 示例背景色 */  
+	}  
+	  
+	.button-with-icon {  
+	  /* 定义按钮的样式 */  
+	  flex: 1;  
+	  border: none;  
+	  padding: 10px;  
+	  background-color: #d5d5d5;  
+	  color: #333;  
+	  cursor: pointer;  
+	}  
+	  
+	.button-with-icon:hover {  
+	  background-color: #aaaaaa;  
+	}  
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/main.js b/src/前端/walktofree/src/main.js
index afcb891..fd2334a 100644
--- a/src/前端/walktofree/src/main.js
+++ b/src/前端/walktofree/src/main.js
@@ -5,8 +5,13 @@ import ElementPlus from 'element-plus';
 import 'element-plus/theme-chalk/index.css'; 
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
 
 const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
 app.use(ElementPlus);
 app.use(router);
 app.component('VueDatePicker', VueDatePicker);
diff --git a/src/前端/walktofree/src/pages/Communication.vue b/src/前端/walktofree/src/pages/Communication.vue
index 5626e2c..03488e0 100644
--- a/src/前端/walktofree/src/pages/Communication.vue
+++ b/src/前端/walktofree/src/pages/Communication.vue
@@ -14,10 +14,12 @@
       </div>
     </div>
   </div>
+  <div><NavigationBar /></div>
 </template>
 
 <script>
 import axios from 'axios';
+import NavigationBar from '../components/NavigationBar.vue';
 
 export default {
   data() {
@@ -26,6 +28,9 @@ export default {
       newMessage: '',
     };
   },
+  components: {
+      NavigationBar
+  },
   methods: {
     async fetchMessages() {
       try {
diff --git a/src/前端/walktofree/src/pages/Evaluation.vue b/src/前端/walktofree/src/pages/Evaluation.vue
index d655dc2..f7b774e 100644
--- a/src/前端/walktofree/src/pages/Evaluation.vue
+++ b/src/前端/walktofree/src/pages/Evaluation.vue
@@ -36,7 +36,7 @@ export default {
   },
   methods: {
     send() {
-      axios.post('http://106.52.218.118:12607/evaluate/addEvaluation', {
+      axios.post('http://106.52.218.118:8081/evaluate/addEvaluation', {
         eid : 1,
         satisfaction :this.satisfaction,
         ebody :this.ebody,
diff --git a/src/前端/walktofree/src/pages/EvaluationEdit.vue b/src/前端/walktofree/src/pages/EvaluationEdit.vue
new file mode 100644
index 0000000..1b42ac9
--- /dev/null
+++ b/src/前端/walktofree/src/pages/EvaluationEdit.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="user-feedback">
+    <!-- 输入评价 -->
+    <div class="feedback-input">
+      <h2>修改你的评价</h2>
+      <form>
+        <textarea id="ebody" v-model.trim="evaluation.ebody" rows="4" cols="50"></textarea>
+        <button type="submit" @click="send">发布评价</button>
+      </form>
+    </div>
+    <el-space direction="vertical">
+      <el-row>
+        <el-text>星级评价</el-text>
+        <el-rate class="ml-1"
+                 v-model="evaluation.satisfaction"
+                 :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
+                 show-text
+                 @change="handleRateChange"
+                 clearable />
+      </el-row>
+    </el-space>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      ebody: '',
+      satisfaction:'',
+      ct:'',
+      eid: 1, // 添加一个用于存储 eid 的变量
+      evaluation: {}, // 添加一个用于存储评价信息的变量
+    };
+  },
+  methods: {
+    send() {
+      axios.post('http://106.52.218.118:8081/evaluate/editEvaluation', {
+        eid: this.eid, // 将 eid 包含在请求中
+        satisfaction: this.evaluation.satisfaction,
+        ct:this.evaluation.ct,
+        ebody: this.evaluation.ebody,
+      }, {
+        withCredentials: true,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }).then(response => {
+        // 处理成功发送评价的情况
+        console.log('评价发送成功');
+      }).catch(error => {
+        // 处理发送评价失败的情况
+        console.error('评价发送失败', error);
+      });
+    },
+    fetchEvaluation() {
+      axios.get(`http://106.52.218.118:8081/evaluate/getEvaluation?eid=${this.eid}`)
+          .then(response => {
+            this.evaluation = response.data;// 将获取到的评价信息存储到 evaluation 变量中
+          })
+          .catch(error => {
+            console.error('获取评价信息失败', error);
+          });
+    },
+    handleRateChange(satisfaction) {
+      this.evaluation.satisfaction = satisfaction; // 更新星级值
+    }
+  },
+  mounted() {
+    this.fetchEvaluation(); // 在组件挂载时调用 fetchEvaluation 方法获取评价信息
+  }
+};
+</script>
+
+<style scoped>
+.user-feedback {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.feedback-input {
+  margin-bottom: 20px;
+}
+
+textarea {
+  width: 100%;
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #28a7a3;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #003f3f;
+  cursor: pointer;
+}
+
+.submitted-feedback {
+  border-top: 1px solid #a6cfee;
+  padding-top: 20px;
+}
+
+.feedback-item {
+  background-color: #abd4ee;
+  border: 1px solid #c2f1fb;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.feedback-item p {
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/EvaluationHistory.vue b/src/前端/walktofree/src/pages/EvaluationHistory.vue
new file mode 100644
index 0000000..f79cdd8
--- /dev/null
+++ b/src/前端/walktofree/src/pages/EvaluationHistory.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/EvaluationList.vue b/src/前端/walktofree/src/pages/EvaluationList.vue
new file mode 100644
index 0000000..f5d9a2e
--- /dev/null
+++ b/src/前端/walktofree/src/pages/EvaluationList.vue
@@ -0,0 +1,47 @@
+<template>
+  <el-button @click="add">Add Item</el-button>
+  <el-button @click="onDelete">Delete Item</el-button>
+  <el-scrollbar max-height="800px">
+    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
+      {{ item }}
+    </p>
+    <p v-for="review in reviews" :key="review.id" class="scrollbar-demo-item">
+      {{ review.content }}
+    </p>
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+
+const count = ref(3)
+const reviews = ref([
+  { id: 1, content: 'Great product!' },
+  { id: 2, content: 'Fast shipping!' },
+  { id: 3, content: 'Excellent customer service!' }
+])
+
+const add = () => {
+  count.value++
+}
+const onDelete = () => {
+  if (count.value > 0) {
+    count.value--
+  }
+}
+</script>
+
+<style scoped>
+.scrollbar-demo-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+</style>
\ No newline at end of file
diff --git a/src/前端/walktofree/src/pages/HomePage.vue b/src/前端/walktofree/src/pages/HomePage.vue
index f37806f..2bdef37 100644
--- a/src/前端/walktofree/src/pages/HomePage.vue
+++ b/src/前端/walktofree/src/pages/HomePage.vue
@@ -14,12 +14,9 @@
 	      <img src="../data/picture/background.png" alt="图片描述" class="search-image">  
 	</div>  
   
-    <div class="footer-nav">  
-      <button>首页</button>  
-      <button @click="gotomessage()">消息</button>  
-      <button @click="gotomine()">我的</button>  
-    </div>  
-  </div>  
+    <div><NavigationBar /></div> 
+  </div>
+	
 </template>  
   
 <style scoped>  
@@ -84,38 +81,15 @@
 	color: #333;  
 	cursor: pointer;  
 } 
- 
-.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 NavigationBar from '../components/NavigationBar.vue';
 export default {  
-  name: 'Home',  
+  name: 'Home',
+	components: {
+	    NavigationBar 
+	},
   methods: {   
 	gotomessage() {
 	  this.$router.push('/message'); 
diff --git a/src/前端/walktofree/src/pages/Login.vue b/src/前端/walktofree/src/pages/Login.vue
index 28ceb62..34c4ade 100644
--- a/src/前端/walktofree/src/pages/Login.vue
+++ b/src/前端/walktofree/src/pages/Login.vue
@@ -65,7 +65,7 @@ export default {
       console.log("手机号：", this.phone);
       console.log("密码：", this.password);
 
-      axios.post('http://106.52.218.118:12607/Login/login', {
+      axios.post('http://106.52.218.118:8081/Login/login', {
         // 在请求体中传递用户名和密码字段
         phone: this.phone,
         password: this.password
diff --git a/src/前端/walktofree/src/pages/Register.vue b/src/前端/walktofree/src/pages/Register.vue
index f451a0b..ecc5647 100644
--- a/src/前端/walktofree/src/pages/Register.vue
+++ b/src/前端/walktofree/src/pages/Register.vue
@@ -84,7 +84,7 @@ export default {
 	  console.log("身份证号：",this.IDcard);
 	  console.log("昵称：",this.nickname);
 	  
-      axios.post('http://106.52.218.118:12607/Login/register', {
+      axios.post('http://106.52.218.118:8081/Login/register', {
         // 在请求体中传递用户名和密码字段
         phone: this.phone,
         password: this.password,
diff --git a/src/前端/walktofree/src/pages/addDemand.vue b/src/前端/walktofree/src/pages/addDemand.vue
index e05152e..e7386ce 100644
--- a/src/前端/walktofree/src/pages/addDemand.vue
+++ b/src/前端/walktofree/src/pages/addDemand.vue
@@ -25,7 +25,7 @@ const getProvinceList = async () => {
 const publish = () => {  
 // 在这里编写发布时需要执行的逻辑  
 	if(city.value!=''){
-		axios.post(`http://106.52.218.118:12607/users/pupdate`,{city:city.value,time:rangeValue.value,remark:remark.value})
+		axios.post(`http://106.52.218.118:8081/users/pupdate`,{city:city.value,time:rangeValue.value,remark:remark.value})
 	    .then(response => {
 	      alert("发布成功");
 	    })
diff --git a/src/前端/walktofree/src/pages/mine.vue b/src/前端/walktofree/src/pages/mine.vue
index ee48ea2..94b7058 100644
--- a/src/前端/walktofree/src/pages/mine.vue
+++ b/src/前端/walktofree/src/pages/mine.vue
@@ -33,11 +33,7 @@
       <button @click="togglePhoneInput">更换</button>
     </div>
 	
-	<div class="footer-nav">
-	  <button @click="gotohome()">首页</button>  
-	  <button @click="gotomessage()">消息</button>  
-	  <button>我的</button>  
-	</div>
+	<div><NavigationBar /></div>
 	
   </div>
 </template>
@@ -66,37 +62,11 @@ button {
     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';
-
+import NavigationBar from '../components/NavigationBar.vue';
 
 export default {
   data() {
@@ -113,16 +83,16 @@ export default {
 	  status: 0,
     };
   },
-  /*computed: {  
-      ...mapGetters(['getPhone']) 
-    },*/
+  components: {
+      NavigationBar 
+  },
   created() {
     this.fetchUser(this.phone);
   },
   methods: {
     fetchUser(phone) {
       // 从后端 API 请求
-      axios.get(`http://106.52.218.118:12607/users/getByPhone?phone=${phone}`)
+      axios.get(`http://106.52.218.118:8081/users/getByPhone?phone=${phone}`)
           .then(response => {
             this.user = response.data;
           })
@@ -137,7 +107,7 @@ export default {
 	},
 	updateNickname(){
 		this.user.nickname = this.nickname;
-		axios.post(`http://106.52.218.118:12607/users/pupdate`,{user:this.user})
+		axios.post(`http://106.52.218.118:8081/users/pupdate`,{user:this.user})
 	      .then(response => {
 	        this.user.nickname = this.nickname;
 	        this.toggleNicknameInput(); // 切换回展示模式
@@ -153,7 +123,7 @@ export default {
     updateEmail() {
       // 这里发送请求更新用户邮箱
 	  this.user.email = this.email;
-      axios.post(`http://106.52.218.118:12607/users/pupdate`,{user:this.user})
+      axios.post(`http://106.52.218.118:8081/users/pupdate`,{user:this.user})
           .then(response => {
             this.user.email = this.email;
             this.toggleEmailInput(); // 切换回展示模式
@@ -168,7 +138,7 @@ export default {
     },
     updatePhone(){
 		this.user.phone = this.phone;
-      axios.post(`http://106.52.218.118:12607/users/pupdate`,{user:this.user})
+      axios.post(`http://106.52.218.118:8081/users/pupdate`,{user:this.user})
           .then(response => {
 			sessionStorage.setItem('phone', this.phone);
             this.user.phone = this.phone;
@@ -178,12 +148,12 @@ export default {
             console.error('Error updating phone:', error);
           });
     },
-	gotohome() {
-	  this.$router.push('/home'); 
-	},
-	gotomessage() {
-	  this.$router.push('/message'); 
-	},
+	// gotohome() {
+	//   this.$router.push('/home');
+	// },
+	// gotomessage() {
+	//   this.$router.push('/message');
+	// },
   }
 };
 </script>
diff --git a/src/前端/walktofree/src/router/index.js b/src/前端/walktofree/src/router/index.js
index afc07c4..bab6f46 100644
--- a/src/前端/walktofree/src/router/index.js
+++ b/src/前端/walktofree/src/router/index.js
@@ -11,6 +11,8 @@ import addDemand from "@/pages/addDemand.vue";
 import DemandList from "@/pages/DemandList.vue";
 import Evaluation from "@/pages/Evaluation.vue";
 import SecurityVerification from "@/pages/SecurityVerification.vue";
+import EvaluationEdit from "@/pages/EvaluationEdit.vue";
+import EvaluationList from "@/pages/EvaluationList.vue";
 
 const routes = [  
     { path: '/', redirect: '/login' },  // 重定向到/login路径  
@@ -25,7 +27,9 @@ const routes = [
     { path: '/pay', component:Pay},
     { path: '/demandlist', component:DemandList},
     { path: '/evaluation', component:Evaluation},
-    { path: '/SecurityVerification', component:SecurityVerification}
+    { path: '/SecurityVerification', component:SecurityVerification},
+    { path: '/EvaluationEdit', component:EvaluationEdit},
+    { path: '/EvaluationList', component:EvaluationList}
 ];  
   
 const router = createRouter({