无法设置angular(6)+mysql+nodejs+express

嗨，我有一个关于这个的生存危机。
有没有人能给我举个例子，说明如何使用node/express后端将angular（我使用的是angular 6）前端与mysql数据库（不是nosql示例，有很多这样的例子）连接起来？
我周末一直在阅读，搜索google，stack，youtube等等，有很多例子只是关于一些东西，但不足以让我理解。我无法想象的是，我如何在我的前端按下一个按钮，做一个调用，做我的数据库，使它出现在我的网站上（基本上所有的积垢操作）。
我需要硬代码。我没有任何代码，因为我甚至无法想象如何在app.js中使用angular组件中的按钮连接，从而对mysql数据库执行crud操作。我真的很困惑。
假设我正在使用phpmyadmin for mysql，并且有一个名为 users ，1列，带 user_name 还有一个值 Aquiles . 有了这些，我想阅读，更新，删除。
其他帖子的链接（我搜索了几乎所有的帖子）、视频、教程都很受欢迎。
谢谢你的时间，问候。

我做到了

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

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');

我是在读这篇文章的时候读到的，用expressjs，node js/mysql-arjun创建了一个restfulapi

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（Angular ），服务器位于localhost:3000 like 我们在app.js中配置了它。
问题是，当您通过端口4200从前端发出get请求时，会导致一个错误。上面说你的要求正在走下坡路 http://localhost:4200/localhost:3000 或者类似的事情（很晚了，我没有记录确切的错误，抱歉）。所以经过一番研究，我遇到了这篇文章https://medium.freecodecamp.org/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c 使用“代理方法”。
瞧á, 在我的javascript控制台中，有一个数组，其中包含数据库中的所有内容。
读这篇文章可以更清楚地了解一切。这是一个相当糟糕的解释（对于高级的）。
使用cli连接到服务器的最佳方法
同端口4200，用于生产
故事代理
angular cli应用程序的api调用代理
当做。

无法设置angular(6)+mysql+nodejs+express

1条答案

我做到了

1. 在phpmyadmin或所需的数据库中创建数据库和表。

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

3. 棱角分明的

4. app.component.ts文件

最后

相关问题

热门标签

最新问答