问题描述

嗨，我有一个关于这个的生存危机。

谁能给我一个示例，说明如何使用 node/express 后端将我的 Angular（我正在使用 Angular 6）前端与MySQL数据库（不是 NoSQL 示例，有很多）连接起来？

周末我一直在阅读，搜索 google、stack、youtube 等，并且有很多关于某些东西的示例，但还不足以让我理解。我想不出的是如何在我的前端按下一个按钮，调用我的数据库并让它出现在我的网站上（基本上所有的 CRUD 操作）。

我需要硬代码。我没有我的任何代码，因为我什至无法想象如何在我的 app.js 中连接我的 Angular 组件中的按钮以对 mysql DB 进行粗略操作。我真的很困惑。

假设我在 MySQL 中使用 phpmyadmin，并且有一个名为的数据库users，其中 1 列的user_name值为Aquiles. 有了它，我想阅读，更新，删除。

其他帖子的链接（尽管我几乎搜索了所有帖子）、视频、教程，都是受欢迎的。

谢谢你的时间，问候。

标签： mysqlnode.jsangularexpress

我做的

回答我自己的问题，如果有任何灵魂因此而绝望，就在这里。

1. 在 phpmyAdmin 或您想要的数据库中创建一个数据库和表。

CREATE TABLE IF NOT EXISTS 'tasks' (

  'id' int(11) NOT NULL,
  'task' varchar(200) NOT NULL,
  'status' tinyint(1) NOT NULL DEFAULT '1',
  'created_at' datetime NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;



ALTER TABLE 'tasks' ADD PRIMARY KEY ('id');
ALTER TABLE 'tasks' MODIFY 'id' int(11) NOT NULL AUTO_INCREMENT;

INSERT INTO 'tasks' ('id', 'task', 'status', 'created_at') VALUES
(1, 'Find bugs', 1, '2016-04-10 23:50:40'),
(2, 'Review code', 1, '2016-04-10 23:50:40'),
(3, 'Fix bugs', 1, '2016-04-10 23:50:40'),
(4, 'Refactor Code', 1, '2016-04-10 23:50:40'),
(5, 'Push to prod', 1, '2016-04-10 23:50:50');

我通过阅读这篇文章使用 Express js、Node js/MySQl 创建 RESTful API - Arjun

2.后端：服务器+API端点

const express = require('express');
    const mysql = require('mysql');
    const bodyParser = require('body-parser');
    const app = express();

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({
        extended: true
    }));

    // Connect my db
    var connection = mysql.createConnection({
      host     : 'localhost',
      user     : 'root',
      password : '',
      database : 'dbName'
    });

    connection.connect(function(err) {
        if (err) {
          console.error('error connecting: ' + err.stack);
          return;
        }

        console.log('connected as id ' + connection.threadId);
    });

    app.get('/', function (req, res) {
    res.send('Hello World!');
    });

    // Port that will be listened
    app.listen(3000, function () {
      console.log('Example app listening on port 3000!');
    });

    // the query
    querie = 'SELECT * FROM tasks';

**THIS IS THE API ENDPOINT FOR THE GET REQUESTS**

    app.get('/todos', function (req, res) {
        connection.query(querie, function (error, results, fields) {
            if (error) throw error;
            return res.send({ error: false, data: results, message: 'Todos list.' });
        });
    });

3. 角度

app.component.html文件_

<button
  (click)="getData()">GET Profile
</button>

4. app.component.ts文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor (private httpClient:HttpClient){ }

  getData(){
    this.httpClient.get('/api/todos')
      .subscribe(
          (data:any[]) => {
            console.log(data);
          }
        )
  }
}

最后

现在您需要在一个终端窗口中启动您的 Angular 项目，而在另一个终端窗口中启动服务器。一个将在端口 4200（角度）中，服务器将在 localhost:3000 中，就像我们在app.js中配置的一样。

问题是，当您通过端口 :4200 从前端发出获取请求时，会导致错误。它说您的请求正在通过http://localhost:4200/localhost:3000或与此非常相似（很晚，我没有记录确切的错误，抱歉）。因此，经过一些研究，我遇到了这篇文章https://medium.freecodecamp.org/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c并使用了“代理方法”。

瞧，在我的 javascript 控制台中有一个数组，里面包含我的数据库中的所有内容。

阅读本文以更清晰地了解所有内容。这是一个非常糟糕的解释（对于高级解释）。

问候。

mysql - 无法设置 Angular (6) + MySQL + NodeJS + Express

问题描述

解决方案

我做的

1. 在 phpmyAdmin 或您想要的数据库中创建一个数据库和表。

2.后端：服务器+API端点

3. 角度

4. app.component.ts文件

最后

推荐阅读