zoukankan html css js c++ java

用户模块之首页的显示

在上一篇博文中我们实现了三大框架的整合，实现的效果就是在运行的时候没有报错

分析主页数据的显示：

初始主页面的显示：

初始时的访问页面：

初始web.xml

 <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>

将web.xml中这里只有一个default.jsp，让default.jsp跳转一个代码，跳转到action中，通过action进行访问

<welcome-file-list>
    
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>

由于页面都是静态的，因此需要在jsp中写入Java代码，进行获取信息，

其获取信息的的思路：

在项目中新建一个default.jsp

初始在default.jsp中加入代码，直接访问action：

 1 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
 2     pageEncoding="ISO-8859-1"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="ISO-8859-1">
 7 <title>泉师释疑</title>
 8 </head>
 9 <body>
10 
11 <%response.sendRedirect(request.getContextPath()+"/GetDataAction_getData"); %>
12 
13 </body>
14 </html>

用图分析主页数据的显示

在主页的显示中，需要进行如下的修改：

操作系统、本计算机ip地址、本计算机名称、内存总量、内存使用量、当前内存剩余量都通过代码进行动态的获取，而由于使用的是Java版本将其与mysql版本都写为静态的。

只用到了web层

获取当前时间以及ip地址

创建action

GetDataAction

在工具包中建一个ComputerInfo.java

    private String os;//操作系统
    private String ip;//本计算机的ip地址
    private String computerName;//本计算机的名称
    private String memTotal;//内存的总量
    private String memUse;//内存的使用量
    private String memFree;//当前内存的剩余量
    private String time;//当前时间

 1 package com.guiyan.utils;
 2 
 3 public class ComputerInfo {
 4     
 5     private String os;//操作系统
 6     private String ip;//本计算机的ip地址
 7     private String computerName;//本计算机的名称
 8     private String memTotal;//内存的总量
 9     private String memUse;//内存的使用量
10     private String memFree;//当前内存的剩余量
11     private String time;//当前时间
12     
13     
14     
15     
16     public String getOs() {
17         return os;
18     }
19     public void setOs(String os) {
20         this.os = os;
21     }
22     public String getIp() {
23         return ip;
24     }
25     public void setIp(String ip) {
26         this.ip = ip;
27     }
28     public String getComputerName() {
29         return computerName;
30     }
31     public void setComputerName(String computerName) {
32         this.computerName = computerName;
33     }
34     public String getMemTotal() {
35         return memTotal;
36     }
37     public void setMemTotal(String memTotal) {
38         this.memTotal = memTotal;
39     }
40     public String getMemUse() {
41         return memUse;
42     }
43     public void setMemUse(String memUse) {
44         this.memUse = memUse;
45     }
46     public String getMemFree() {
47         return memFree;
48     }
49     public void setMemFree(String memFree) {
50         this.memFree = memFree;
51     }
52     public String getTime() {
53         return time;
54     }
55     public void setTime(String time) {
56         this.time = time;
57     }
58     
59     
60     
61 
62 }

ComputerInfo.java

在GetDataAction.java中写入获取当前时间以及ip地址

package com.guiyan.web;

import java.net.InetAddress;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;
import java.util.Properties;
import com.guiyan.utils.ComputerInfo;


public class GetDataAction {
    
public String getData() throws Exception {
        
        ComputerInfo computerInfo = new ComputerInfo();
        //获取时间
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        computerInfo.setTime(format.format(new Date()));
        //获取ip地址
        InetAddress addr;
        addr = InetAddress.getLocalHost();
        String ip = addr.getHostAddress();
        computerInfo.setIp(ip);
        
        
        
        
    
        
        
        
        
        return "index";
}
    

}

获取操作系统以及计算机名称

关于获取计算机名称用到的属性方法的网址：

https://www.cnblogs.com/lykbk/p/asdfasddaa23432434.html

在GetDataAction.java中获取操作系统以及计算机名称

//操作系统
        Properties properties = System.getProperties();
        String osName = properties.getProperty("os.name");//获取操作系统的名称
        computerInfo.setOs(osName);
        //计算机名称（注意不是获取用户的名称）
        //通过键获取其名称
        Map<String, String> map = System.getenv();
        String computerName = map.get("COMPUTERNAME");
        computerInfo.setComputerName(computerName);

测试结果：

测试代码：

System.err.println(computerInfo.getTime());
        System.err.println(computerInfo.getIp());
        System.err.println(computerInfo.getOs());
        System.err.println(computerInfo.getComputerName());

在struts.xml中允许所有方法中写入这一句：

<action name="GetDataAction_*" class="com.guiyan.web.GetDataAction" method="{1}">
            
            
            </action>

