1

1 year ago · f0a01dc52a
parent 103b91481d
commit f0a01dc52a
6 changed files with 263 additions and 131 deletions
--- a/src/前端/walktofree/src/components/Demand.vue
+++ b/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>
--- a/src/前端/walktofree/src/components/DemandList.vue
+++ b/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>
--- a/src/前端/walktofree/src/components/HelloWorld.vue
+++ b/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>
--- a/src/前端/walktofree/src/components/TheWelcome.vue
+++ b/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>
--- a/src/前端/walktofree/src/components/WelcomeItem.vue
+++ b/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>
--- a/src/前端/walktofree/src/components/searchPage.vue
+++ b/src/前端/walktofree/src/components/searchPage.vue
@ -86,6 +86,9 @@ export default {
    gotohome() {  
      this.$router.push('/home'); 
    },
    search() {
      this.$router.push('/DemandList');
    }
  }  
 }  
 </script>