第13天：Vue.js和Vuex高级特性与Django后端交互

第13天：Vue.js和Vuex高级特性与Django后端交互

目标

深入探索Vue.js和Vuex的高级特性，并实现与Django后端的高级数据交互。

任务概览

1. 探索Vuex高级特性。
2. 实现Vue.js与Django后端的高级数据交互。
3. 使用Vue.js组件和Django视图的CRUD操作。

详细步骤

1. Vuex高级特性

• Modules: 对大型应用，使用Vuex模块化管理不同状态。
• Getters: 类似于计算属性，用于复杂状态的派生。
• Plugins: 扩展Vuex的功能，例如持久化状态。

模块化示例：

// store/modules/user.js

const state = { /* 用户相关状态 */ };
const getters = { /* 用户相关派生状态 */ };
const actions = { /* 用户相关异步操作 */ };
const mutations = { /* 用户相关同步操作 */ };

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

在store中引入模块：

import user from './modules/user';

export default createStore({
  modules: {
    user,
  },
});

2. 高级数据交互

• AJAX请求封装: 创建服务层以封装API请求逻辑。
• 组件设计模式: 使用v-model、事件和插槽实现复杂组件。

请求封装示例：

// services/apiService.js

export function fetchUserList() {
  return fetch('/api/users/', {
    method: 'GET',
    headers: {
      'Authorization': `Token ${localStorage.getItem('authToken')}`,
    },
  }).then(response => response.json());
}

// 在Vue组件中使用
import { fetchUserList } from '@/services/apiService';

export default {
  async created() {
    this.users = await fetchUserList();
  },
};

3. CRUD操作

• 组件方法: 在Vue组件中实现CRUD的methods。
• Django视图: 确保Django视图支持CRUD操作。

Vue组件中实现CRUD：

<template>
  <!-- 展示列表 -->
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
  <!-- 创建表单 -->
  <form @submit.prevent="createUser">
    <input v-model="newUserName" />
    <button type="submit">Create</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      newUserName: '',
    };
  },
  methods: {
    async fetchUsers() {
      this.users = await fetchUserList();
    },
    async createUser() {
      const response = await fetch('/api/users/', {
        method: 'POST',
        body: JSON.stringify({ name: this.newUserName }),
        headers: {
          'Content-Type': 'application/json',
          // 添加认证Token
        },
      });
      if (response.ok) {
        const user = await response.json();
        this.users.push(user);
        this.newUserName = ''; // 清空输入
      }
    },
  },
  created() {
    this.fetchUsers();
  },
};
</script>

学习要点

• Vuex的高级特性，如模块化、派生状态和插件。
• 封装AJAX请求，简化Vue组件中的数据处理。
• 在Vue组件中实现与Django后端的CRUD操作。

每日回顾

• 检查Vuex模块化是否按预期工作，状态是否正确管理。
• 测试封装的AJAX请求服务是否能够与Django后端正确通信。
• 验证CRUD操作是否成功，前后端数据是否同步。

通过今天的学习，你应该能够掌握Vuex的高级特性，并在Vue.js中实现与Django后端的高级数据交互。明天，我们将关注Vue.js应用的性能优化，以及探索服务端渲染和静态站点生成的高级话题。