• 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);
        }
    
    }

    最终的效果是这样的

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

  • 相关阅读:
    Pandas索引和选择数据
    Pandas选项和自定义
    Pandas字符串和文本数据
    Pandas排序
    Pandas迭代
    Pandas重建索引
    Pandas函数应用
    Pandas描述性统计
    Pandas基本功能
    nyoj 234 吃土豆
  • 原文地址:https://www.cnblogs.com/1gaoyu/p/11894382.html
Copyright © 2020-2023  润新知