一  简介

ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

二 案例

这里我们以图书信息表为例,数据库用mysql5.5

-- 简单图书管理系统DROP DATABASE IF EXISTS bookdb ;
CREATE DATABASE bookdb  CHARACTER SET utf8;USE bookdb;DROP TABLE IF EXISTS users;
-- 建立用户表 用于登录
CREATE TABLE users
(userId INT PRIMARY KEY AUTO_INCREMENT,userName VARCHAR(20) NOT NULL,PASSWORD VARCHAR(20) NOT NULL,email varchar(20),priv varchar(10)
)AUTO_INCREMENT=100;INSERT INTO users VALUES(NULL,'jack','123','jack@qq.com','管理员');
INSERT INTO users VALUES(NULL,'麻子','123''mazi@qq.com','普通用户');
INSERT INTO users VALUES(NULL,'mike','123''mike@qq.com','普通用户');
DROP TABLE IF EXISTS BookType;-- 建立图书类别表
CREATE TABLE BookType
(typeId INT PRIMARY KEY,typeName VARCHAR(20) NOT NULL
)
;
INSERT INTO BookType VALUES(1,'计算机类');
INSERT INTO BookType VALUES(2,'工具辅助类');
INSERT INTO BookType VALUES(3,'言情小说类');
INSERT INTO BookType VALUES(4,'儿童教育类');
DROP TABLE IF EXISTS Books;-- 建立图书表CREATE TABLE Books
(bookId INT PRIMARY KEY AUTO_INCREMENT,bookName VARCHAR(20) NOT NULL,number INT,price FLOAT,typeId INT ,FOREIGN KEY(typeId) REFERENCES BookType(typeId)
)AUTO_INCREMENT=100;
INSERT INTO Books VALUES(NULL,'Java面向对象',25,30.5,1);
INSERT INTO Books VALUES(NULL,'c#语言程序设计',20,25.5,1);
INSERT INTO Books VALUES(NULL,'html网页设计',40,16.5,1);
INSERT INTO Books VALUES(NULL,'DreamvearCS使用教程',20,20.5,2);
INSERT INTO Books VALUES(NULL,'myeclipse8.6使用教程',40,26.5,2);
INSERT INTO Books VALUES(NULL,'都市圆舞曲',50,27.5,3);
INSERT INTO Books VALUES(NULL,'玉观音',24,32.5,3);
INSERT INTO Books VALUES(NULL,'简爱',55,31.5,3);
INSERT INTO Books VALUES(NULL,'方与圆',60,22.5,4);
INSERT INTO Books VALUES(NULL,'穷爸爸富爸爸',60,33.5,4);

------------------------------------------------------------------------

此案例我们生成三个统计图表,一个柱状图用来显示每种图书价格的平均价;另一个柱状图用来显示每种图书的价格的最大值,最小值,平均值;用一个饼图来显示每种图书的库存总数。

对应的统计sql如下:

SELECT t.typeName,sum(number) as sumber,MIN(price) AS miprice,MAX(price) AS mxprice,AVG(price) AS avprice
FROM  books b INNER JOIN bookType t
ON b.typeId=t.typeId
GROUP BY t.typeName;

结果如下

最终的结果如下所示:

接下来,我们来查看关键代码:

实体类

=========================BookFunEntity.java====================

package com.accp.entitys;import java.io.Serializable;public class BookFunEntity implements Serializable{private static final long serialVersionUID = -2685579309299885545L;private String typeName;    //类型名称private int sumber;          //总数private double miprice;     //最低价private double mxprice;     //最高价private double avprice;    //平均价public BookFunEntity() {}//省略getter,setter
}

Dao层代码:

====================BookDaoImpl.java===========================

package com.accp.dao;import java.sql.*;
import java.util.*;import com.accp.entitys.BookFunEntity;public class BookDaoImpl implements IBookDao{//分组聚合查询public List<BookFunEntity> funQuery() {List<BookFunEntity> bookList=null; String sqlStr="SELECT t.typeName,sum(number) as sumber,MIN(price) AS miprice,"+" MAX(price) AS mxprice,AVG(price) AS avprice"+" FROM  books b INNER JOIN bookType t"+" ON b.typeId=t.typeId"+" GROUP BY t.typeName";PreparedStatement psmt=null;ResultSet rs=null;Connection conn=BaseDao.getConn();try {psmt=conn.prepareStatement(sqlStr);rs=psmt.executeQuery();bookList=new ArrayList<BookFunEntity>();BookFunEntity book=null;while(rs.next()){book=new BookFunEntity();book.setSumber(rs.getInt("sumber"));book.setAvprice(rs.getDouble("avprice"));book.setMiprice(rs.getDouble("miprice"));book.setMxprice(rs.getDouble("mxprice"));book.setTypeName(rs.getString("typeName"));bookList.add(book);}} catch (SQLException e) {e.printStackTrace();}finally{BaseDao.closeConn(rs, psmt, conn);}return bookList;}
}

