前后端交互过程
前端（通常是用户界面）与后端（服务器端）之间的数据和信息传递过程。这种交互是通过网络完成的，通常使用HTTP协议。以下是前后端交互的一般步骤：
- 前端发送请求： 前端通过浏览器发起HTTP请求，请求可以是GET、POST、PUT、DELETE等不同类型，取决于要执行的操作。例如，当用户在浏览器中点击一个链接或提交一个表单时，前端会发送HTTP请求。
- 后端接收请求： 服务器端接收到前端发送的HTTP请求。服务器上运行的后端应用程序（如Web服务器、应用服务器）根据请求的URL和方法来确定要执行的操作。
- 后端处理请求： 后端处理接收到的请求，可能包括数据库查询、业务逻辑处理等。后端可以使用不同的编程语言和框架来实现这些操作，如Node.js、Django、Flask、Spring等。
- 后端发送响应： 后端处理完成后，将结果封装成HTTP响应返回给前端。响应包括HTTP状态码、响应头和响应体。响应体中通常包含了请求的结果数据，可以是HTML、JSON等格式。
- 前端接收响应： 前端接收到后端返回的HTTP响应。根据响应的内容和状态码，前端决定如何更新用户界面。例如，可以通过JavaScript来动态更新页面内容，或者根据响应数据执行相应的操作。
- 前端展示数据： 如果后端返回的是数据，前端可以将这些数据渲染到用户界面上，以便用户查看。这可能涉及到更新页面的一部分，或者完全刷新页面，具体取决于应用的设计和要求。
JSON的理解
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript语言的一个子集，但由于其简洁和易读的特性，成为了一种通用的数据格式，用于在不同编程语言之间进行数据交换。
JSON由键值对组成，类似于JavaScript中的对象。一个JSON对象是一个无序的集合，其中的键（属性名）和值之间用冒号分隔，不同键值对之间用逗号分隔。JSON的基本数据类型包括字符串、数字、布尔值、对象、数组和null。
以下是一个简单的JSON示例：
{ "name": "ChengxuXiaoyong", "age": 18, "isStudent": true, "courses": ["Math", "History", "Science"], "address": { "city": "New York", "IDCode": "211747" } }
在这个示例中，有一个包含个人信息的JSON对象，包括姓名、年龄、是否是学生、所修课程和地址。其中，"courses"是一个JSON数组，"address"是一个嵌套的JSON对象。
JSON的优势包括易读性、易于解析和生成、支持多种编程语言、占用空间小等特点，因此在Web开发和API设计中广泛使用。前后端之间的数据交互、配置文件、日志等都可以使用JSON格式。
前端代码实现：使用Java语言和Spring Boot框架的后端代码，接受前端HTML传来的JSON信息并返回相应的响应。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Frontend Example</title> </head> <body> <h1>Frontend Example</h1> <button onclick="sendDataToBackend()">Send Data to Backend</button> <script> async function sendDataToBackend() { // 准备要发送的数据，这里简单地创建一个JSON对象 const userData = { username: 'john_doe', email: 'john.doe@example.com' }; // 使用Fetch API发送POST请求到后端 const response = await fetch('http://localhost:8080/api/user', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(userData) }); // 解析后端返回的JSON响应 const responseData = await response.json(); // 打印后端返回的数据 console.log(responseData); } </script> </body> </html>
后端代码实现
import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @SpringBootApplication public class BackendApplication { public static void main(String[] args) { SpringApplication.run(BackendApplication.class, args); } } @RestController @RequestMapping("/api") class ApiController { @PostMapping("/user") public ApiResponse receiveUserData(@RequestBody UserData userData) { // 在后端进行处理，这里简单地将收到的数据原样返回 return new ApiResponse("success", userData); } } class UserData { private String username; private String email; // getters and setters public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } } class ApiResponse { private String status; private Object data; // getters and setters public ApiResponse(String status, Object data) { this.status = status; this.data = data; } public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } }
