我們如何使用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