全栈开发小项目
用到的技术栈:
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
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
原文地址:https://blog.csdn.net/weixin_42692164/article/details/143024631
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!