正文

1.System Architecture

admin
admin V管理员 /40 阅读
0122

To implement a Network Self-Service Ordering System, we'll use a modern tech stack: React (Frontend), Node.js/Express (Backend), and MongoDB (Database). Below is a structured implementation guide with core components and code snippets. The system consists of three main layers:

1.System Architecture

  • Frontend: User-facing interface for browsing products, managing carts, and placing orders.
  • Backend: API server handling auth, product/cart/order management, and payment processing.
  • Database: Stores user data, products, carts, and orders.

Backend Implementation

Key Dependencies

Install: express, mongoose, bcryptjs, jsonwebtoken, cors, dotenv.

Models

User Model (models/User.js)

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  createdAt: { type: Date, default: Date.now }
});
// Hash password before saving
userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});
// Compare password
userSchema.methods.matchPassword = async function(enteredPassword) {
  return await bcrypt.compare(enteredPassword, this.password);
};
module.exports = mongoose.model('User', userSchema);

Product Model (models/Product.js)

const mongoose = require('mongoose');
const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  image: { type: String, required: true },
  category: { type: String, required: true },
  stock: { type: Number, required: true, default: 0 },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Product', productSchema);

Cart Model (models/Cart.js)

const mongoose = require('mongoose');
const cartSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  items: [{
    product: { type: mongoose.Schema.Types.ObjectId, ref: 'Product', required: true },
    quantity: { type: Number, required: true, default: 1 }
  }],
  totalPrice: { type: Number, required: true, default: 0 }
});
module.exports = mongoose.model('Cart', cartSchema);

Order Model (models/Order.js)

const mongoose = require('mongoose');
const orderSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  items: [{
    product: { type: Object, required: true },
    quantity: { type: Number, required: true }
  }],
  shippingAddress: { type: Object, required: true },
  paymentMethod: { type: String, required: true },
  totalPrice: { type: Number, required: true },
  status: { type: String, enum: ['pending', 'paid', 'shipped', 'delivered'], default: 'pending' },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Order', orderSchema);

Backend Routes

Auth Routes (routes/authRoutes.js)

Handles user registration and login with JWT:

const express = require('express');
const router = express.Router();
const User = require('../models/User');
const jwt = require('jsonwebtoken');
// Generate JWT
const generateToken = (id, role) => {
  return jwt.sign({ id, role }, process.env.JWT_SECRET, { expiresIn: '30d' });
};
// Register
router.post('/register', async (req, res) => {
  const { name, email, password } = req.body;
  const userExists = await User.findOne({ email });
  if (userExists) return res.status(400).json({ message: 'User exists' });
  const user = await User.create({ name, email, password });
  res.status(201).json({
    _id: user._id, name: user.name, email: user.email, role: user.role,
    token: generateToken(user._id, user.role)
  });
});
// Login
router.post('/login', async (req, res) => {
  const { email, password } = req.body;
  const user = await User.findOne({ email });
  if (!user || !(await user.matchPassword(password))) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }
  res.json({
    _id: user._id, name: user.name, email: user.email, role: user.role,
    token: generateToken(user._id, user.role)
  });
});
module.exports = router;

Product Routes (routes/productRoutes.js)

Admins can manage products; users can browse:

const express = require('express');
const router = express.Router();
const Product = require('../models/Product');
const authMiddleware = require('../middleware/authMiddleware');
const adminMiddleware = require('../middleware/adminMiddleware');
// Get all products
router.get('/', async (req, res) => {
  const products = await Product.find();
  res.json(products);
});
// Get product by ID
router.get('/:id', async (req, res) => {
  const product = await Product.findById(req.params.id);
  res.json(product);
});
// Add product (admin only)
router.post('/', authMiddleware, adminMiddleware, async (req, res) => {
  const product = await Product.create(req.body);
  res.status(201).json(product);
});
// Update product (admin only)
router.put('/:id', authMiddleware, adminMiddleware, async (req, res) => {
  const product = await Product.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(product);
});
// Delete product (admin only)
router.delete('/:id', authMiddleware, adminMiddleware, async (req, res) => {
  await Product.findByIdAndDelete(req.params.id);
  res.json({ message: 'Product deleted' });
});
module.exports = router;

