How to Set Up the Development Environment for the Litemall Micro‑Mall Project

Step 1: Modify the database connection

spring:
  datasource:
    druid:
      url: jdbc:mysql://<cloud-IP>:3306/litemall?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&verifyServerCertificate=false&useSSL=false
      username: litemall   # change if the cloud DB uses a different user
      password: litemall123456   # change if the cloud DB uses a different password

Tip: If the cloud MySQL port, username, or password differ from the defaults, modify them accordingly. The shared module litemall-db is loaded by litemall-wx-api , litemall-admin-api and litemall-all at startup.

Step 2: Load the backend project in IntelliJ IDEA

1. Import the Maven project

File → Open → select the directory containing pom.xml (e.g., /Users/ldk/Downloads/CuiLiMing/litemall-master).

IDEA recognises it as a multi‑module Maven project; click Open as Project .

Wait for IDEA to download dependencies (progress bar at the bottom right).

2. Configure Maven (optional)

If dependency download is slow, change the Maven mirror to Alibaba Cloud in Settings → Build → Build Tools → Maven and edit settings.xml to add a domestic mirror.

3. Configure the JDK

File → Project Structure → Project → set SDK to JDK 8+.

In Modules , ensure all modules ( litemall-core, litemall-db, litemall-wx-api, litemall-admin-api, litemall-all) have Language Level set to 8.

4. Start the backend service

Open

litemall-all/src/main/java/org/linlinjava/litemall/Application.java

.

Right‑click → Run ‘Application.main()’.

Successful start shows Started Application in ... and listens on port 8080 .

Verify by visiting http://localhost:8080/wx/index/index and http://localhost:8080/admin/index/index; JSON responses indicate the backend is running.

If you want to debug a single module (e.g., only the WX API), run the corresponding Application.java in litemall-wx-api or litemall-admin-api . The application.yml already sets spring.profiles.active so the core and DB modules are loaded automatically.

Step 3: Load the Vue frontend projects in VS Code

3.1 Admin frontend ( litemall-admin )

# Open the directory in VS Code
code /Users/ldk/Downloads/CuiLiMing/litemall-master/litemall-admin

# Install dependencies (using the China mirror)
npm install --registry=https://registry.npmmirror.com

# Start development server
npm run dev

Development server runs on port 9527 .

Proxy /admin → http://localhost:8080 (backend must be started first).

Open http://localhost:9527 in a browser; the login page should appear.

Default credentials: admin123 / admin123.

The project uses vue-element-admin with ESLint pre‑configured; install the ESLint and Vetur (or Volar) extensions in VS Code.

3.2 Mobile frontend ( litemall-vue )

# Open the directory in another VS Code window
code /Users/ldk/Downloads/CuiLiMing/litemall-master/litemall-vue

# Install dependencies
npm install --registry=https://registry.npmmirror.com

# Start development server
npm run dev

Development server runs on port 6255 .

Proxy /wx → http://localhost:8080.

Open http://localhost:6255 in Chrome's mobile mode to view the mobile shop.

This project is based on Vant UI 2.x (Youzan mobile component library) and has Sass configured.

Step 4: Load the WeChat mini‑program in the WeChat Developer Tool

Open WeChat Developer Tool → Project → Import Project.

Choose the directory /Users/ldk/Downloads/CuiLiMing/litemall-master/litemall-wx.

Set the AppID to the one obtained from the WeChat public platform (edit project.config.json → appid).

Click Confirm .

Modify the API address if the backend is not running locally:

// For local backend
var WxApiRoot = 'http://localhost:8080/wx/';

// For cloud backend (replace with internal IP or domain)
// var WxApiRoot = 'http://<cloud-IP>:8080/wx/';

Before compiling, enable "Do not verify legal domain, web‑view, TLS version, and HTTPS certificate" in the tool’s Details → Local Settings. After clicking Compile, the mini‑program should display pages and data.

Step 5: Verify front‑back connectivity

| Project               | Address                     | Dependency          |
| ---------------------- | --------------------------- | ------------------- |
| Backend all APIs       | http://localhost:8080       | MySQL cloud server  |
| Admin frontend         | http://localhost:9527       | Backend 8080        |
| Mobile frontend        | http://localhost:6255       | Backend 8080        |
| WeChat mini‑program    | in WeChat DevTools          | Backend 8080/cloud |

IDEA performance note

Exclude litemall-admin/node_modules and litemall-vue/node_modules via File → Project Structure → Modules → mark as Excluded (VS Code manages these directories).

Code formatting

Java: use IDEA’s default Code → Reformat Code.

Vue: rely on the ESLint plugin in VS Code (disable VS Code’s built‑in formatter).

Mini‑program: the WeChat Developer Tool formats code automatically.

Recommended startup order for first‑time development

Confirm the cloud MySQL instance is reachable.

Start the backend ( litemall-all) and verify both API endpoints are accessible.

Launch the admin frontend and confirm login works.

Launch the mobile frontend and the WeChat mini‑program, then verify data is displayed correctly.