使用 Nuxt 构建简单后端接口及数据库数据请求

写在前面

本文主要为大家介绍，如何使用 Nuxt 框架实现一个简单的后端接口 ，并且从数据库中请求数据返回给前端。

实现

创建 serverMiddleware 文件夹

首先我们新建一个名字为 serverMiddleware 文件夹用来存储接口相关信息

目录结构如下：

在该文件夹下新建 api.js 写接口相关代码

api.js 接口相关代码

javascript 复制代码

const mysql = require("mysql2");

export default function (req, res) {
  // 创建 MySQL 连接
  const connection = mysql.createConnection({
    connectionLimit: 10,
    host: "127.0.0.1", //服务器地址
    user: "root",
    password: "123456", //密码
    database: "jackson_blog_dev",
  });

  // 执行 MySQL 查询
  connection.query(
    "SELECT * FROM jacksonblogbacked",
    function (err, results, fields) {
      // 关闭数据库连接
      connection.end();

      if (err) {
        console.error("Error querying database:", err);
        res.status(500).json({ error: "Internal Server Error" });
        return;
      }

      // 发送查询结果作为 JSON 响应
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify(results));
    }
  );
}

安装 mysql2

安装 mysql2 用于连接本地数据库

npm install mysql2

创建 mysql 连接，并把相应信息填写上

（这一步大家要按照自己的数据库信息）

javascript 复制代码

  // 创建 MySQL 连接
  const connection = mysql.createConnection({
    connectionLimit: 10,
    host: "127.0.0.1", //服务器地址
    user: "root", //用户名
    password: "123456", //密码
    database: "jackson_blog_dev",//数据库名
  });

接下来就是从表中查询数据，把数据返回出去即可

javascript 复制代码

  // 执行 MySQL 查询
  connection.query(
    "SELECT * FROM jacksonblogbacked",
    function (err, results, fields) {
      // 关闭数据库连接
      connection.end();

      if (err) {
        console.error("Error querying database:", err);
        res.status(500).json({ error: "Internal Server Error" });
        return;
      }

      // 发送查询结果作为 JSON 响应
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify(results));
    }
  );

使用接口

现在我们已经在 api.js 中把接口信息写好了，如何在页面中使用呢？

初始化接口

在 nuxt.config文件中初始化我们刚刚写好的接口

javascript 复制代码

// nuxt.config.js

export default {
  // 其他配置项...

  serverMiddleware: [
    // 注册我们的初始化数据中间件
    { path: "/api/getData", handler: "~/serverMiddleware/api.js" },
  ]
}

页面中使用

接口已经初始化好了，接下来就是在页面中使用接口

在 pages/index.vue 中

html 复制代码

<template>
  <div>
    <h1>测试mysql连接：{{ message }}</h1>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    try {
      // 从服务器端路由获取数据
      const { data } = await $axios.get("/api/getData");
      console.log("data: ", data);
      // 返回数据
      const { title } = data[0];
      return { message: title };
    } catch (error) {
      console.error("Error fetching data:", error);
      // 返回一个默认的错误消息
      return { message: "Failed to fetch data" };
    }
  },
};
</script>

这里和 vue 不同的是，我们需要使用 asyncData 函数进行数据请求

文档如下：异步数据 - NuxtJS | Nuxt.js 中文网

直接使用 Nuxt 内置的 $axios 进行接口请求，无需再安装 axios 就可以使用

我们拿到数据后直接以对象的形式返回到页面就可以使用了

javascript 复制代码

      // 返回数据
      const { title } = data[0];
      return { message: title };

效果如下

总结

首先在 Nuxt 中实现后端接口数据请求，然后创建好接口文件，进行接口配置，最后在页面中使用 asyncData 函数进行接口请求即可。

以上就是如何使用 Nuxt 框架实现一个简单的后端接口所有内容，如果你感觉写的还不错对你有帮助的话，可以点个赞支持一下，你的支持就是作者最大的动力！

源码

所有代码都已经提交到 GitHub

GitHub：chenyajun-create/nuxt-mysql (github.com)