第12天：前端集成与交互

第12天：前端集成与交互

目标

将前端框架与Django后端集成，实现前后端分离。

任务概览

1. 选择一个前端框架并创建基础页面。
2. 使用AJAX或Fetch API与后端API交互。

详细步骤

1. 选择前端框架

选择一个适合项目的前端框架，如React、Vue.js或Angular。对于本示例，我们将使用Vue.js进行演示。

安装Vue.js：

npm install -g @vue/cli
# 创建一个新的Vue项目
vue create my-vue-app
# 进入项目目录
cd my-vue-app

2. 创建基础页面

在Vue项目中创建基础页面，并设置路由以连接到不同的组件。

// my-vue-app/src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    // 其他路由...
  ],
});

3. 使用AJAX或Fetch API与后端API交互

在Vue组件中使用AJAX或Fetch API与Django后端的API进行交互。

使用Fetch API示例：

// my-vue-app/src/components/MyComponent.vue

<template>
  <!-- 组件模板 -->
</template>

<script>
export default {
  name: 'MyComponent',
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('/api/mymodel/', {
        method: 'GET',
        headers: {
          // 添加认证令牌或其他头部信息
        },
      })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        // 处理数据
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
    },
  },
};
</script>

4. 处理表单提交和数据交互

在前端页面上创建表单，并使用AJAX或Fetch API提交数据到后端API。

表单提交示例：

// 在Vue组件中

methods: {
  submitForm() {
    const formData = new FormData(this.$refs.form); // 假设使用HTML5 FormData API

    fetch('/api/mymodel/', {
      method: 'POST',
      body: formData,
      headers: {
        // 可能需要添加'Content-Type': 'multipart/form-data'等头部信息
      },
    })
    .then(response => response.json())
    .then(data => {
      // 处理响应数据
    })
    .catch(error => {
      console.error('Error submitting form:', error);
    });
  },
},

学习要点

• 理解前端框架的选择和基础页面的创建。
• 学会使用AJAX或Fetch API与后端API进行异步数据交互。

每日回顾

• 确保前端页面能够正确显示和与后端API交互。
• 测试表单提交和数据加载功能是否正常。

通过今天的学习，你应该能够将前端框架与Django后端集成，并使用AJAX或Fetch API实现前后端分离的数据交互。明天，我们将学习如何在Django和Vue.js项目中进行状态管理和用户认证，以构建更加复杂的应用逻辑和用户交互。