mysql - 如何在 ionic 4 客户端应用程序和 Express 服务器之间建立连接？

Question

我正在尝试使用 ionic 4、node.js 和express 在服务器和客户端应用程序之间建立连接。当然，我需要使用 Mysql 将数据插入数据库，但是一旦我可以从客户端应用程序到服务器 api 接收数据，剩下的就不那么困难了。如何在ionic 4应用程序和express js服务器之间进行通信？

我在网上找到的大多数教程要么关注服务器端，要么关注客户端。一旦接触到，这两者对于初学者来说要么非常复杂，要么使用以前版本的技术。例如 Ionic 3 左右。我已经为此工作了几天了。请注意，我是这些技术的初学者，因此我只是尝试一些简单的事情。这里的目的是带来沟通。

到目前为止我做了什么:- 我创建客户端项目:- 在 app.module.ts 文件中导入 HttpClientModule- 我创建了服务文件夹并使用以下命令添加了服务用户:ionic g 服务 服务/用户-我在 services/user.service.ts 文件中导入了 HttpCLient-我有我的主页，我在其中创建了一个带有按钮的简单登录表单，并在 home.page.ts 和函数中声明了 [(ngModel)] 变量...另一方面，我在不同的文件夹中创建了服务器应用程序。我让一切保持简单，因为这里的目的是理解并使连接发挥作用。所以请在帮助的同时尽量保持代码简单，并尽可能用上面提到的技术进行提醒。

这里有一些内容可以帮助您了解项目的组织方式:

//Client app:
//home.page.ts

import { Component } from '@angular/core';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  login: string;
  pwd: any;
  constructor(private service: UserService) {
  }
  confirmer() {
    const logins = {
      "user": this.login,
      "pwd": this.pwd
    }
    this.service.confirm(logins);
  }

}


//home.page.html
<ion-content>
   Hello
  <ion-input type="text" [(ngModel)]="login"></ion-input>
  <ion-input type="password" [(ngModel)]="pwd"></ion-input>
  <ion-button (click)="confirmer()">Confirmer</ion-button>
</ion-content>

//app.module.ts
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}


//user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  user: string;
  pwd: any;
  constructor(private httpClient: HttpClient) { }

  confirm(user) {
    return this.httpClient.post('127.0.0.1:300/login', user);
  }


}


//Server side:
//app.js
const express = require('express');
const mysql = require('mysql');

const app = express();
app.listen(3000, function (req, res) {
    console.log('listening...');
});
app.post('/login', function (req, res) {
    console.log("Got a POST request for /login page");
    res.send('Hello POST');
    console.log('Post request...');
 })

我没有收到任何错误。这些人似乎自己工作得很好。肯定有什么我不明白的地方。请让答案尽可能简单，因为我没有使用错误处理、存储或其他任何东西。我只想当用户单击“确认”按钮时服务器获取登录名和密码。提前致谢。

Answer 1

这是cors问题。虽然我对整个代码进行了一些调整，但我必须在服务器端执行此命令:npm install --save body-parser cors del express method-override morgan并添加以下代码: const bodyParser = require('body-parser'); const logger = require(' morgan '); const methodOverride = require('方法覆盖') const cors = require('cors'); app.use(logger('dev')); app.use(bodyParser.json()); app.use(methodOverride()); app.use(cors()); 希望它对将来的人有所帮助 -