Uniapp Vue3 Post 添加页面：使用 Composition API 实现表单提交

<template>
  <div class='post-add'>
    <form @submit.prevent='submitForm'>
      <label for='title'>Title:</label>
      <input type='text' id='title' v-model='title'>
      <label for='content'>Content:</label>
      <textarea id='content' v-model='content'></textarea>
      <button type='submit'>Submit</button>
    </form>
  </div>
</template>
<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const title = ref('');
    const content = ref('');

    const submitForm = async () => {
      const postData = {
        title: title.value,
        content: content.value
      };

      try {
        const response = await axios.post('/api/posts', postData);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    return {
      title,
      content,
      submitForm
    };
  }
}
</script>
<style scoped>
.post-add {
  max-width: 600px;
  margin: 0 auto;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

input[type='text'], textarea {
  width: 100%;
  height: 6em;
  padding: 0.5em;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 1em;
}

button[type='submit'] {
  background-color: #007bff;
  color: #fff;
  padding: 0.5em 1em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
</style>
<p>该页面使用 Vue 3 的 Composition API。在 <code>setup()</code> 函数中，我们使用 <code>ref</code> 创建了 <code>title</code> 和 <code>content</code> 变量，它们分别绑定到标题输入框和正文文本框中。当用户在表单中输入信息时，这些变量会自动更新。</p>
<p>在 <code>submitForm()</code> 函数中，我们使用 Axios 库向后端 API 发送 POST 请求，并将用户输入的标题和正文内容作为数据发送。如果请求成功，我们将打印响应数据到控制台。如果发生错误，则会将错误打印到控制台。</p>
<p>注意，此示例仅包含基本的表单验证和样式。您可能需要根据您的应用程序需求进行修改和扩展。</p>