Nuxt3 创建和使用与 Mysql 数据库交互的接口

凯瑞不Carrey
1,294 阅读5分钟

一、引言

Nuxt

Nuxt.js 是一个基于 Vue.js 的框架，用于构建服务端渲染（SSR）和静态生成的网站应用程序。

Nuxt 中文站 - 直观的Web框架 Nuxt3文档 · Nuxt

MySQL

MySQL 是一个开源的关系型数据库管理系统，以其高性能、可靠性和易用性而著称。在现代Web应用中经常作为数据存储解决方案，与后端服务器配合使用。

MySQL.cn

二、正文

在本文中，将介绍如何用 Nuxt3 创建一个可以与 MySQL 数据库交互的接口，以及它的使用方式。

1. 环境准备

  • 确保已安装 Node.js 和 MySQL；这里我使用的node版本是18.20.3。
  • 创建一个新的 Nuxt3 项目：
npx nuxi@latest init my-nuxt-app
cd my-nuxt-app
yarn

由于域名解析服务器的问题，在国内一般无法直接访问，会出现以下情况： image.png 我们需要手动添加一条解析规则

解决办法：如果你是windows环境，在文件资源管理器 C:\Windows\System32\drivers\etc\ 目录下，有个 host 文件，在最后一行添加：185.199.108.133 raw.githubusercontent.com

image.png

保存后再执行安装命令即可

npx nuxi@latest init my-nuxt-app 执行中会询问你使用哪个包管理器，我尝试了 npm 和 yarn 都会失败，无需理会

Nuxt 中文官网安装教程：安装 · 快速入门 Nuxt

  • 安装 MySQL 依赖
yarn add mysql2

初始结构： image.png

2. 准备必要的数据库和表

启动 MySql 服务，并创建一个名为 test_db 的数据库和一个名为 users 的表，插入基础数据：

CREATE DATABASE test_db;
USE test_db;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100)
);

INSERT INTO users (name,email) VALUES ('carrey', '123456@email.com');
INSERT INTO users (name,email) VALUES ('carrey1', '123456@email.com');
INSERT INTO users (name,email) VALUES ('carrey2', '123456@email.com');

完成后： image.png

3. 创建连接池与接口

在 Nuxt3 中，我们可以利用内置 API 路由功能来创建与数据库交互的接口。

为了便于复用，我们在 ~/server 目录下创建一个文件 mysql.ts

// ~/server/mysql.ts
import mysql from 'mysql2/promise';

let connection: mysql.Connection;
(async () => {
  // 创建 MySQL 连接  
  connection = await mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'test_db',
  });
})()

// @ts-ignore
export default connection;

在 ~/server/api 目录下，创建 users.ts

// ~/server/api/users.ts
import connection from "~/server/mysql";

// 处理 API 请求  
export default defineEventHandler(async (event) => {
  try {
    const [data] = await connection.query('SELECT * FROM users');
    return {
      code: 200,
      message: 'success',
      data
    }; // 返回查询结果
  } catch (error) {
    console.error('MySQL error: ', error);
    return sendError(event, createError({ statusCode: 500, statusMessage: 'Database error' }));
  }
});

4. 前端请求接口

<template>
  <div>
    <h1>获取数据测试</h1>
    <button @click="handleGetData()">获取数据</button>
    <pre>{{ data }}</pre>
  </div>
</template>

<script setup>
let data = ref('点击按钮获取数据')
const handleGetData = async () => {
  const res = await $fetch('/api/users').catch(err => err)
  console.log('获取数据', res);
  data.value = res
}
</script>

5. 启动应用

yarn dev -open

在浏览器中访问 http://localhost:3000，你应该能够看到从 MySQL 数据库中获取的用户数据。

效果： image.png

如此，便成功地在 Nuxt3 中创建了一个与 MySQL 数据库交互的接口。

三、注意

此方法并不适用于生产

主要原因如下（以下内容由AI生成）：

在 Nuxt.js（或任何前端框架）中直接与数据库交互并不推荐：

  1. 安全性：

    • 敏感信息曝露：将数据库连接信息（如用户名和密码）包含在客户端代码中，极易被恶意用户获取，从而可能导致数据库泄露和数据损坏。
    • SQL 注入攻击：如果用户能够直接发送 SQL 查询，可能会导致 SQL 注入攻击，从而使数据库陷入危险境地。

  2. 代码结构：

    • 分离关注点：良好的软件架构原则提倡将前端和后端分开，以便于管理和维护。将数据库逻辑与前端逻辑交织在一起，会使得代码变得更加复杂且难以维护。
    • 可测试性：后端 API 的存在使得可以独立于前端对数据库逻辑进行测试，确保其正确性，而直接连接数据库的设计使得整个应用难以分离和单元测试。

  3. 可扩展性：

    • 遵循微服务架构：现代应用越来越多使用微服务架构，将数据库操作放在独立服务中，有助于后期优化和扩展。例如，可以使用一个单独的后端服务来处理所有的数据库请求，从而可以独立地扩展、部署和维护。

  4. 性能管理：

    • 连接池和性能优化：后端应用程序能够更好地管理数据库连接，使用连接池减少开销，并处理并发请求，而前端应用程序不适合完成这些任务。
    • 请求优化：后端服务能够更好地优化和管理对数据库的请求，例如使用缓存、批量处理请求等。

  5. 跨域问题：

    • 简化跨域管理：通过一个后端 API 进行数据交互，可以更简单地处理 CORS（跨域资源共享）问题，避免不同域之间直接交互的复杂性。

综上所述，最佳实践是在后端服务（如 Node.js/Express、Django、Flask、Ruby on Rails 等）中处理数据库逻辑，通过 RESTful 或 GraphQL API 将数据呈现给前端应用（如 Nuxt.js）。这种架构不仅提升了安全性，也使得应用更加模块化、易于管理和扩展。

希望这篇文章能够帮助你更好地理解如何在 Nuxt3 中使用 MySQL 数据库！如有其他问题，欢迎讨论和交流。

avatar
文章
阅读
粉丝