新的页面代码

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

@@ -0,0 +1,131 @@
+<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/Evaluation.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="user-feedback">
+    <!-- 输入评价 -->
+    <div class="feedback-input">
+      <h2>输入评价</h2>
+      <form @submit.prevent="submitFeedback">
+        <textarea id="feedback" v-model.trim="feedback" rows="4" cols="50" placeholder="在这里输入您的评价"></textarea>
+        <button type="submit">发布评价</button>
+      </form>
+    </div>
+
+    <!-- 已发布评价 -->
+    <div class="submitted-feedback" v-if="submittedFeedback">
+      <h2>已发布评价</h2>
+      <div class="feedback-item">
+        <p>{{ submittedFeedback }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  data() {
+    return {
+      feedback: '',
+      submittedFeedback: ''
+    };
+  },
+  methods: {
+    submitFeedback() {
+      if (!this.feedback.trim()) {
+        return;
+      }
+
+      axios.post('/api/feedback', { feedback: this.feedback.trim() })
+          .then(response => {
+            this.submittedFeedback = response.data.feedback;
+            this.feedback = ''; // 清空输入框
+          })
+          .catch(error => {
+            console.error('Error submitting feedback:', error);
+          });
+    }
+  }
+};
+</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 #ccc;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 8px 16px;
+  font-size: 16px;
+  border: none;
+  border-radius: 4px;
+  background-color: #007bff;
+  color: #fff;
+  cursor: pointer;
+}
+
+.submitted-feedback {
+  border-top: 1px solid #ccc;
+  padding-top: 20px;
+}
+
+.feedback-item {
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.feedback-item p {
+  margin: 0;
+}
+</style>