从零开始开发跑腿配送系统：技术选型与架构设计

news2024/11/25 3:03:46

开发一个跑腿配送系统涉及多个技术栈和模块，从前端到后端，再到数据库和实时通信，每一个环节都至关重要。本文将详细介绍从零开始开发跑腿配送系统的技术选型与架构设计，并提供部分代码示例以帮助理解。

跑腿配送系统

一、技术选型

前端技术：

React：用于构建用户界面，具有组件化和高效的特点。
Redux：用于状态管理，便于管理复杂的应用状态。 Ant
Design：提供一套美观的UI组件，提升开发效率和用户体验。

后端技术：

Node.js：用于构建高性能的服务器端应用，具有非阻塞I/O的优势。
Express：轻量级Web框架，便于快速搭建API服务器。
Socket.io：用于实现实时通信，支持WebSocket协议。

数据库：

MongoDB：NoSQL数据库，便于存储和查询JSON格式的数据。
Redis：用于缓存和会话管理，提升系统性能。

地图服务：

Google Maps API：用于位置展示和路径规划。

二、系统架构设计

跑腿配送系统的架构设计如下图所示：

+-------------------+        +-----------------+        +------------------+
|     Frontend      |        |   Backend API   |        |     Database     |
|                   |        |                 |        |                  |
| - React           |<------>| - Node.js       |<------>| - MongoDB        |
| - Redux           |        | - Express       |        | - Redis          |
| - Ant Design      |        | - Socket.io     |        +------------------+
+-------------------+        +-----------------+        +------------------+
        |                            |
        v                            v
+-------------------+        +-----------------+
|   Google Maps API |        |     Redis       |
+-------------------+        +-----------------+

三、代码示例

下面提供部分代码示例，展示如何搭建一个简单的跑腿配送系统。

前端部分（React + Redux）

// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
import OrderForm from './components/OrderForm';
import OrderList from './components/OrderList';

const store = createStore(rootReducer);

const App = () => (
  <Provider store={store}>
    <div className="App">
      <h1>跑腿配送系统</h1>
      <OrderForm />
      <OrderList />
    </div>
  </Provider>
);

export default App;

// src/components/OrderForm.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addOrder } from '../actions';

const OrderForm = () => {
  const [description, setDescription] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addOrder({ description }));
    setDescription('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="输入订单描述"
      />
      <button type="submit">创建订单</button>
    </form>
  );
};

export default OrderForm;

// src/actions/index.js
export const addOrder = (order) => ({
  type: 'ADD_ORDER',
  payload: order,
});

// src/reducers/index.js
const initialState = {
  orders: [],
};

const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ORDER':
      return {
        ...state,
        orders: [...state.orders, action.payload],
      };
    default:
      return state;
  }
};

export default rootReducer;

后端部分（Node.js + Express + Socket.io）

// server/index.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const mongoose = require('mongoose');
const redis = require('redis');
const Order = require('./models/Order');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

mongoose.connect('mongodb://localhost:27017/delivery', { useNewUrlParser: true, useUnifiedTopology: true });

const redisClient = redis.createClient();

app.use(express.json());

app.post('/orders', async (req, res) => {
  const order = new Order(req.body);
  await order.save();
  io.emit('newOrder', order);
  res.status(201).send(order);
});

io.on('connection', (socket) => {
  console.log('New client connected');
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

server.listen(4000, () => {
  console.log('Server is running on port 4000');
});

// server/models/Order.js
const mongoose = require('mongoose');

const orderSchema = new mongoose.Schema({
  description: String,
  status: {
    type: String,
    default: 'pending',
  },
});

module.exports = mongoose.model('Order', orderSchema);

实时位置追踪（Socket.io）

// server/index.js (继续)
io.on('connection', (socket) => {
  socket.on('updateLocation', (location) => {
    redisClient.set(`location:${socket.id}`, JSON.stringify(location));
    io.emit('locationUpdate', { id: socket.id, location });
  });
});

// src/components/OrderList.js
import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:4000');

const OrderList = () => {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    socket.on('newOrder', (order) => {
      setOrders((prevOrders) => [...prevOrders, order]);
    });

    return () => {
      socket.off('newOrder');
    };
  }, []);

  return (
    <ul>
      {orders.map((order, index) => (
        <li key={index}>{order.description}</li>
      ))}
    </ul>
  );
};

export default OrderList;