1

src/前端/walktofree/src/components/Demand.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="task-app">
-    <h1>任务发布和展示</h1>
-
-    <!-- 发布任务表单 -->
-    <div class="task-form-container">
-      <h2>发布任务：</h2>
-      <form @submit.prevent="submitTask" class="task-form">
-        <label for="taskInput">任务：</label>
-        <input type="text" id="taskInput" v-model.trim="newTask" placeholder="请输入任务内容">
-        <button type="submit" :disabled="!newTask.trim()">发布任务</button>
-      </form>
-    </div>
-
-    <!-- 展示任务列表 -->
-    <div class="task-list-container">
-      <h2>已发布任务：</h2>
-      <div v-if="tasks.length > 0" class="task-list">
-        <ul>
-          <li v-for="(task, index) in tasks" :key="index">{{ task }}</li>
-        </ul>
-      </div>
-      <div v-else class="no-tasks">
-        <p>暂无任务</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios';
-
-export default {
-  data() {
-    return {
-      tasks: [],
-      newTask: ''
-    };
-  },
-  mounted() {
-    this.fetchTasks();
-  },
-  methods: {
-    fetchTasks() {
-      axios.get('/api/tasks')
-          .then(response => {
-            this.tasks = response.data.tasks;
-          })
-          .catch(error => {
-            console.error('Error fetching tasks:', error);
-          });
-    },
-    submitTask() {
-      if (!this.newTask.trim()) return;
-
-      axios.post('/api/tasks', { task: this.newTask.trim() })
-          .then(() => {
-            this.newTask = ''; // 清空输入框
-            this.fetchTasks(); // 重新获取任务列表
-          })
-          .catch(error => {
-            console.error('Error submitting task:', error);
-          });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.task-app {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-.task-form-container {
-  border: 2px solid #007bff;
-  border-radius: 8px;
-  padding: 10px;
-  margin-bottom: 20px;
-}
-
-.task-list-container {
-  border: 2px solid #28a745;
-  border-radius: 8px;
-  padding: 10px;
-}
-
-.task-form {
-  margin-bottom: 20px;
-}
-
-.task-form input[type="text"] {
-  width: calc(100% - 80px);
-  padding: 8px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-
-.task-form button {
-  padding: 8px 16px;
-  font-size: 16px;
-  border: none;
-  border-radius: 4px;
-  background-color: #007bff;
-  color: #fff;
-  cursor: pointer;
-}
-
-.task-form button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.task-list {
-  margin-top: 20px;
-}
-
-.no-tasks {
-  color: #888;
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .task-form input[type="text"] {
-    width: 100%;
-  }
-}
-</style>

src/前端/walktofree/src/components/DemandList.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <h1>任务列表</h1>
+    <div v-for="task in tasks" :key="task.id" class="task-item">
+      <div>{{ task.title }}</div>
+      <div>{{ task.description }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tasks: []
+    };
+  },
+  mounted() {
+    this.fetchTasks();
+  },
+  methods: {
+    async fetchTasks() {
+      try {
+        const response = await fetch('http://localhost:3000/tasks');
+        const data = await response.json();
+        this.tasks = data;
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }
+};
+</script>
+
+<style>
+.task-item {
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin: 10px 0;
+}
+</style>

src/前端/walktofree/src/components/HelloWorld.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>

src/前端/walktofree/src/components/TheWelcome.vue

@@ -0,0 +1,88 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>

src/前端/walktofree/src/components/WelcomeItem.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+  position: relative;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>

src/前端/walktofree/src/components/searchPage.vue

@@ -86,6 +86,9 @@ export default {
     gotohome() {  
       this.$router.push('/home'); 
     },
+    search() {
+      this.$router.push('/DemandList');
+    }
   }  
 }  
 </script>