全栈开发小项目

时间：2024-10-18 10:14:57

用到的技术栈：
nodejs+webpack+knockout+mongodb+PM2+rabbitmq

以下是一个综合指南，展示如何将 Node.js、Webpack、Knockout.js、MongoDB、PM2 和 RabbitMQ 集成到一个项目中。

我们将在这一项目中添加 RabbitMQ，用于处理消息队列。这对于任务分派、异步处理等场景非常有用。

第一步: 初始化项目
首先，创建一个新的项目目录并初始化一个 Node.js 项目：

Copy

mkdir my-app
cd my-app
npm init -y
这将在 my-app 目录下创建一个 package.json 文件。

第二步: 安装依赖
我们需要安装以下依赖库：

项目依赖
express: 用于创建服务器
mongoose: 用于连接和操作 MongoDB
knockout: 用于创建响应式 UI
amqplib: AMQP 0-9-1 客户端，用于与 RabbitMQ 交互

Copy

npm install express mongoose knockout amqplib
开发依赖
webpack: 用于打包前端代码
webpack-cli: 命令行工具，用于运行 Webpack
webpack-dev-server: 开发服务器，提供实时重新加载功能

Copy

npm install --save-dev webpack webpack-cli webpack-dev-server
安装 PM2
PM2 是一个进程管理器，用于长时间运行的 Node.js 应用程序：

Copy

npm install pm2 -g
如果希望本地安装 PM2，也可以用以下命令：

Copy

npm install pm2 --save-dev
第三步: 创建服务器文件
创建 server.js
在根目录下创建一个 server.js 文件，并添加以下代码：

Copy

const express = require(‘express’);
const mongoose = require(‘mongoose’);
const amqp = require(‘amqplib/callback_api’);

// 连接到本地 MongoDB 数据库 myapp
mongoose.connect(‘mongodb://localhost:27017/myapp’, {
useNewUrlParser: true,
useUnifiedTopology: true
});

const app = express();
app.use(express.json());

// 定义一个 Mongoose 模型
const ItemSchema = new mongoose.Schema({
name: String
});
const Item = mongoose.model(‘Item’, ItemSchema);

// API 路由
app.get(‘/items’, async (req, res) => {
const items = await Item.find();
res.json(items);
});

app.post(‘/items’, async (req, res) => {
const newItem = new Item(req.body);
await newItem.save();

// 发送消息到 RabbitMQ
sendToQueue(newItem);

res.json(newItem);

});

// 启动服务器
app.listen(3000, () => {
console.log(‘Server is listening on port 3000’);
});

// 连接到 RabbitMQ 并发送消息
function sendToQueue(item) {
amqp.connect(‘amqp://localhost’, (error0, connection) => {
if (error0) {
throw error0;
}

    connection.createChannel((error1, channel) => {
        if (error1) {
            throw error1;
        }
    
        const queue = 'itemQueue';
        const msg = JSON.stringify(item);

        channel.assertQueue(queue, {
            durable: false
        });

        channel.sendToQueue(queue, Buffer.from(msg));
        console.log(" [x] Sent %s", msg);
    });

    setTimeout(() => {
        connection.close();
    }, 500);
});

}
注意: 请确保你的 RabbitMQ 和 MongoDB 服务器正在运行。你可以使用以下命令启动它们：

Copy

启动 MongoDB

mongod

启动 RabbitMQ (RabbitMQ 必须已经安装)

rabbitmq-server
消费 RabbitMQ 队列中的消息
创建一个 consumer.js 文件，用于消费队列中的消息：

Copy

const amqp = require(‘amqplib/callback_api’);

amqp.connect(‘amqp://localhost’, (error0, connection) => {
if (error0) {
throw error0;
}
connection.createChannel((error1, channel) => {
if (error1) {
throw error1;
}

    const queue = 'itemQueue';

    channel.assertQueue(queue, {
        durable: false
    });

    console.log(" [*] Waiting for messages in %s. To exit press CTRL+C", queue);

    channel.consume(queue, (msg) => {
        const item = JSON.parse(msg.content.toString());
        console.log(" [x] Received %s", item.name);
        // 在这里处理收到的消息
    }, {
        noAck: true
    });
});

});
启动 PM2 管理器
PM2 可以用于同时启动我们的 server.js 和 consumer.js 。

更新 package.json 脚本：

Copy

“scripts”: {
“start”: “webpack serve”,
“serve”: “webpack build && pm2 start ecosystem.config.js”
}
创建 ecosystem.config.js：

Copy

module.exports = {
apps: [{
name: ‘server’,
script: ‘server.js’,
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: ‘1G’
}, {
name: ‘consumer’,
script: ‘consumer.js’,
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: ‘1G’
}]
};
配置 Webpack
在根目录下创建一个 webpack.config.js 文件，并添加以下代码：

Copy

const path = require(‘path’);

module.exports = {
entry: ‘./src/main.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
devServer: {
static: {
directory: path.join(__dirname, ‘dist’),
},
compress: true,
port: 9000
},
mode: ‘development’
};
创建前端代码
创建必要的目录和文件：

Copy

mkdir src
touch src/main.js
touch src/index.html
编辑 src/index.html

Copy

Webpack, Knockout.js, MongoDB, RabbitMQ

Webpack + Knockout.js + MongoDB + RabbitMQ

Add Item
编辑 src/main.js

Copy

import ko from ‘knockout’;

class ViewModel {
constructor() {
this.newItem = ko.observable(‘’);
this.items = ko.observableArray([]);

    this.loadItems();

    this.addItem = this.addItem.bind(this);
}

async loadItems() {
    const response = await fetch('http://localhost:3000/items');
    const items = await response.json();
    this.items(items);
}

async addItem() {
    const response = await fetch('http://localhost:3000/items', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ name: this.newItem() })
    });

    const item = await response.json();
    this.items.push(item);
    this.newItem('');
}

}

ko.applyBindings(new ViewModel());
启动应用
用 Webpack Dev Server 开发
运行以下命令来启动开发服务器：

Copy

npm start
在生产环境中用 PM2 启动
运行以下命令来构建并使用 PM2 启动服务器:

Copy

npm run serve
PM2 管理
一些常用的 PM2 命令包括：

查看所有进程：pm2 list
停止某个进程：pm2 stop <process_id>
重启某个进程：pm2 restart <process_id>
删除某个进程：pm2 delete <process_id>
查看进程日志：pm2 logs <process_id>
通过这些步骤，您已经设置了一个使用 Node.js、Webpack、Knockout.js、MongoDB、PM2 和 RabbitMQ 的综合全栈应用。这种结构对于处理复杂任务和异步操作非常有效。

17:38

相关文章