Ionic 我无法将我的离子应用程序与MySQL数据库连接

在一个项目中，我不得不做我从一个youtube项目复制一些行，试图连接登录页面到一个mysql数据库.所有的项目是在一个xampp的htdocs文件夹，也有一个server_api文件夹的config.php（我描述它的内容如下）和一个file_aski. php（没有在它）.请任何帮助将是伟大的!谢谢.
我在下面描述的文件是：
config.php
app.module.ts
app.component.ts
app-routing.module.ts
login.page.ts
login.page.html

<?php
// setting config database
define('DB_NAME', 'dbtotalinspector');
define('DB_USER', 'root');
define('DB_PASSWORD', ''); // default
define('DB_HOST', 'localhost'); // default xampp
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
?>

应用程序模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
/* import { HttpModule } from '@angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '@ionic/storage-angular';
*/
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule /* , IonicStorageModule.forRoot(), PostProvider*/],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy } /*, PostProvider */ ],
  bootstrap: [AppComponent],
})
export class AppModule {}

应用程序组件

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor() {}
}

应用程序路由模块

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'seleccionar-obra',
    loadChildren: () => import('./seleccionar-obra/seleccionar-obra.module').then( m => m.SeleccionarObraPageModule)
  },
  {
    path: 'cargar-obra',
    loadChildren: () => import('./cargar-obra/cargar-obra.module').then( m => m.CargarObraPageModule)
  },
  {
    path: 'cargar-item',
    loadChildren: () => import('./cargar-item/cargar-item.module').then( m => m.CargarItemPageModule)
  },
  {
    path: 'desplegar-items-de-obra',
    loadChildren: () => import('./desplegar-items-de-obra/desplegar-items-de-obra.module').then( m => m.DesplegarItemsDeObraPageModule)
  },
  {
    path: 'tomar-fotografia',
    loadChildren: () => import('./tomar-fotografia/tomar-fotografia.module').then( m => m.TomarFotografiaPageModule)
  },
  {
    path: 'generar-informe',
    loadChildren: () => import('./generar-informe/generar-informe.module').then( m => m.GenerarInformePageModule)
  },
  {
    path: 'confirmar-enviar-informe',
    loadChildren: () => import('./confirmar-enviar-informe/confirmar-enviar-informe.module').then( m => m.ConfirmarEnviarInformePageModule)
  },
  {
    path: 'desplegar-foto',
    loadChildren: () => import('./desplegar-foto/desplegar-foto.module').then( m => m.DesplegarFotoPageModule)
  },
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  constructor(private router: Router) { }
  ngOnInit() {
  }
  btnClickIngresar(){
    this.router.navigateByUrl('/home');
  }
}

<app-header></app-header>
<ion-content>
  <div class="container">
    <ion-card>
      <ion-card-header>
        <ion-card-title>Iniciar sesión</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <ion-item>
          <ion-icon name="person-outline" slot="start"></ion-icon>
          <ion-item>
            <ion-label position="floating">Usuario</ion-label>
            <ion-input></ion-input>
          </ion-item>
        </ion-item>
        <ion-item>
          <ion-icon name="lock-open-outline" slot="start"></ion-icon>
          <ion-item>
            <ion-label position="floating">Contraseña</ion-label>
            <ion-input type="password"></ion-input>
          </ion-item>
        </ion-item>
          <ion-button expand="full" (click)="btnClickIngresar();">INGRESAR</ion-button>
      </ion-card-content>
      </ion-card>
    </div>
  </ion-content>

感谢所有的建议，我正在阅读指南。好的，我看到我必须把代码削减到最重要的部分。正如我所看到的，主要的问题是在“post-providers.ts”，也许在“app.module.ts”也是。我拿出了/* */之间的代码，我将向您展示代码的外观和错误消息。
post-providers.ts

// providers api
import { Injectable } from "@angular/core";
import { Http,Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class PostProvider {
    server: string = "http://localhost/server_api";
    
    constructor (public http: Http){

    }

    postData(body, file){
        
        let type = "application/json; charset=UTF-8";
        let headers = new Headers({ 'Content-Type': type });
        let options = new RequestOptions ({ headers: headers });

        return this.http.post(this.server + file, JSON.stringify(body), options)
        .map(res => res.json());

    }

}

注意：在上述代码的“.map”中，它显示“属性”map“在类型”Observable '. ts（2339）上不存在”
app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpModule } from '@angular/http';
import { PostProvider } from '../providers/post-provider';
import { IonicStorageModule } from '@ionic/storage-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot(), PostProvider, HttpModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, PostProvider ],
  bootstrap: [AppComponent],
})
export class AppModule {}

注意：在app.module.ts中，“HttpModule”在两个“import {}”中都被划掉了（或删除），并且该站点的@NgModule中的导入内容显示为空白，并且编译成功。但是我没有看到登录页面。

错误为：

./node_modules/rxjs/add/operator/map.js:7:0-39 - Error: Module not found: Error: Can't resolve 'rxjs-compat/add/operator/map' in 'C:\xampp\htdocs\totalinspector\node_modules\rxjs\add\operator'
[ng]
[ng] Error: src/providers/post-provider.ts:21:10 - error TS2339: Property 'map' does not exist on type 'Observable<Response>'.
[ng]
[ng] 21         .map(res => res.json());
[ng]             ~~~
[ng] × Failed to compile.

Ionic 我无法将我的离子应用程序与MySQL数据库连接

1条答案

相关问题

热门标签

最新问答