全栈开发小项目

用到的技术栈:

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

相关推荐
GIS之路17 小时前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug17 小时前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213817 小时前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中17 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路17 小时前
GDAL 实现矢量合并
前端
hxjhnct17 小时前
React useContext的缺陷
前端·react.js·前端框架
前端 贾公子18 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端
菩提小狗18 小时前
Sqlmap双击运行脚本,双击直接打开。
前端·笔记·安全·web安全
前端工作日常18 小时前
我学习到的AG-UI的概念
前端
韩师傅18 小时前
前端开发消亡史:AI也无法掩盖没有设计创造力的真相
前端·人工智能·后端