Guidelines for Frontend‑Backend Separation and API Specification

The author introduces the need for clear frontend‑backend separation as modern web applications demand high performance, flexible UI, and robust backend services, noting that without interface contracts the integration workload can reach 30‑50% of project effort.

Historically, the MVC model placed most logic on the server, but it still suffered from tangled responsibilities, heavy frontend dependence on backend environments, and limited performance optimizations.

In the SPA era, the key collaboration point becomes Ajax/JSON interfaces. The article describes the challenges of interface agreements and frontend complexity, suggesting that clear contracts and mock platforms enable parallel development.

How to achieve separation:

1. Responsibility separation : Frontend and backend communicate only via asynchronous APIs, each maintains its own build and test pipelines, and concerns are decoupled.

2. Development process : Backend maintains API documentation and implements interfaces; frontend uses the docs and mock data for development; integration testing follows.

3. Implementation details include visual diagrams (omitted) and a table contrasting backend (data provider, business logic) with frontend (rendering logic).

API Specification V1.0.0

Principles: the frontend only renders data, avoids business logic, uses JSON, and keeps responses lightweight.

Basic request format (GET): xxx/login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}

Basic response format: { "code": 200, "data": { "message": "success" } }

Entity response example: { "code": 200, "data": { "message": "success", "entity": { "id": 1, "name": "XXX", "code": "XXX" } } }

List response example: { "code": 200, "data": { "message": "success", "list": [ {"id":1,"name":"XXX","code":"XXX"}, {"id":2,"name":"XXX","code":"XXX"} ] } }

Paginated response example: { "code": 200, "data": { "recordCount": 2, "message": "success", "totalCount": 2, "pageNo": 1, "pageSize": 10, "list": [ {"id":1,"name":"XXX","code":"H001"}, {"id":2,"name":"XXX","code":"H001"} ], "totalPage": 1 } }

Special content – dropdown/checkbox selection is indicated by an isSelect flag in the response JSON:

{ "code": 200, "data": { "message": "success", "list": [ {"id":1,"name":"XXX","code":"XXX","isSelect":1}, {"id":2,"name":"XXX","code":"XXX","isSelect":0} ] } }

Boolean values are represented as 1/0, and dates are transmitted as strings.

The article concludes with a brief look at future front‑end trends, moving from the current jQuery‑based SPA stage to a more framework‑driven MV* era and eventually a full‑stack Node.js era where the backend serves only data and business services.