SpringBoot接口+前端H5页面前后端分离demo（附源码）

说明：后台接口使用SpringBoot，前端页面使用H5，使用nginx作转发请求的代理，解决跨域问题，实现前后端分离。

准备：SpringBoot工程 ，nginx-1.13.8，H5静态资源（页面，css，js等）

开始：

1.后台接口使用SpringBoot，先搭建一个SpringBoot工程，工程名：html-test，编写接口类HtmlTestInfo.java，设置端口:9999 

然后右击HtmlTestApplication - Debug as -Java Application运行工程。（这边的接口没有查询数据库，通过自己造的数据查询的），下面给出工程的下载地址。

2.测试接口：

为了保证我们后台接口没有问题，我们使用工具测试本地的接口，测试是ok的。（我本地ip是192.168.0.117）

3.H5页面

写一个可以正常运行的页面。（两个页面，home是列表页面，homeDetail是详情页面）

4.nginx下载

下载nginx-1.13.8 window64位压缩包，解压之后打开该目录下有一个html文件夹，里面有index.html和50x.html两个默认页面。

将静态资源（步骤3）统一放入新建的test文件夹里，并复制到此目录下

然后去nginx的 conf  -  nginx.conf文件，修改配置

添加一个upstream, 地址写上后台接口的地址ip和端口，/test/是用于拦截h5的请求（前面把页面放在新建的test目录就是用于拦截请求用的） /html-test/是用于拦截后台的接口，（因为接口的地址都需要带上后台的项目名，这里拦截的就是后台的项目名称）

然后双击nginx.exe，启动nginx。

5.启动成功后打开浏览器 输入 地址：http://192.168.0.117/test/home.html

成功查询到后台的数据。点击查看详情也是可以跳转到详情页面的

js页面请求参考 home.js

至此大功告成，是不是很简单？

下面附源码地址：https://download.youkuaiyun.com/download/yufeng005/10903324