Sql 从前端将数据插入并更新到数据库

我是网络开发新手。我正在开发一个角度应用程序。我在前端开发了一个角度表单，在后端开发了Node.js和Sql server。我需要一些帮助来将我的angular表单连接到sql server数据库。我想将数据从angular表单保存到sql server数据库

版本： 角度CLI:8.0.3 节点：10.16.0 操作系统：win32 x64 角度：8.0.1

我已经尝试使用RESTfulAPI通过post和get在服务器页面插入数据

单击角度窗体中的“提交”按钮时，如何将角度窗体连接到sql数据库并插入和更新数据

var express = require("express");
var bodyParser = require("body-parser");
var tediousExpress = require("express4-tedious");
var path = require("path")
var app = express();



// Body Parser Middleware
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: true }));

//CORS Middleware
app.use(function (req, res, next) {
    //Enabling CORS 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, contentType,Content-Type, Accept, Authorization");
    next();
});



app.get('/', function (req, res) {


    var sql = require("mssql");

    // config for your database
    var config = {
        server:'******',
        database: '*******',
        user:'******',
        password: '*****',
    };

    // connect to your database
    sql.connect(config, function (err) {

        if (err) console.log(err);

        // create Request object
        var request = new sql.Request();

        // query to the database and get the records
        request.query('select * from dbo.contact', function (err, recordset) {

            if (err) 
            console.log(err)

else
            // send records as a response
            res.send(recordset);

        });
    });
});

app.use("/contact", (req, res) => {
    res.sendfile( __dirname + "/src/app/contact/contact.component.html");
  });
  app.use("/product", (req, res) => {
    res.sendfile( __dirname + "/src/app/product/product.component.html");
  });
  app.use("/homepage", (req, res) => {
    res.sendfile( __dirname + "/src/app/home/home.component.html");
  });

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}....`));

我们在这里为您服务


接触
名称是必需的。
电子邮件是必需的。

提交
````
````contact.component.ts
从“@angular/core”导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClient}；
从“@angular/common/http”导入{HttpErrorResponse}；
从'@angular/Router'导入{Router}；
@组成部分({
选择器：“应用程序联系人”，
templateUrl:'./contact.component.html'，
样式URL:['./contact.component.css']
})
导出类组件{
标题='使用角度4'的简单示例联系我们页面'；
公共数据：any=[]
构造函数（专用http:HttpClient）{
}
保存（姓名、电子邮件、手机、主题、消息）：无效{
this.data['name']=name；
此.data['email']=电子邮件；
this.data['mobile']=mobile；
此.data['subject']=主题；
this.data['message']=消息；
console.log（this.data）；
//添加发送电子邮件或mysql的请求
this.http.post（'/contact1'，this.data）.subscribe(
res=>{
控制台日志（res）；
},
（错误：HttpErrorResponse）=>{
if（err.error instanceof error）{
log（“发生客户端错误”）；
}否则{
log（“发生服务器端错误”）；
}
});
}
}
````

您的问题是…？谢谢您的回复。我已经更新了，请检查。从表单中收集数据并根据其API将其发送到服务器。你想做什么？你犯了什么错误？目前，您的问题看起来像“请为我编写代码”。我能够读取并将数据从我的服务器页面插入数据库。我需要关于如何将angular表单连接到数据库的指导（将我的contact.component.html和contact.component.ts（contact表单）路由到server.js（server））@kris angular有很好的“入门”指南，请花15分钟阅读它，我相信你的大多数问题都会消失，或者至少你能够解释什么是不起作用的。。。

<div style="text-align:center">
    <h1 class="well">
      We are available here for you
    </h1>
    <div class="loader" *ngIf="dataloading"></div>

    <div class = "row">
      <div class="column">
          <div class ="container">
          <div class="col-md-5">
          <div class="form-area"> 
          <form role="form" (ngSubmit)="processForm()">
          <br style="clear:both">
          <h3 style="margin-bottom: 50px; text-align: center;">Contact</h3>
          <div class="form-group">
          <input required ngModel name="Name" #FirstName="ngModel" (change)="log(Name)" type="text" class="form-control" id="Name" name="name" placeholder="Name" [(ngModel)]="name" required>
        <div class="alert alert-danger"  *ngIf="Name.touched && !Name.valid" > Name is required.</div>
        </div>

          <div class="form-group">
          <input required  type="email" class="form-control" id="email" name="email" placeholder="Email" [(ngModel)]="email" required>
          <div class="alert alert-danger"  *ngIf="email.touched && !email.valid" > Email is required.</div>
          </div>
          <div class="form-group">
          <input type="phone" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" [(ngModel)]="mobile" required>
          </div>
          <div class="form-group">
          <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" [(ngModel)]="subject" required>
          </div>
          <div class="form-group">
          <textarea class="form-control" type="textarea" id="message" name="message" placeholder="Message max(200)" [(ngModel)]="message" maxlength="140" rows="7"></textarea>              
          </div>
          <hr class="mb-4">
          <button type="button" id="submit" name="submit" class="btn btn-primary btn-lg btn-block" (click)="save(name, email, mobile, subject, message)">Submit</button>
          </form>
          </div>
          </div>
          </div>
````
````contact.component.ts
import { Component, OnInit} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {HttpErrorResponse} from '@angular/common/http';
import {Router} from '@angular/router';


@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent {
  title = 'Simple Example Contact-us page using Angular 4';
  public data:any=[]


  constructor(private http: HttpClient){
  }

  save(name, email, mobile, subject, message): void {
    this.data['name']= name;
                this.data['email']= email;
                this.data['mobile']= mobile;
                this.data['subject']= subject;
                this.data['message']= message;
    console.log(this.data);
                //add request to send email or into mysql
                this.http.post<any>('/contact1', this.data).subscribe(
        res => {
          console.log(res);
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occurred.");
        }
      });
   }
}

````