目录
🎍序言
🌳加法计算器
🚩准备工作
🚩约定前后端交互接口
🚩后端服务器代码的书写
🌴用户登录
🚩准备工作
🚩约定前后端交互接口
🏀需求分析
🏀接口定义
📌校验接口
📌查询登录用户接口
🚩后端代码的书写
🏀校验接口代码
🏀查询登录用户接口
🏀完整代码和接口测试
🚩调整前端页面代码
🏀ajax介绍
🏀调整登录页面login.html
🏀调整首页index.html
🎍序言
本文章主要内容：
- 理解前后端交互过程
- 接口传参，数据返回，以及页面展示
🌳加法计算器
需求:输⼊两个整数,点击"点击相加"按钮,显⽰计算结果
效果展示如下：
具体实现步骤，大致分为以下几步：
- 准备工作
- 约定前后端交互接⼝
- 后端服务器代码的书写
🚩准备工作
创建SpringBoot项⽬: 引⼊Spring Web依赖
创建calc.html文件
接下来我会直接给出前端的代码，直接照抄即可，前端代码如下：
🚩约定前后端交互接口
接口概念介绍：
约定"前后端交互接"是进⾏Web开发中的关键环节
接⼝⼜叫API（Application Programming Interface),我们⼀般讲到接⼝或者API，指的都是同⼀个东西.
是指应⽤程序对外提供的服务的描述,⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).
简单来说,就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.
现在"前后端分离"模式开发,前端和后端代码通常由不同的团队负责开发.双⽅团队在开发之前,会提前约定好交互的⽅式.客⼾端发起请求,服务器提供对应的服务.
服务器提供的服务种类有很多,客⼾端按照双⽅约定指定选择哪⼀个服务
接⼝,其实也就是我们前⾯⽹络模块讲的的"应⽤层协议".把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书
在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⼝⽂档进⾏开发.
- 接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.
- 接⼝⽂档⼀旦写好,尽量不要轻易改变.
- 如若需要改变,必须要通知另⼀⽅知晓
接下来我们一起来写一个关于加法计算器的简单的接口文档
首先我们进行需求分析：
- 加法计算器功能,对两个整数进⾏相加,需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果
基于以上分析,我们来定义接口
- 站在前端的角度：前端需要计算的结果
- 站在后端的角度：后端需要输入的数据
请求路径(URL)：calc/sum
参数：num1(Integer) num2(Integer)
请求⽅式：GET/POST
接⼝描述：计算两个整数相加
对于请求参数说明：
最后我们对于响应数据的格式也进行规定
Content-Type: text/html
响应内容:例如：计算结果为:23+25=48
🚩后端服务器代码的书写
基于接口文档我们就直接书写了
代码：
先测试后端代码，通过浏览器访问：观察结果后端是没有问题的
接下来就是前端和后端进行交互，上述calc.html通过浏览器访问：
🌴用户登录
需求: 用户输⼊账号和密码,后端进⾏校验密码是否正确
1. 如果不正确,前端进⾏用户告知
2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录用户
3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息
前端页面展示：
🚩准备工作
将前端代码放入static文件中：
index.html代码如下：
longin.html代码如下：
🚩约定前后端交互接口
🏀需求分析
对于后端开发⼈员⽽⾔,不涉及前端⻚⾯的展⽰,只需要提供两个功能
- 登录⻚⾯: 通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
- ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回false
🏀接口定义
该功能设计两个页面，所以这里我们定义两个接口
📌校验接口
请求路径：/user/login
请求⽅式：POST
接⼝描述：校验账号密码是否正确
- 请求参数
- 响应数据
Content-Type: text/html
响应内容:
- true //账号密码验证成功
- false//账号密码验证失败
📌查询登录用户接口
请求路径：/user/getUserInfo
请求⽅式：GET
接⼝描述：查询当前登录的用户信息
- 请求参数
无
- 响应数据
Content-Type: text/html
响应内容:登录人：zhangsan
🚩后端代码的书写
🏀校验接口代码
校验我们首先需要进行判断用户名与密码是否为空或者长度为0，若为，则返回false。
这里我们选择使用StringUtils.hasLength()来判断，StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值(或者字符串是否有长度),字符串为null或者""时,返回false,其他返回true
其次由于我们这里并没有添加数据库，所以我们直接使用固定的字符串进行判断。
如果用户名与密码正确，则将该用户添加至session
🏀查询登录用户接口
对于该接口实现就更加加简单了。直接在HttpSeesion对象中获取即可
🏀完整代码和接口测试
代码：
后端接口测试：
🚩调整前端页面代码
🏀ajax介绍
在上述的加法计算器中，前端是通过最原生的from表单来提交的，接下来换一种方式。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
例子：在上述加法计算器中点击"点击相加"之后，就会跳转到另一个页面，但是有的时候，比如有一个登录页面，当我们用户名密码输入正确之后才需要进行页面跳转，用户名或者密码错误的时候，就不需要跳转，若出现跳转会给用户带来非常不好的体验！或者说一个注册页面，当用户 输入一个用户名之后，如果说该用户名已经被注册了，则提示"用户名已被注册"，而这个数据是通过在数据库中查询之后得到的结果，即该结果是从后端返回的，而当前页面是没有进行跳转的，这种体验也是非常好的！上述的加法计算器是通过from表单的形式提交的，页面是一定会跳转的。
那么ajax是属于异步调用，异步调用的意思是我给你发送了一个请求，等你进行回复，等你回复之后，我再来看接下来的操作是什么。from表单是直接跳转到另一个URL了。
同步和异步的区别：
- 同步，可以理解为在执行完一个函数或方法之后，一直等待系统返回值或消息，这时程序是出于阻塞的，只有接收到返回的值或消息后才往下执行其他的命令。
- 异步，执行完函数或方法后，不必阻塞性地等待返回值或消息，只需要向系统委托一个异步过程，那么当系统接收到返回值或消息时，系统会自动触发委托的异步过程，从而完成一个完整的流程。
🏀调整登录页面login.html
由于idea中编写前端代码不是很方便，所以后面就通过vsCode来编写
在vsCode上打开你前端代码所在的路径：在idea中打开文件所在位置，复制后通过vsCode打开文件夹搜索改路径即可，所以现在idea中的前端代码(static文件路径下的)和vsCode中的代码对应的是同一个文件，即使在vsCode中修改之后保存，也会同步到idea中。
ajax的写法：写法有多种，原生的ajax这里就不说了，非常复杂 。此处通过JQuery的ajax方式，JQuery把ajax进行了封装。
语法：$.ajax(); ()里面是你需要做什么事情，是一个对象，对象使用{}表示 
做的事情：发送一个请求，成功干什么，失败干什么(需要传递URL，请求方法，数据)
上述给后端传递了数据，由于是异步的，不像加法计算器中发送请求后就直接跳转了(跳转完之后页面上接口返回计算结果)，那么ajax发出去请求之后，等请求成功了，后端调用success方法，success方法中就写成功了干什么，请求失败，后端调用error方法......
页面跳转的三种方式:
- 1. window.location.href = "book_list.html";
- 2. window.location.assign("book_list.html");
- 3. window.location.replace("book_list.html");
以上写法,通常把window.省略,比如 写成 window.location.href = "book_list.html"; location.href = "book_list.html";
三者区别参考：location.assign()、location.href、location.replace(url)的不同-阿里云开发者社区
页面访问一(记得重启服务)：由于index.html代码还没有写，所以没有信息，当前可看到请求后端接口成功，页面发生了跳转
访问页面二：当前请求后端接口失败，提示"用户名或者密码错误"
通过Fiddler抓包查看前端传递参数的形式：后端可用对象接收，也可使用包装类型接收
ajax语法小结：
ajax括号里面的是对象，使用{}来表示
里面的属性是由键值对组成，个键值对之间使用逗号分隔
在传递的参数中，其中key与后端接收的参数保持一致，若不一致使用后端参数重命名(@RequestParam)，value表示给后端传递的参数
success表示HTTP请求成功时执行的内容，function函数中的变量表示后端接口返回的数据，起任何名字都可
🏀调整首页index.html
在上述login.html中，请求后端接口成功后跳转到了index.html页面，只显⽰当前登录用户即可.
当前登录⽤⼾需要从后端获取,并显⽰到前端
在上述login.html页面中，在点击"登录"会去执行"login"这个函数，所以把ajax写在了"login"函数中
那么在index.html页面中，只需要显示从后端获取的用户名，没有任何点击操作，直接在script中写ajax即可
页面访问：发现用户主页还是没有打印出用户名信息
排查前后端问题：作为后端人员，首先排查后端问题(可通过postman，Fiddler，debug，打印日志等方式排查后端问题)
通过Fiddler抓包是否正确返回响应，发现正确返现
此处是前端的缓存问题：crtl+F5强刷
