全栈开发小项目

用到的技术栈:

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

相关推荐
星就前端叭44 分钟前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
jwensh2 小时前
【Jenkins】Declarative和Scripted两种脚本模式有什么具体的区别
运维·前端·jenkins
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
益达是我2 小时前
【Chrome】浏览器提示警告Chrome is moving towards a new experience
前端·chrome
济南小草根2 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
聪小陈2 小时前
圣诞节:记一次掘友让我感动的时刻
前端·程序员
LUwantAC2 小时前
CSS(一):选择器
前端·css
Web阿成2 小时前
5.学习webpack配置 babel基本配置
前端·学习·webpack