我们如何使用 node.js 从 Angular 7 应用程序中的 mysql 数据库获取数据并将其显示在 Angular 组件 html 页面上

Question

我已经尝试了每件事，但我无法理解如何达到我的目标。 现在我的主要目标是我想从 mysql 数据库中获取数据，然后在 page-one.component.ts 文件的角度组件中访问这些信息。现在我可以连接到数据库并可以从 server.js 文件中的数据库获取数据。但我不明白如何获取角度分量中的信息。到目前为止我尝试过的方法是我在 angular.json 文件中包含 server.js 文件，然后在我的 page-one.component 中包含函数“get_data”（get_data 函数从 server.js 文件中的数据库中获取数据）。 ts 文件，然后我调用 page-one.component.ts 文件中的函数。该函数被调用，但问题是我在 server.js 文件中出现“无法读取未定义的属性‘createConnection’”的错误。此错误使我无法从数据库中获取信息。但是当我在 server.js 文件中调用这个 get_data 函数时，我得到了数据库信息，我可以在控制台中打印信息。 任何人都可以给我解决方案。 我认为错误是由于变量的上下文。 但请指导我。

我的 server.js 文件代码。

const express = require('express');
const path = require('path');
const http = require('http');
const socketIO = require('socket.io');
const app = express();

const server = http.createServer(app);
const port = process.env.PORT || 3000;


app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));

});

var mysql = require('mysql');

var dbconfig = {
    host: "localhost",
    user: "root",
    password: "",
    database: "mydb"
}

var con = mysql.createConnection(dbconfig);
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});


 get_data();   

 function get_data(){

    console.log("function called");

    var con = this.mysql.createConnection(dbconfig);  ===> GOT ERROR HERE

    con.query("SELECT * FROM teacher", function (err, result, fields) {
        if (err) throw err;
        console.log(result);
    });

}

server.listen(port, () => {

    console.log(`server running on port ${port} `);
})

我的 page-one.component.ts 文件代码。

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

declare function get_data(): any; 
@Component({
  selector: 'app-page-one',
  templateUrl: './page-one.component.html',
  styleUrls: ['./page-one.component.css']
})
export class PageOneComponent implements OnInit {

  constructor(private http: Http) { }

  ngOnInit() {
    get_data();
  }

}

我的 angular.json 文件代码。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": 
            [
              "server.js" ===> INCULDED THE SERVER.JS FILe HERE
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

“无法读取未定义的属性‘createConnection’”

Answer 1

const mysql = require('mysql2');
const connection = mysql.createPool({
  host: 'localhost',
  user: '',
  password: '',
  database: '',
  connectionLimit: 10,
  queueLimit: 0
});
connection.promise((err) => {
  if (err) throw err;
  console.log('connected!');
});
module.exports = connection.promise();

Answer 2

app.get("/youroute", (req, res, next) => {
    "use strict";
    const getProduct = "SELECT * FROM yourtable";
    database.query(getProduct, (err, rows, fields) => {
      if (err) {
        res.status(500).send({ error: 'Something failed!' })
      };
      res.status(200).json({
        message: "",
        product: rows,
      });
    });
  });

Answer 3

Service for Angular

export interface You {
    id: number,
    title: string,
    content: string
  }
Get Method on Model Angular

getData() {
      this.http.get<{message:string,name:Name[]}>("URL")
    .subscribe(result =>{
      console.log(result);
    });
and in HTML make For Loop with NGFOR for display your data