Maven 创建java web project 添加struts支持 jqwidgets生成折线图

首先通过maven创建java web project

第一种方式:通过eclipse的maven插件

1.new project

选择Maven Project-->Next

保持默认 Next->

选择maven-archetype-webapp->Next

输入GroupId和Artficated Id->Finish

第二种方式:通过命令行方式:

mvn archetype:generate -DgroupId={project-packaging} -DartifactId={project-name}
 -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false 

这种方式会在另外一篇中详细描述~~

在eclipse里看到生成的项目目录如下图所示:


这时index.jsp会报错“The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path”

这是因为没有添加javax.servlet.http.HttpServlet  有两种解决方法:

第一种是在java build path中添加Add Library



点击Add Library->

选择Server Runtime


添加Apathe Tomcat7.0



  这个有一个前提就是需要你在Window->Prefence->Servers里边添加过tomcat的服务器



第二种解决方法是在在java BildPath中添加 Add Variable 中添加 JSP_API和SERVELET_API






2编辑pom.xml文件:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.cn.webapptest</groupId>
  <artifactId>WebAppTest</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>WebAppTest Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
        <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
        <dependency>
    	<groupId>org.apache.struts</groupId>
    	<artifactId>struts2-core</artifactId>
    	<version>2.3.16.1</version>
    </dependency>
    <dependency>
    	<groupId>org.apache.struts</groupId>
    	<artifactId>struts2-spring-plugin</artifactId>
    	<version>2.3.16.1</version>
    </dependency>
    <dependency>
    	<groupId>org.apache.struts</groupId>
    	<artifactId>struts2-json-plugin</artifactId>
    	<version>2.3.16.1</version>
    </dependency>
    <dependency>
  		<groupId>mysql</groupId>
  		<artifactId>mysql-connector-java</artifactId>
  		<version>5.1.30</version>
  	</dependency>
  </dependencies>
  <build>
    <finalName>WebAppTest</finalName>
     <plugins>
    	<plugin>
    		<groupId>org.apache.tomcat.maven</groupId>
    		<artifactId>tomcat7-maven-plugin</artifactId>
    		<version>2.2</version>
    	</plugin>
    </plugins>
  </build>
</project>
这里需要添加添加了struts的json支持 为了方便后面生成折线图的时候从服务器段取json格式数据


3.编辑web.xml文件

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
	<display-name>Archetype Created Web Application</display-name>
	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath*:applicationContext*.xml</param-value>
	</context-param>

	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<welcome-file-list>
		<welcome-file>login.jsp</welcome-file>
	</welcome-file-list>
</web-app>

4.编辑struts.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
 "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
 "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<package name="/" namespace="/"  extends="json-default">
  


  <action name="ajaxRequest" class="com.cn.action.UserInfoAction" method="init">
  	<result name="success" type="json"></result>
  </action>
  
 
</package>

</struts>

5.编辑log4j.xml文件  这个暂时没用到

<?xml version="1.0" encoding="UTF-8"?>
<!--
 - Copyright 1999-2011 Alibaba Group.
 -  
 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at
 -  
 -      http://www.apache.org/licenses/LICENSE-2.0
 -  
 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
-->
<!DOCTYPE log4j:configuration SYSTEM "log4j.dtd">
<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/" debug="false">
	<appender name="CONSOLE" class="org.apache.log4j.ConsoleAppender">
		<layout class="org.apache.log4j.PatternLayout">
			<param name="ConversionPattern" value="[%d{dd/MM/yy hh:mm:ss:sss z}] %t %5p %c{2}: %m%n" />
		</layout>
	</appender>
	<root>
		<level value="INFO" />
		<appender-ref ref="CONSOLE" />
	</root>
</log4j:configuration>

这时候项目的目录结构


这里边已经添加过jquery和jqwidgets的lib文件了

先上效果图:效果非常漂亮~~~


index.jsp

