java学习&远程数据监控平台（一）

**写在前面**

**之前一直在做嵌入式开发，兼顾这上位机，最近有个远程监控的项目。用c#做了个上位机，不是太满意的。顺便扩充下自己的知识库，决定搞个网页版的。对java没啥了解，而且平时还是主要做嵌入式，这里以实用为主，有的知识点理解的不够深入。

**正好公司来个非洲姑娘，对java比较了解，弄了一些英文书过来看了下，感觉入门挺不错的《java tutorial point》，还有就是看了点《head first java》。看了一遍的*马的《java 基础》 和《java ee 开发》视频教程，讲的的确是好，一听就懂。当然，都是2013年的，不知道现在的技术更新到什么地步了。

**大概花了一个多月吧，边学边做，因为项目要一个月内出个初版，跳过了很多基础的东西。现在完成了登录模块，后台管理，以及数据展示中的一个动态生成树型结构菜单。

 

  一、html和css

1.1、这块之前也接触过，现在网上的学习资料也很多，*鸟教程和*3c都可以学到不少东西。我这边主要是用到了 form 表单提交。 这是个登录界面

 

 

 

1.2、 盒子模型

跟着《文章发布系统》搞了个标题 和 登录框。那篇博客还是挺好的，我从里面学了不少东西。 div :设置一个区域，对应写好class，然后就可以写其style了包括字体，背景色，内边距，外边距等等。

下面是登录界面的代码。

< head>
    < title>top
    
	
	
	    
	
	
	
	
	
  < /head>
  
  < body >
	< iframe frameborder="0" src="" name="top">
	
 	< div class="login"> 
     < div  style=" text-align:center; font-family:'宋体'; font-size:27px">
    	 用户登录
      	
	  < form action="< c:url value='/UserServlet'/>" method="post" > 
      < input type="hidden" name="method" value="UserServlet_FindAllUser"/>
      < div style="font-family: '宋体'; height=17mm;  padding-top:15px;padding-bottom:15px;padding-left:15px;">
        用户名：< input  type="text" name="uname" style="width:200px; height:35px;"  autocomplete="off" maxlength="60" placeholder="请输入账号">< br >
        
        
      

        密 码：

        
      

         
      
      
${msg }
    
   < /div>
 < /body>

 

（写的还是比较乱的，照理来说，应该在style处统一设置样式，我是边调试边改的，这里有个小问题，我在firefox和chrome中，登录框都是显示正常的，但是在IE下用户名和密码的输入框就部对齐了，希望有知道的大神指点迷津）

1.3、ifream

我这边只弄个简单的框架了，跟着*马的《网上图书商城》项目，大概制作了个页面的框架。设置了一些边框属性。

这是主界面

 

分为四个部分，上、中、左、右 上部：显示标题 中部：不同功能的链接 左部：树型菜单，显示更加直观一些，这里用了 开源的插件 ztree，后面会详细提到 右部：显示具体的数据 这几个都是在一个main.jsp中，代码如下：

 

这里面遇到了个问题，就是top页面设置滑动条，明明设置了scrolling=“no”，但是在谷歌浏览器下，还是会出现滑动条，最后在非洲妹子帮助下，重新设置了top页面的大小，才消除了滑动条。

**照理来说，这里的后台管理普通用户是接触不到的，我这边还没有做权限处理。

**快国庆了，可能这几天都要泡汤，要去山东出差，惆怅~

**csdn发布提示说非法内容，原来是新手不能发链接，啥提示都没有就封了，那就封了吧