json通过后台获取数据库中的内容,并在前端进行显示

fastjson.jar以及Echarts树图的js文件(需要在servlet对json进行赋值,所以需要用到json的插件)

链接:https://pan.baidu.com/s/1GBbamPNGTzKf2926Nkhczg
提取码:ukmg

用json主要目的就是需要用到一个Echars的树图,想要让他的数据从数据库中获取,所以要通过后台对json进行赋值

以下是源代码:

这是一个Echarts的一个前端的界面,这个可以在官网找到

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
   <h2 align="center">企业分析族谱</h2>
      <div id="container" style="height: 80%"></div>
    <script type="text/javascript" src="js/echarts.js"></script>  //你自己存放js的路径
    <script type="text/javascript" src="js/dataTools"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        var tempOption = {};
        option = null;
        $.get('/company/ZuPuServlet', function(data) {   //要获取值所用到的后台,由于初次接触,只会用一个后台去单独支持一个界面
            $.each(data,function(name,chilren){
                   tempOption = chilren;
            });
            myChart.setOption(option = {
                tooltip : {
                    trigger : 'item',
                    triggerOn : 'mousemove'
                },
                series : [ {
                    type : 'tree',
                    data : [tempOption],
                    top : '18%',
                    bottom : '14%',
                    layout : 'radial',
                    symbol : 'emptyCircle',
                    symbolSize : 7,
                    initialTreeDepth : 3,
                    animationDurationUpdate : 750
                } ]
            });
        });
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
   </body>
</html>

这个是后台的代码:

package servlet;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;

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 javax.servlet.http.HttpSession;
import javax.websocket.Session;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.mysql.jdbc.EscapeTokenizer;

import bean2.T_corp;
import bean2.T_corp_dist;
import bean2.T_corp_stock;
import bean2.T_m_corp_corp_dist;
import bean2.T_m_corp_corp_stock;
import dao.Guquan;
import dao.T_CORP_Dao;
import dao.T_corp_distDao;
import dao.T_corp_stockDao;
import dao.ZuPu;

/**
 * Servlet implementation class ZuPuServlet
 */
@WebServlet("/ZuPuServlet")
public class ZuPuServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private static final String EscapeTokenizer = null;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ZuPuServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //response.getWriter().append("Served at: ").append(request.getContextPath());
        request.setCharacterEncoding("UTF-8");
        HttpSession session = request.getSession();
        String name =(String)session.getAttribute("name");   //通过session获取公司的名称
        System.out.println(name);
        
        T_corp t_corp = T_CORP_Dao.getByName(name);
        List<T_m_corp_corp_stock> list = Guquan.list1(t_corp);   //有某一公司获取到相应的股东关系
        List<T_m_corp_corp_dist> list1 = ZuPu.list1(t_corp);    //获取对应的分支公司
        List<T_corp_stock> tStocks = new ArrayList<>();
        List<T_corp_dist> tDists = new ArrayList<>();
        T_corp_stock tStock ;
        T_corp_dist tDist  ;
        
        JSONObject json1 = new JSONObject();   //用来处理最中间的主节点
        JSONArray arry1 = new JSONArray();
        
        
        JSONArray arry2 = new JSONArray();     //存放各个股东的信息
        
        
        JSONArray arry3 = new JSONArray();    //存放各个分公司的数据
        
        
        JSONArray htags = new JSONArray();
        //由主节点扩展的分支节点
        JSONObject second1 = new JSONObject();
        JSONObject second2 = new JSONObject();
    
        json1.put("name",t_corp.getCORP_NAME());//将公司名赋值给第一个主节点
        for(int i = 0; i < list.size();i++)
        {
            tStock = T_corp_stockDao.getstock(list.get(i).getSUB_ORG(), list.get(i).getSUB_ID(), list.get(i).getSUB_SEQ_ID());
            tStocks.add(tStock);
            JSONObject json2 = new JSONObject();   //处理代表股权的节点信息
            json2.put("name", tStock.getSTOCK_NAME());
            
            arry2.add(json2);
        }
        
        for(int i =0; i < list1.size() ; i++)
        {
            tDist = T_corp_distDao.getstock(list1.get(i).getSUB_ORG(), list1.get(i).getSUB_ID(), list1.get(i).getSUB_SEQ_ID());
            tDists.add(tDist);
            JSONObject json3 = new JSONObject();   //处理代表公司分支的信息
            json3.put("name", tDist.getDIST_NAME());
            System.out.println(tDist.getDIST_NAME());
            arry3.add(json3);
        }
        
        second2.put("name", "对外投资");
        second1.put("name", "股东");
        second1.put("children", arry2);
        second2.put("children", arry3);
        
        arry1.add(second1);
        arry1.add(second2);
        json1.put("children", arry1);
        System.out.println("获取数据");
        
         response.setContentType("application/json"); 
         response.setCharacterEncoding("utf-8");
        
         htags.add(json1);
        response.getWriter().write(htags.toJSONString());
        session.invalidate();
        
    
    }

    

    
    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

最终的效果是这样的

第一次接触这个东西写的有点乱不太好理解,不喜勿喷

原文地址:https://www.cnblogs.com/1gaoyu/p/11894382.html