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

Question

我已经尝试了所有事情，但是我无法理解如何实现自己的目标。 现在我的主要目标是我想从mysql数据库中获取数据，然后在有角度的组件（page-one.component.ts文件）中访问此信息。 现在，我可以连接到数据库，并且可以从server.js文件中的数据库获取数据。 但我不明白如何获取角度分量信息。 到目前为止，我尝试过的方法是将我的server.js文件包含在angular.json文件中，然后在我的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