零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（四）
上次我们的爬虫已经完成了 接下来呢 就是我们的报表。
我们用的是网页形式来展示，所以呢我们需要搭建一个本地的服务器。我们使用的是tomcat
1，下载与安装tomacat
http://to进入官网mcat.apache.org/
下载下来解压即可
接下来呢就是配置环境变量
1，新建环境变量 CATALINA_HOME 变量值为解压目录的路径..
2，将解压目录的bin 添加到path
测试启动打开 bin目录有个 将此文件 拖到cmd命令行中 若出现以下
然后打开浏览器输入以下地址localhost：8080 出现以下界面 则代表成功了
2，接下来我们就要把服务器和eclipse 集成
菜单栏的 windows 然后preferences 然后搜索server右边 add 找到解压目录
这样呢我们就把 tomcat 集成到我们的eclipse 中了
3，servlet +jsp
接下来创建我们的web项目
创建一个动态的web项目
输入项目名即可，然后点击完成
接下来呢我们在webcontent下创建一个新的文件夹 叫assert 来放我们的js文件
然后在https://jquery.com/download/ 去下载 我们这里下载的是3.2.1版本
WEB-INF 目录下 创建一个xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>zhenai</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
设置默认的主页
然后在这个文件夹下 创建我们的主页 ，新建一个jsp文件 我叫index
然后我们在如下的lib导入相应的jar包，这些jar包可以找到 为了方便大家，我就放在百度网盘上 大家下载下来，copy一下即可
https://pan.baidu.com/s/1fWCVt2RajvgqrSYtrIxDsg
index.jsp 如下
然后我们去下载echarts的js文件
这个是 百度公司的 下载即可
然后将js文件放到assert文件夹下
http://echarts.baidu.com/
上面有实例 各种图表的使用示例 源码
类似于这样 点开任意一个图表都有示例 及源码
我们在webcontent 下 新建一个 jsp文件夹 来存放我们的 jsp文件
然后我们在jsp文件夹下 新创建一个sex.jsp文件 来制作性别分析
我们导入我们的js文件 然后插入超链接 来返回我们的主页
然后我们来hu我们获取据库数据 来为图标提供数据
首先开发一个servlet查询数据库，获取男女人数：
刚开始，可以先不操作数据库。
先模拟数据：
package cn.hyxy.zhenai;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/sex") // http://localhos/zhenaiweb/sex
public class SexServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Random r = new Random();
int male = r.nextInt(1000);
int female = r.nextInt(1000);
resp.getWriter().print("male:"+male+",female:"+female);
}
}
测试访问：
2:使用ajax发送请求，获取数据
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../resources/jquery-3.2.1.min.js"></script>
</head>
<body>
<p>性别比例</p>
<h4>来自珍爱网的数据</h4>
<button id="btnLoad">加载</button>
<div id="data"></div>
</body>
<script type="text/javascript">
//脚本会自动的执行获取数据
$("#btnLoad").click(function() {
$.get("../sex").done(function(ttt) {
$("#data").text(ttt);
});
});
</script>
</html>
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<c:url value='/assert/jquery-3.2.1.min.js'/>"></script>
</head>
<body>
<p>性别比例</p>
<h4>来自珍爱网的数据</h4>
<button id="btnLoad">加载</button>
<div id="data"></div>
</body>
<script type="text/javascript">
//脚本会自动的执行获取数据
$("#btnLoad").click(function() {
//参数的名称是配置的@WebServlet("/sex")里面的/sex
$.get("<c:url value='/sex'/>").done(function(ttt) {
$("#data").text(ttt);
});
});
</script>
</html>
配置数据链接
开发后台
package cn.lyh.zhenai.dao;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Properties;
import javax.sql.DataSource;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;
import org.apache.commons.dbutils.handlers.MapHandler;
import org.apache.commons.dbutils.handlers.MapListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import cn.lyh.zhenai.utils.DSUtils;
public class ZhenaiDao {
private DataSource ds;
private ZhenaiDao() {
ds = DSUtils.getDataSource();
}
public static final ZhenaiDao DAO;
static {
DAO = new ZhenaiDao();
}
public static ZhenaiDao getDao() {
return DAO;
}
// 查询
public List<Map<String, Object>> querySex() {
QueryRunner run = new QueryRunner(ds);
String sql = "select sex as name,count(sex) as value from dogs group by sex";
List<Map<String, Object>> list = new ArrayList<>();
try {
list = run.query(sql, new MapListHandler());
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
}
package cn.hyxy.zhenai.service;
import java.util.List;
import java.util.Map;
import cn.hyxy.zhenai.dao.ZhenaiDao;
public class ZhenaiService {
private ZhenaiDao dao;
private ZhenaiService() {
dao = ZhenaiDao.getDao();
}
private static ZhenaiService SERVICE;
static {
SERVICE=new ZhenaiService();
}
public static ZhenaiService getService() {
return SERVICE;
}
//
public List<Map<String, Object>> querySex(){
return dao.querySex();
}
}
package cn.hyxy.zhenai;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSONArray;
import cn.hyxy.zhenai.service.ZhenaiService;
@WebServlet("/sex") // http://localhos/zhenaiweb/sex
public class SexServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Random r = new Random();
int male = r.nextInt(1000);
int female = r.nextInt(1000);
resp.setContentType("text/plain;charset=UTF-8");
//获取数据
ZhenaiService ss = ZhenaiService.getService();
List<Map<String, Object>> list = ss.querySex();
//
String json = JSONArray.toJSONString(list);
resp.getWriter().print(json);
}
}
这样呢我们的 男女性别 分析 就做完了
效果如图所示
接下来呢我们以同样的方法来分析 学历 不过这次我们用的是柱状图、
先看百度示例
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
模拟上面的数据
//1:获取元素
var myChart2 = echarts.init(document.getElementById('data2'));
//2：声明数据
var option2 = {
xAxis : {
type : 'category',
data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
},
yAxis : {
type : 'value'
},
series : [ {
data : [ 120, 200, 150, 80, 70, 110, 130 ],
type : 'bar'
} ]
};
//设置值
myChart2.setOption(option2);
出现以下的数据：
--添加更多的的数据：
//1:获取元素
var myChart2 = echarts.init(document.getElementById('data2'));
//2：声明数据
var option2 = {
legend : {
data : [ '男', '女' ]
},
xAxis : {
type : 'category',
data : [ '高中', '专科', '本科' ]
},
yAxis : {
type : 'value'
},
series : [ {
name : '男',
data : [ 120, 200, 150 ],
label : {
show : true,
position:'inside',
formatter:function(param){
return param.value+"人";
}
},
type : 'bar'
}, {
name : '女',
data : [ 70, 110, 130 ],
label : {
show : true
},
type : 'bar'
} ]
};
//设置值
myChart2.setOption(option2);
从数据库中获取数据
1：确定有多少学历
查询每一种学历，男的，女的各多少人
然后根据要求组织数据
[ {
name : '男',
data : [ 120, 200, 150 ],
}, {
name : '女',
data : [ 70, 110, 130 ],
} ]
提供模拟数据
package cn.lyh.zhenai;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/sexgrade")
public class SexGradeServlet extends HttpServlet {
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int a = new Random().nextInt(100);
String json = "[{'name':'男','data':["+a+",210,150]},{'name':'女','data':[ 80, 110, 130 ]}]";
//输出这个数据
resp.setContentType("text/plain;charset=UTF-8");
resp.getWriter().print(json);
}
}
delete frome doges where grade !='中专' and grade !='大专' and grade !='大学本科' and grade !='高中及以下' and grade !='硕士' and grade !='博士'
获取真实的数据
public Map<String, Object> querySexGrade() {
// 声明返回的数据 -DAO - > DataAccess Object
Map<String, Object> map = new HashMap<>();
try {
List<String> list = new ArrayList<>();
// 声明SQL语句
String sql = "SELECT DISTINCT grade FROM dogs WHERE grade !='--'";
QueryRunner run = new QueryRunner(ds);
list = run.query(sql, new ColumnListHandler<String>());
map.put("legend", list);
// 声明数据
List<Map<String, Object>> datas = new ArrayList<>();
// 声明男
// 声明男生的数量，和女生的数量的集合
List<Integer> maleDatas = new ArrayList<>();
List<Integer> femaleDatas = new ArrayList<>();
// 查询男，各种学历
for (String grade : list) {
String sqlA = "SELECT COUNT(1) FROM dogs WHERE grade=? AND sex='女'";
String sqlB = "SELECT COUNT(1) FROM dogs WHERE grade=? AND sex='男'";
int cnt = run.query(sqlA, new ScalarHandler<Long>(), grade).intValue();
femaleDatas.add(cnt);
cnt = run.query(sqlB, new ScalarHandler<Long>(), grade).intValue();
maleDatas.add(cnt);
}
Map<String, Object> male = new HashMap<>();
male.put("name", "男");
male.put("data", maleDatas);
datas.add(male);
Map<String, Object> female = new HashMap<>();
female.put("name", "女");
female.put("data", femaleDatas);
datas.add(female);
//
map.put("datas", datas);
} catch (Exception e) {
throw new RuntimeException(e);
}
return map;
}
然后我们就做出了如图所示的报表
大家可以照猫画虎，分析住房，年龄，等等，若遇到什么问题 欢迎在评论区评论，我会在第一时间帮助你哦，明天我将会为大家分享地图报表的制作哦！
零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（四）相关推荐
- 零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（五）
全国的单身人士的分布 进行报表分析 首先要导入地图的js包 我放到了 百度网盘上 大家下载下来之后 解压放到assert文件夹下 即可 https://pan.baidu.com/s/1TPB7pze ...
- 零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（二）
如期而至,继续我们的项目,上次我们配置好了我们的环境 今天呢,我们开始创建我们的项目. 首先 ,启动Eclipse dian点file 创建yi'g一个新的maven项目 注意创建的时候,要钩选这个 ...
- 零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（三）
继续我们的项目, 上次之后我们基本上完成了数据的获取(即爬虫),接下来呢就是如何去保存这些数据,有两种方式,一种呢是以文本形式保存到本地,第二种是就是保存到数据库,而我们呢选择后者. Mysql 1, ...
- 零基础完成珍爱网项目 Java+MySQL+echarts （ZhenaiSpider+ZhenaiWeb）（一）
这个项目呢 主要分为两个部分 爬虫(Spider)和Web两方面(web主要是进行数据分析做出报表是数据更可观) 一. 进行jdk安装及环境变量的配置 由于是基于java的项目 所以先进行jdk的相 ...
- 零基础的人怎么学习Java
编程语言Java,已经21岁了.从1995年诞生以来,就一直活跃于企业中,名企应用天猫,百度,知乎......都是Java语言编写,就连现在使用广泛的XMind也是Java编写的.Java应用的广泛已 ...
- 零基础如何选择适合的Java培训课程
很多人都想要学习java技术,但是害怕自己是零基础学不好,所以想要找专业的java培训机构进行学习,但是零基础如何选择适合的Java培训课程成了他们比较头疼的事情,下面小编就为大家做下详细的介绍. ...
- 零基础 Amazon Web Services (AWS) 入门教程图文版（四）
自上一篇之后,5天过去了,这篇文章总算是挤出来了... 其实看不看无所谓啦,都说了WDCP非常适合小白,随便折腾.要是折腾的时候遇到什么问题,欢迎留言探讨~ 五.新建站点 登录WDCP后台,首次登录会 ...
- 2023年最新最全uniCloud入门学习，零基础入门到实战项目 uni-admin打造uniapp网页后端 微信支付宝抖音小程序后端 unicloud数据后台快速打造uniapp小程序项目
今天开始带着大家一起零基础学习uniCloud,在下面的课程中我们就简称uniCloud为cloud吧.我这里从零基础开始教大家,后面可以带大家简单的做一个实战项目.所以不用担心自己没有基础,跟着石头 ...
- 从零基础到拿到网易Java实习offer，我做对了哪些事
点击上方蓝字可以订阅哦! 作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右 ...
最新文章
- JavaScript- BOM, DOM
- 封条格式用word怎么打_标书密封条格式全word.doc
- 删过几十亿个账号，Facebook的人工智能是怎么培养出来的？
- 【转】关于PHP的header(P3P: CP=CURa……)
- timesten mysql_timesten:TT0802错误
- lcx端口转发及远程终端问题
- html ul 的类别,CSS 类表样式(ul)
- 武汉大学计算机学院2018夏令营,武汉大学
- 谷歌浏览器报错“您的连接不是私密连接攻击者可能会试图从 xxx 窃取您的信息（例如：密码、通讯内容或信用卡信息）“
- Nordic 52832工程报错undefined reference to `__start_pwr_mgmt_data'解决办法
- 解决uniapp从首页列表进入详情页，再返回首页时滚动条在顶部的问题
- android自定义通知栏_推送图片
- 拔河比赛matlab编程,拔河比赛.doc
- 按字寻址和按字节寻址
- Pytorch Tutorial 学习笔记（六）模型部署
- python递推公式_线性代数求解递推形式数列的通项公式
- 4K、高清、无水印视频素材库
- css hack *html,css hack 大全 各个浏览器的css
- Spring Boot 打包一站式解决方案
- winfomlabel 从右边_炒菜时，用左边的燃气灶还是右边的燃气灶？燃气师傅提醒，别弄错...