ps:在上一教程的基础上操作,就不用新建项目了,请参考文章:SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)
a. 新建Product实体类:
b. 新建一个HelloController类(使用前面实验的HelloController即可),添加返回json数据的方法:
c. 启动项目,访问路径可看到后台返回了json数据:localhost:8080/project
a. 注解@RequestMapping("/project")
:访问/project路径则执行下面的方法
b. 注解@ResponseBody
:以json格式返回数据
c. ArrayList<Product> productArrayList = new ArrayList<Product>();
:构建一个用于装product对象的集合,此处表示装了4个product
d. return productArrayList;
:返回数据给前端
localhost:8080/project
可以查看到数据,8080是SpringBoot项目默认的端口。localhost表示本地IP,我们的IDEA项目点击执行,其实就是在我们windows本地启动了项目。浏览器方式打开默认是GET请求,而@RequestMapping("/project")
不写,GET也可以访问得到。a. 新建一个view.html文件
a. 在HelloController类中添加方法
b. 重启项目,打开浏览器(localhost:8080/view),可看到:
a. AJAX请求
b. 数据展示
0x03 意外惊喜a. 在HelloController类中添加方法
b. 新建一个view1.html文件
c. 重启项目,打开浏览器(localhost:8080/view1),可看到:
a. 在HBuilder新建一个前端项目,引入echarts与jquery的js文件,新建new_file.html,复制view1.html的内容进去
b. 用浏览器打开new_file.html,打开Fiddler(mac系统可用Charles),刷新界面,可以看到实际上我们前端访问的端口是8020,而我们的后端项目端口是8080端口,存在跨域问题,所以无法得到数据
c. 通过Fiddler将8020端口转发到8080端口,实现接收数据,配置如下:
d. 刷新HBuilder打开的new_file.html的界面,可以看到访问的是8020端口,但实际上接收到的数据是8080端口发送过来的
作者简介:邵奈一
全栈工程师、市场洞察者、专栏编辑
| 公众号 | 微信 | 微博 | CSDN | 简书 |
福利:
邵奈一的技术博客导航
邵奈一 原创不易,如转载请标明出处。