1.背景介绍

SPA与JSP

SPA(Single-page application):单页面应用，前端人员把页面展示的逻辑， 写在基于javascript的HTML模板上，通过Ajax异步请求，局部刷新页面内容，完成用户交互的功能。是一种前后端分离技术的应用。

JSP(Java Server Pages):java服务器页面，后端人员在html页面里插入Java代码形成页面模板，用户发送请求时，Java服务器处理模板，把生成的HTML页面发送给用户。

前后端分离与前后端分工

前后端分离，分离的是前后端代码，前端文件只有前端代码；前后端分工是指前后端人员的工作内容，在前后端分离的应用中，前后端人员的分工就是各自写前后端的代码。前后端不分离的应用中，前端人员负责页面排版，完成后再交给后端人员写页面逻辑

jsp代码--其中既有前端代码，也有后端Java代码

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
                      
<%@ page import="java.io.*,java.util.*" %>
站点名:<%= request.getParameter("name")%>
网址:<%= request.getParameter("url")%>

2.知识剖析

前后端分离与不分离的工作流程

前后端不分离（JSP）的工作流程

应用流程

开发流程

1. PM提出需求【需求文件】【原型图】
2. UI出图【UI图】
3. 前端切页面（或者后端切页面）【HTML代码】
4. 后端在html模板添加逻辑【HTML模板】
5. 后端完成后端逻辑
6. 测试，发布

前后端分离的工作流程

应用流程

开发流程

1. PM提出需求【需求文档】【原型图】
2. UI出图【UI图】
3. 前后端人员约定接口【接口文档】
4. 前端切页面+html模板+前端逻辑【前端代码】
5. 后端写服务器端逻辑【后端代码】
6. 测试，发布

6.扩展思考

前后端分离的优点与缺点

优点

• 前后端职责分开
• 开发效
• 维护性
• 单元测试
• 服务器流量

缺点

• 需要大量组件，首屏性能
• seo(搜索引擎优化)