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

前言

继承上一篇博文，本篇主力演示利用 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 项目部署 （亲测有效））设置如下：

1. 首先在 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>