打怪升级真的好难，记录一点一滴，一滴一点，先上效果图。

1.想完成一个界面，先得有界面。界面是在WebRoot下的根目录文件中新建的zjqktj.jsp中建立的，再通过java在后台调用数据库取出数据实现图表显示。这里提示引用了easyui里的css框架，zjqktj.jsp代码显示：

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6.  
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.  
  12.     <title>My JSP 'zjqktj.jsp' starting page</title>
  13.  
  14.     <meta http-equiv="pragma" content="no-cache">
  15.     <meta http-equiv="cache-control" content="no-cache">
  16.     <meta http-equiv="expires" content="0">
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  18.     <meta http-equiv="description" content="This is my page">
  19.     <link rel="stylesheet" type="text/css" href="css/easyui.css">
  20.     <link rel="stylesheet" type="text/css" href="css/icon.css">
  21.     <script type="text/javascript" src="js/jquery_min.js"></script>
  22.     <script type="text/javascript" src="js/jquery_easyui_min.js"></script>
  23.     <!--
  24.     <link rel="stylesheet" type="text/css" href="styles.css">
  25.     -->
  26.  
  27.   </head>
  28.  
  29.   <body>
  30.     <div>
  31.         <table class="easyui-datagrid" data-options="url:'Zjqktj.do',title:'装机情况统计'" >
  32.            <thead>
  33.                <tr>
  34.                 <th data-options="field:'dzmc',width:100">电站名称</th>
  35.                 <th data-options="field:'sjzjrl',width:100 ">设计装机容量(MW)</th>
  36.                 <th data-options="field:'ytcrl',width:100">已投产容量(MW)</th>
  37.                 <th data-options="field:'azfszl',width:100">安装方式种类(种)</th>
  38.                 <th data-options="field:'nbqcjs',width:100">逆变器厂家(家)</th>
  39.                 <th data-options="field:'nbqsl',width:100">逆变器数量(台)</th>
  40.                 <th data-options="field:'njhdxlyxss',width:100">年计划等效利用小时(h)</th>
  41.                 </tr>
  42.            </thead>
  43.         </table>
  44.     </div>
  45.   </body>
  46. </html>

2.前端界面做好了，在model包里面新建一个java类。引包，定义变量，数据库连接，sql语句一样都不能少。最后打注释的一段是代码写完后用来测试是否能取到数据的，右键单击空白界面处，选中“debug as”。

  1. package com.pv.model;
  2. import java.sql.*;
  3. import java.util.ArrayList;
  4.  
  5. public class GetZjqktj {
  6.  
  7.    public ArrayList getZjqktj(String username) throws SQLException{
  8.         //根据用户名取出群组
  9.         Statement st=null;
  10.         ResultSet rs =null;
  11.         Connection ct=null;
  12.         ArrayList al= new ArrayList();
  13.         try{
  14.              //取出用户的所有电站信息
  15.             ct=(new ConnectDB()).ConnDB();
  16.             st =ct.createStatement();
  17.             rs=st.executeQuery("select A.`电站名称`,A.`装机容量`,A.`已投产容量`,COUNT(DISTINCT B.`厂家`) AS 厂家数,COUNT(DISTINCT A.`安装方式`) AS 安装方式种类,COUNT(B.`设备ID`)AS 逆变器数量,ROUND( D.`年总发电量`/A.`装机容量`,2 )AS 年计划等效利用小时数 from `电站信息列表` A ,`逆变器信息列表` B,`用户信息表` C,`电站月统计表` D WHERE A.`电站编码`=B.`组列表_电站编码`"+
  18. "AND A.`电站编码`=C.`电站信息列表_电站编码`AND A.`电站编码`=D.`电站信息列表_电站编码`AND C.`用户名`='"+username+"' GROUP BY a.`电站编码`");
  19.  
  20.             while(rs.next()){
  21.                 String[]str=new String[7];
  22.                 str[0]=rs.getString(1);
  23.                 str[1]=rs.getString(2);
  24.                 str[2]=rs.getString(3);
  25.                 str[3]=rs.getString(4);
  26.                 str[4]=rs.getString(5);
  27.                 str[5]=rs.getString(6);
  28.                 str[6]=rs.getString(7);
  29.                 al.add(str);
  30.               }
  31.             }catch(Exception e){
  32.                 e.printStackTrace();
  33.  
  34.             }
  35.           return al;
  36.      }
  37. }
  38.  
  39. //   public static void main(String[] args) throws SQLException{
  40. //        GetZjqktj zz=new GetZjqktj();
  41. //        ArrayList al=zz.getZjqktj("yangyang");
  42. //        for(int i=0;i<al.size();i++)
  43. //        {
  44. //            String[] str=(String[])al.get(i);
  45. //            for(int j=0;j<str.length;j++){
  46. //              System.out.println(str[j]);            }
  47. //        }
  48. //        }
  49. //
  50. //
  51. //    }
  52.

