Javaweb+servlet+jdbc+jsp可视化

1.在IDEA中建立一个项目

1. 参照咱们清洗玩保存在mysql中的数据，new一个实体类Doubanc,代码如下

public class Doubanc {

    private String country;

    private String nums;

    private int id;

    private String name;

    private String director;

    private String date;

    private String sore;

    private String sore_values;

    public Doubanc(int id, String name, String director, String date, String sore, String sore_values, String country, String nums) {

        this.id = id;

        this.name = name;

        this.director = director;

        this.date = date;

        this.sore = sore;

        this.sore_values = sore_values;

    }

    public int getId() {

        return id;

    }

    public void setId(int id) {

        this.id = id;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getDirector() {

        return director;

    }

    public void setDirector(String director) {

        this.director = director;

    }

    public String getDate() {

        return date;

    }

    public void setDate(String date) {

        this.date = date;

    }

    public String getSore() {

        return sore;

    }

    public void setSore(String sore) {

        this.sore = sore;

    }

    public String getSore_values() {

        return sore_values;

    }

    public void setSore_values(String sore_values) {

        this.sore_values = sore_values;

    }

    public String getCountry() {

        return country;

    }

    public void setCountry(String country)

    {

        this.country = country;

    }

    public String getNums() {

        return nums;

    }

    public void setNums(String nums) {

        this.nums = nums;

    }

    public Doubanc(String country,String nums) {

        super();

        this.country = country;

        this.nums = nums;

    }

    public Doubanc() {

        super();

    }

}

1. new一个DoubanDao类，完成与数据库的交互工作，我们根据需要把相应的数据从数据库中读取，我们要使用到JDBC

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/movies_data","root","root");

            //3.获取statement,执行sql

            statement = connection.createStatement();

            //4.执行sql,返回结果集

            resultSet= statement.executeQuery("select country,nums from movies limit 10");

            //循环解析结果集

            while (resultSet.next()){

                //定义变量来收取我们的结果集

                String country=resultSet.getString("country");

                String nums=resultSet.getString("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;

    }

}

1. 编写servlet代码，用来做数据的调用和处理，为了方便我们直接在doget里面调用dopost方法，我们就可以实现从数据库中把数据取出来，在页面显示为json格式数据

public class DoubanServlet extends javax.servlet.http.HttpServlet {

    //把我们的dao对象声明成属性，便于后面初始化使用

    private DoubanDao doubanDao;

    @Override

    public void init() throws ServletException{

        //初始化

        doubanDao = new DoubanDao();

    }

protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        //调用初始化对象的方法，该方法返回一个集合，我们用定义列表doubancList来收取这个集合的值

        List<Doubanc> doubancList=doubanDao.getDoubancList();

        request.setAttribute("doubancList",doubancList);

        response.setContentType("text/html;charset=utf-8");

        //把列表转换为json格式的数据

        JSONArray json=JSONArray.fromObject(doubancList);

        //使用输出流进行数据的输出

        PrintWriter writer =response.getWriter();

        writer.println(json);

        writer.flush();

        writer.close();

        request.getRequestDispatcher("index/.jsp").forward(request,response);

    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

            doPost(request,response);

    }

}

1. 接着在jsp页面调用DoubanServlet来获取数据

<%@ 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 οnlοad="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>

1. 在WEB-LIB目录用于存放架包，在写servlet的时候，我们要引入部分架包，添加为Library root就能使用，配置好tomcat服务器，就可以启动项目。