How to Build a Xiaomi‑Style E‑Commerce Site with Vue and Koa

Project Overview

The project is a front‑end/back‑end separated clone of the Xiaomi Mall, with the front‑end built on Vue, Vue‑router, Vuex, Element‑ui, and Axios, and the back‑end implemented with Node.js (Koa framework) and MySQL.

The front‑end includes eleven pages: Home, Login, Register, All Products, Product Details, About Us, My Favorites, Shopping Cart, Order Checkout, My Orders, and an error handling page.

Features implemented include product display, category queries, keyword search, detailed product information, user login and registration, shopping cart management, order checkout, user order history, favorites list, and error handling.

The back‑end follows the MVC pattern, providing modular APIs, controllers, and data persistence layers to meet the front‑end’s data requirements. The back‑end is hosted at the address store-server.

Technology Stack

Front‑end: Vue, Vue‑router, Vuex, Element‑ui, Axios

Back‑end: Node.js, Koa framework

Database: MySQL

Key Functional Modules

Login

The login dialog is implemented with Element‑ui's Dialog component and is triggered via a Vuex state flag, allowing the login box to appear automatically when a protected page is accessed or when the back‑end requests authentication.

Form validation is performed on both the front‑end (custom Element‑ui rules) and the back‑end to ensure data reliability.

Registration

Registration also uses an Element‑ui Dialog, with visibility controlled through parent‑child component communication. Like login, both front‑end and back‑end validation are applied.

Home Page

The home page showcases products with a carousel of recommended items and displays popular products by category.

All Products

This page integrates product listing, category filtering, and keyword‑based search results.

Product Details

Detailed information about a selected product is displayed, and users can add the item to the shopping cart or to their favorites list.

Shopping Cart

The cart is managed with Vuex, and its UI mirrors the design of the official Xiaomi Mall.

Order Checkout

After selecting items in the cart, users proceed to the checkout page to choose a shipping address, confirm order details, and finalize the purchase.

My Favorites

Users can add liked products to a favorites list directly from the product details page.

My Orders

All of a user's orders are displayed in this section.

Preview