前后端分离框架之API接口开发与分析—红色书籍抽奖系统

◆张许

前后端分离框架之API接口开发与分析—红色书籍抽奖系统

◆张许

（宿迁泽达职业技术学院 江苏 223800）

近年来，传统开发模式很难满足多端化（pc端、手机端、APP、车载系统等）服务需求。前后端分离已成为互联网项目开发的业界标准使用方式。通过“红色书籍抽奖系统”案例，从应用场景、业务需求、开发模式、前后端服务器之间数据的交互等分析讲解，后端服务器提供接口多个前端调用展示，彰显前后端分离开发特点及优势。

开发模式；前后端分离；API接口；JSON

早期网站建设主要满足PC端浏览器使用，而随着多端服务化：如PC端、手机端、平板端的浏览器、App、小程序、车载系统等多终端显示不同版面的需要、传统服务器端单一开发模式架构很难满足多终端需求。从传统开发模式分离出的前后端分离开发模式已成为互联网项目开发的业界标准使用方式。

1 项目介绍

2021年是中国共产党成立100周年，各大党政机关、书店、学校等单位推出“学党史，悟思想，知党恩，跟党走”系列活动。因网络便捷性，除在线学习，甚至通过抽奖活动引导在线答题、调查问卷。某单位推出答题正确率达到一定比例抽奖获取赠送红色书籍，为社会传递更多红色文化、红色思想、正能量起到良好的社会效应。

项目业务需求：

（1）抽奖展示系统要多终端展示（PC端、手机端等）；

（2）抽奖内容为书籍books；

（3）参与活动达到标准跳转到书籍抽奖系统。

2 开发模式选择

2.1 传统开发模式

早期互联网项目通过PC端浏览器向web服务器发送请求，服务器端负责业务逻辑处理及处理结果嵌入视图（如jsp）返回给客户端浏览器。

图1 传统开发模式浏览器与服务器交互流程

通过图1可见，传统Web服务器端是重开发模式，扮演开发多重角色：接收请求、调度业务逻辑处理、计算结果嵌入视图返回给浏览器。这种高度糅合，除各种角色融入在一起不利于编码解耦，更为重要很难满足本项目不同设备请求返回不同版面。

2.2 前后端分离模式

前后端分离开发模式是由传统开发模式演变而来的。把传统web服务器要完成多重角色分工给后端服务器和前端服务器。后端服务器主要负责接收前端请求，业务逻辑处理结果数据返回给前端；前端服务器主要负责请求和从后端服务器传递过来数据渲染到页面。

图2 前后端服务器流程图

通过图2可见一个后端API服务器提供的接口，为前端服务器群中多个前端服务器（如PC前端服务器、手机端服务器）以及APP安装包，小程序等终端提供数据支持服务。

通过开发模式比较，红色书籍抽奖系统因采用多端化服务需求决定选择前后端分离开发模式。

3 软件设计分析

红色抽奖系统架构是一个后端数据支持多前端展示界面。如何表示要交互数据，数据信息流传递过程，及多前端架构如何展示数据是设计中面对重点问题。

3.1 前后端交互的数据

根据面向对象思想，世界万物皆对象。抽取到奖品某本书为book即对象，对象=属性+方法。多个对象放在一起的集合为books。

图3 对象、对象的属性及属性值的示意图

图3转换成JSON代码表示如下：

var book={

"bookName"："《烈火中永生》"，

"bookPic"："imaes/001.jpg"，

"bookIntro"："书的简介"

}

多本书是相同数据类型放在一起称之为集合，用books表示。以上是JSON存储和交换文本基本语法。

3.2 前后端数据传递过程

图4 前后端通过ajax操作JSON格式数据交互

上图可见前端服务器放置运行文件html，html编码中通过嵌入javaScript操作Ajax发出http请求/响应。http是简单的请求-响应协议，同时可携带JSON格式的数据。后端服务器根据请求路径并把携带的JSON数据作为参数传递给控制器中指定自定义的函数。

采用sping boot技术在控制器中定义的函数上面添加一行注解@RequestMapping（）配置url路径来匹配接收前端请求url。后端服务器根据业务逻辑处理的直接返回静态数据或操作数据库得到结果数据，但在返回前要转换成JSON格式。通过@ResponseBody（）把处理结果转换成JSON格式，再通过http响应形式传递给前端。

如上所述前后端数据传递是通过http携带JSON格式数据请求或响应。请求url在控制器方法前通过@RequestMapping（）注解配置，访问url的路径则会调用控制器类中被注解的函数。http响应值通过@ResponseBody（）转换成JSON格式数据。

3.3 多前端架构

当今PC端浏览器、手机端浏览器、平板设备及小程序、APP多个界面展示和操作数据相同，传统单一服务器开发模式很难满足当前多场景应用需要。随着业务发展需要，前后端服务器如何配置架构呢？

以红色书籍抽奖系统为例，前后端人员在开发之前首先形成开发webAPI接口文档。说明并规范提供数据展示不同接口路径URL、请求方式、传递参数、返回JSON数据（如books）。前后端人员根据webAPI接口文档要求可同时开发进行，前端人员可创建模拟数据，根据后端完成进度调整访问接口路径即可获取后端真实数据。

图5 前后端分离多前端架构

由图5可见多前端架构模式，服务器端webApi接口统一提供JSON数据，右侧多种设备和终端界面在html文件中嵌入AjAx操作http请求-响应JSON数据。在开发过程中，可以根据应用场景需求，有选择决定开发哪些前端。

红色书籍抽奖系统是采用前后端分离架构技术开发而成，因使用场景要满足PC端网站、手机端网站、APP中嵌入，凡活动满足一定参与抽奖条件会跳入红色书籍抽奖系统。为此设计三个前端调用界面如图6。

图6 红色书籍抽奖系统三端显示版面

前后端分离技术不只为多端化提供架构方案，前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构等打下坚实的基础。

4 总结

通过红色书籍抽奖系统综合案例分析、讲解、开发。全面了解前后端分离不同模式的特点，能够根据是否需要多前端正确选择开发模式。同时通过对项目背景、项目分析、项目实践多个角度分析解讲，从知识背景、所用知识点等使读者能够深入理解前后端分离框架相关知识及API接口开发与调用。

[1]廖祥.基于前后端分离架构的用户权限控制系统设计与实现[J].软件工程，2020，23（12）：24-26.

[2]付敏峰，于林海.多终端Restful API框架设计研究及图书漂流系统应用[J].电脑知识与技术，2020，16（15）：4-7.

[3][杜石雷，刘继伟，赵磊，等.基于开放式通信协议的优化系统接口程序设计与开发[J].软件，2021，42（01）：71-73.

[4]黄晟祺，许林瑞，汪玉笳，等.基于前后端交互的就医无忧系统的设计与实现[J].2021，24（06）：53-56+49.

[5]方阿丽.Web开发主流框架技术研究[J].无线互联科技，2021，18（08）：64-65+96.

2021年江苏省大学生创新创业训练计划项目“基于API接口网站开发技术的研究”（项目编号：202114293015Y）