node.js - 发布后如何从数据库中将数据返回到前端

Question

 import { Component, OnInit, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
 import { Validators } from '@angular/forms';
 import { HttpService } from '../http.service';



 @Component({
    selector: 'todo-app',
    templateUrl: './todo-app.component.html',
    styleUrls: ['./todo-app.component.css']
  })
  export class TodoAppComponent implements OnInit {

  myForm: FormGroup;
  todoitems = [];
  todolist;
  submitted = false;
  name;

    constructor(private router: Router, private formBuilder: FormBuilder, private httpService: HttpService ) {
    }

    ngOnInit() {
      this.myForm = this.formBuilder.group({
         todoitems : [this.todolist, Validators.compose([Validators.required, Validators.minLength(3)])]

      });

      this.httpService.gettodo().subscribe(
        (data:any[]) => {
          this.todoitems = data;
          console.log(this.name);
          }
      );

  }

    addTodo() {

      if (this.myForm.invalid) {
        this.submitted = true;


     }
      if (this.myForm.valid) {
        var body = { name: this.todolist }
       this.httpService.addTodoo(body).subscribe(
        (data:any) => {
          this.todoitems = data;
        }
      )

        this.myForm.reset();
        this.submitted = false;   
    }     

    }
    deletetodo(id: any) {
      console.log(id);
      this.httpService.deleteTodo(id).subscribe((data)=>{
        this.todoitems = data;
      });

  }

  }

  <form [formGroup]="myForm">

      <div>

          <input formControlName="todoitems"  [(ngModel)]="todolist" name="todoitems">
          <button  type="submit" (click)="addTodo()">Add</button>
              <div>
              <div *ngIf="submitted && myForm.controls.todoitems.errors">
                  <div *ngIf="myForm.controls.todoitems.errors.required"> please fill</div>
                  <div *ngIf="myForm.controls.todoitems.errors.minlength">min 3</div>
              </div>

          </div>
      </div>
  <br>
             <div>
          <table style="width:50%">
          <tr *ngFor="let todoitem of todoitems; let i = index" >

              <td>{{ todoitem.name }}</td>

           <td>
                  <button (click)="deletetodo(todoitem.id)">Delete</button>
           </td>

          </tr>

       </table>
      </div>

  </form>

我正在从前端发布我的数据并将其发送到后端就好了，但它没有显示在前端，我如何正确获取数据并在前端打印

  app.post('/api/names', (req, res) => {
    let todoitem = {todoitems:req.body.name
                };
    var sql = `INSERT INTO todolist SET?`;
    mysqlConnection.query(sql, todoitem, (err) => {
      if (err) throw err;
      res.send(200)
    })
  });

  app.get('/api/names', (req, res) => {
    mysqlConnection.query('SELECT todoitems FROM todolist', (err, rows, fields) => {
        if (!err)
            res.send(rows);
        else
            console.log(err);
    })
  });

标签： node.jsangularbackend

Answer 1

app.get('/api/names', (req, res) => {
  var query = 'select id, code, name from Continent'
  findTodoItems(query, function(err, results) {
        if (err) {
           console.log(err)
           throw err; 
        }
        res.send(results); 
  });
});

 function findTodoItems(queryString, cb) {
     mysqlConnection.query(queryString, function (err, rows, fields) {
         cb(err, rows);
     });
  };