Serevlet代码:

===========================ShowEChartsServlet.java=============

package com.accp.servlets;import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.accp.dao.BookDaoImpl;
import com.accp.dao.IBookDao;
import com.accp.entitys.BookFunEntity;public class ShowEChartsServlet extends HttpServlet {private static final long serialVersionUID = 519071079942744781L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request,response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String showJsp=request.getParameter("show");IBookDao bookDao=new BookDaoImpl();List<BookFunEntity> bookList=bookDao.funQuery();for(BookFunEntity book : bookList){System.out.println(book.getTypeName()+","+book.getAvprice());}request.setAttribute("bookList", bookList);if(showJsp==null || showJsp.equals("")){showJsp="index";}showJsp=showJsp+".jsp";request.getRequestDispatcher(showJsp).forward(request, response);}
}

首页index.jsp

======================index.jsp=========================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">  <script src="js/jquery.min.js"></script>
<script src="js/echarts.common.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){$("#main1").hide();$("#main2").hide();$("#main3").hide();var xData=[];var minData=[];var maxData=[];var avgData=[];var pieData=[];//初始化数据<c:forEach items="${bookList}" var="book">xData.push("${book.typeName}");minData.push(${book.miprice}.toFixed(2));maxData.push(${book.mxprice}.toFixed(2));avgData.push(${book.avprice}.toFixed(2));//注意这里添加的是一个json对象pieData.push({name:"${book.typeName}",value:${book.sumber}});</c:forEach>//定义echarts实例对象var myChart1;var myChart2;var myChart3;//显示简单柱状图$("[name=bar1]").click(function(e){$("#main1").hide();$("#main2").hide();$("#main3").hide();$("#main1").show();if(myChart1!=null){myChart1.dispose();//销毁实例后可以再次在该容器上创建 ECharts实例}//创建一个 ECharts 实例,但不能在单个容器上初始化多个 ECharts 实例myChart1 = echarts.init(document.getElementById('main1'));// 指定图表的配置项和数据var optionBar1 = {title: {text: 'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},tooltip: {show:true,trigger:'item'},legend: {data:['平均值'],show:true},xAxis: {position:'bottom',data: xData},yAxis: {show:true,position:'left'  },series: [{name: '平均值',type: 'bar',data: avgData}]};myChart1.setOption(optionBar1,true);});//显示复杂柱状图$("[name=bar2]").click(function(e){$("#main1").hide();$("#main2").hide();$("#main3").hide();$("#main2").show();if(myChart2!=null){myChart2.dispose();//销毁实例,否则无法再次显示图表}myChart2 = echarts.init(document.getElementById('main2'));var optionBar2 = {title: {text:'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},tooltip: {show:true,trigger:'item'},legend: {data:['最大值','最小值','平均值'],show:true},xAxis: {position:'bottom',data: xData},yAxis: {show:true,position:'left'  },series: [{name: '最大值',type: 'bar',data: maxData},{name: '最小值',type: 'bar',data: minData},{name: '平均值',type: 'bar',data: avgData}]};myChart2.setOption(optionBar2,true);});//显示饼图$("[name=pie]").click(function(e){$("#main1").hide();$("#main2").hide();$("#main3").hide();$("#main3").show();if(myChart3!=null){myChart3.dispose();//销毁实例,否则无法再次显示图表}myChart3 = echarts.init(document.getElementById('main3'));var optionPie = {title : {text: '各种图书的总数',subtext: '这是副标题',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: xData},series : [{name: '总数',type: 'pie',radius : '55%'  ,center: ['50%', '60%'],data:pieData}]}; myChart3.setOption(optionPie,true);});});
</script>
</head><body>
<h2><input type="button" value="简单柱状图" name="bar1">&nbsp;<input type="button" value="复杂柱状图" name="bar2">&nbsp;<input type="button" value="饼图" name="pie">&nbsp;
</h2>
<h2>在单独的页面展示<br/>
<a href="ShowCharts.php?show=bar1" target="_blank">简单柱状图</a>&nbsp;
<a href="ShowCharts.php?show=bar2" target="_blank">复杂柱状图</a>&nbsp;
<a href="ShowCharts.php?show=pie" target="_blank">饼图</a>&nbsp;
</h2>
<!-- 为 ECharts 准备三个具备大小(宽高)的显示区域 -->
<div id="main1" style="width: 600px;height:400px; border:2px solid red;" >
</div>
<div id="main2" style="width: 600px;height:400px; border:2px solid red;" >
</div>
<div id="main3" style="width: 600px;height:400px; border:2px solid red;" >
</div>
</body>
</html>

