能否不使用.NET Core从Angular项目向SQL Server注册及存储表单数据？

Hey there! Let's break down your two questions one by one—both are totally doable, and I'll walk you through practical, step-by-step ways to make it happen without relying on .NET Core.

Short answer: Yes! Angular runs in the browser, so it can't directly connect to SQL Server (that would expose your database credentials, which is a massive security risk). But you don't need .NET Core—there are plenty of other backend options to act as a secure middleman between your Angular frontend and SQL Server. Here are two popular, easy-to-implement approaches:

Option 1: Node.js + Express with the mssql library #

Node.js is a lightweight, JavaScript-based backend that pairs naturally with Angular. Here's how to set it up:

• First, initialize a Node.js project: npm init -y
• Install required dependencies: npm install express mssql cors
• Create a server file (e.g., server.js) with code to connect to SQL Server and handle data insertion:

  const express = require('express');
  const sql = require('mssql');
  const cors = require('cors');
  const app = express();
  
  // Enable CORS to allow Angular requests
  app.use(cors());
  // Parse JSON request bodies
  app.use(express.json());
  
  // SQL Server connection configuration
  const dbConfig = {
    user: 'your_db_username',
    password: 'your_db_password',
    server: 'your_server_name', // e.g., localhost or Azure SQL endpoint
    database: 'your_database_name',
    options: {
      encrypt: true, // Required for Azure SQL
      trustServerCertificate: true // Safe for local development
    }
  };
  
  // Endpoint to receive data from Angular
  app.post('/api/save-data', async (req, res) => {
    try {
      // Connect to SQL Server
      await sql.connect(dbConfig);
      // Extract form data from request body
      const { firstName, lastName, email } = req.body;
  
      // Use parameterized query to prevent SQL injection
      const result = await sql.query(`
        INSERT INTO Users (FirstName, LastName, Email)
        VALUES (@firstName, @lastName, @email)
      `, { firstName, lastName, email });
  
      res.status(200).json({ message: 'Data registered successfully!' });
    } catch (err) {
      console.error('Database error:', err);
      res.status(500).json({ error: 'Failed to save data to SQL Server' });
    } finally {
      // Close the database connection
      await sql.close();
    }
  });
  
  // Start the server
  app.listen(3000, () => console.log('Backend running on http://localhost:3000'));
  

• In your Angular component, send the data to this endpoint using HttpClient:

  import { HttpClient } from '@angular/common/http';
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-data-form',
    templateUrl: './data-form.component.html'
  })
  export class DataFormComponent {
    formData = { firstName: '', lastName: '', email: '' };
  
    constructor(private http: HttpClient) {}
  
    onSubmit() {
      this.http.post('http://localhost:3000/api/save-data', this.formData)
        .subscribe({
          next: (response) => console.log('Success:', response),
          error: (err) => console.error('Error:', err)
        });
    }
  }
  

Option 2: Python Flask with pyodbc #

If you prefer Python, Flask is a simple backend framework that works great for this use case:

• Install dependencies: pip install flask pyodbc flask-cors
• Create app.py:

  from flask import Flask, request, jsonify
  from flask_cors import CORS
  import pyodbc
  
  app = Flask(__name__)
  CORS(app)
  
  # SQL Server connection string
  conn_string = (
    r'DRIVER={ODBC Driver 17 for SQL Server};'
    r'SERVER=your_server_name;'
    r'DATABASE=your_database_name;'
    r'UID=your_db_username;'
    r'PWD=your_db_password;'
  )
  
  @app.route('/api/save-data', methods=['POST'])
  def save_data():
    data = request.get_json()
    try:
      conn = pyodbc.connect(conn_string)
      cursor = conn.cursor()
      # Parameterized query to avoid SQL injection
      cursor.execute("""
        INSERT INTO Users (FirstName, LastName, Email)
        VALUES (?, ?, ?)
      """, (data['firstName'], data['lastName'], data['email']))
      conn.commit()
      return jsonify({'message': 'Data saved successfully!'})
    except Exception as e:
      print('Database error:', e)
      return jsonify({'error': 'Failed to save data'}), 500
    finally:
      conn.close()
  
  if __name__ == '__main__':
    app.run(port=3000, debug=True)
  

• The Angular code remains almost identical—just send your POST request to http://localhost:3000/api/save-data.

Absolutely! Capturing form data in Angular is straightforward (you can use template-driven or reactive forms), and then you just send that data to your backend (like the Node.js/Flask examples above) to insert into SQL Server. Here's an example using Angular's reactive forms (great for complex validation):

Step 1: Set up reactive forms in Angular #

First, import ReactiveFormsModule in your Angular module:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule]
})
export class AppModule {}

Step 2: Build the form in your component #

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-data-form',
  templateUrl: './data-form.component.html'
})
export class DataFormComponent implements OnInit {
  registerForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {}

  ngOnInit(): void {
    // Initialize form with validation rules
    this.registerForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    if (this.registerForm.valid) {
      // Send valid form data to backend
      this.http.post('http://localhost:3000/api/save-data', this.registerForm.value)
        .subscribe({
          next: () => {
            alert('Data saved successfully!');
            this.registerForm.reset();
          },
          error: (err) => alert('Error saving data: ' + err.message)
        });
    }
  }
}

Step 3: Create the form template (data-form.component.html) #

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div>
    <label>First Name:</label>
    <input formControlName="firstName" type="text">
    <span *ngIf="registerForm.get('firstName')?.invalid && registerForm.get('firstName')?.touched">
      First name is required
    </span>
  </div>
  <div>
    <label>Last Name:</label>
    <input formControlName="lastName" type="text">
    <span *ngIf="registerForm.get('lastName')?.invalid && registerForm.get('lastName')?.touched">
      Last name is required
    </span>
  </div>
  <div>
    <label>Email:</label>
    <input formControlName="email" type="email">
    <span *ngIf="registerForm.get('email')?.invalid && registerForm.get('email')?.touched">
      Please enter a valid email address
    </span>
  </div>
  <button type="submit" [disabled]="!registerForm.valid">Save Data</button>
</form>

Critical Notes #

• Never expose SQL credentials in Angular: Always use a backend proxy—this is non-negotiable for security.
• Use parameterized queries: As shown in all examples, this prevents SQL injection attacks (one of the most common database security vulnerabilities).
• Validate data twice: Add client-side validation in Angular and server-side validation in your backend to ensure data integrity.

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