目录

🎍序言

🌳加法计算器

🚩准备工作

🚩约定前后端交互接口

🚩后端服务器代码的书写

🌴用户登录

🚩准备工作

🚩约定前后端交互接口

🏀需求分析

🏀接口定义

📌校验接口

📌查询登录用户接口

🚩后端代码的书写

🏀校验接口代码

🏀查询登录用户接口

🏀完整代码和接口测试

🚩调整前端页面代码

🏀ajax介绍

🏀调整登录页面login.html

🏀调整首页index.html

---

🎍序言

本文章主要内容：

1. 理解前后端交互过程
2. 接口传参，数据返回，以及页面展示

🌳加法计算器

需求:输⼊两个整数,点击"点击相加"按钮,显⽰计算结果

效果展示如下：

具体实现步骤，大致分为以下几步：

1. 准备工作
2. 约定前后端交互接⼝
3. 后端服务器代码的书写

🚩准备工作

创建SpringBoot项⽬: 引⼊Spring Web依赖

创建calc.html文件

接下来我会直接给出前端的代码，直接照抄即可，前端代码如下：

🚩约定前后端交互接口

接口概念介绍：

约定"前后端交互接"是进⾏Web开发中的关键环节

接⼝⼜叫API（Application Programming Interface),我们⼀般讲到接⼝或者API，指的都是同⼀个东西.

是指应⽤程序对外提供的服务的描述,⽤于交换信息和执⾏任务(与JavaSE阶段学习的[类和接⼝]中的接⼝是两回事).

简单来说,就是允许客⼾端给服务器发送哪些HTTP请求,并且每种请求预期获取什么样的HTTP响应.

现在"前后端分离"模式开发,前端和后端代码通常由不同的团队负责开发.双⽅团队在开发之前,会提前约定好交互的⽅式.客⼾端发起请求,服务器提供对应的服务.

服务器提供的服务种类有很多,客⼾端按照双⽅约定指定选择哪⼀个服务
接⼝,其实也就是我们前⾯⽹络模块讲的的"应⽤层协议".把约定的内容写在⽂档上,就是"接⼝⽂档",接⼝⽂档也可以理解为是应⽤程序的"操作说明书

在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⼝⽂档进⾏开发.

• 接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.
• 接⼝⽂档⼀旦写好,尽量不要轻易改变.
• 如若需要改变,必须要通知另⼀⽅知晓

接下来我们一起来写一个关于加法计算器的简单的接口文档

首先我们进行需求分析：

• 加法计算器功能,对两个整数进⾏相加,需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果

基于以上分析,我们来定义接口

1. 站在前端的角度：前端需要计算的结果
2. 站在后端的角度：后端需要输入的数据

请求路径(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代码如下：

🚩约定前后端交互接口

🏀需求分析

对于后端开发⼈员⽽⾔,不涉及前端⻚⾯的展⽰,只需要提供两个功能

1. 登录⻚⾯: 通过账号和密码,校验输⼊的账号密码是否正确,并告知前端
2. ⾸⻚:告知前端当前登录⽤⼾.如果当前已有⽤⼾登录,返回登录的账号,如果没有,返回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强刷