diff --git a/src/前端/src/components/return.vue b/src/前端/src/components/return.vue
new file mode 100644
index 0000000..7ccc363
--- /dev/null
+++ b/src/前端/src/components/return.vue
@@ -0,0 +1,32 @@
+<script>
+export default {  
+  name: 'return',  
+  methods: {   
+    gotohome() {  
+      this.$router.push('/home'); 
+    },
+  }  
+}  
+</script>
+<template>
+	<div class="return">  
+	      <button class="return-button" @click="gotohome()">返回</button>  
+	</div>
+</template>
+<style>.return-button {  
+/* 定义返回按钮的样式 */  
+	position: fixed; /* 使按钮位置固定 */  
+	top: 10px; 
+	left: 10px; 
+	margin: 0;   
+	padding: 10px 20px;  
+	border: none;  
+	border-radius: 5px;  
+	background-color: #ccc;  
+	color: #333;  
+	cursor: pointer; 
+	 
+.return-button:hover {  
+	  background-color: #aaaaaa;  
+	} 	 
+} </style>
\ No newline at end of file
diff --git a/src/前端/src/pages/addDemand.vue b/src/前端/src/pages/addDemand.vue
new file mode 100644
index 0000000..1a5f1e1
--- /dev/null
+++ b/src/前端/src/pages/addDemand.vue
@@ -0,0 +1,114 @@
+<script lang="ts" setup>  
+import { ref, onBeforeMount, watch, watchEffect } from 'vue'  
+import axios from 'axios'  
+import { ElSelect, ElOption } from 'element-plus'  
+import { AreaList } from '../components/types'
+import { format, addDays } from 'date-fns'
+import Return from '../components/return.vue'
+
+const province = ref('')
+const city = ref('')
+const area = ref('')
+const remark = ref('')
+
+const provinceList = ref<AreaList[]>([])
+const cityList = ref<AreaList[]>([])
+const areaList = ref<AreaList[]>([])
+const rangeValue = ref<string[]>([format(new Date(), 'yyyy-MM-dd'), format(addDays(new Date(), 1), 'yyyy-MM-dd')])
+
+// 获取到JSON数据
+const getProvinceList = async () => {  
+  const res = await axios.get<AreaList[]>('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')  
+  provinceList.value = res.data  
+  console.log(provinceList.value)  
+}
+const publish = () => {  
+// 在这里编写发布时需要执行的逻辑  
+	if(city.value!=''){
+		axios.post(`http://192.168.243.35:9000/SendDemand/register`,{phone:sessionStorage.getItem('phone') || '',city:city.value,time:rangeValue.value,remark:remark.value})
+	    .then(response => {
+	      alert("发布成功")
+	    })
+	    .catch(error => {
+	      console.error('发布失败', error);
+	    });}
+	else{
+		alert("请输入目的地")
+	}
+};
+onBeforeMount(async()=>{
+  getProvinceList()
+})
+
+watchEffect(() => {
+  console.log('rangeValue:', rangeValue.value)
+})
+// 监听省份的值改变调用的函数
+watch(province, (newValue, oldValue) => {  
+  const matchedProvince = provinceList.value.find(item => item.name === newValue)  
+  if (matchedProvince) {  
+    cityList.value = matchedProvince.areaList  
+    city.value = '' // 重置城市选择  
+    areaList.value = [] // 重置区县选项  
+    console.log(cityList.value)  
+  }  
+})  
+// 监听 市 的值改变调用的函数
+watch(city, (newValue, oldValue) => {  
+  const matchedCity = cityList.value.find(item => item.name === newValue)  
+  if (matchedCity) {  
+    areaList.value = matchedCity.areaList  
+    area.value = '' // 重置区县选择  
+    console.log(areaList.value)  
+  }  
+})  
+</script>
+<template>
+	<div>
+	      <Return></Return> 
+	</div>
+	
+	<div><h1>发布出行规划</h1></div>
+	<div class="addDemand-container">
+		<div><h3>选择出行城市：</h3></div>
+		<div style="display: flex;">
+			<p style="color: red;">*</p>
+			<el-select v-model="province" clearable placeholder="省份">  
+				<el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name" />  
+			</el-select> 
+			<el-select v-model="city" clearable placeholder="城市">
+				<el-option v-for="item in cityList" :key="item.code" :label="item.name" :value="item.name" />
+			</el-select>
+		</div>
+		<div><h3>选择出行时间：</h3></div>
+		<div>
+			<VueDatePicker
+			  placeholder="请选择出行时间"
+			  range
+				:min-date="new Date()"
+			  format="yyyy-MM-dd"
+			  :width="280"
+			  v-model="rangeValue" />
+		</div>
+		
+		<div><h3>填写备注信息：</h3></div>
+		
+		<div>
+			<label for="user-input">备注信息:</label>  
+			<input type="text" id="remark" v-model="remark" placeholder="">  
+		</div>
+		
+		<el-button type="primary" @click="publish">发布</el-button>
+	</div>
+</template>
+	
+<style>
+.addDemand-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 30px;
+  border: 1px solid #000000;
+  border-radius: 5px;
+  text-align: center;
+}	
+</style>
\ No newline at end of file
diff --git a/src/前端/src/router/index.js b/src/前端/src/router/index.js
new file mode 100644
index 0000000..ff445f5
--- /dev/null
+++ b/src/前端/src/router/index.js
@@ -0,0 +1,58 @@
+import { createWebHistory, createRouter } from 'vue-router';  
+import Login from '../pages/Login.vue';  
+import Register from '../pages/Register.vue';  
+import Home from '../pages/HomePage.vue'; 
+import Mine from '../pages/mine.vue';
+import SearchPage from '../pages/searchPage.vue';
+import Test from '../pages/test.vue'
+import Communication from '../pages/Communication.vue'
+import Pay from '../pages/Pay.vue';
+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 RegisterGuide from '../pages/registerGuide.vue';
+import AddServe from '../pages/addServe.vue';
+import EvaluationList from '../pages/EvaluationList.vue';
+import Order from '../pages/order.vue';
+import MatchDetail from'../pages/DemandMatch.vue'
+import ChangeInformation from'../pages/changeInformation.vue'
+import ServerList from'../pages/serverList.vue'
+import ServerDetail from'../pages/serverDetail.vue'
+import ServerMatch from'../pages/serverMatch.vue'
+import DemandMatched from'../pages/demandMatched.vue'
+import ServerMatched from'../pages/serverMatched.vue'
+
+const routes = [  
+    { path: '/', redirect: '/login' },  // 重定向到/login路径  
+    { path: '/login', component: Login },  
+    { path: '/register', component: Register },  
+    { path: '/home', component: Home },
+	{ path: '/mine', component: Mine },
+	{ path: '/searchPage', component: SearchPage },
+	{ path: '/addDemandPage', component: AddDemand },
+	{ path: '/test', component: Test },
+	{ path: '/message', component: Communication },
+	{ path: '/pay', component:Pay},
+	{ path: '/demandlist', name: 'DemandList', component:DemandList},
+	{ path: '/evaluation/:orderId',name: 'Evaluation', component:Evaluation,props: (route) => ({ orderId: route.params.orderId })},
+	{ path: '/SecurityVerification', component:SecurityVerification},
+	{ path: '/registerGuide', component:RegisterGuide},
+	{ path:'/addServe', component:AddServe},
+	{ path: '/evaluationList', component:EvaluationList},
+	{ path: '/order/:orderId', name: 'OrderDetails', component: Order, props: (route) => ({ orderId: route.params.orderId })},  
+	{ path: '/MatchDetail/:orderId', name: 'MatchDetail',component: MatchDetail,props: (route) => ({ orderId: route.params.orderId })},   
+	{ path: '/changeInformation', component:ChangeInformation},
+	{ path: '/serverList', component:ServerList},
+	{ path: '/serverDetail/:serverId', name: 'ServerDetail',component: ServerDetail,props: (route) => ({ serverId: route.params.serverId })},
+	{ path: '/serverMatch/:serverId', name: 'ServerMatch',component: ServerMatch,props: (route) => ({ serverId: route.params.serverId })},
+	{ path: '/DemandMatched/:orderId', name: 'DemandMatched',component: DemandMatched,props: (route) => ({ orderId: route.params.orderId })},
+	{ path: '/ServerMatched/:serverId', name: 'ServerMatched',component: ServerMatched,props: (route) => ({ serverId: route.params.serverId })},
+];  
+  
+const router = createRouter({  
+    history: createWebHistory(),  
+    routes  
+});  
+  
+export default router;
\ No newline at end of file