使用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的展示