3.为了实现jsp页面的优雅化，不在其中增加java片段。因此在controller包中新建ZjqktjController.java类，通过json传参直接将数据库中取出的数据对应到前端界面中来，这部分还需要消化。

  1. package com.pv.control;
  2.  
  3. import java.io.IOException;
  4. import java.sql.SQLException;
  5. import java.util.ArrayList;
  6. import java.util.HashMap;
  7. import java.util.Map;
  8.  
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11.  
  12. import org.springframework.stereotype.Controller;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  14.  
  15. import com.alibaba.fastjson.JSONArray;
  16. import com.alibaba.fastjson.JSONObject;
  17. import com.pv.model.GetGroup;
  18. import com.pv.model.GetZjqktj;
  19. @Controller
  20. public class ZjqktjController {
  21.     @RequestMapping(value = "Zjqktj.do")
  22.     public void  Zjqktj(HttpServletRequest req,HttpServletResponse res) throws IOException, SQLException{
  23.         Map<String, Object> result = new HashMap<String, Object>(2) ;
  24.         String username= (String)req.getAttribute("username");
  25.         res.setCharacterEncoding("utf-8");
  26.         JSONArray jsonArray = new JSONArray();
  27.         GetZjqktj zz = new GetZjqktj();
  28.         ArrayList al=zz.getZjqktj("yangyang");
  29.  
  30.         if(al.size()==0)
  31.         {
  32.  
  33.         }
  34.         else {
  35.             for(int i=0;i<al.size();i++){
  36.                 JSONObject jsonObject = new JSONObject();
  37.                 String[] str = (String[]) al.get(i);
  38.                  jsonObject.put("dzmc", str[0]);
  39.                  jsonObject.put("sjzjrl",str[1]);
  40.                  jsonObject.put("ytcrl", str[2]);
  41.                  jsonObject.put("nbqcjs",str[3]);
  42.                  jsonObject.put("azfszl", str[4]);
  43.                  jsonObject.put("nbqsl", str[5]);
  44.                  jsonObject.put("njhdxlyxss", str[6]);
  45.                  jsonArray.add(jsonObject) ;
  46.         }
  47.               result.put("total", 1);
  48.                 result.put("rows",jsonArray) ;
  49.                 Object o=JSONObject.toJSON(result);
  50.                 res.getWriter().write(o.toString());
  51.                 res.getWriter().flush();
  52.                 res.getWriter().close();
  53.  
  54.         }
  55.     }
  56.     }

4.需要强化基本语法，或者尝试用别的方法实现界面。先慢慢爬，再学会走。

用datagrid实现完整的一个页面的更多相关文章

  1. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  2. Div里面载入另一个页面的实现(取代框架)（AJax）（转）

    随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...

  3. JavaScript网站设计实践（七）编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  4. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  5. Div里面载入另一个页面的实现(取代框架)（AJax）

    随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...

  6. Flutter - 添加从左向右滑动，返回上一个页面

    很多App比如微信.IT之家等都支持从屏幕左侧向右滑动,来返回上一个页面. 很多iOS上的App也都支持. 那么这个神奇的手势滑动是怎么实现的呢? 其实非常简单,只需要添加一句话即可. platfor ...

  7. Bootstrap--模仿官网写一个页面

    本文参考Bootstrap官方文档写了简单页面来熟悉Bootstrap的栅格系统.常用CSS样.Javascript插件和部分组件. 以下html代码可以直接复制本地运行: BootstrapPage ...

  8. ASP.NET MVC WebApi 返回数据类型序列化控制（json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面，各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  9. 一个页面从输入URL到加载显示完成，发生了什么？

    面试经典题--URL加载 一.涉及基本知识点: 1. 计算机网络 五层因特尔协议栈: 应用层(dns.http):DNS解析成IP并完成http请求发送: 传输层(tcp.udp):三次握手四次挥手模 ...

随机推荐

  1. How do I remove javascript validation from my eclipse project?

    Right click your project Select Properties -> JavaScript -> Include Select Source tab (It look ...

  2. MC的分布式算法的实现和一些总结

    首先我们知道Memcached是一个分布式的缓存系统,但memcached并不像是mongodb那样,允许配置多个节点,且节点之间是自动分配数据的 也就是说memcached节点之间,是互不相通信的, ...

  3. 8.openssl req

    数字证书申请和生成工具.也可以为根CA自行签署证书. 该命令中很多值.属性.格式或默认值都在config文件openssl.cnf中指定. [root@xuexi ~]# man req NAME r ...

  4. web聊天室

    开发一个web聊天室 功能需求: 1.用户可以与好友一对一聊天 2.群聊 所需知识 1.Django 2.bootstrap 3.CSS 4.ajax 涉及到的新的知识点 1.如果设计表结构的时候,一 ...

  5. Django web 进阶

    .路由系统 .模板引擎 simple_tag .Form .Ajax请求 -简单数据 -复杂数据 内容: -作业 model xss.csrf(安全方面的内容) 分页(公共的模块) 内容复习和今日内容 ...

  6. java视频教程 Java自学视频整理(持续更新中...)

    视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...

  7. js浏览器对象的属性和方法

    1.window对象 /*1.计算浏览器窗口大小*/ //不算滚动条: var width = window.innerWidth; var height = window.innerHeight; ...

  8. 如何用grunt压缩文件

    grunt-cli 全局装完之后,就可以给每个项目装grunt了.   1.先把package.json和Gruntfile.js拷到项目下(PS:这两个文件是每个项目装grunt的时候必带的) 2. ...

  9. Oracle数据库根据时间查询

    ' and trans_dt between to_date('2010-12-01 00:00:00','YYYY-MM-DD HH24:MI:SS') and to_date('2011-12-3 ...

  10. GitHub上最火的40个Android开源项目

    http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects