{{ v.name }}
{{ v.cls }}类
{{ v.price }} ¥{{ v.price }}
基于springmvc进行echarts动态实时数据展示,echarts的官网示例是前端的js动态随机数据,没有与后端程序进行交互,由于本人之前对springmvc和ajax不太了解,所以,走了很多弯路,通过这部分的学习,让自己对mvc架构和简单的ajax有了初步的了解,下面就记录一下自己搭建的这部分程序。
首先需要配置web.xml,设置好servlet和filter,这部分可以参考众多spring示例,这里就不赘述了。
接下来就是需要将echarts的相关代码写入到一个jsp文件,代码如下:
<%@pagelanguage="java"import="java.util.*"pageencoding="utf-8"%>
其中getchartdata函数中主要是ajax的请求交互代码部分,url:"getdynmiclinedata.do"代码是在调用getchartdata函数时,ajax向后端程序所请求的url,通过spring的配置,在控制类controller中进行设置@requestmapping,来匹配动态响应的代码。
controller类的代码如下:
packagecontroller;importjava.util.arraylist;importjava.util.arrays;importjava.util.hashmap;importjava.util.list;importjava.util.map;importjava.util.random;importorg.springframework.stereotype.controller;importorg.springframework.web.bind.annotation.requestmapping;importorg.springframework.web.bind.annotation.requestmethod;importorg.springframework.web.bind.annotation.responsebody;importorg.springframework.web.servlet.modelandview;importservice.personservice;importentity.echartdata;importentity.person;importentity.series;@controllerpublicclasslogincontroller{//域名访问跳转到登录页@requestmapping("/")publicstringindex(){return"login";}//登录跳转到首页@requestmapping(value="/login",method=requestmethod.post)publicmodelandviewlogin(stringnickname){modelandviewmv=newmodelandview();mv.setviewname("home/index");mv.addobject("nickname",nickname);returnmv;}////获取动态信息@requestmapping(value="/getdynmiclinedata.do")@responsebody//添加该注释后,返回值将由转换器进行转换,转换器为jackson,所以会转换成json格式publicechartdatagetdynmiclinedata(){list
至此,就完成了整个的数据交互的过程,前端javascript定时调用js函数,js函数中包含ajax动态请求代码,其中的url匹配到后端的controller类中的@requestmapping,然后通过return进行数据向前端发送,进而展示,以达到动态实时展示的目的。