<html>
 <link rel="stylesheet" href="./jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="./jquery-2.1.1.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="./jqwidgets/jqxchart.js"></script>
    <script type="text/javascript">
   /** $(function() {
	          var availableTags = [      "ActionScript",      "AppleScript",      "Asp",      "BASIC",      "C",      "C++",      "Clojure",      "COBOL",      "ColdFusion",      "Erlang",      "Fortran",      "Groovy",      "Haskell",      "Java",      "JavaScript",      "Lisp",      "Perl",      "PHP",      "Python",      "Ruby",      "Scala",      "Scheme"    ];   
	    	 $( "#keyword" ).autocomplete({      source: availableTags    });  
	    	 $("#searchKeyword").autocomplete({
	 	    	source:function(request,response){
	 	    		$.ajax({
		 	    		url:"ajaxRequest.action",
		 	    		datatype:"json",
		 	    		data:{
		 	    			searchKeyword:encodeURI(encodeURI($("#searchKeyword").val()))
		 	    		},
		 	    		success:function(data){
		 	    			response($.map(data.result,function(item){
		 	    				return {value:item}
		 	    			}));
		 	    		}
	 	    		});
	 	    	},
	 	    	minLength:1,
	 	    })
	     })*/
        $(document).ready(function () {
        	var sampleData =[];
        	$.ajax({
 	    		url:"ajaxRequest.action",
 	    		datatype:"json",
 	    		data:{
 	    			//searchKeyword:encodeURI(encodeURI($("#searchKeyword").val()))
 	    		},
 	    		success:function(data){
 	    			console.log(data.userInfoList);		
 	    			sampleData = data['userInfoList'];
 	    			console.log(sampleData);		
 	               // prepare chart data as an array
 	               /*  var test = [
 	                       { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
 	                       { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
 	                       { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
 	                       { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
 	                       { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
 	                       { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
 	                       { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
 	                   ];  */
 	               console.log(test);
 	                 /*   var source =
 	                   {
 	                       datatype: "json",
 	                       datafields: [
 	                           { name: 'initTime' },
 	                           { name: 'newAndroidUser' },
 	                           { name: 'newIosUser' },
 	                           { name: 'newTotalUser' }
 	                       ],
 	                       url: 'ajaxRequest.action'
 	                   }; */
 	               // prepare jqxChart settings
 	               var settings = {
 	                   title: "XingXunTong User Info Static",
 	                   description: "New User of Day",
 	                   enableAnimations: true,
 	                   showLegend: true,
 	                   padding: { left: 10, top: 5, right: 10, bottom: 5 },
 	                   titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
 	                   source: sampleData,
 	                   categoryAxis:
 	                       {
 	                           text: 'Category Axis',
 	                           textRotationAngle: 0,
 	                           dataField: 'initTime',
 	                          	type: 'date',
 	                           showTickMarks: true,
 	                           valuesOnTicks: false,
 	                           tickMarksInterval: 1,
 	                           tickMarksColor: '#888888',
 	                           unitInterval: 1,
 	                           gridLinesInterval: 1,
 	                           gridLinesColor: '#888888',
 	                           axisSize: 'auto'
 	                       },
 	                   colorScheme: 'scheme05',
 	                   seriesGroups:
 	                       [
 	                           {
 	                               type: 'line',
 	                               showLabels: true,
 	                               valueAxis:
 	                               {
 	                                  // unitInterval: 10,
 	                                   minValue: 0,
 	                                   //maxValue: 100,
 	                                   description: 'New User ',
 	                                   axisSize: 'auto',
 	                                   tickMarksColor: '#888888'
 	                               },
 	                               series: [
 	                                       { dataField: 'newAndroidUser', displayText: 'New Android User', symbolType: 'square'},
 	                                       { dataField: 'newIosUser', displayText: 'New IOS User', symbolType: 'square'},
 	                                       { dataField: 'newTotalUser', displayText: 'New Total User', symbolType: 'square'}
 	                                       //{ dataField: 'Swimming', displayText: 'Personal Cycling', symbolType: 'square'}
 	                                   ]
 	                           }
 	                       ]
 	               };

 	               // setup the chart
 	               $('#chartContainer').jqxChart(settings);
 	    		}
	    	});
        	

        });
    </script>
<body>
<h2>Hello World!</h2>
 <div id='chartContainer' style="width:850px; height:500px">
    </div>
</body>
</html>
UserInfoAction
package com.cn.action;
import java.util.ArrayList;
import java.util.List;

import com.cn.model.UserInfo;
import com.cn.service.UserInfoService;
import com.opensymphony.xwork2.ActionSupport;


public class UserInfoAction extends ActionSupport {
	/**
	 * 
	 */
	private UserInfoService service = new UserInfoService();
	private static final long serialVersionUID = 1566390295544428070L;
	private List<UserInfo> userInfoList;
	public String init(){
		List<UserInfo> userList  = new ArrayList<UserInfo>();
		userList.add(new UserInfo("2014-06-05",40,60,100));
		userList.add(new UserInfo("2014-06-04",38,72,120));
		userList.add(new UserInfo("2014-06-03",43,26,69));
		userList.add(new UserInfo("2014-06-02",66,60,126));
		userList.add(new UserInfo("2014-06-01",75,57,132));
		userList.add(new UserInfo("2014-05-31",40,80,120));
		userList.add(new UserInfo("2014-05-30",89,33,122));

		/*this.setUserInfoList(service.init());*/
		
		return SUCCESS;
	}
	public List<UserInfo> getUserInfoList() {
		return userInfoList;
	}
	public void setUserInfoList(List<UserInfo> userInfoList) {
		this.userInfoList = userInfoList;
	}
	
}
UserInfo.java

package com.cn.model;

public class UserInfo {
	private String initTime;
	private int newAndroidUser;
	private int newIosUser;
	private int newTotalUser;
	public UserInfo(String initTime,int newAndroidUser,int newIosUser,int newTotalUser){
		this.initTime = initTime;
		this.newAndroidUser = newAndroidUser;
		this.newIosUser = newIosUser;
		this.newTotalUser = newTotalUser;
		
	}
	public String getInitTime() {
		return initTime;
	}
	public void setInitTime(String initTime) {
		this.initTime = initTime;
	}
	public int getnewAndroidUser() {
		return newAndroidUser;
	}
	public void setnewAndroidUser(int newAndroidUser) {
		this.newAndroidUser = newAndroidUser;
	}
	public int getnewIosUser() {
		return newIosUser;
	}
	public void setnewIosUser(int newIosUser) {
		this.newIosUser = newIosUser;
	}
	public int getnewTotalUser() {
		return newTotalUser;
	}
	public void setnewTotalUser(int newTotalUser) {
		this.newTotalUser = newTotalUser;
	}
	
}
由于添加了struts的json插件 我们在strtus.xml中配置

<package name="/" namespace="/"  extends="json-default">
  


  <action name="ajaxRequest" class="com.cn.hitachi.action.UserInfoAction" method="init">
  	<result name="success" type="json"></result>
  </action>
  
 
</package>
就可以将action中的数据转变为json数据格式,

<div selected="true" role="tabpanel" class="netInfoResponseText netInfoText "><pre role="list"><code class="wrappedText focusRow" role="listitem">{"userInfoList":[
        {"initTime":"2013-12-24","newAndroidUser":226,"newIosUser":204,"newTotalUser":430},
</code><code class="wrappedText focusRow" role="listitem">        {"initTime":"2013-12-25","newAndroidUser":219,"newIosUser":241,"newTotalUser":460},
        {"initTime":"2013-12-26"</code><code class="wrappedText focusRow" role="listitem">,"newAndroidUser":216,"newIosUser":221,"newTotalUser":437},
        {"initTime":"2013-12-27","newAndroidUser"</code><code class="wrappedText focusRow" role="listitem">:218,"newIosUser":226,"newTotalUser":444},
        {"initTime":"2013-12-28","newAndroidUser":208,"newIosUser"</code><code class="wrappedText focusRow" role="listitem">:213,"newTotalUser":421},
        {"initTime":"2013-12-29","newAndroidUser":235,"newIosUser":231,"newTotalUser"</code><code class="wrappedText focusRow" role="listitem">:466},
        {"initTime":"2013-12-30","newAndroidUser":256,"newIosUser":237,"newTotalUser":493}
   ]
}</code>

 

然后我们用 data['userInfoList'];的方式取其中的key为userInfoList的数据赋给折线图的数据源就可易得到效果了~~



  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值