Не могу настроить Angular (6) + MySQL + NodeJS + Express

Question

Привет, у меня как бы экзистенциальный кризис по этому поводу.

Может ли кто-нибудь привести мой пример подключения моего внешнего интерфейса Angular (я использую angular 6) к базе данных MySQL (не пример NoSQL, пожалуйста, их много), используя нод / экспресс-бэкэнд?

Я читал на выходных, искал в Google, в стеке, на YouTube и т. Д., И есть много примеров чего-то, но этого недостаточно для меня, чтобы понять.Я не могу понять, как мне нажать кнопку во внешнем интерфейсе, сделать вызов, сделать мою БД и сделать так, чтобы она появилась на моем веб-сайте (в основном все операции CRUD).

Мне нужен жесткий код. У меня нет своего кода, потому что я даже не представляю, как заставить в моем app.js соединиться с кнопкой в ​​моем угловом компоненте, чтобы выполнить операцию crud с базой данных mysql.Я ДЕЙСТВИТЕЛЬНО растерялся.

Предположим, я использую phpmyadmin для MySQL, и есть база данных с именем users, 1 столбец с user_name и одно значение Aquiles.С этим я хотел бы читать, обновлять, удалять.

Ссылки на посты других пользователей (хотя я их все обыскал), видео, учебники, все приветствуются.

Спасибо заВаше время, С уважением.

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

Я почитал это из чтения этого поста Создание RESTful API с Express js, Node js / MySQl - 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.Angular

Файл 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);
          }
        )
  }
}

Наконец

Теперь вам нужно запустить свой угловой проект в одном окне терминала, а сервер - в другом.Один будет в порту 4200 (угловой), а сервер будет в localhost: 3000, как мы настроили его в нашем app.js .

Проблема в том, что когда вы делаете запрос getс вашего внешнего интерфейса через порт: 4200 вы приводите к ошибке.В нем говорится, что ваши запросы выполняются через http://localhost:4200/localhost:3000 или что-то очень похожее (уже поздно, и я не задокументировал точную ошибку, извините).Поэтому после некоторого исследования я столкнулся с этим постом https://medium.freecodecamp.org/the-best-ways-to-connect-to-the-server-using-angular-cli-b0c6b699716c и использовал «прокси-подход».

Voilá , в моей консоли javascript есть массив со всем, что моя база данныхимел внутри.

Прочтите эту статью, чтобы иметь более четкое представление обо всем.Это довольно слабое объяснение (для продвинутых).

1. лучшие способы подключения к серверу с использованием angular-cli
2. тот же порт-4200-для-производства-ан
3. истории-прокси
4. прокси-для-api-call-for-your-angular-cli-app

С уважением.