====================================================

单独显示简单柱状图的页面bar1.jsp

==========================bar1.jsp===============

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例-柱状图</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
<script src="js/echarts.common.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" >
</div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var xData=[];var serData=[];<c:forEach items="${bookList}" var="book">xData.push("${book.typeName}");serData.push(${book.avprice}.toFixed(2));</c:forEach>// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例',link:'http://www.baidu.com'},tooltip: {show:true,trigger:'item'},legend: {data:['平均值'],show:true},xAxis: {position:'bottom',data: xData},yAxis: {show:true,position:'left'  },series: [{name: '平均值',type: 'bar',data: serData}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

单独显示复杂柱状图的页面bar2.jsp

===========================bar2.jsp====================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例-柱状图</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
<script src="js/echarts.common.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" ></div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var xData=[];var minData=[];var maxData=[];var avgData=[];<c:forEach items="${bookList}" var="book">xData.push("${book.typeName}");minData.push(${book.miprice}.toFixed(2));maxData.push(${book.mxprice}.toFixed(2));avgData.push(${book.avprice}.toFixed(2));</c:forEach>// 指定图表的配置项和数据var option = {title: {text:'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},tooltip: {show:true,trigger:'item'},legend: {data:['最大值','最小值','平均值'],show:true},xAxis: {position:'bottom',data: xData},yAxis: {show:true,position:'left'  },series: [{name: '最大值',type: 'bar',data: maxData},{name: '最小值',type: 'bar',data: minData},{name: '平均值',type: 'bar',data: avgData}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

单独显示复杂柱状图的页面pie.jsp

=========================== pie.jsp=======================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例-饼图</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
<script src="js/echarts.common.min.js"></script>   </head><body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;"></div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var items=[];var pieData=[];<c:forEach items="${bookList}" var="book">items.push("${book.typeName}");//注意这里添加的是一个json对象pieData.push({name:"${book.typeName}",value:${book.sumber}});</c:forEach>// 指定图表的配置项和数据var option = {title : {text: '各种图书的数量',subtext: '这是副标题',x:'center'},tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: items},series : [{name: '数量',type: 'pie',radius : '55%',  center: ['50%', '60%'],data:pieData}]}; //end option// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

=======================================================

没有和数据库结合的演示页面,里面有每个参数的详细注释

简单柱状图:Bar1Nosql.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例-柱状图</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
<script src="js/echarts.common.min.js"></script>
</head><body>
<!-- 为 ECharts 准备一个具备大小(宽高)的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" ></div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},tooltip: {show:true,trigger:'item'  //axis-坐标轴触发  item--数据条目触发},legend: {data:['销量'],show:true},xAxis: {position:'bottom',  //topdata: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {show:true,position:'left'   //right},series: [{name: '销量',  //要和legend中的data对应起来type: 'bar',  //pie-饼图,bar-柱状图,line-折线图data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

================================================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例-柱状图</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
<script src="js/echarts.common.min.js"></script>
</head><body>
<!-- 为 ECharts 准备一个具备大小(宽高)的显示区域 -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;" ></div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例',link:'http://echarts.baidu.com/index.html'},tooltip: {show:true,trigger:'item'  //axis-坐标轴触发  item--数据条目触发},legend: {data:['销量','库存'],show:true},xAxis: {position:'bottom',  //topdata: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {show:true,position:'left'   //left},series: [{name: '销量',  //要和legend中的data对应起来type: 'bar',data: [5, 20, 36, 10, 10, 20]},{name: '库存',type: 'bar',   //pie-饼图,bar-柱状图,line-折线图data: [5, 15, 8, 20, 33, 43]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

=================================================

