Ionic/Angular应用连接MariaDB遇阻，求高效安全解决方案

你碰到的fs、crypto模块找不到的错误，核心原因是**mariadb库是为Node.js后端环境开发的，依赖Node.js专属的系统核心模块，但浏览器/Ionic前端环境没有这些模块**。就算通过配置忽略这些模块，后续也无法建立数据库连接——浏览器不能直接发起TCP连接到数据库服务器，更致命的是：前端代码硬编码数据库账号密码，等于把数据库权限完全暴露给所有人，这是严重的安全漏洞。

前端不能直接操作数据库，必须通过后端API做中转：后端负责连接数据库并执行操作，前端只通过HTTP请求调用后端提供的接口。下面给出具体实现步骤：

第一步：搭建后端API服务（Node.js+Express示例） #

1. 初始化后端项目

mkdir product-api && cd product-api
npm init -y
npm install express mariadb cors

2. 创建后端入口文件server.js

const express = require('express');
const mariadb = require('mariadb');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许跨域请求，适配Ionic前端
app.use(express.json());

// 创建数据库连接池
const pool = mariadb.createPool({
  host: '11.11.111.111',
  user: 'hain',
  password: '1234',
  database: 'products',
  connectionLimit: 5
});

// 定义获取items的API接口
app.get('/api/items', async (req, res) => {
  let conn;
  try {
    conn = await pool.getConnection();
    const rows = await conn.query("SELECT * FROM items");
    res.json(rows);
  } catch (err) {
    console.error('数据库查询错误:', err);
    res.status(500).json({ error: '获取数据失败' });
  } finally {
    if (conn) conn.release();
  }
});

// 启动服务
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`后端服务运行在 http://localhost:${PORT}`);
});

3. 启动后端服务

node server.js

第二步：修改前端代码调用API #

1. 重构ConnectionService为HTTP请求服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ConnectionService {
  private apiUrl = 'http://localhost:3000/api'; // 上线时替换为后端公网地址

  constructor(private http: HttpClient) { }

  getItems() {
    return this.http.get(`${this.apiUrl}/items`);
  }
}

2. 确保Angular项目引入HttpClientModule
   在app.module.ts中添加：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他已导入模块
    HttpClientModule
  ]
})
export class AppModule { }

3. 修正Tab2Page的调用逻辑

import { Component, OnInit } from '@angular/core';
import { ConnectionService } from '../services/connection.service';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page implements OnInit {

  product: any;

  constructor(private connectionService: ConnectionService) {}

  ngOnInit() {
    this.connectionService.getItems().subscribe(
      (data) => {
        this.product = data;
      },
      (err) => {
        console.log(err);
      }
    );
  }

}

• 安全层面：
  • 后端不要硬编码数据库凭证，用dotenv包通过环境变量管理。
  • 给API添加身份验证（比如JWT），防止未授权访问。
  • 数据库用户hain只分配必要权限（比如仅SELECT），不要给全库操作权限。
• 部署层面：
  • 后端服务部署到公网服务器后，修改前端apiUrl为服务器公网地址。
  • 生产环境必须配置HTTPS，避免数据明文传输。
• 替代方案：如果不想自己写后端，可以用Firebase、Supabase这类BaaS服务，它们提供托管的数据库和现成API，快速实现数据交互。

内容的提问来源于stack exchange，提问作者Maldam