vue3+django 1、完成前端新闻列表展示（任意位置展示：添加新闻 按钮） 2、点击添加按钮，跳转添加新闻页面，实现添加功能 3、添加新闻，需要添加新闻图片，完成图片与数据一起上传 4、新闻列表可以正常展示图片

Vue3 + Django是一个结合了前端框架Vue3（用于构建用户界面）和后端框架Django（用于处理服务器端逻辑和数据库管理）的项目组合。它们可以协同工作，实现动态网页应用。

以下是实现上述需求的一般步骤：

1. **前端新闻列表展示**：
- 在Vue组件中，你可以使用V-for遍历从Django API获取的新闻列表数据，每个新闻条目显示标题、描述等字段，并在适当的位置插入“添加新闻”按钮。

   <template>
     <div>
       <ul>
         <li v-for="news in newsList">
           {{ news.title }} ...<!-- 显示其他字段 -->
           <button @click="addNews">添加新闻</button>
         </li>
       </ul>
     </div>
   </template>

2. **添加新闻路由**：
- 使用vue-router，设置一个链接将“添加新闻”按钮连接到一个名为`/news/add`的新路由，当点击时跳转到这个页面。

3. **添加新闻表单**：
- 创建一个新的Vue组件专门负责新闻的添加。在这个组件里，你可以创建一个表单，包括输入框用于文字内容和文件域用于选择图片。通过`axios`或Django Rest Framework发起POST请求，提交数据和图片。

<template>
  <form @submit.prevent="submitForm">
    <!-- 表单元素... -->
    <input type="file" @change="uploadImage" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
methods: {
  submitForm() {
    const formData = new FormData();
    formData.append('title', this.newsTitle);
    formData.append('description', this.newsDescription);
    formData.append('image', this.selectedImage); // 确保已保存选中的图片

    axios.post('/api/news/', formData).then(response => {/* handle success */});
  },
  uploadImage(e) {
    this.selectedImage = e.target.files[0];
  }
}
</script>

4. **显示图片**：
- 在Django后端，处理接收到的图片并将其存储在媒体库。返回包含图片URL的数据到前端。在渲染新闻列表时，如果新闻有图片URL，就显示它。

def add_news_view(request):
    # 图片处理...
    response_data = {'title': ..., 'description': ..., 'image_url': image_url}
    return JsonResponse(response_data)