在applicationContext.xml中配置该action：

<!-- 配置Action -->
    <bean name="getDataAction" class="com.guiyan.web.GetDataAction" scope="prototype">
    
    </bean>

运行后出现的错误如下：

该错误没事，是由于还没有写返回的结果，因此产生的错误

获取内存与其使用量与剩余量

需要通过一个插件来进行获取：

sigar插件的详情使用：https://blog.csdn.net/a123demi/article/details/50689265

    Sigar sigar = new Sigar();
        Mem mem = sigar.getMem();
        //内存
        long total = mem.getTotal();
        //内存使用量
        long used = mem.getUsed();
        //内存剩余量
        long free = mem.getFree();

System.err.println( total);
System.err.println( used);
System.err.println( free);

java如何引入dll文件：

当运行上面的代码时报这样的错误了：

把这个dll文件复制到你Java安装的目录中的jdk中

我的Java是安装在这里

放在这里它会自动加载

运行的结果：

由于数字的是以字节为单位的，需进行单位的转换，转换为G：

进行单位转化的代码：

System.err.println(1.0 * total/1024/1024/1024);
        System.err.println(1.0 * used/1024/1024/1024);
        System.err.println(1.0 * free/1024/1024/1024);

其转化的结果为：

这样就获取了内存的总量，内存的使用量以及内存的剩余量，

由于还没有写返回结果，因此还有如下错误

接下来，就需要解决此问题，让其有返回结果

完善前端页面：给welcome.jsp提供数据

在jsp中都需要进行引入Struts标签库：

 <%@ taglib uri="/struts-tags" prefix="s" %>

利用Struts标签库使页面动态显示：

在GetDataAction.java中加入：

computerInfo.setMemTotal(total/1024/1024/1024 + "G");
        computerInfo.setMemUse(used/1024/1024/1024 + "G");
        computerInfo.setMemFree(free/1024/1024/1024 + "G");

ActionContext.getContext().put("computerInfo", computerInfo); //通过使用actionContext进行转发
  return "index";

在struts.xml中加入结果集

<!-- 允许所有方法 -->
            <global-allowed-methods>regex:.*</global-allowed-methods>
            <action name="GetDataAction_*" class="com.guiyan.web.GetDataAction" method="{1}">
             
                <result name="index">/index.jsp</result>
            
            </action>

index.jsp:

  1 <%@ page language="java" contentType="text/html; charset=utf-8"
  2     pageEncoding="utf-8"%>
  3  <%@ taglib uri="/struts-tags" prefix="s" %>
  4 <!doctype html>
  5 <html lang="en">
  6 <head>
  7 <meta charset="UTF-8">
  8 <title>泉师释疑后台</title>
  9 <meta name="renderer" content="webkit|ie-comp|ie-stand">
 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 11 <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
 12 <meta http-equiv="Cache-Control" content="no-siteapp" />
 13 
 14 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 15 <link rel="stylesheet" href="./css/font.css">
 16 <link rel="stylesheet" href="./css/xadmin.css">
 17 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 18 <script src="./lib/layui/layui.js" charset="utf-8"></script>
 19 <script type="text/javascript" src="./js/xadmin.js"></script>
 20 
 21 </head>
 22 <body>
 23     <!-- 顶部开始 -->
 24     <div class="container">
 25         <div class="logo">
 26             <a href="./index.jsp">泉师释疑后台</a>
 27         </div>
 28         <div class="left_open">
 29             <i title="展开左侧栏" class="iconfont">&#xe699;</i>
 30         </div>
 31         <ul class="layui-nav left fast-add" lay-filter="">
 32             <li class="layui-nav-item">
 33                 <a href="javascript:;">+新增</a>
 34                 <dl class="layui-nav-child">
 35                     <!-- 二级菜单 -->
 36                     <dd>
 37                         <a onclick="x_admin_show('资讯','http://www.baidu.com')">
 38                             <i class="iconfont">&#xe6a2;</i>
 39                             资讯
 40                         </a>
 41                     </dd>
 42                     <dd>
 43                         <a onclick="x_admin_show('图片','http://www.baidu.com')">
 44                             <i class="iconfont">&#xe6a8;</i>
 45                             图片
 46                         </a>
 47                     </dd>
 48                     <dd>
 49                         <a onclick="x_admin_show('用户','http://www.baidu.com')">
 50                             <i class="iconfont">&#xe6b8;</i>
 51                             用户
 52                         </a>
 53                     </dd>
 54                 </dl>
 55             </li>
 56         </ul>
 57         <ul class="layui-nav right" lay-filter="">
 58             <li class="layui-nav-item">
 59                 <a href="javascript:;">admin</a>
 60                 <dl class="layui-nav-child">
 61                     <!-- 二级菜单 -->
 62                     <dd>
 63                         <a onclick="x_admin_show('个人信息','http://www.baidu.com')">个人信息</a>
 64                     </dd>
 65                     <dd>
 66                         <a onclick="x_admin_show('切换帐号','http://www.baidu.com')">切换帐号</a>
 67                     </dd>
 68                     <dd>
 69                         <a href="./login.html">退出</a>
 70                     </dd>
 71                 </dl>
 72             </li>
 73             <li class="layui-nav-item to-index">
 74                 <a href="/">前台首页</a>
 75             </li>
 76         </ul>
 77 
 78     </div>
 79     <!-- 顶部结束 -->
 80     <!-- 中部开始 -->
 81     <!-- 左侧菜单开始 -->
 82     <div class="left-nav">
 83         <div id="side-nav">
 84             <ul id="nav">
 85                 <li>
 86                     <a href="javascript:;">
 87                         <i class="iconfont">&#xe6b8;</i>
 88                         <cite>用户管理</cite>
 89                         <i class="iconfont nav_right">&#xe697;</i>
 90                     </a>
 91                     <ul class="sub-menu">
 92                         <li>
 93                             <a _href="#">
 94                                 <i class="iconfont">&#xe6a7;</i>
 95                                 <cite>用户列表</cite>
 96 
 97                             </a>
 98                         </li>
 99                         <li>
