使用节点 js 作为后端和 Angular 前端 - Javascript (1)

📌 相关文章

📜 使用节点 js 作为后端和 Angular 前端 - Javascript (1)

📅 最后修改于: 2023-12-03 14:49:57.552000 🧑 作者: Mango

使用 Node.js 作为后端和 Angular 前端 - Javascript

Node.js 和 Angular 是两个非常流行的 Javascript 技术，它们可以在同一应用程序中协同工作。本文将介绍如何使用 Node.js 作为后端和 Angular 前端，构建一个完整的 Web 应用程序。

什么是 Node.js？

Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行时，它允许开发人员使用 Javascript 编写服务器端应用程序。Node.js 支持非阻塞 I/O 和事件驱动，这使得它非常适合构建实时应用程序和网络应用程序。

什么是 Angular？

Angular 是一个流行的前端 Javascript 框架，它由谷歌开发并维护。Angular 允许开发人员使用组件化的方式构建 Web 应用程序，并提供了诸如模板、数据绑定、指令等功能。

构建 Node.js 后端

我们的第一步是构建一个 Node.js 后端，它将为我们的 Angular 前端提供数据和 API。以下是如何创建一个 Node.js 后端的基本步骤：

安装 Node.js 和 npm，它们是构建 Node.js 应用程序所需的基本工具。
创建一个新的 Node.js 项目，使用以下命令：
```
mkdir my-nodejs-app
cd my-nodejs-app
npm init
```
安装必要的 Node.js 模块，例如 Express、Mongoose、Body-parser 等，使用以下命令：
```
npm install express mongoose body-parser
```

创建一个 Express 应用程序，并编写一些路由和控制器然后连接到 MongoDB 数据库。

// index.js 文件
const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const app = express();

mongoose.connect('mongodb://localhost/my_database');

app.use(bodyParser.json());

// 路由
const router = require('./routes/my_route');
app.use('/', router);

// 开始服务
app.listen(3000, () => {
  console.log('Server started at http://localhost:3000');
});

编写一些路由和控制器，处理 RESTful API 请求。

// my_route.js 文件
const express = require('express');
const router = express.Router();
const MyModel = require('../models/my_model');

// 获取所有数据
router.get('/', (req, res) => {
  MyModel.find((err, data) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.json(data);
    }
  });
});

// 获取单个数据
router.get('/:id', (req, res) => {
  const id = req.params.id;
  MyModel.findById(id, (err, data) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.json(data);
    }
  });
});

// 创建新数据
router.post('/', (req, res) => {
  const data = new MyModel(req.body);
  data.save((err, savedData) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.json(savedData);
    }
  });
});

// 更新数据
router.put('/:id', (req, res) => {
  const id = req.params.id;
  MyModel.findByIdAndUpdate(id, req.body, (err, updatedData) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.json(updatedData);
    }
  });
});

// 删除数据
router.delete('/:id', (req, res) => {
  const id = req.params.id;
  MyModel.findByIdAndRemove(id, (err, deletedData) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.json(deletedData);
    }
  });
});

module.exports = router;

编写数据模型，使用 Mongoose 连接到 MongoDB 数据库，以便创建、读取、更新和删除数据。

// my_model.js 文件
const mongoose = require('mongoose');

const mySchema = new mongoose.Schema({
  name: String,
  description: String,
});

const MyModel = mongoose.model('MyModel', mySchema);

module.exports = MyModel;

构建 Angular 前端

接下来，我们将构建一个 Angular 前端，它将使用我们的 Node.js 后端提供的 API。以下是如何创建一个 Angular 前端的基本步骤：

安装 Angular CLI，它是构建 Angular 应用程序所需的工具。
```
npm install -g @angular/cli
```
创建一个新的 Angular 应用程序，使用以下命令：
```
ng new my-angular-app
```
添加必要的 Angular 模块和服务，例如 HttpClientModule、FormsModule 等。

创建组件，用于显示和编辑数据。

import { Component, OnInit } from '@angular/core';
import { MyModelService } from './my-model.service';

@Component({
  selector: 'app-my-model',
  templateUrl: './my-model.component.html',
  styleUrls: ['./my-model.component.css']
})
export class MyModelComponent implements OnInit {

  dataList: any[];

  constructor(private service: MyModelService) { }

  ngOnInit(): void {
    this.service.getAll().subscribe(data => {
      this.dataList = data;
    });
  }

  addNew(): void {
    // TODO: 添加新数据
  }

  editData(data: any): void {
    // TODO: 编辑数据
  }

  deleteData(data: any): void {
    this.service.delete(data._id).subscribe(deletedData => {
      this.dataList = this.dataList.filter(d => d._id !== deletedData._id);
    });
  }
}

创建服务，用于调用 Node.js 后端的 API。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyModelService {

  private baseUrl = 'http://localhost:3000';

  constructor(private http: HttpClient) { }

  getAll() {
    return this.http.get<any[]>(`${this.baseUrl}/my_route`);
  }

  get(id: string) {
    return this.http.get<any>(`${this.baseUrl}/my_route/${id}`);
  }

  add(data: any) {
    return this.http.post<any>(`${this.baseUrl}/my_route`, data);
  }

  update(id: string, data: any) {
    return this.http.put<any>(`${this.baseUrl}/my_route/${id}`, data);
  }

  delete(id: string) {
    return this.http.delete<any>(`${this.baseUrl}/my_route/${id}`);
  }
}

编写组件模板，用于显示和编辑数据。

<h2>My Model</h2>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of dataList">
      <td>{{data.name}}</td>
      <td>{{data.description}}</td>
      <td>
        <button (click)="editData(data)">Edit</button>
        <button (click)="deleteData(data)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

<h3>Add New Data</h3>
<form>
  <div>
    <label>Name:</label>
    <input type="text" [(ngModel)]="newData.name">
  </div>
  <div>
    <label>Description:</label>
    <textarea [(ngModel)]="newData.description"></textarea>
  </div>
  <button (click)="addNew()">Save</button>
</form>

运行应用程序

最后，我们需要启动我们的应用程序，并在浏览器中查看它：

在 Node.js 后端目录中启动服务器。
```
node index.js
```
在 Angular 前端目录中启动开发服务器。
```
ng serve
```
在浏览器中访问 http://localhost:4200，即可看到我们的应用程序。

我们的应用程序现在应该可以使用了，你可以创建、读取、更新和删除数据，从而测试整个应用程序。