您的位置：首页 > 数据库 > MySQL

利用Ajax实现数据的同步传输，从mysql中提取数据，通过echarts可视化

2017-11-21 13:50 1911 查看

如何将mysql数据库中的方式通过echarts可视化呢，以下面这个简单的例子向大家进行演示：

步骤一：mysql的创表和插入数据，当然这些数据也可以是你通过爬虫抓取的。

步骤二：

创建实体类，

步骤三：通过java连接数据库

将连接数据库所需的jar包，导入WEB-INF下的lib目录下：

package db;
import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

import java.util.ArrayList;

import entity.Bar;

public class BarDao {

private static final String URL="jdbc:mysql://localhost:3306/bar?useUnicode=true&characterEncoding=UTF-8";

private static final String USER="root";

private static final String PASSWORD="123456";

private static Connection conn=null;

public ArrayList<Bar> query(){   //这里的query()方法是将从数据库中读取到的数据存储到集合中

   ResultSet rs = null;

   Statement st = null;

   ArrayList<Bar> barArr=new ArrayList<Bar>();

  try{

   Class.forName("com.mysql.jdbc.Driver"); //加载数据库驱动

  conn =DriverManager.getConnection(URL, USER, PASSWORD); //获取数据库连接对象

  st = conn.createStatement();

  rs = st.executeQuery("select * from testbar");

   while(rs.next()){

    Bar bar=new Bar();

    bar.setName(rs.getString("name"));

    bar.setNum(rs.getInt("num"));

    barArr.add(bar);     //将从数据库中读取到的数据以bar对象的方式存储到集合中

   }

   conn.close(); //断开连接

  }catch(SQLException e){

   e.printStackTrace();

  }catch (ClassNotFoundException e) {

   e.printStackTrace();

  }



  return barArr;   //返回该集合

}

public void update(String name,Integer num){          //该方法用于更新数据

   try{



    Class.forName("com.mysql.jdbc.Driver"); //加载数据库驱动

    conn =DriverManager.getConnection(URL, USER, PASSWORD); //获取数据库连接对象

    PreparedStatement ptmt=conn.prepareStatement("update testbar set num=? where name=? ");

    ptmt.setInt(1, num);

    ptmt.setString(2,name);

    ptmt.execute();





}catch(SQLException e){

   e.printStackTrace();

  }catch (ClassNotFoundException e) {

   e.printStackTrace();

  }



}

}

步骤四：创建servlet。

这里的BarService通过调用上面的query方法，获取从数据库中读取的Bar实例的集合，需要说明的是由于Echarts前台不能识别ArrayList对象，所以需要转换为JSONArray类型，转换的时候必须导入jar包，不然会报错，具体要使用到的jar包如下：

BarService.java代码：

public void doPost(HttpServletRequest request, HttpServletResponse response)

   throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");

  BarDao barDao=new BarDao();

  ArrayList<Bar> barArr=barDao.query(); //调用BarDao的query方法。返回一个从数据库中读取之后的集合

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

  JSONArray json=JSONArray.fromObject(barArr);   //将ArrayList对象转化为JSON对象，因为Echarts前台只能识别JSONArray，不能识别ArrayList类型

  //返回到jsp

  PrintWriter writer =response.getWriter();

  writer.println(json);

  writer.flush();

  writer.close(); //关闭输出流

}

JsoService.java则是用于数据更新，我们会在下面JSP界面中创建文本框，通过post方式链接到该servlet页面进行业务逻辑，调用更新方法，可以将mysql中的数据进行更新：

public void doPost(HttpServletRequest request, HttpServletResponse response)

   throws ServletException, IOException {
   String name=request.getParameter("name");

   String num=request.getParameter("num");

   BarDao bDao=new BarDao();

   bDao.update(name,Integer.parseInt(num)); //调用更新方法并传入参数。



}

步骤五：配置web.xml

这里的utl-pattern的地址会在jsp页面中的ajax的url进行使用。

步骤六：导入echarts，和并编写视图层代码；：

这是初始化界面，当然这里只做了两个图，Echarts中还有很多模型，感兴趣的可以学习。

输入商品名称和销量点击数据更新后：

可以发现数据已经得到了更新，查看数据库中是否得到了更新：

可以看到，后台的数据也通过我们前台界面的修改得到了更新。至此整个过程就全部结束了。

总结：如何利用数据库中的数据将其可视化。主要步骤为：首先通过编程语言链接到数据库，这里可以选择JAVA.PHP等然后获取到数据库中的数据。在servlet中调用调用方法，获取到数据，然后将其转换为Echarts可以识别的JSONArray类型的数据，当然这里是需要导入jar包的。然后在视图层，通过Ajax的同步传输的方式，指定跳转的方式为post,以及url为跳转的servlet，通过执行该servlet的方法来获取到数据，或者其他操作。最后返回数据；然后就可以导入Echarts进行初始化，通过调用方法获取到ajax中的数据，最后调用该option进行可视化。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax mysql 可视化 java

相关文章推荐

新的分享

章节导航