寫在前面

本文主要為大家介紹，如何使用 Nuxt 框架實現(xiàn)一個簡單的后端接口，并且從數(shù)據(jù)庫中請求數(shù)據(jù)返回給前端。

實現(xiàn)

創(chuàng)建 serverMiddleware 文件夾

首先我們新建一個名字為?serverMiddleware 文件夾用來存儲接口相關(guān)信息

目錄結(jié)構(gòu)如下：

在該文件夾下新建 api.js 寫接口相關(guān)代碼

api.js 接口相關(guān)代碼

const mysql = require("mysql2");

export default function (req, res) {
  // 創(chuàng)建 MySQL 連接
  const connection = mysql.createConnection({
    connectionLimit: 10,
    host: "127.0.0.1", //服務(wù)器地址
    user: "root",
    password: "123456", //密碼
    database: "jackson_blog_dev",
  });

  // 執(zhí)行 MySQL 查詢
  connection.query(
    "SELECT * FROM jacksonblogbacked",
    function (err, results, fields) {
      // 關(guān)閉數(shù)據(jù)庫連接
      connection.end();

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

      // 發(fā)送查詢結(jié)果作為 JSON 響應(yīng)
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify(results));
    }
  );
}

安裝 mysql2

安裝 mysql2 用于連接本地數(shù)據(jù)庫

npm install mysql2

創(chuàng)建 mysql 連接，并把相應(yīng)信息填寫上

（這一步大家要按照自己的數(shù)據(jù)庫信息）

  // 創(chuàng)建 MySQL 連接
  const connection = mysql.createConnection({
    connectionLimit: 10,
    host: "127.0.0.1", //服務(wù)器地址
    user: "root", //用戶名
    password: "123456", //密碼
    database: "jackson_blog_dev",//數(shù)據(jù)庫名
  });

接下來就是從表中查詢數(shù)據(jù)，把數(shù)據(jù)返回出去即可

  // 執(zhí)行 MySQL 查詢
  connection.query(
    "SELECT * FROM jacksonblogbacked",
    function (err, results, fields) {
      // 關(guān)閉數(shù)據(jù)庫連接
      connection.end();

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

      // 發(fā)送查詢結(jié)果作為 JSON 響應(yīng)
      res.setHeader("Content-Type", "application/json");
      res.end(JSON.stringify(results));
    }
  );

使用接口

現(xiàn)在我們已經(jīng)在 api.js 中把接口信息寫好了，如何在頁面中使用呢？

初始化接口

在 nuxt.config 文件中初始化我們剛剛寫好的接口

// nuxt.config.js

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

  serverMiddleware: [
    // 注冊我們的初始化數(shù)據(jù)中間件
    { path: "/api/getData", handler: "~/serverMiddleware/api.js" },
  ]
}

頁面中使用

接口已經(jīng)初始化好了，接下來就是在頁面中使用接口

在 pages/index.vue 中

<template>
  <div>
    <h1>測試mysql連接：{{ message }}</h1>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    try {
      // 從服務(wù)器端路由獲取數(shù)據(jù)
      const { data } = await $axios.get("/api/getData");
      console.log("data: ", data);
      // 返回數(shù)據(jù)
      const { title } = data[0];
      return { message: title };
    } catch (error) {
      console.error("Error fetching data:", error);
      // 返回一個默認(rèn)的錯誤消息
      return { message: "Failed to fetch data" };
    }
  },
};
</script>

這里和 vue 不同的是，我們需要使用 asyncData 函數(shù)進行數(shù)據(jù)請求

文檔如下：異步數(shù)據(jù) - NuxtJS | Nuxt.js 中文網(wǎng)

直接使用 Nuxt 內(nèi)置的?$axios 進行接口請求，無需再安裝 axios 就可以使用

我們拿到數(shù)據(jù)后直接以對象的形式返回到頁面就可以使用了

      // 返回數(shù)據(jù)
      const { title } = data[0];
      return { message: title };

效果如下

總結(jié)

首先在 Nuxt 中實現(xiàn)后端接口數(shù)據(jù)請求，然后創(chuàng)建好接口文件，進行接口配置，最后在頁面中使用 asyncData 函數(shù)進行接口請求即可。

以上就是如何使用 Nuxt 框架實現(xiàn)一個簡單的后端接口所有內(nèi)容，如果你感覺寫的還不錯對你有幫助的話，可以點個贊支持一下，你的支持就是作者最大的動力?！

源碼

所有代碼都已經(jīng)提交到 GitHub

GitHub：chenyajun-create/nuxt-mysql (github.com)文章來源地址http://www.zghlxwxcb.cn/news/detail-834215.html

到了這里，關(guān)于使用 Nuxt 構(gòu)建簡單后端接口及數(shù)據(jù)庫數(shù)據(jù)請求的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！