在 Vue.js 项目中连接 SQL Server 数据库的几种方法

在 Vue.js 项目中直接连接 SQL Server 数据库是不推荐且不安全的，因为前端代码运行在浏览器中，直接暴露数据库连接信息（如账号密码）会导致严重的安全风险。正确的做法是通过后端 API 连接数据库，前端（Vue）通过 HTTP 请求与后端交互。以下是完整的实现方案：

1. 架构说明

Vue 前端 (浏览器) 
  → HTTP 请求 → 
Node.js/Java/Python 后端 API 
  → 连接 → 
SQL Server 数据库

2. 实现步骤
2.1 创建后端服务（以 Node.js + Express 为例）
安装依赖：

npm install express mssql cors

创建后端接口文件 server.js：

const express = require('express');
const sql = require('mssql');
const cors = require('cors');
const app = express();
app.use(cors()); // 允许跨域请求

// SQL Server 配置
const config = {
  user: 'your_username',
  password: 'your_password',
  server: 'localhost', // 数据库服务器地址
  database: 'your_database',
  options: {
    encrypt: true, // 启用加密（Azure 必须）
    trustServerCertificate: true // 本地开发可启用
  }
};

// 创建连接池
const pool = new sql.ConnectionPool(config);
pool.connect().then(() => {
  console.log('Connected to SQL Server');
});

// 示例 API：查询数据
app.get('/api/users', async (req, res) => {
  try {
    const request = pool.request();
    const result = await request.query('SELECT * FROM Users');
    res.json(result.recordset);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// 启动服务
const port = 3000;
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

2.2 Vue 前端调用 API
在 Vue 组件中使用 axios 调用后端接口：

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('http://localhost:3000/api/users');
        this.users = response.data;
      } catch (error) {
        console.error('请求失败:', error);
      }
    }
  }
};
</script>

3. 安全注意事项
环境变量：
将数据库凭据存储在环境变量中（如 .env），避免硬编码：

DB_USER=your_username
DB_PASSWORD=your_password
DB_SERVER=localhost
DB_NAME=your_database

API 认证：
使用 JWT 或 OAuth2 保护后端接口，确保只有合法用户可访问。

输入验证：
对前端传递的参数进行过滤，防止 SQL 注入攻击。

4. 常见问题解决
4.1 连接失败
错误提示：ConnectionError: Failed to connect to server

检查项：

• 确认 SQL Server 允许远程连接（默认禁用）。
• 检查防火墙是否开放端口（默认 1433）。
• 验证用户名密码是否正确。

4.2 跨域问题

• 现象：Vue 请求被浏览器拦截。

• 解决：确保后端启用 CORS：

app.use(cors()); // 允许所有来源（开发环境）
// 生产环境应限制域名
app.use(cors({ origin: 'https://your-vue-domain.com' }));

4.3 性能优化
连接池配置：
在 SQL Server 配置中调整连接池参数：

const pool = new sql.ConnectionPool({
  ...config,
  pool: {
    max: 10, // 最大连接数
    min: 0,
    idleTimeoutMillis: 30000
  }
});

5. 替代方案
使用 ORM 框架：
使用 Sequelize 或 TypeORM 简化数据库操作：

const { Sequelize } = require('sequelize');
const sequelize = new Sequelize('mssql://user:password@localhost:1433/database');

使用其他后端语言：
若团队熟悉其他语言，可用以下方案替代 Node.js：

• Python：Django + pyodbc
• Java：Spring Boot + Spring Data JPA
• C#：ASP.NET Core + Entity Framework

总结
通过前后端分离的架构，Vue 前端通过 HTTP API 与后端交互，后端负责安全地连接 SQL Server 数据库。这种方式不仅安全，还支持水平扩展和维护。避免直接在前端操作数据库，是符合现代 Web 开发最佳实践的选择。