1. 前后端分离开发
1.1 前后端分离架构介绍
前后端分离已成为互联网项目开发的业界标准使用方式,将前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、微服务架构、多端化服务(各种客户端,比如浏览器、车载终端、安卓、IOS等)打下坚实的基础。
前后端分离的核心思想就是前端HTML页面通过A JAX调用后端的API接口,并通过JSON数据进行交互。
1.2 接口文档
1.2.1 什么是接口文档?
在我们的项目中使用的是前后端分离开发方式,需要由前后端工程师共同定义接口,编写接口文档,
之后大家都根据这个接口文档进行开发,到项目结束前都要一直进行接口文档的维护。
1.2.2 为什么要写接口文档?
\1. 项目开发过程中前后端工程师有一个统一的文件进行沟通交流,并行开发
\2. 项目维护中或者项目人员更迭,方便后期人员查看、维护
1.2.3 接口规范是什么?
一个接口的描述至少包括下面几项:
名称: findCourseList
描述: 根据条件查询课程信息
URL: http://localhost:8080/lagou_edu_home/course/
请求方式: GET
请求参数
methodName:"findCourseList";
响应结果
{
"status": "0",
"msg": "success"
}
1.3 前后端分离架构的优势
1.3.1 前后端耦合的开发方式
1.3.2 前后端耦合的缺陷 (以JSP为例)
\1. UI出好设计图之后,前端开发工程师只负责将设计图切成HTML,需要由Java开发工程师来将HTML套成JSP页面,修改问题的时候需要双方协同开发,效率低下。
\2. JSP页面必须要在支持Java的WEB服务器上运行(如Tomcat、Jetty等),无法使用Nginx等(官方宣称单实例HTTP并发高达5W),性能提升不上来。
\3. 第一次请求JSP,必须要在WEB服务器中编译成Servlet,第一次运行会较慢。 之后的每次请求JSP都是访问Servlet再用输出流输出的HTML页面,效率没有直接使用HTML高
1.3.3 前后端分离的开发方式
1.3.4 前后端分离的优势
\1. 前后端分离的模式下,如果发现Bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象
\2. 前后端分离可以减少后端服务器的并发/负载压力。除了接口以外的其他所有HTTP请求全部转移到前端Nginx上,接口的请求则转发调用Tomcat.
\3. 前后端分离的模式下,即使后端服务器暂时超时或宕机了,前端页面也会正常访问,只不过数据刷不出来而已。
\4. 前后端分离会更加合理的分配团队的工作量,减轻后端团队的工作量,提高了性能和可扩展性。
1.4 技术选型
1.4.1 前端技术选型
前端技术 | 说明 |
---|---|
Vue.js | 是一套用于构建用户界面的渐进式JavaScript框架 |
Element UI 库 | element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库, 方便程序员进行页面快速布局和构建 |
node.js | 简单的说 Node.js 就是运行在服务端的 JavaScript 运行环境 . |
axios | 对ajax的封装, 简单来说就是ajax技术实现了局部数据的刷新,axios实现了对 ajax的封装, |
1.4.2 后端技术选型
后端技术 | 说明 |
---|---|
Web层 | a) Servlet:前端控制器 b) Filter:过滤器 c) BeanUtils:数据封装 |
Service层 | a) 业务处理 |
dao层 | a) Mysql:数据库 b) Druid:数据库连接池 c) DBUtils: 操作数据库 |
1.5 JSON
1.5.1 JSON简述
JSON(JavaScript Object Notation) JavaScript对象表示法(JSON源于JS)。
JSON的特点:
JSON 是一种轻量级的数据交换格式。
JSON采用完全独立于语言的文本格式,就是说不同的编程语言JSON数据是一致的。
JSON易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
1.5.2 XML与JSON的区别
XML : 可扩展标记语言,是一种用于标记电子文件使其具有结构性的标记语言。
JSON: (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
相同点:
它们都可以作为一种数据交换格式。
二者区别:
XML是重量级的,JSON是轻量级的,XML在传输过程中比较占带宽,JSON占带宽少,易于压缩。
XML和json都用在项目交互下,XML多用于做配置文件,JSON用于数据交互
JSON独立于编程语言存在,任何编程语言都可以去解析json
1.5.3 JSON语法格式
{
"id": 110,
"name": "李会长",
"age": 24
}
语法注意:
\1. 外面由{}括起来
\2. 数据以"键:值"对的形式出现(其中键多以字符串形式出现,值可取字符串,数值,甚至其他json对象)
\3. 每两个"键:值"对以逗号分隔(最后一个"键:值"对省略逗号
\4. 参数值如果是string类型,就必须加引号,如果是数字类型,引号可加可不加遵守上面4点,便可以形成一个json对象。
<script>
//自定义JSON数据格式 (Java中的对象)
var person = {
"name":"tom","sex":"女", "age":12};
console.log(person);
//数组格式
var persons = {
"person":[{
"name":"tom","sex"