全栈开发小项目

用到的技术栈:

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

相关推荐
kyriewen10 小时前
今年裁了16万技术人——但字节前端岗反而涨了23%
前端·javascript·面试
用户0595401744610 小时前
把 AI Agent 记忆存储验证从 40 分钟手测压到 3 分钟,pytest + Docker 这套组合太顶了
前端·css
stereohomology11 小时前
MS Edge很多事的一点是把地址栏复制的地址自动转标题文本
前端·edge
imaol111 小时前
链表 -- 环链表
java·前端·链表
imaol111 小时前
链表 -- 双向链表
java·前端·链表
东风破_11 小时前
大前端手里的 Next.js:从 #root 到 SEO,一份 HTML 的两种命运
前端·后端
IT_陈寒12 小时前
Vue的v-for不听话?我被这个Key的坑整懵了
前端·人工智能·后端
王林不想说话12 小时前
ES6 到 ES2026 全面进阶指南:新特性、原理、示例与工程落地
前端·javascript·面试
用户435237138149312 小时前
🚀 Vue3 + TypeScript 学习笔记:从泛型 T 到 Promise<T>,终于搞懂了 keyof 和 typeof
前端
跟着群主去吃肉12 小时前
Cinemachine的应用-第三人称视角
前端·unity3d·游戏开发