Question

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

我在网上找到的大多数教程都侧重于服务器端或客户端。对于初学者或使用以前版本的技术，一旦接触都既复杂。离子3为例。我已经为此工作了几天。请注意，我是那些技术的初学者，因此我正在尝试一些简单的方法。目的是带来交流。

到目前为止，我做了什么： -我创建了客户项目： -在app.module.ts文件中导入了HttpClientModule -我创建了services文件夹，并使用以下命令添加了service用户： ionic g服务服务/用户 -我在services / user.service.ts文件中导入了HttpCLient -我在主页上用按钮创建了一个简单的登录表单，并在home.page.ts和函数中声明了[（ngModel）] s变量。另一方面，我在另一个文件夹中创建了服务器应用程序。我将所有内容保持简单，因为此处的目的是理解并使连接正常工作。因此，请在帮助使代码保持简单的同时提醒您使用上述技术。

这里有一些东西可以帮助您了解项目的组织方式：

//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

这是核心问题。尽管我对整个代码进行了一些调整，但我还是必须在服务器端执行以下命令：npm install --save body-parser cors del express method-override morgan并添加以下代码：const bodyParser = require('body-parser'); const logger = require('morgan'); const methodOverride = require('method-override') const cors = require('cors'); app.use(logger('dev')); app.use(bodyParser.json()); app.use(methodOverride()); app.use(cors());希望对以后的人有所帮助–

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

1 个答案: