使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示
使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示
写在前面:
有的小伙伴，会吐槽啦，你这个标题有点长的啊。哈哈 ，好像是的！不过，这个也是本次案例中使用到的关键技术。如果，你正愁不会的数据可视化，那么我接下来，我会带你一步一步的实现这个数据可视化的功能。
效果图：
开发工具：我们选择的是IDEA,你还得准备一个豆瓣top250的数据源，我这里用python爬虫抓取统计了豆瓣top250电影各个国家电影数量。如何你担心，没有数据。先不用担心，我会提供的。
小建议：在学习之前，你可以先把项目的源代码，下载下来，自己可以先跑一边，看一下，整体的效果。然后再接着看后面的步骤，这样会比较好一些。这里我把源代码放在了码云上，地址：https://gitee.com/liuge36/Douban
可能有的小伙伴习惯用Github,这里：https://github.com/liuge36/Douban 码字不易，不喜勿喷
正式开始：
分析：
要如何开始呢？想想，我们现在有mysql里面的数据，然后，只是需要把数据做一个展示，
1.在IDEA中新建一个项目
完整好包结构，规范的包结构是有利于我们后期维护修改代码的
先简单说一下，我们的开发思路，
我们常规操作是在entity中新建一个doubanc的实体类用于封装我们从数据库里面读出来的数据
接着，在dao下去写一个类doubandao用于从数据库中获取到数据，这里传回一个doubanc的实体类对象的集合
然后，使用servlet来调用dao的数据，转发到jsp页面，
这样我们也就实现了显示与代码分离的形式，也是不使用框架技术的常用操作。在这里，我们就依据这个思路开始开发..
2.new一个实体类Doubanc
参照数据库里面表的字段：
，这里，也就只有两个字段。
因为比较简单，直接贴上代码：
package com.csylh.entity;
public class Doubanc {
private String country;
private int nums;
public String getCountry() {
return country;
}
public void setCountry(String country) {
this.country = country;
}
public int getNums() {
return nums;
}
public void setNums(int nums) {
this.nums = nums;
}
public Doubanc(String country, int nums) {
super();
this.country = country;
this.nums = nums;
}
public Doubanc() {
super();
}
}
3.new一个DoubanDao类
dao类的作用就是与完成与数据库的交互工作，比如，从数据库按照按照我们的需求把数据读取出来，这里，我们直接贴上我的代码，在代码中，每一步我都有详细的解释，这里就使用到了JDBC的技术
package com.csylh.dao;
import com.csylh.entity.Doubanc;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
public class DoubanDao {
public List<Doubanc> getDoubancList(){
List<Doubanc> doubancList=new ArrayList<Doubanc>();
Connection connection = null;
Statement statement = null;
ResultSet resultSet=null;
try {
//1.加载驱动
Class.forName("com.mysql.jdbc.Driver");
//2.驱动管理器获取数据库连接
connection =DriverManager.getConnection("jdbc:mysql://localhost:3306/article","root","123456");
//3.获取statement,执行sql
statement = connection.createStatement();
//4.执行sql,返回结果集
resultSet= statement.executeQuery("select country,nums from doubanc");
//循环解析结果集
while (resultSet.next()){
//定义变量来收取我们的结果集
String country=resultSet.getString("country");
int nums=resultSet.getInt("nums");
//把这些数据封装到doubanc的对象里面去，
Doubanc doubanc=new Doubanc(country,nums);
//把上面的对象添加到集合里面去
doubancList.add(doubanc);
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
} finally {
try {
if(resultSet!=null){
resultSet.close();
}
if(statement!=null){
statement.close();
}
if(connection!=null){
connection.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
#不要忘记关闭资源
return doubancList;
}
}
4.编写我们的servlet代码
servlet一般用来做数据的调用和处理的。
我们新建一个servlet之后，第一步就是重新我们的init()方法，init()方法在整个servlet的生命周期内只执行一次，所以我们就可以把那些只是需要一次性的操作就ok的，放在这里，
为了方便，我们直接在doget里面调用dopost方法，这也做到了不复写代码这一点，也是一个通用的写法
接下来，就是在dopost中写我们的调用代码了：
就这么简单的几行代码，我们就是实现了从数据库里面把数据读出来，在页面显示为json格式的数据了
接着，就可以在jsp页面调用这个DoubanServlet来获取我们的数据了
修改我们的index.jsp页面，当然，你新建一个也是可以的，我这里就直接修改了，
因为我们是要数据图形化展示，则需要在页面中引入echarts的js文件，如果，你以前根本没有接触过echarts,也是，没有关系的，你可以先到官网看一下那个5分钟上手的教程，地址我也先贴在这里吧：http://echarts.baidu.com/tutorial.html#5 其实，使用也是很简单的
参照官网的说法，你可以看一下，我这里的代码：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/";
%>
<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<script src="echarts.min.js"></script>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body onload="loadData()">
<div id="content" style="margin:40px auto;">
<div id="myBarDiv" style="height:300px;width:1550px;display:inline-block"></div>
<div id="myPieDiv" style="height:300px;width:1550px;display:inline-block"></div>
</div>
<script type="text/javascript">
function loadData(option){
$.ajax({
type:"post", //请求方式
async:false, //采用同步传输
url:'DoubanServlet', //从刚才的servlet中把数据读取出来
data:{},
dataType:'json',
success:function(result){
if(result){
option.xAxis[0].data=[];
for(var i=0;i<result.length;i++){
option.xAxis[0].data.push(result[i].country); //设置横坐标的数据
}
//初始化series[0]的data
option.series[0].data=[];
for(var i=0;i<result.length;i++){
option.series[0].data.push(result[i].nums); //设置纵坐标的数据
}
}
},
error:function(errorMsg){
alert("数据加载失败");
}
});
}
//初始化Echarts
var myChart=echarts.init(document.getElementById('myBarDiv'));
var option={
title:{
text:'柱状图'
},
tooltip:{
show:true
},
legend:{
data:['数量']
},
xAxis:[{
type:'category',
axisTick:{
alignWithLabel: true,//竖线对准文字
interval:0, //横坐标的竖线的间隔
},
axisLabel:{
interval:0
} //横坐标显示全部信息
}],
yAxis:[{
type:'value'
}],
series:[{
name:'数量',
type:'bar',
}]
};
loadData(option); //加载数据到option
myChart.setOption(option); //设置option（画图）
</script>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('myPieDiv'));
function loadData(option){
$.ajax({
type:"post",
async:false,
url:'DoubanServlet',
data:{},
dataType:'json',
success:function(result){
if(result){
var country=[];
var number=[];
for(var i=0;i<result.length;i++){
country[i]=result[i].country;
var obj =new Object();
obj.name=result[i].country;
obj.value=result[i].nums;
number[i]=obj;
}
var option={
title:{
text:'饼状图',
x:'center'
},
tooltip:{
show:true,
trigger:'item'
},
legend:{
data:country,
left:'left',
orient:'vertical'
},
series:[{
name:'数量',
type:'pie',
radius:'60%',
data:number
}]
};
option.legend.data=country;
myChart.setOption(option,true);
myChart.setSeries(seriesdata);
}
},
error:function(errorMsg){
alert("数据加载失败");
}
});
}
</script>
</body>
</html>
接下来，最关键的就是把添加架包了，其实之前，我们写servlet的时候，我们就必须的引入部分架包的，这里，我们的再说明一下：
在WEB-INF目录在新建一个lib目录用于存放架包，添加作为Library root，就可以使用了
接下来，就可以添加tomcat服务器，启动我们的项目了
启动之后，就是可以访问的了，idea会自动跳转的
效果图：
好了，到这里，我们的操作就基本完成了。实现了从数据库把数据图像化展示到页面的功能，觉得感兴趣的小伙伴，不妨一试哟。
使用JSP+Servlet+Jdbc+Echatrs实现对豆瓣电影Top250的展示的更多相关文章
- MVC-1(javabean+jsp+servlet+jdbc)
这是一篇最初版本的mvc设计模式的demo.路要一步一步走,弄明白这其中的逻辑,对后面掌握ssh,ssm等框架大有裨益. 计算机系的同学们也要为毕设做准备了,希望可以帮你们迈出自己做毕设的第一步(微笑 ...
- [项目分享]JSP+Servlet+JDBC实现的云端汽修后台管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://gitee.com/chenlinSir/CloudDemo-servlet 难度等级:简单 基于JSP+Servlet+Jdbc的云端 ...
- [项目分享]JSP+Servlet+JDBC实现的学生信息管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://gitee.com/liu_xu111/JavaWeb01 这次分享一个学生管理系统,我感觉这是程序员在大学时期的毕设和课程设计选择最多 ...
- Maven+JSP+Servlet+JDBC+Mysql实现的dbExper宾馆管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://github.com/mafulong/databaseExper-hotelMaster 这次分享的也是毕设或课程设计选择一样很多的宾 ...
- JSP+Servlet+JDBC+Mysql实现的天才会议管理系统
本文存在视频版本,请知悉 项目简介 项目来源于:https://github.com/hegexunmeng/meeting-system 这次分享一个会议管理系统,前端后端几乎没有使用任何框架,适合 ...
- Maven+JSP+Servlet+JDBC+Redis+Mysql实现的黑马旅游网
项目简介 项目来源于:https://gitee.com/haoshunyu/travel 本系统是基于Maven+JSP+Servlet+JdbcTemplate+Redis+Mysql实现的旅游网 ...
- JSP+Servlet+JDBC+C3P0实现的人力资源管理系统
项目简介 项目来源于:https://github.com/ruou/hr 本系统基于JSP+Servlet+C3P0+Mysql.涉及技术少,易于理解,适合JavaWeb初学者学习使用. 难度等级: ...
- JSP+Servlet+JDBC+mysql实现的个人日记本系统
项目简介 项目来源于:https://gitee.com/wishwzp/Diary 本系统基于JSP+Servlet+Mysql 一个基于JSP+Servlet+Jdbc的个人日记本系统.涉及技术少 ...
- JSP+Servlet+JDBC+mysql实现的学生成绩管理系统
项目简介 项目来源于:https://gitee.com/zzdoreen/SSMS 本系统基于JSP+Servlet+Mysql 一个基于JSP+Servlet+Jdbc的学生成绩管理系统.涉及技术 ...
随机推荐
- Node.js安装详细步骤教程(Windows版)
什么是Node.js? 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境: Node.js使用 ...
- MSIL实用指南-生成内部类
生成内部类用TypeBuilder的DefineNestedType方法,得到另一个TypeBuilder.内部类的可访问性都是TypeAttributes的“Nested”开头一些成员.实例代码:y ...
- flutter无线调试与打包
1.WIFI连接设备 设备打开开发者选项 -> 点击WIFI调试 -> 项目目录下输入终端命令: adb connect 设备ip地址:[端口号(一般是5555)] 2.apk打包 ...
- 良许 | 网络检测神器 ss 命令，你可能根本就不会用！
今天我们来介绍一下 Linux ss 命令. ss 是 Socket Statistics 的缩写,用来统计 socket 连接的相关信息,它跟 netstat 差不多,但有着比 netstat 更强 ...
- HDU 1848 Fibonacci again and again SG函数做博弈
传送门 题意: 有三堆石子,双方轮流从某堆石子中去f个石子,直到不能取,问先手是否必胜,其中f为斐波那契数. 思路: 利用SG函数求解即可. /* * @Author: chenkexing * @D ...
- CodeForces 834D The Bakery
The Bakery 题意:将N个数分成K块, 每块的价值为不同数字的个数, 现在求总价值最大. 题解:dp[i][j] 表示 长度为j 且分成 i 块的价值总和. 那么 dp[i][j] = max ...
- CodeForces 416 B Appleman and Tree DP
Appleman and Tree 题解: 定义dp[u][1] 为以u的子树范围内,u这个点已经和某个黑点相连的方案数. dp[u][0] 为在u的子树范围内, u这个点还未和某个黑点相连的方案数. ...
- 计蒜客 ACM训练联盟周赛 第一场 从零开始的神棍之路 暴力dfs
题目描述 ggwdwsbs最近被Zeratul和Kyurem拉入了日本麻将的坑.现在,ggwdwsbs有13张牌,Kyurem又打了一张,加起来有14张牌.ggwdwsbs想拜托你帮他判断一下,这14 ...
- Java微服务（二）：服务消费者与提供者搭建
本文接着上一篇写的<Java微服务(一):dubbo-admin控制台的使用>,上篇文章介绍了docker,zookeeper环境的安装,并参考dubbo官网演示了dubbo-admin控 ...
- HDU 1223 还是畅通工程（最小生成树prim模板）
一个很简单的prim模板,但虽然是模板,但也是最基础的,也要脱离模板熟练打出来 后期会更新kruskal写法 #include<iostream> #include<cstdio&g ...