与 Nuxt 集成

@nuxtjs/axios 模块与 @nuxtjs/proxy 模块集成良好，在许多情况下都非常有用。一起使用这两个模块的好处之一就是可以防止 CORS 问题。您在第六章“编写插件和模块”中学习了如何安装和使用它们。让我们回顾一下：

通过 npm 安装 @nuxtjs/axios 和 @nuxtjs/proxy 模块：
```
$ npm install @nuxtjs/axios
$ npm install @nuxtjs/proxy
```

在 Nuxt 配置文件中的 modules 选项中注册 @nuxtjs/axios，如下所示：

// nuxt.config.js
module.exports = {
    modules: [
        '@nuxtjs/axios'
    ],
    axios: {
        proxy: true
    },
    proxy: {
        '/api/': { target: 'http://0.0.0.0:8181', pathRewrite: {'^/api/': ''} }
    }
}

请注意，当您将 @nuxtjs/proxy 与 @nuxtjs/axios 一起使用时，不需要注册 @nuxtjs/proxy 模块，只要它已安装并在 package.json 的 dependencies 字段中即可。

在上面的配置中，我们将 /api/ 用作 http://0.0.0.0:8181 的代理，这是我们的 PHP API 运行的地方。因此，每当我们使用任何 API 端点请求中的 /api/ 时，它都会调用 0.0.0.0:8181。例如，假设您正在进行如下 API 调用：

$axios.get('/api/users')

@nuxtjs/axios 和 @nuxtjs/proxy 模块会将该 /api/users 端点转换为以下内容：

http://0.0.0.0:8181/api/users

但是由于我们在 PHP API 的路由中没有使用 /api/，所以我们在配置中使用 pathRewrite 在调用期间将其删除。然后，@nuxtjs/axios 和 @nuxtjs/proxy 模块发送到 API 的实际 URL 如下：

http://0.0.0.0:8181/users

再次访问以下链接以获取有关这两个模块的更多信息：

@nuxtjs/axios：https://axios.nuxtjs.org/
@nuxtjs/proxy：https://github.com/nuxt-community/proxymodule

安装和配置完成后，我们可以开始创建用于与 PHP API 通信的前端 UI。我们将在下一节中介绍这一点。

创建 CRUD 页面

同样，这对您来说并不是一个完全陌生的任务，因为它几乎与您在第九章“添加服务器端数据库”中学习创建的 CRUD 页面相同。让我们回顾一下：

在 /pages/users/ 目录中创建以下页面以发送和获取数据：

users
├── index.vue
├── _slug.vue
├── add
│   └── index.vue
├── update
│   └── _slug.vue
└── delete
    └── _slug.vue

例如，使用以下脚本获取所有可用用户：

// pages/users/index.vue
export default {
    async asyncData ({ error, $axios }) {
        try {
            let { data } = await $axios.get('/api/users')
            return {
                users: data.data
            }
        } catch (err) {
            // 处理错误。
        }
    }
}

此 Nuxt 应用程序中的脚本、模板和目录结构与您在第九章 “添加服务器端数据库” 中学习创建的应用程序相同。不同之处在于，该章使用了 _id，而本章我们使用的是 _slug。到目前为止，您应该能够独立完成其余的 CRUD 页面。但是，您可以随时回顾第九章 “添加服务器端数据库” 中的以下部分以获取更多信息：

创建添加页面
创建更新页面
创建删除页面

创建这些页面后，您可以使用 npm run dev 运行 Nuxt 应用程序。您应该在浏览器上的 localhost:3000 看到该应用程序正在运行。

您可以在本书的 GitHub 存储库中的 /chapter-16/nuxt-php/proxy/frontend/nuxt-universal/ 中找到此应用程序的完整源代码。

如果您不想在此 Nuxt 应用程序中使用 @nuxtjs/axios 和 @nuxtjs/proxy 模块，您可以在本书的 GitHub 存储库中的 /chapter-16/nuxt-php/cors/ 中找到关于如何在 PHP API 中为 Nuxt 应用程序启用 CORS 的完整源代码。

您还可以在本书的 GitHub 存储库中的 /chapter-16/nuxt-php/ 中找到保存为 user.sql 的数据库副本。

现在，让我们总结一下您在本漫长的章节中学到的内容。我们希望您喜欢本章并从中获得启发。