Build a WeChat Mini‑Program Health App with AI‑Generated Code in 20 Minutes

Project Overview

Advanced personal health‑management system for ordinary users to record daily health data and obtain AI health consultation, and for administrators to perform data statistics and platform maintenance. Front‑end/back‑end separation with a single back‑end API shared by three clients: Vue admin panel, WeChat mini‑program, and public API.

Directory layout: server/ – Spring Boot backend (default port 8080) providing REST API for admin panel and mini‑program. client/ – Vue 3 admin panel (default port 5173) for administrators. weixin/ – WeChat mini‑program source (no dedicated port). db/db_health.sql – MySQL script (default port 3308).

Business Logic

Roles

Administrator (admin) logs in via the Vue admin panel, manages all users and health data, publishes health articles, and views dashboard charts.

Regular user (user) registers/logs in through the WeChat mini‑program, records personal health data, browses articles, and interacts with the AI health consultant “Xiaokang”.

Core Business Domains

User & Authentication – role‑based login, JWT authentication, mini‑program registration and password change. Tables: t_admin, t_user.

Health Metrics – record weight, blood pressure, blood sugar, heart rate, temperature; support trend and latest‑value queries. Table: t_health_metric.

Diet Records – log meals and calories; provide daily summary. Table: t_diet.

Exercise Records – log exercise type, duration, calories burned, steps. Table: t_exercise.

Health Plans – create weight‑loss, muscle‑gain, sleep goals and track status. Table: t_health_plan.

Health Articles – admin publishes articles; mini‑program can list and view details. Table: t_article.

AI Smart Customer Service – conversation and streaming replies powered by Alibaba Cloud Bailei (model qwen3.6-plus); history stored in t_chat_message.

Typical Business Flows

Mini‑Program user flow: Register/login → Record health data → View trends → Chat with AI consultant.

Admin panel operations: Login → Manage users → CRUD health data → Publish articles → Upload files.

Technology Stack

Backend (server)

Framework: Spring Boot 4.0.6

ORM: MyBatis‑Plus

Security: JWT (jjwt) with JwtInterceptor for unified interception

AI: Spring AI 2.0, compatible with OpenAI protocol to connect Alibaba Cloud Bailei

Utilities: Hutool, unified Result response wrapper, global exception handling

Runtime: JDK 21+, Maven

Admin Frontend (client)

Framework: Vue 3 + Vite

UI Library: Element Plus

State Management: Pinia

Charts: ECharts

HTTP: Axios with Authorization: Bearer <token> header

WeChat Mini‑Program (weixin)

Developed with native WXML, WXSS, and JavaScript. Backend APIs are called via utils/request.js using the /wx/** prefix; baseUrl must be set to the LAN IP because the mini‑program cannot access localhost.

Data Layer

MySQL 8 database named db_health; all tables start with t_.

Default connection: localhost:3308 with password 123456.

File uploads stored in D:/uploads, accessible via static path /uploads/**.

AI Configuration

API Key: environment variable OPENAI_API_KEY.

Base URL: https://dashscope.aliyuncs.com/compatible-mode/v1.

Chat model: qwen3.6-plus.

System role defined in HealthSystemPrompt as the “Xiaokang” health advisor.

System Architecture

The architecture consists of the WeChat mini‑program, the Vue admin panel, and the Spring Boot backend, all communicating through REST APIs secured by JWT. The AI module plugs into the backend via Spring AI.

Backend Layered Structure

com.java1234.health
├── controller/      # AdminController, WxController, etc.
├── service/         # Business logic (User, Chat, Diet, Exercise, …)
├── mapper/          # MyBatis‑Plus data access
├── entity/          # Entity‑table mappings
├── dto/             # Request/response objects
├── config/          # JWT, CORS, AI, interceptor registration
├── common/          # Result, JwtUtil, exceptions, file upload
└── ai/              # HealthSystemPrompt and other AI presets

API Routing

/admin/**

– accessed by admin panel, protected by admin JWT (login excluded), supports statistics, user management, CRUD for all business modules, article publishing, file upload. /wx/** – accessed by mini‑program, protected by user JWT (login/registration excluded), supports profile, overview, AI chat, personal data for each business module. /api/** – public or mini‑program access, token required except article list/detail (anonymous allowed), supports article list and detail.

Interceptors are registered in InterceptorConfig to validate tokens for the above prefixes, excluding /admin/login, /wx/login, /wx/register, and public article endpoints.

Authentication Flow

JWT tokens are issued on successful login. The interceptor checks the token for protected routes and redirects unauthenticated requests to the login page. Tokens are stored on the front end in localStorage.token.

Database Design (Summary)

Key tables: t_admin, t_user, t_health_metric, t_diet, t_exercise, t_health_plan, t_article, t_chat_message. All tables reside in the db_health schema and share the t_ prefix.

Frontend Routes (Admin Panel)

/login

– administrator login /home – dashboard statistics (ECharts) /user – user management /metric – health metric management /diet – diet record management /exercise – exercise record management /plan – health plan management /article – health article management

Mini‑Program Tabs and Pages

Home – health overview ( /wx/overview)

Metrics – health metric recording and trend display

AI Service – streaming and normal AI conversations with history

My – profile, password change, entry to diet/exercise/plan

Articles – list and detail view of health articles ( /api/article)