100                             <a _href="#">
101                                 <i class="iconfont">&#xe6a7;</i>
102                                 <cite>用户删除</cite>
103 
104                             </a>
105                         </li>
106                     </ul>
107                 </li>
108                 <li>
109                     <a href="javascript:;">
110                         <i class="iconfont">&#xe6b5;</i>
111                         <cite>帖子管理</cite>
112                         <i class="iconfont nav_right">&#xe697;</i>
113                     </a>
114                     <ul class="sub-menu">
115                         
116                         <li>
117                             <a href="javascript:;">
118                                 <i class="iconfont">&#xe70b;</i>
119                                 <cite>帖子列表</cite>
120                                 <i class="iconfont nav_right">&#xe697;</i>
121                             </a>
122                             <ul class="sub-menu">
123                                 <li>
124                                     <a _href="#">
125                                         <i class="iconfont">&#xe6a7;</i>
126                                         <cite>已完结</cite>
127 
128                                     </a>
129                                 </li>
130                                 <li>
131                                     <a _href="#">
132                                         <i class="iconfont">&#xe6a7;</i>
133                                         <cite>未完结</cite>
134 
135                                     </a>
136                                 </li>
137                     
138 
139                             </ul>
140                         </li>
141                         <li>
142                             <a _href="#">
143                                 <i class="iconfont">&#xe6a7;</i>
144                                 <cite>帖子删除</cite>
145 
146                             </a>
147                         </li>
148                     </ul>
149                 </li>
150                 <li>
151                     <a href="javascript:;">
152                         <i class="iconfont">&#xe6ce;</i>
153                         <cite>系统统计</cite>
154                         <i class="iconfont nav_right">&#xe697;</i>
155                     </a>
156                     <ul class="sub-menu">
157                         <li>
158                             <a _href="#">
159                                 <i class="iconfont">&#xe6a7;</i>
160                                 <cite>总体数量显示</cite>
161                             </a>
162                         </li>
163                         <li>
164                             <a _href="#">
165                                 <i class="iconfont">&#xe6a7;</i>
166                                 <cite>总体数量详细显示</cite>
167                             </a>
168                         </li>
169                         <li>
170                             <a _href="#">
171                                 <i class="iconfont">&#xe6a7;</i>
172                                 <cite>总体数量雷达图</cite>
173                             </a>
174                         </li>
175                         <li>
176                         <a _href="#">
177                                 <i class="iconfont">&#xe6a7;</i>
178                                 <cite>帖子大比拼</cite>
179                             </a>
180                         </li>
181                         <li>
182                             <a _href="#">
183                                 <i class="iconfont">&#xe6a7;</i>
184                                 <cite>每周用户统计</cite>
185                             </a>
186                         </li>
187                         <li>
188                             <a _href="#">
189                                 <i class="iconfont">&#xe6a7;</i>
190                                 <cite>每周数量统计</cite>
191                             </a>
192                         </li>
193                         
194                     </ul>
195                 </li>
196                 <li>
197                     <a href="javascript:;">
198                         <i class="iconfont">&#xe6b4;</i>
199                         <cite>图标字体</cite>
200                         <i class="iconfont nav_right">&#xe697;</i>
201                     </a>
202                     <ul class="sub-menu">
203                         <li>
204                             <a _href="unicode.html">
205                                 <i class="iconfont">&#xe6a7;</i>
206                                 <cite>图标对应字体</cite>
207                             </a>
208                         </li>
209                     </ul>
210                 </li>
211             </ul>
212         </div>
213     </div>
214     <!-- <div class="x-slide_left"></div> -->
215     <!-- 左侧菜单结束 -->
216     <!-- 右侧主体开始 -->
217     <div class="page-content">
218         <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
219             <ul class="layui-tab-title">
220                 <li class="home">
221                     <i class="layui-icon">&#xe68e;</i>
222                     我的桌面
223                 </li>
224             </ul>
225             <div class="layui-tab-content">
226                 <div class="layui-tab-item layui-show">
227                     <iframe src="${pageContext.request.contextPath }/GetDataAction_getData" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
228                 </div>
229             </div>
230         </div>
231     </div>
232     <div class="page-content-bg"></div>
233     <!-- 右侧主体结束 -->
234     <!-- 中部结束 -->
235     <!-- 底部开始 -->
236     <div class="footer">
237         <div class="copyright">Copyright ©2019 All Rights Reserved</div>
238     </div>
239     <!-- 底部结束 -->
240     <script>
241         //百度统计可去掉
242         var _hmt = _hmt || [];
243         (function() {
244             var hm = document.createElement("script");
245             hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
246             var s = document.getElementsByTagName("script")[0];
247             s.parentNode.insertBefore(hm, s);
248         })();
249     </script>
250 </body>
251 </html>

