|
本帖最后由 wangjingjing 于 2014-8-27 17:06 编辑
第一次搭建的webapp主要是使用echarts来做一些展示,使用JSP,JS,Servlet来实现。功能比较简单,但是涉及到了很多基本的操作,这里贴一些遇到的基本问题,后面会贴一个Echarts的简单使用文档。
1. Echarts是一个开源的可视化工具,用js实现的,更多资料可以查看官网。echarts
在使用echarts的过程中,如果出错就无法显示图,但是有些时候又没有错误提示信息,所以就需要调试了。
js 脚本是可以调试的,使用IE 浏览器进行页面显示时,F12可以看到脚本的内容。在脚本中需要的地方设置断点,然后点击“启动调试”。再把这个页面刷新,就可以跳转到调试的页面了。调试的方法跟vs中的调试相同,F5单步调试等等,也可以看到变量的具体取值。
2. 一个jsp文件中如果存在多个图,只需要设置一次require.config就可以了,无需多次加载。
3. jsp文件中的不同script 脚本块是可以相互调用的。如果两个块中都定义了相同函数名的函数,那么在调用的时候,会自动使用第一次出现的函数,而不是实现类似于Java中的多态,自动根据函数的参数个数选择你所定义的函数。所以一定要注意区别不同的函数名,不要写重了。
4. js文件中的变量也是需要定义再使用,否则也会引起变量未定义的错误。
5. jsp 调用了一个servlet,这个servlet再调用一个Java后台程序做相应的处理,返回一个对象。为了可以使用这个对象,可以把这个返回的对象作为参数设置,即:
然后在jsp中使用getAttribute来获得这个变量。
例如:
EChartsInput result = (EChartsInput) request.getAttribute("result" );
如果还需要将JSP中的变量值传递给JS,那么JS 中可以使用JSP中同样的方法来得到:<%= arg %>,例如:- function init(ec) {
- //加载图表的js
- var data1=<%=product.getSummaryFeature()%>;
- var name1="<%=product.getName()%>"; //可以直接从jsp中获得属性的值
- myChart = ec.init(document.getElementById("featureChart<%=i%>"));
- myChart.setOption(getOption1(data1,name1));
- };
复制代码 6. jsp中调用servlet,然后servlet调用java后台处理程序,为了防止后台程序读取中文返回乱码,需要指定读写文件时的编码方式。在读写文件时,使用InputStreamReader指定文件编码,如下:- BufferdReader br = new BufferedReader(new InputStreamReader(new FileInputStreamReader(new File(fileName)),"UTF-8"))
复制代码 对于写文件,也需要对应的方法:- BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStreamWriter(new File(fileName)),"UTF-8"));
复制代码 7. JSP中的form 向servlet传递参数有两种方法,get,post方法,具体区别不太清楚。但是,对于中文参数都可能出现乱码问题,为此,有两种解决方法:
get方法:需要对接收的参数进行编码转换:- String query = new String(request.getParameter("query").getBytes("ISO-8859-1"),"UTF-8");
复制代码 post方法:req.setCharacterEncoding( "utf-8");然后直接取- String query = request.getParameter("query");
复制代码 8. 分页方法,使用的是get方法传参。这个时候可能导致的问题是中文传参乱码问题。
9. 文件路径的问题,将项目中所需要用到的数据放到webapps对应的项目下,比如“PSDemo”中。读取的时候指定的路径需要使用"/"作为分割,在Windows下可以使用"\\"进行分割,但是移植到linux服务器上就会出错。
比如:- String currentPath = this. getServletContext().getRealPath( "/" );//默认以'/'结尾
复制代码- String dataPath = currentPath + "PSData/";//假设所需要的数据存放在PSData文件夹下。
复制代码 最后贴一张效果图展示一下,界面略龊。主要使用到了Echarts中的Radar和Force图.
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?注册
x
|