如何使用Node.js+Ionic 2基于邮箱ID从MongoDB获取用户详情

咱们一步一步来实现从后端根据emailID查询用户信息，再在Ionic 2前端展示的完整流程：

后端实现（Node.js + MongoDB） #

1. 数据库连接配置（config/database.js） #

先把AWS托管的MongoDB连接配置好，示例代码如下：

const mongoose = require('mongoose');

const connectDB = async () => {
  try {
    // 替换成你自己的AWS MongoDB集群连接字符串
    await mongoose.connect('mongodb+srv://<你的用户名>:<密码>@<集群地址>/<数据库名>?retryWrites=true&w=majority', {
      useNewUrlParser: true,
      useUnifiedTopology: true
    });
    console.log('MongoDB（AWS托管）连接成功');
  } catch (err) {
    console.error('MongoDB连接失败:', err.message);
    process.exit(1);
  }
};

module.exports = connectDB;

2. 用户Schema定义（userprofile.js） #

定义包含emailID的用户数据结构，确保邮箱字段唯一：

const mongoose = require('mongoose');

const UserProfileSchema = new mongoose.Schema({
  emailID: {
    type: String,
    required: true,
    unique: true
  },
  name: {
    type: String,
    required: true
  },
  // 可根据需求添加其他字段，比如年龄、手机号等
  age: Number,
  phone: String
});

module.exports = mongoose.model('UserProfile', UserProfileSchema);

3. 路由配置（route.js） #

添加根据emailID查询用户的API路由：

const express = require('express');
const router = express.Router();
const UserProfile = require('./userprofile'); // 注意路径要匹配你的文件位置

// 根据emailID获取用户详情的API
router.get('/user/:emailID', async (req, res) => {
  try {
    const user = await UserProfile.findOne({ emailID: req.params.emailID });
    if (!user) {
      return res.status(404).json({ msg: '未找到该邮箱对应的用户' });
    }
    res.json(user);
  } catch (err) {
    console.error(err.message);
    res.status(500).send('服务器内部错误');
  }
});

module.exports = router;

4. 服务器启动配置（Server.js） #

引入数据库连接和路由，启动服务器在localhost:8000：

const express = require('express');
const connectDB = require('./config/database');
const userRoutes = require('./route'); // 路由文件路径

const app = express();

// 连接数据库
connectDB();

// 解析JSON请求体
app.use(express.json());

// 挂载用户路由
app.use('/api', userRoutes);

const PORT = 8000;
app.listen(PORT, () => console.log(`服务器运行在 http://localhost:${PORT}`));

提示：如果前端调用API时遇到跨域问题，可在后端安装cors中间件，在Server.js中添加：

const cors = require('cors');
app.use(cors());

前端实现（Ionic 2） #

1. Profile.ts提供者 #

创建用于调用后端API的服务提供者：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class Profile {
  apiUrl = 'http://localhost:8000/api';

  constructor(public http: Http) {}

  getUserByEmail(emailID: string) {
    return this.http.get(`${this.apiUrl}/user/${emailID}`)
      .map(res => res.json());
  }
}

2. 演示页面实现 #

页面TS文件（profile-page.ts）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Profile } from '../../providers/profile';

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html'
})
export class ProfilePage {
  emailID: string = '';
  user: any;
  errorMsg: string = '';

  constructor(public navCtrl: NavController, public profileService: Profile) {}

  fetchUser() {
    if (!this.emailID) {
      this.errorMsg = '请输入邮箱ID';
      return;
    }
    this.profileService.getUserByEmail(this.emailID)
      .subscribe(
        data => {
          this.user = data;
          this.errorMsg = '';
        },
        err => {
          this.errorMsg = err.json().msg || '获取用户信息失败';
          this.user = null;
        }
      );
  }
}

页面HTML文件（profile.html）

<ion-header>
  <ion-navbar>
    <ion-title>用户详情查询</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-label fixed>邮箱ID</ion-label>
    <ion-input type="email" [(ngModel)]="emailID" placeholder="输入邮箱"></ion-input>
  </ion-item>
  <button ion-button block (click)="fetchUser()">查询用户</button>

  <div *ngIf="errorMsg" class="error" style="color: red; margin-top: 10px;">{{ errorMsg }}</div>

  <ion-card *ngIf="user" style="margin-top: 20px;">
    <ion-card-header>用户详情</ion-card-header>
    <ion-card-content>
      <p><strong>邮箱:</strong> {{ user.emailID }}</p>
      <p><strong>姓名:</strong> {{ user.name }}</p>
      <p><strong>年龄:</strong> {{ user.age }}</p>
      <p><strong>手机号:</strong> {{ user.phone }}</p>
    </ion-card-content>
  </ion-card>
</ion-content>

内容的提问来源于stack exchange，提问作者Arun-