饼图:pie.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="${bathPath }"><title>echarts案例-饼图</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">
<script src="js/echarts.common.min.js"></script>   </head><body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px; border:2px solid red;"></div>
<script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title : {text: '某站点用户访问来源',    //标题subtext: '纯属虚构',        //父标题x:'center'},tooltip : {trigger: 'item',//折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)//饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: 'vertical',left: 'left',data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series : [{name: '访问来源',type: 'pie',//饼图的半径,数组的第一项是内半径,第二项是外半径(相对于容器)。radius : '55%',  //[0, '75%'] //饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。//支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度。center: ['50%', '60%'],//[400, 300]data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>
</body>
</html>

用echarts结合jsp,servlet生成统计图表相关推荐

  1. JSP+servlet生成验证码并验证

    生成验证码的基本过程是: <%@ page language="java" import="java.util.*" pageEncoding=" ...

  2. JSP/Servlet程序设计(入门书籍)

    Web开发技术 1. 静态开发技术: (1)HTML HTML是网站开发最基本的语言,是WEB的核心.所有后续的WEB开发技术都以HTML为基础. (2)CSS CSS(Cascading Style ...

  3. Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)

    源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...

  4. JSP/Servlet 工作原理

    Servlet Servlet Servlet 没有 main 方法,不能够独立的运行,它的运行需要容器的支持,Tomcat 是最常用的 JSP/Servlet 容器. Servlet 运行在 Ser ...

  5. JSP/Servlet基础语法

    相关学习资料 http://my.oschina.net/chape/blog/170247 http://docs.oracle.com/cd/E13222_01/wls/docs81/webapp ...

  6. jsp mysql视频_手把手教你做jsp servlet mysql实现的图书管理系统附带视频开发教程和完整源码...

    上一个教程我们做的是对数据库框架底层原理的讲解,然后教大家做了一个自己的数据库框架,这次我们做的这个图书管理系统就是用我们上个教程自己写的数据库框架,整个项目做完框架运行的很稳定,没有出现任何问题.如 ...

  7. jsp servlet示例_Servlet和JSP中的文件上传示例

    jsp servlet示例 使用Servlet和JSP将文件上传到服务器是Java Web应用程序中的常见任务. 在对Servlet或JSP进行编码以处理文件上传请求之前,您需要了解一点有关HTML和 ...

  8. jsp中生成的验证码和存在session里面的验证码不一致的处理

    今天在调试项目的时候发现,在提交表单的时候的验证码有问题,问题是这样的:就是通过debug模式查看得知:jsp页面生成的验证码和表单输入的页面输入的一样,但是到后台执行的时候,你会发现他们是不一样的, ...

  9. c语言 上传图片至服务器,JSP+Servlet实现文件上传到服务器功能

    本文实例为大家分享了JSP+Servlet实现文件上传到服务器功能的具体代码,供大家参考,具体内容如下 项目目录结构大致如下: 正如我在上图红线画的三个东西:Dao.service.servlet 这 ...

最新文章

  1. 16项不可抗拒的云创新
  2. html table相关标签和属性
  3. boost::hana::prefix用法的测试程序
  4. ThinkPHP5.0中报错could not find driver的解决方式
  5. python 阿狸的进阶之路(4)
  6. python对象属性在引用时前面需要加()_python基础-面向对象进阶
  7. C++ Qt学习笔记(4)绘图
  8. python循环结构代码_Python --- 程序的循环结构
  9. java工程如何使用ivew_vue+iview搭建项目
  10. SaltStack 日志管理
  11. 字符串转json(JSON.parse报错)
  12. Jenkins Xcode打包ipa
  13. 重启计算机突然断网,今天电脑总是突然断网,怎么回事
  14. iOS 各种证书/签名详解
  15. 数据库中索引原理及填充因子
  16. 头条学院-新媒体训练营第10期 | 10.23笔记(新媒体:一代人的机遇)
  17. 让网页FLASH变成黑白的css语句
  18. bmob php支付,个人开发者也能盈利!Bmob支付SDK使用实例
  19. 入院前、入产房前、分娩前物品准备
  20. java开发工程师转大数据,一招彻底弄懂!

热门文章

  1. js阻止浏览器返回上一页
  2. html几秒自动跳转,HTML页面3秒后自动跳转的三种常见方法
  3. IIS中实现HTTPS的自动跳转
  4. 【Kevin Learn 小程序】-->camera
  5. oracle外键约束的总结
  6. 数字理想助力500强央企展示世界一流企业风范
  7. Vigenere密码(维吉尼亚密码)c语言实现
  8. OpenCV-Python -- Histograms-2:Histogram Equalization
  9. C++ CreateThread的使用
  10. openstage转