Servlet讀取MySQL數據庫並在前端調用

需要實現的功能為在前端點擊Cesium下的3dtilse格式的文件並單體化，獲取模型的ID，通過ajax將ID傳送給servlet，然后servlet進行數據庫查詢，並將數據傳給前端。

1.對於MySQL數據庫的安裝與配置不再贅述，記住設置的名稱和密碼就好，本文使用Navicat for MySQL連接MySQL數據庫進行可視化操作，設置好連接名並輸入密碼，點擊連接測試，顯示連接成功點擊確定進入操作界面。

 

新建連接

2.首先新建數據庫名稱為test，新建數據表或者右鍵表->導入向導，直接導入exce、CSV等格式的文件。

 

導入向導

3.安裝JDK，並配置環境變量，不再贅述。

4.下載Tomcat與安裝配置，不再贅述。

5.下載eclipse並運行，新建Dynamic Web Project。

 

新建Dynamic Web Project

 

勾選生成web.xml

6.右擊項目，Build Path->Configer Build Path，點擊Libraries欄，Add External Jars將servlet-api.jar導入

Web App Libraries下，也就是項目下WebContent文件夾下的WEB-INF文件夾的lib文件夾里，需要導入如下的jar包。鏈接https://download.csdn.net/download/weixin_43816509/12088920

 

jar包

7.右擊Java Resources下的src，新建Package，然后右擊package，新建servlet，配置默認就好。

8.進行代碼部分的書寫，首先是前端的代碼部分書寫，在Cesium框架下ajax請求並接收servlet返回的數據。

$.ajax({

      dataType:"json",    //數據類型為json格式

      contentType: "application/x-www-form-urlencoded;charset=UTF-8",

      async:false,

      type:"get", 

      data:{"ID":ID1},

      url:"http://localhost:8080/practice/date", 

      statusCode: {

      404: function() { 

            alert('提交地址url未發現。 ');

            } 

        },     

      success:function(data){      

      var MC1=data[0].MC;}

9.后端獲取到ID並進行數據庫的連接與查詢，並轉換成json格式的數據傳遞到前端。

public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {

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

response.setHeader("Access-Control-Allow-Origin", "*");

        String ID2=(String)(request.getParameter("ID"));

      // System.out.println(ID2);

Connection ct = null; 

        Statement  sm = null; 

        ResultSet rs = null;

          try{   

            Class.forName("com.mysql.cj.jdbc.Driver");    //連接mysql數據庫

            ct = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/test?serverTimezone=GMT%2B8&useSSL=false","root","admin");

            sm = ct.createStatement();         

            rs = sm.executeQuery("select* from test where ID="+ID2);         

            JSONArray jsonData = JSONArray.fromObject(convertList(rs));      //先轉成List格式，再轉成json格式

          //System.out.println(jsonData.toString());

            PrintWriter out = response.getWriter();    //json數據傳遞到前端

            out.print(jsonData);

            ct.close();

        }

        catch(Exception ex)

        { 

              //error

        }                                  

    }

private static List convertList(ResultSet rs) throws SQLException {

    List list = new ArrayList();

    ResultSetMetaData md = rs.getMetaData();

    int columnCount = md.getColumnCount();

    while (rs.next()) {

      LinkedHashMap rowData=new LinkedHashMap();

        for (int i = 1; i <= columnCount; i++) {

            rowData.put(md.getColumnName(i), rs.getObject(i));

        }

        list.add(rowData);

    }

    return list;

}

10.前端獲取數據進行可視化。

 

前端可視化效果