aopstudio 的个人博客   >   标签墙   >   axios 标签

使用 Vue+axios+Echarts 绘制关系图遇到的坑

2022-02-19

最近做毕设,后端采用的是Spring boot,通过Neo4jRepository从neo4j中获取数据,前端框架是Vue,通过axios请求后端数据,并处理成符合Echarts规范的数据格式,之后Echarts进行渲染。在前端渲染数据的过程中遇到好多坑。 首先是如何对后端返回的数据进行处理。后端返回的数据格式是这样的: [ { "id": 1, "name": "CSS" }, { "id": 2, "name": "Javascript", "derives": [ { "id": 3, "name": "Vue.js" } ] }, { "id": 3, "name": "Vue.js" }, { "id": 171, "name": "前端技术", "includes": [ { "id": 1, "name": "CSS" }, { "id": 2, "name": "Javascript", "derives": [ { "id": 3, "name": "Vue.js" } ] }, { "id": 172, "name": "HTML", } ] }, { "id": ....

三种实现 AJAX 的方法以及 Vue 和 axios 结合使用的坑

2022-02-19

前言 之前曾经想自己写一个天气的App,并找到了一个免费的天气数据接口的服务商——和风天气,当时也不懂怎么发HTTP请求,而且也只会用Java语言,看到官方文档里面有一个Java代码示例,就复制了一下在自己电脑上调通。一开始是在控制台输出天气数据的,后来用Swing写了一个图形化界面并放置数据,但也就到此为止了,并没有什么实用价值。 最近学习了一下前端的相关知识,发现像和风天气这样的数据接口,根本不需要用到像Java这样的大型语言,只需在网页端用Javascript发HTTP请求就能获得JSON数据,之后再渲染到HTML网页,大大节省了资源利用和开发时间,并了解到开发这样的网页最适合的方式就是使用AJAX,因为它可以实现网页的局部更新。这样我就可以实现如下的业务场景:输入想要搜索的城市,点击搜索,下面显示出该城市的天气信息,而不影响页面的其他内容。有时候JS调用AJAX请求会有跨域问题,但和风天气的数据接口并没有这个问题。 具体场景 界面如图: 在输入框输入城市名,点击搜索按钮,可以在下面显示出各项数据(从接口获得)。 大致的HTML代码如下: <div class="cont....