Guidelines for Frontend‑Backend Separation and API Specification

The author, a senior architect, introduces the need for clear frontend‑backend separation as modern web applications demand high performance, flexibility, and maintainability, while traditional MVC approaches lead to tangled responsibilities and heavy integration workloads.

Two collaboration models are compared: frontend demos with backend template integration, and full‑stack frontend handling of view layers, each with pros and cons, highlighting the importance of separating concerns and assigning the right tasks to each team.

The article then describes the current "Ajax‑driven SPA" stage, where asynchronous interfaces become the primary integration point, and outlines challenges such as API contract definition, frontend complexity, and the limits of frameworks like Backbone.

Practical development workflow steps are presented: backend documents APIs, implements them, frontend consumes the documentation (using mock servers), and both sides perform joint testing before release.

Detailed API specifications (Version 1.0.0) are provided, covering request formats (GET/POST with a body JSON wrapper), response structures (code, data, message, entity, list, pagination), and special handling for dropdowns, booleans, and dates. Example snippets include:

GET /login?body={"username":"admin","password":"123456","captcha":"scfd","rememberMe":1}

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

Future directions are discussed, moving from the current SPA stage to a "frontend‑centric MV*" era and eventually a full‑stack Node.js era where the backend serves only data and business logic.

Finally, a list of reference links and community resources is provided for further reading.