要在Angular 2中访问MongoDB数据,您需要使用Node.js作为服务器端,并使用Mongoose作为MongoDB的ODM(对象数据映射)库。以下是一个解决方法的示例:
首先,确保您已经安装了Node.js和MongoDB,并正确地设置了MongoDB数据库。
创建一个新的Angular 2项目,并安装必要的依赖项。在项目的根目录中打开终端,运行以下命令:
npm install --save mongoose express body-parser
// 导入所需的模块
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
// 连接到MongoDB数据库
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true });
// 创建MongoDB模式和模型
const UserSchema = new mongoose.Schema({
name: String,
email: String,
password: String
});
const User = mongoose.model('User', UserSchema);
// 创建Express应用程序
const app = express();
// 解析请求体
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// 处理GET请求
app.get('/users', (req, res) => {
User.find({}, (err, users) => {
if (err) {
console.log(err);
res.send(err);
} else {
res.send(users);
}
});
});
// 处理POST请求
app.post('/users', (req, res) => {
const newUser = new User(req.body);
newUser.save((err, user) => {
if (err) {
console.log(err);
res.send(err);
} else {
res.send(user);
}
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server started on port 3000');
});
ng generate service user
这将在“src/app”目录中创建一个名为“user.service.ts”的文件。在“user.service.ts”中,添加以下代码:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private baseUrl = 'http://localhost:3000/users';
constructor(private http: HttpClient) { }
getUsers(): Observable {
return this.http.get(this.baseUrl);
}
createUser(user: any): Observable {
return this.http.post(this.baseUrl, user);
}
}
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
users: any[];
constructor(private userService: UserService) { }
ngOnInit() {
this.userService.getUsers().subscribe((users: any[]) => {
this.users = users;
});
}
createUser() {
const newUser = {
name: 'John Doe',
email: 'john@example.com',
password: 'password123'
};
this.userService.createUser(newUser).subscribe((user: any) => {
console.log(user);
// 逻辑代码...
});
}
}
User List
-
{{ user.name }} - {{ user.email }}
现在,您可以运行Angular 2应用程序和服务器端,通过访问“http://localhost