Django前后端分离实践之DRF--09

在前面的文章中，我们已经学习了如何使用Django和DRF创建RESTful API，并使用Vue.js作为前端框架来消费API。在本文中，我们将继续学习如何使用Vue.js和Axios来实现前端和后端的分离。

## 1. 创建Vue.js项目

首先，我们需要创建一个Vue.js项目。我们可以使用Vue CLI来创建一个新的项目。在命令行中运行以下命令：

vue create frontend

这将创建一个名为“frontend”的新Vue.js项目。在创建项目时，您将被要求选择要使用的其他插件和库。您可以根据需要选择这些选项。

创建项目后，我们需要将其连接到我们的Django后端。

## 2. 连接到Django后端

为了连接到Django后端，我们需要使用Axios。Axios是一个用于从Web浏览器或Node.js中创建HTTP请求的JavaScript库。我们可以使用Axios来发送HTTP请求并从后端获取数据。

在Vue.js项目中使用Axios非常简单。我们只需要将Axios添加到我们的项目中并使用它来发送请求。

首先，我们需要安装Axios。在命令行中运行以下命令：

npm install axios

接下来，在我们的Vue.js应用程序中，我们需要导入Axios并使用它来发送HTTP请求。在Vue.js应用程序的主JavaScript文件中添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$http = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

这将使我们能够使用Axios来发送HTTP请求。现在，我们可以使用Axios从Django后端获取数据。

## 3. 从DRF获取数据

为了从DRF获取数据，我们需要使用Django REST framework的API视图。API视图允许我们使用DRF来创建RESTful API，并从前端获取数据。

在我们的Django后端中，我们已经创建了一个API视图，该视图允许我们从数据库中获取数据。我们可以使用Axios来从该API视图中获取数据。

在我们的Vue.js应用程序中，我们可以使用Axios来发送HTTP GET请求并从API视图中获取数据。我们可以将以下代码添加到Vue.js应用程序的主JavaScript文件中：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

Vue.config.productionTip = false

Vue.prototype.$http = axios

new Vue({
  render: h => h(App),
  mounted() {
    // Fetch the data from the API
    this.$http.get('http://localhost:8000/api/data/')
      .then(response => {
        // Set the data to the response data
        this.$store.commit('setData', response.data)
      })
  }
}).$mount('#app')

在这个代码片段中，我们使用Axios发送HTTP GET请求并从API视图中获取数据。我们使用`this.$store.commit`方法将数据存储在Vue.js应用程序的状态管理器中。

## 4. 在Vue.js中使用数据

现在，我们已经从DRF获取了数据，我们可以在Vue.js应用程序中使用这些数据。为此，我们可以使用Vue.js的模板语言和组件。

在Vue.js中，我们可以使用模板语言来将数据呈现为HTML。我们可以使用组件来将数据分解为可重用的块。

例如，我们可以创建一个名为“DataList”的Vue.js组件，该组件可以接受从DRF获取的数据并将其呈现为HTML列表。我们可以在Vue.js应用程序的`components`文件夹中创建一个新文件，并将以下代码添加到该文件中：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in data" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'DataList',
  props: {
    data: Array
  }
}
</script>

在这个代码片段中，我们创建了一个名为“DataList”的Vue.js组件。该组件接受一个名为“data”的属性，并将其呈现为HTML列表。我们使用Vue.js的`v-for`指令将数据项映射到HTML列表中。

现在，我们可以在我们的Vue.js应用程序中使用这个组件并将从DRF获取的数据传递给它。为此，我们可以将以下代码添加到Vue.js应用程序的主JavaScript文件中：

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
import DataList from './components/DataList'

Vue.config.productionTip = false

Vue.prototype.$http = axios

Vue.component('DataList', DataList)

new Vue({
  render: h => h(App),
  mounted() {
    // Fetch the data from the API
    this.$http.get('http://localhost:8000/api/data/')
      .then(response => {
        // Set the data to the response data
        this.$store.commit('setData', response.data)
      })
  }
}).$mount('#app')

在这个代码片段中，我们使用Vue.js的`Vue.component`方法注册了一个名为“DataList”的组件。我们还从DRF获取数据并将其存储在Vue.js应用程序的状态管理器中。

现在，我们可以在Vue.js应用程序的模板中使用“DataList”组件，并将从DRF获取的数据传递给它。为此，我们可以将以下代码添加到Vue.js应用程序的模板中：

<template>
  <div>
    <h1>Data List</h1>
    <DataList :data="data" />
  </div>
</template>

在这个代码片段中，我们使用Vue.js的“DataList”组件，并将从DRF获取的数据传递给它。

## 5. 总结

在本文中，我们学习了如何使用Axios从DRF获取数据，并将数据传递给Vue.js组件。我们还学习了如何使用Vue.js的模板语言和组件来呈现数据。

使用DRF和Vue.js可以轻松创建RESTful API，并实现前端和后端的分离。这使得我们能够更快地开发Web应用程序，并改进Web应用程序的可维护性和可扩展性。