Angular中基于den1.mssql7.gear.host数据库创建API路由/端点方法问询

我是一名新手，不太擅长表述，想请教如何在Angular中，基于den1.mssql7.gear.host后端数据库创建API路由或端点。我已经有以下代码：

环境配置代码：

export const environment = {
  production: false,
  // apiBaseUrl: 'http://api.amseljewelry.us/api',
}

数据库查询函数示例：

getAllData: callback => {
        connection.query(
            `select * from view_order ORDER BY order_id asc`,
            (error, result) => {
                if (error) {
                    return callback(error);
                }
                return callback(null, result);
            }
        )
    }

已创建的OrderService：

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

@Injectable({
  providedIn: 'root',
})
export class OrderServiceService {
  url = `${environment.apiBaseUrl}`;
  tableArry: any[]

  constructor(private http: HttpClient) {}

getAllData(){  //view_order
return this.http.get(`${this.url}/order/all`);
}
}

请问如何将上述查询函数转换为对应的API端点？

步骤1：搭建后端API服务（以Node.js + Express为例） #

你现有的数据库查询基于Node.js的mssql模块，需要用Express框架创建API端点，接收前端请求并返回数据库数据。

1.1 安装后端依赖 #

在后端项目目录下执行：

npm install express mssql cors

1.2 配置数据库连接 #

创建db.config.js文件，配置den1.mssql7.gear.host的数据库连接：

const sql = require('mssql');

const dbConfig = {
    user: '你的数据库用户名',
    password: '你的数据库密码',
    server: 'den1.mssql7.gear.host',
    database: '你的数据库名称',
    options: {
        encrypt: true // MSSQL主机通常需要开启加密连接
    }
};

// 初始化数据库连接
const connectDB = async () => {
    try {
        await sql.connect(dbConfig);
        console.log('数据库连接成功');
    } catch (err) {
        console.error('数据库连接失败:', err);
    }
};

module.exports = { sql, connectDB };

1.3 创建API路由 #

创建routes/orderRoutes.js文件，实现/order/all端点：

const express = require('express');
const router = express.Router();
const { sql } = require('../db.config');

// 对应view_order的查询端点
router.get('/all', async (req, res) => {
    try {
        const result = await sql.query(`select * from view_order ORDER BY order_id asc`);
        res.status(200).json(result.recordset);
    } catch (err) {
        console.error('查询失败:', err);
        res.status(500).json({ error: '获取订单数据失败' });
    }
});

module.exports = router;

1.4 启动后端服务 #

创建server.js文件，启动Express服务：

const express = require('express');
const cors = require('cors');
const { connectDB } = require('./db.config');
const orderRoutes = require('./routes/orderRoutes');

const app = express();
const PORT = process.env.PORT || 3000;

// 跨域中间件，允许Angular前端请求
app.use(cors());
app.use(express.json());

// 挂载路由，对应Angular中调用的/api/order路径
app.use('/api/order', orderRoutes);

// 连接数据库后启动服务
connectDB().then(() => {
    app.listen(PORT, () => {
        console.log(`后端服务运行在端口 ${PORT}`);
    });
});

步骤2：配置Angular环境变量 #

取消environment.ts中apiBaseUrl的注释，指向你的后端服务地址：

export const environment = {
  production: false,
  apiBaseUrl: 'http://localhost:3000/api', // 本地测试用，部署后换成线上后端地址
}

步骤3：验证Angular组件调用 #

在Angular组件中调用OrderService获取数据：

import { Component, OnInit } from '@angular/core';
import { OrderServiceService } from './order-service.service';

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
  orders: any[] = [];

  constructor(private orderService: OrderServiceService) {}

  ngOnInit(): void {
    this.orderService.getAllData().subscribe({
      next: (data) => {
        this.orders = data;
      },
      error: (err) => {
        console.error('获取订单数据失败:', err);
      }
    });
  }
}

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