全栈开发小项目
用到的技术栈：
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