Cart Routes (routes/cartRoutes.js)

User-specific cart management:

const express = require('express');
const router = express.Router();
const Cart = require('../models/Cart');
const Product = require('../models/Product');
const authMiddleware = require('../middleware/authMiddleware');
// Get user cart
router.get('/', authMiddleware, async (req, res) => {
  let cart = await Cart.findOne({ user: req.user.id }).populate('items.product');
  if (!cart) cart = await Cart.create({ user: req.user.id, items: [], totalPrice: 0 });
  res.json(cart);
});
// Add item to cart
router.post('/add', authMiddleware, async (req, res) => {
  const { productId, quantity } = req.body;
  const product = await Product.findById(productId);
  let cart = await Cart.findOne({ user: req.user.id });
  if (!cart) cart = new Cart({ user: req.user.id, items: [], totalPrice:0 });
  const existingItem = cart.items.find(i => i.product.toString() === productId);
  if (existingItem) existingItem.quantity += quantity;
  else cart.items.push({ product: productId, quantity });
  // Calculate total price
  cart.totalPrice = cart.items.reduce((sum, item) => {
    return sum + (product.price * item.quantity);
  }, 0);
  await cart.save();
  res.json(await cart.populate('items.product'));
});
module.exports = router;

Order Routes (routes/orderRoutes.js)

Order creation and management:

const express = require('express');
const router = express.Router();
const Order = require('../models/Order');
const Cart = require('../models/Cart');
const authMiddleware = require('../middleware/authMiddleware');
const adminMiddleware = require('../middleware/adminMiddleware');
// Create order from cart
router.post('/create', authMiddleware, async (req, res) => {
  const { shippingAddress, paymentMethod } = req.body;
  const cart = await Cart.findOne({ user: req.user.id }).populate('items.product');
  const order = await Order.create({
    user: req.user.id,
    items: cart.items.map(item => ({ product: item.product, quantity: item.quantity })),
    shippingAddress,
    paymentMethod,
    totalPrice: cart.totalPrice
  });
  // Clear cart
  await Cart.findByIdAndUpdate(cart._id, { items: [], totalPrice:0 });
  res.json(order);
});
// Get user orders
router.get('/', authMiddleware, async (req, res) => {
  const orders = await Order.find({ user: req.user.id });
  res.json(orders);
});
// Update order status (admin only)
router.put('/:id/status', authMiddleware, adminMiddleware, async (req, res) => {
  const order = await Order.findByIdAndUpdate(req.params.id, { status: req.body.status }, { new: true });
  res.json(order);
});
module.exports = router;

Frontend Implementation

Key Dependencies

Install: react-router-dom, axios, jwt-decode, tailwindcss, react-hook-form.

Frontend Core Components

Auth Context (context/AuthContext.js)

Manages user auth state:

import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';
import jwtDecode from 'jwt-decode';
const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (token) {
      const decoded = jwtDecode(token);
      setUser({ id: decoded.id, role: decoded.role });
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }
  }, []);
  const login = async (email, password) => {
    const res = await axios.post('/api/auth/login', { email, password });
    localStorage.setItem('token', res.data.token);
    setUser({ id: res.data._id, role: res.data.role });
    axios.defaults.headers.common['Authorization'] = `Bearer ${res.data.token}`;
  };
  const logout = () => {
    localStorage.removeItem('token');
    setUser(null);
    delete axios.defaults.headers.common['Authorization'];
  };
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};
export default AuthContext;

Product List Component (components/ProductList.js)