index.jsp

welcome.jsp

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3  <%@ taglib uri="/struts-tags" prefix="s" %>
  4 <!DOCTYPE html>
  5 <html>
  6     <head>
  7         <meta charset="UTF-8">
  8         <title>欢迎页面</title>
  9         <meta name="renderer" content="webkit">
 10         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 11         <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
 12         <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 13         <link rel="stylesheet" href="./css/font.css">
 14         <link rel="stylesheet" href="./css/xadmin.css">
 15     </head>
 16     <body>
 17     <div class="x-body layui-anim layui-anim-up">
 18         <blockquote class="layui-elem-quote">欢迎管理员：
 19             <span class="x-red">test</span>！当前时间:<s:property value="#computerInfo.time"/></blockquote>
 20         <fieldset class="layui-elem-field">
 21             <legend>数据统计</legend>
 22             <div class="layui-field-box">
 23                 <div class="layui-col-md12">
 24                     <div class="layui-card">
 25                         <div class="layui-card-body">
 26                             <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style=" 100%; height: 90px;">
 27                                 <div carousel-item="">
 28                                     <ul class="layui-row layui-col-space10 layui-this">
 29                                         <li class="layui-col-xs2">
 30                                             <a href="javascript:;" class="x-admin-backlog-body">
 31                                                 <h3>文章数</h3>
 32                                                 <p>
 33                                                     <cite>66</cite></p>
 34                                             </a>
 35                                         </li>
 36                                         <li class="layui-col-xs2">
 37                                             <a href="javascript:;" class="x-admin-backlog-body">
 38                                                 <h3>会员数</h3>
 39                                                 <p>
 40                                                     <cite>12</cite></p>
 41                                             </a>
 42                                         </li>
 43                                         <li class="layui-col-xs2">
 44                                             <a href="javascript:;" class="x-admin-backlog-body">
 45                                                 <h3>回复数</h3>
 46                                                 <p>
 47                                                     <cite>99</cite></p>
 48                                             </a>
 49                                         </li>
 50                                         <li class="layui-col-xs2">
 51                                             <a href="javascript:;" class="x-admin-backlog-body">
 52                                                 <h3>商品数</h3>
 53                                                 <p>
 54                                                     <cite>67</cite></p>
 55                                             </a>
 56                                         </li>
 57                                         <li class="layui-col-xs2">
 58                                             <a href="javascript:;" class="x-admin-backlog-body">
 59                                                 <h3>文章数</h3>
 60                                                 <p>
 61                                                     <cite>67</cite></p>
 62                                             </a>
 63                                         </li>
 64                                         <li class="layui-col-xs2">
 65                                             <a href="javascript:;" class="x-admin-backlog-body">
 66                                                 <h3>文章数</h3>
 67                                                 <p>
 68                                                     <cite>6766</cite></p>
 69                                             </a>
 70                                         </li>
 71                                     </ul>
 72                                 </div>
 73                             </div>
 74                         </div>
 75                     </div>
 76                 </div>
 77             </div>
 78         </fieldset>
 79         <fieldset class="layui-elem-field">
 80             <legend>系统通知</legend>
 81             <div class="layui-field-box">
 82                 <table class="layui-table" lay-skin="line">
 83                     <tbody>
 84                         <tr>
 85                             <td >
 86                                 <a class="x-a" href="/" target="_blank">新版泉师释疑上线了</a>
 87                             </td>
 88                         </tr>
 89                         <tr>
 90                             <td >
 91                                 <a class="x-a" href="/" target="_blank">交流qq:(3413319614)</a>
 92                             </td>
 93                         </tr>
 94                     </tbody>
 95                 </table>
 96             </div>
 97         </fieldset>
 98        <fieldset class="layui-elem-field">
 99             <legend>系统信息</legend>
