全栈开发小项目

用到的技术栈:

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

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek