如何在WebStorm IDE中使用Angular/AngularJS将表单数据存入SQL Server并检索

Hey there! Let me walk you through how to save and retrieve form data to/from SQL Server when working with AngularJS (your current setup) and Angular (the modern framework). First off, a critical note: front-end apps can't connect directly to SQL Server—you'll need a backend API to act as the secure middleman. Let's break this down step by step.

1. 先搭建后端API (核心环节) #

You'll need a backend service (like ASP.NET Core, Node.js + Express) to handle database operations. Here's a quick example with ASP.NET Core and Entity Framework Core:

• Create an API controller (e.g., FormDataController) with two key methods:
  • POST to receive form data and insert it into SQL Server:

    [HttpPost]
    public async Task<IActionResult> SubmitForm([FromBody] FormData model)
    {
        if (ModelState.IsValid)
        {
            _context.FormData.Add(model);
            await _context.SaveChangesAsync();
            return Ok(new { message = "数据保存成功" });
        }
        return BadRequest(ModelState);
    }
    

  • GET to fetch stored data:

    [HttpGet]
    public async Task<IActionResult> GetFormData()
    {
        var data = await _context.FormData.ToListAsync();
        return Ok(data);
    }
    

  Don't forget to configure your SQL Server connection string and set up EF Core data models for your form data.

2. AngularJS Frontend Logic #

In your AngularJS app, use the $http service to communicate with the backend:

• Define a controller to handle form submission and data retrieval:

  angular.module('myApp').controller('FormController', function($http) {
    var vm = this;
    vm.formData = {};
    vm.submittedData = [];
  
    // Submit form to backend
    vm.submitForm = function() {
      $http.post('https://your-backend-url/api/formdata', vm.formData)
        .then(function(response) {
          alert(response.data.message);
          vm.loadData(); // Refresh data after submission
          vm.formData = {}; // Clear form
        })
        .catch(function(error) {
          console.error('提交失败:', error);
        });
    };
  
    // Fetch stored data
    vm.loadData = function() {
      $http.get('https://your-backend-url/api/formdata')
        .then(function(response) {
          vm.submittedData = response.data;
        })
        .catch(function(error) {
          console.error('加载数据失败:', error);
        });
    };
  
    // Load data on page init
    vm.loadData();
  });
  

• Corresponding HTML form:

  <div ng-controller="FormController as vm">
    <form ng-submit="vm.submitForm()">
      <input type="text" ng-model="vm.formData.name" placeholder="姓名" required>
      <input type="email" ng-model="vm.formData.email" placeholder="邮箱" required>
      <button type="submit">提交</button>
    </form>
  
    <h3>已提交的数据</h3>
    <ul>
      <li ng-repeat="item in vm.submittedData">{{item.name}} - {{item.email}}</li>
    </ul>
  </div>
  

The core idea is the same: use a backend API as the middleman. Here's how to implement it in modern Angular:

1. Backend API (Same as AngularJS) #

Reuse the same backend setup from the AngularJS section—no changes needed here. Just make sure to handle CORS if your frontend and backend are on different ports.

2. Angular Frontend Implementation #

• First, create a service to encapsulate HTTP requests (Angular best practice):

  import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class FormDataService {
    private apiUrl = 'https://your-backend-url/api/formdata';
  
    constructor(private http: HttpClient) {}
  
    submitForm(formData: any): Observable<any> {
      return this.http.post(this.apiUrl, formData);
    }
  
    getFormData(): Observable<any[]> {
      return this.http.get<any[]>(this.apiUrl);
    }
  }
  

• Create a component with reactive forms for validation and data handling:

  import { Component, OnInit } from '@angular/core';
  import { FormDataService } from './form-data.service';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-form',
    templateUrl: './form.component.html'
  })
  export class FormComponent implements OnInit {
    formGroup: FormGroup;
    submittedData: any[] = [];
  
    constructor(
      private formBuilder: FormBuilder,
      private formDataService: FormDataService
    ) {
      this.formGroup = this.formBuilder.group({
        name: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]]
      });
    }
  
    ngOnInit(): void {
      this.loadData();
    }
  
    onSubmit(): void {
      if (this.formGroup.valid) {
        this.formDataService.submitForm(this.formGroup.value)
          .subscribe({
            next: (response) => {
              alert(response.message);
              this.loadData();
              this.formGroup.reset();
            },
            error: (error) => {
              console.error('提交失败:', error);
            }
          });
      }
    }
  
    loadData(): void {
      this.formDataService.getFormData()
        .subscribe({
          next: (data) => {
            this.submittedData = data;
          },
          error: (error) => {
            console.error('加载数据失败:', error);
          }
        });
    }
  }
  

• Component HTML with validation feedback:

  <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
    <input type="text" formControlName="name" placeholder="姓名" required>
    <div *ngIf="formGroup.get('name')?.invalid && formGroup.get('name')?.touched">
      姓名为必填项
    </div>
    <input type="email" formControlName="email" placeholder="邮箱" required>
    <div *ngIf="formGroup.get('email')?.invalid && formGroup.get('email')?.touched">
      请输入有效的邮箱地址
    </div>
    <button type="submit" [disabled]="formGroup.invalid">提交</button>
  </form>
  
  <h3>已提交的数据</h3>
  <ul>
    <li *ngFor="let item of submittedData">{{item.name}} - {{item.email}}</li>
  </ul>
  

Key Reminders #

• Never connect frontend directly to SQL Server: This exposes your database credentials and structure, creating massive security risks. Always use a backend API to handle authentication, validation, and database logic.
• In WebStorm, you can directly scaffold Angular/AngularJS projects and drop these code snippets into the appropriate files. Don't forget to resolve CORS issues in your backend to allow requests from your frontend port.

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