H5+javascript+jQuery的单页面应用（SPA）（三）

hivesplace

已于 2022-04-06 11:55:28 修改

阅读量3.9k

点赞数 1

分类专栏：单页面应用 SPA H5+jQuery+ajax+CSS3/DIV 前后端分离文章标签： html5

于 2022-04-05 15:12:40 首次发布

本文链接：https://blog.csdn.net/hivesplace/article/details/123952101

版权

本文详细介绍了如何使用HTML5、jQuery和Ajax构建单页面应用（SPA），涉及前端表单处理、Nginx反向代理解决跨域问题、后端Spring Boot Rest Controller的设置，以及登录成功和失败的前端反馈。通过实例展示了前后端数据交互的完整流程。

摘要由CSDN通过智能技术生成

前言

继承上一篇博文，本篇主力演示利用 jQuery ajax 实现 SPA 的前后端分离。本例子后端为一个简单的 spring boot 项目。

前端 Ajax

创建 login.js 和修改 Bootstrap Form 例子

为方便起见，不用每次重新加载页面后跳转到首页，我们修改 index.js 里的 defaultPage 和 defaultNavId 为 Login 及 navLoginLink（Login 页面和菜单选项）
在这里插入图片描述
改造 Bootstrap 的表单示例，加入 form id，method 和 action。同时，提交按钮也加入 button id=“submitButton”，如下:

修改完成后，点击表单提交按钮后，路径变化符合预期成为后端路径。（页面报错符合预期，因为还没搭建后端服务器）
请添加图片描述

架设 Nginx 反向代理解决跨域问题

然而后端服务器不会在5500端口提供服务。更改端口成为后端端口的话，将会衍生跨域访问问题。为了避免跨域问题，我们需要设置一个 http server 提供反向代理。本文以 Nginx 为例，简单的设置一下反向代理服务。（详细的设置 Nginx 反向代理服务，请参考本栏另一博文 Vue + Nginx 项目部署（亲测有效））设置如下：

首先在 nginx.conf 加入新的 server 配置（假设前端在5500端口、后端在15500端口）

在命令行输入

nginx -t

测试一下新写的配置有没有问题，没问题的话，输入

start nginx 或
nginx -s reload

启动/重启 Nginx 服务器。现在前端和后端处于相同域名和端口了。跨域问题解决。
请添加图片描述

前端加入 ajax 代码提交表单到后端

在所有前后端分离项目，首先我们需要关闭提交按钮的默认操作，并把提交表单数据的任务交给 ajax 去处理。在 index.js 里加入以下代码：
在这里插入图片描述

现在点击登录按钮，我们发现表单没有被提交到后端了。
请添加图片描述
现在，那么我们继续加入一些表单处理代码和 ajax 代码：

在 e.stopPropagation() 下面，我们首先把所有表单里所有的输入项加入到一个表单类（ssoLoginFormOject）里。
请添加图片描述
看到 ssoLoginFormOject 最后多出了，“”:“”。感觉$(‘#ssoLoginForm :input’) 把 button 也拉进来了。这个 button 我们不需要提交。，在 index.js 里 $(‘#ssoLoginForm :input’) 加个条件，遇到 id===”submitButton" 就不处理
在这里插入图片描述
再提交一次表单，发现 SSOLoginFormObject 没有了 “”:“”。OK了。

然后通过 jQuery ajx 把表单内容以 json 格式发送到后台并作进一步处理。如下：

再次提交表单，看看效果
请添加图片描述
提交表单后，ajax 返回 502 Bad Gateway 错误信息。原因很简单，因为我们还没有部署后端服务器。

后端 Spring Boot（Rest Controller）

新建一个 Spring Boot Maven 项目，
在这里插入图片描述
引入 Spring Web, Lombok 依赖

完成后 pom.xml 长这样

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.6.6</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent