写在前面
本文主要为大家介绍，如何使用 Nuxt 框架实现一个简单的后端接口，并且从数据库中请求数据返回给前端。
实现
创建 serverMiddleware 文件夹
首先我们新建一个名字为 serverMiddleware 文件夹用来存储接口相关信息
目录结构如下：
在该文件夹下新建 api.js 写接口相关代码
api.js 接口相关代码
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 连接，并把相应信息填写上
（这一步大家要按照自己的数据库信息）
// 创建 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));});使用接口
现在我们已经在 api.js 中把接口信息写好了，如何在页面中使用呢？
初始化接口
在 nuxt.config 文件中初始化我们刚刚写好的接口
// nuxt.config.jsexport default {// 其他配置项...serverMiddleware: [// 注册我们的初始化数据中间件{ path: "/api/getData", handler: "~/serverMiddleware/api.js" },]
}
页面中使用
接口已经初始化好了，接下来就是在页面中使用接口
在 pages/index.vue 中
<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 就可以使用
我们拿到数据后直接以对象的形式返回到页面就可以使用了
// 返回数据const { title } = data[0];return { message: title };效果如下
总结
首先在 Nuxt 中实现后端接口数据请求，然后创建好接口文件，进行接口配置，最后在页面中使用 asyncData 函数进行接口请求即可。
以上就是如何使用 Nuxt 框架实现一个简单的后端接口所有内容，如果你感觉写的还不错对你有帮助的话，可以点个赞支持一下，你的支持就是作者最大的动力 ！
源码
所有代码都已经提交到 GitHub
GitHub：chenyajun-create/nuxt-mysql (github.com)