100             <div class="layui-field-box">
101                 <table class="layui-table">
102                     <tbody>
103                         <tr>
104                             <th>操作系统</th>
105                             <td><s:property value="#computerInfo.os"/></td>
106                         </tr>
107                         <tr>
108                             <th>ip地址</th>
109                             <td><s:property value="#computerInfo.ip"/></td>
110                         </tr>
111                         <tr>
112                             <th>计算机名称</th>
113                             <td><s:property value="#computerInfo.computerName"/></td>
114                         </tr>
115                         
116                         <tr>
117                             <th>Java版本</th>
118                             <td>JDK 1.8</td>
119                         </tr>
120                         <tr>
121                             <th>MYSQL版本</th>
122                             <td>5.7</td>
123                         </tr>
124                         <tr>
125                             <th>内存总量</th>
126                             <td><s:property value="#computerInfo.memTotal"/></td>
127                         </tr>
128                         <tr>
129                             <th>当前已使用内存</th>
130                             <td><s:property value="#computerInfo.memUse"/></td>
131                         </tr>
132                         <tr>
133                             <th>剩余内存</th>
134                             <td><s:property value="#computerInfo.memFree"/></td>
135                         </tr>
136                         
137                     </tbody>
138                 </table>
139             </div>
140         </fieldset>
141         <fieldset class="layui-elem-field">
142             <legend>开发团队</legend>
143             <div class="layui-field-box">
144                 <table class="layui-table">
145                     <tbody>
146                         <tr>
147                             <th>版权所有</th>
148                             <td>xxxxx(xxxx)
149                                 <a href="http://www.xxx.com/" class='x-a' target="_blank">访问官网</a></td>
150                         </tr>
151                         <tr>
152                             <th>开发团队</th>
153                             <td>xxxxxx</td></tr>
154                     </tbody>
155                 </table>
156             </div>
157         </fieldset>
158         <blockquote class="layui-elem-quote layui-quote-nm">感谢layui,百度Echarts,jquery,本系统由x-admin提供技术支持。</blockquote>
159     </div>
160         <script>
161         var _hmt = _hmt || [];
162         (function() {
163           var hm = document.createElement("script");
164           hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
165           var s = document.getElementsByTagName("script")[0]; 
166           s.parentNode.insertBefore(hm, s);
167         })();
168         </script>
169     </body>
170 </html>

welcom.jsp

在运行中出现了这样的问题；

原因是出现了死循环

解决方法：

将default.jsp中改为：

<body>

<%response.sendRedirect(request.getContextPath()+"/GetDataAction_getIndex"); %>

</body>

在GetDataAction.java加入：

public String getIndex() throws Exception {
        
        return "index";
    }

getData(）返回的是：

return "welcome";

在struts.xml中加入结果集：

 <!-- 允许所有方法 -->
            <global-allowed-methods>regex:.*</global-allowed-methods>
            <action name="GetDataAction_*" class="com.guiyan.web.GetDataAction" method="{1}">
                <result name="welcome">/welcome.jsp</result>
                <result name="index">/index.jsp</result>
            
            </action>

最终首页页面显示效果：

查看全文

相关阅读:
【CF446D】DZY Loves Games 高斯消元+矩阵乘法
 【CF542D】Superhero's Job 暴力
 【CF660E】Different Subsets For All Tuples 结论题
 【CF666C】Codeword 结论题+暴力
 【CF666E】Forensic Examination 广义后缀自动机+倍增+线段树合并
 【CF461E】Appleman and a Game 倍增floyd
【CF471E】MUH and Lots and Lots of Segments 扫描线+并查集+线段树+set
【CF480D】Parcels DP
【CF497E】Subsequences Return 矩阵乘法
 SSAS 项目部署失败的问题

原文地址：https://www.cnblogs.com/jiguiyan/p/10858813.html

用户模块 之 首页的显示