Java爬虫项目(四可视化)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA

最新推荐文章于 2022-11-19 13:21:17 发布

置顶

猫化

最新推荐文章于 2022-11-19 13:21:17 发布

阅读量3.5k

点赞数 12

分类专栏：项目经验(后端) 前端编写(推荐) 文章标签： html css3 js java 数据可视化

I from China

本文链接：https://blog.csdn.net/weixin_43701595/article/details/106615199

版权

Echarts可视化

四:使用Echarts可视化-从51job网站爬取的招聘信息

四:使用Echarts可视化-从51job网站爬取的招聘信息

1.效果图(我将公开分享源码,可支持二次开发,中间的数据是获取数据库,并且实现自滚动的)

在这里插入图片描述

2.首先了解一下Echarts

echarts基础页面备份

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>职业仓</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <!-- 引入主题 -->
    <script src="https://www.runoob.com/static/js/wonderland.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 

     
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);      
        </script>
</body>
</html>

Echarts官网,选择你喜欢的样式,直接copy到原文中即可

3.项目结构

在这里插入图片描述

4.项目源码

Bar(Line和Pie的bean类参考Bar按照自己的需求写)

package cn.xyecy.bean;

public class Bar {
   
    private String name; //x轴,名称
    private int num; //y轴,数量
    public String getName() {
   
        return name;
    }
    public void setName(String name) {
   
        this.name = name;
    }
    public int getNum() {
   
        return num;
    }
    public void setNum(int num) {
   
        this.num = num;
    }

}

BarDao

package cn.xyecy.dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import cn.xyecy.bean.Bar;

public class BarDao {
   

    /**
     * @author wen
     *
     * 查询所有数据
     * @return 存放所有数据的线性表
     */
    public ArrayList<Bar> query() {
   
        ArrayList<Bar> barArr = new ArrayList<Bar>();
        try {
   
            //JDBC方式连接MySQL数据库
            Class.forName("com.mysql.jdbc.Driver");
            Connection conn = DriverManager.getConnection(
                    "jdbc:mysql://localhost:3306/job51?characterEncoding=utf8", "root", "123456");
            PreparedStatement stmt = conn.prepareStatement("SELECT * FROM bar");
            ResultSet rs = stmt.executeQuery();
            //将test表中的数据存储到线性表中
            while(rs.next()) {
   
                Bar bar = new Bar();
                bar.setName(rs.getString("name"));
                bar.setNum(rs.getInt("num"));
                barArr.add(bar);
            }
            //关闭连接
            conn.close();
        } catch (SQLException e) {
   
            e.printStackTrace();
        } catch (ClassNotFoundException e) {
   
            e.printStackTrace();
        }
        return barArr;
    }
}

BarService

package cn.xyecy.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.xyecy.bean.Bar;
import cn.xyecy.dao.BarDao;

import net.sf.json.JSONArray;

public class BarService extends HttpServlet {
   

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
   
        //创建DAO
        BarDao barDao = new BarDao();
        //从数据库里取数据
        ArrayList<Bar> barArr = barDao.query();
        //设置服务器响应时向JSP表示层传输数据的编码格式
        resp.setContentType("text/html; charset=utf-8");
        //ArrayList对象转化为JSON对象
        JSONArray json = JSONArray.fromObject(barArr);
        //控制台显示JSON
        System.out.println(json.toString());
        //返回到JSP
        PrintWriter writer = resp.getWriter();
        writer.println(json);
        writer.flush();
        //关闭输出流
        writer.close();
    }
}

将assets文件夹拖到web目录下
在WEB-INF目录下创建lib包,同时导入所需的jar包
这里我之后会将所需的文件上传到云端供大家下载,链接都会写在文章末端,具体项目结构文章开始有说,请仔细看

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">


        <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>

        <!-- 注册servlet -->
        <servlet>
            <servlet-name>barService</servlet-name>
            <servlet-class>cn.xyecy.servlet.BarService</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>barService</servlet-name>
            <url-pattern>/bar.do</url-pattern>
        </servlet-mapping>
    </web-app>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort()	+ path + "/";
%>
<%@page import="java.sql.*" %>
<!DOCTYPE>
<head>
<%--    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">--%>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <title>岗位信息展示</title>
    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/index.css"/>
    <!-- 使用单文件引入的方式使用ECharts.JS -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/echarts.min.js"></script>
    <script src="assets/js/index.js"></script>
    <script src="assets/js/map/shandong.js"></script>
<%--    分页插件的引入--%>
    <script type="text/javascript" src="assets/js/jqPaginator.js"></script>

    <script type="text/javascript">

        $(function() {
    
            var $this = $("#scroll_table");
            var scrollTimer;
            $this.hover(function() {
    
                clearInterval(scrollTimer);
            }, function() {
    
                scrollTimer = setInterval(function() {
    
                    scrollNews($this);
                }, 200);
            }).trigger("mouseleave");

            function scrollNews(obj) {
    
                var $self = obj.find("tbody");
                var lineHeight = $self.find("tr:first").height();
                $self.animate({
    
                    "marginTop": -lineHeight + "px"
                }

最低0.47元/天解锁文章

猫化

关注

12
点赞
踩
59

收藏

觉得还不错? 一键收藏
7
评论
Java爬虫项目(四可视化)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA

四:使用Echarts可视化,从51job网站爬取的招聘信息1.效果图(我将公开分享源码,可支持二次开发,中间的数据是获取数据库,并且实现自滚动的)2.首先了解一下Echartsecharts基础页面备份<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>职业仓</title> <!-- 引入 echarts.js --&g
复制链接

扫一扫