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是详情页⾯）
nginx部署前端项目
下载nginx-1.13.8 window64位压缩包，解压之后打开该⽬录下有⼀个html⽂件夹，⾥⾯有index.html和50x.html两个默认页⾯。
将静态资源（步骤3）统⼀放⼊新建的test⽂件夹⾥，并复制到此⽬录下
然后去nginx的 conf  -  f⽂件，修改配置
添加⼀个upstream, 地址写上后台接⼝的地址ip和端⼝，/test/是⽤于拦截h5的请求（前⾯把页⾯放在新建的test⽬录就是⽤于拦截请求⽤的） /html-test/是⽤于拦截后台的接⼝，（因为接⼝的地址都需要带上后台的项⽬名，这⾥拦截的就是后台的项⽬名称）
然后双击，启动nginx。
成功查询到后台的数据。点击查看详情也是可以跳转到详情页⾯的
js页⾯请求参考 home.js
⾄此⼤功告成，是不是很简单？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。