Displays products for users:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ProductCard from './ProductCard';
const ProductList = () => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    axios.get('/api/products').then(res => setProducts(res.data));
  }, []);
  return (
    <div className="grid grid-cols-1 md:cols-2 lg:cols-3 gap-6 p-4">
      {products.map(p => <ProductCard key={p._id} product={p} />)}
    </div>
  );
};
export default ProductList;

Checkout Page (pages/CheckoutPage.js)

Handles order placement:

import React, { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import AuthContext from '../context/AuthContext';
import CartContext from '../context/CartContext';
import axios from 'axios';
const CheckoutPage = () => {
  const { user } = useContext(AuthContext);
  const { cart } = useContext(CartContext);
  const [shippingAddress, setShippingAddress] = useState({ street: '', city: '' });
  const navigate = useNavigate();
  if (!user) navigate('/login');
  const handleSubmit = async (e) => {
    e.preventDefault();
    await axios.post('/api/orders/create', { shippingAddress, paymentMethod: 'credit_card' });
    navigate('/orders');
  };
  return (
    <div className="p-4">
      <h1>Checkout</h1>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          name="street" 
          placeholder="Street" 
          value={shippingAddress.street} 
          onChange={(e) => setShippingAddress({ ...shippingAddress, street: e.target.value })} 
          required 
        />
        <button type="submit">Place Order</button>
      </form>
    </div>
  );
};
export default CheckoutPage;

Deployment

  • Backend: Deploy to Heroku/Vercel with MongoDB Atlas.
  • Frontend: Deploy to Vercel/Netlify.
  • Environment Variables: Store JWT secret, MongoDB URI, and other sensitive data.

Key Features

  • User Authentication: Secure login/registration with JWT.
  • Product Management: Admins canTo implement# Network Self-Service Ordering System

Overview

A full-stack web application for self-service ordering, allowing users to browse products, manage carts, place orders, and admins to manage products/orders. Built with React, Node.js, Express, and MongoDB.

Tech Stack

Layer Technologies
Frontend React, Tailwind CSS, React Router
Backend Node.js, Express.js
Database MongoDB (MongoDB Atlas)
Auth JWT (JSON Web Tokens)
API Calls Axios

Core Features

User Features

  • Register/Login with JWT authentication
  • Browse products by category
  • Add/remove/update cart items
  • Place orders with shipping address
  • View order history and status
  • Mock payment integration

Admin Features

  • Manage products (add/edit/delete)
  • View and update order status
  • Access to sales analytics

System Architecture

The system follows a 3-tier architecture:

  1. Frontend: User interface for interaction
  2. Backend: REST API handling business logic
  3. Database: Stores user, product, cart, and order data

Backend Implementation

Database Models

User Model

const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  createdAt: { type: Date, default: Date.now }
});
// Hash password before saving
userSchema.pre('save', async function(next) {
  if (!this.isModified('password')) return next();
  this.password = await bcrypt.hash(this.password, 10);
  next();
});
// Compare password
userSchema.methods.matchPassword = async function(enteredPassword) {
  return await bcrypt.compare(enteredPassword, this.password);
};
module.exports = mongoose.model('User', userSchema);

Product Model

const mongoose = require('mongoose');
const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  category: { type: String, required: true },
  imageUrl: { type: String, required: true },
  stock: { type: Number, required: true, default: 0 },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Product', productSchema);

Order Model

const mongoose = require('mongoose');
const orderSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  items: [{
    product: { type: mongoose.Schema.Types.ObjectId, ref: 'Product', required: true },
    quantity: { type: Number, required: true }
  }],
  shippingAddress: { type: Object, required: true },
  totalAmount: { type: Number, required: true },
  status: { type: String, enum: ['pending', 'paid', 'shipped', 'delivered'], default: 'pending' },
  createdAt: { type: Date, default: Date.now }
});
module.exports = mongoose.model('Order', orderSchema);

Backend Routes

Auth Routes