如何在角度6中使用Sql Server连接?

时间:2018-07-19 07:19:16

标签: sql-server angular6

我已经使用sqlserver在“ Angular6”中建立了连接。

server.js

var express = require('express');
var app = express();

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

    var sql = require("mssql");

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

    // 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 tbl', function (err, recordset) {

            if (err) console.log(err)

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

        });
    });
});

var server = app.listen(5000, function () {
    console.log('Server is running..');
});

data.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  }
  getUser(userId) {
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
  }

  getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
  }

  getPhotos()
  {
    return this.http.get('https://jsonplaceholder.typicode.com/photos');
  }

  getTodos()
  {
    return this.http.get('https://jsonplaceholder.typicode.com/todos');
  }
}

现在我已经使用了虚拟api作为结果。
如何获得服务中的数据库结果? 我已成功从Sqlserver数据库中获取结果。

我也想在组件中显示记录

user.component.html

<h1>Users</h1>

我可以在user.component.ts中导入server.js吗?
如果可以,我该怎么办?

1 个答案:

答案 0 :(得分:7)

我认为您误会了棱角。 Angular碰到浏览器,其上下文仅限于此。

如果需要连接到数据库,则需要使用某些后端技术(例如express和nodejs)作为发布的代码。

主要方法是公开一些后端服务(例如REST服务),这些服务是使用服务器端技术(nodejs,j2ee,php等)开发的,然后使用Angular询问它们的数据。

通常要实现这个目标,您应该使用HttpClient

您应该搜索一个教程,例如this

请求数据的角度示例

在angular中,您应该创建一个服务类来调用您的公开服务,然后可以在该类中创建一个如下所示的方法:

import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Injectable} from '@angular/core';
import {catchError, map, tap} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TestService {

  get(): Observable<any> {
    return this.http.get([YOUR_BACKEND_SERVICE_URL]).pipe(
        catchError(this.handleError(`get`))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {

      console.error(error);

      this.log(`${operation} failed: ${error.message}`);

      return of(result as T);
     };
   }
}

然后,您应该编写这样的组件:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  data: any;

  constructor(private testService: TestService) { }



  ngOnInit() {
    this.getData();
  }

  getData(): void {
    this.testService.get().subscribe(data => console.log(data));
  }

}

您需要使用AngularCli创建服务和组件,以避免手动声明并将它们导入app.module.ts

为了更好地了解正在发生的事情,建议您阅读Angular Tour of Heroes tutorial, Services section