用戶模塊 之 首頁的顯示
在上一篇博文中咱們實現了三大框架的整合，實現的效果就是在運行的時候沒有報錯javascript
分析主頁數據的顯示：
初始主頁面的顯示：css
初始時的訪問頁面：html
初始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進行訪問java
<welcome-file-list>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
因爲頁面都是靜態的，所以須要在jsp中寫入Java代碼，進行獲取信息，mysql
其獲取信息的的思路：jquery
在項目中新建一個default.jspweb
初始在default.jsp中加入代碼，直接訪問action：sql
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>
用圖分析主頁數據的顯示
在主頁的顯示中，須要進行以下的修改：chrome
操做系統、本計算機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 }
在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"></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"></i> 39 資訊 40 </a> 41 </dd> 42 <dd> 43 <a onclick="x_admin_show('圖片','http://www.baidu.com')"> 44 <i class="iconfont"></i> 45 圖片 46 </a> 47 </dd> 48 <dd> 49 <a onclick="x_admin_show('用戶','http://www.baidu.com')"> 50 <i class="iconfont"></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"></i> 88 <cite>用戶管理</cite> 89 <i class="iconfont nav_right"></i> 90 </a> 91 <ul class="sub-menu"> 92 <li> 93 <a _href="#"> 94 <i class="iconfont"></i> 95 <cite>用戶列表</cite> 96 97 </a> 98 </li> 99 <li> 100 <a _href="#"> 101 <i class="iconfont"></i> 102 <cite>用戶刪除</cite> 103 104 </a> 105 </li> 106 </ul> 107 </li> 108 <li> 109 <a href="javascript:;"> 110 <i class="iconfont"></i> 111 <cite>帖子管理</cite> 112 <i class="iconfont nav_right"></i> 113 </a> 114 <ul class="sub-menu"> 115 116 <li> 117 <a href="javascript:;"> 118 <i class="iconfont"></i> 119 <cite>帖子列表</cite> 120 <i class="iconfont nav_right"></i> 121 </a> 122 <ul class="sub-menu"> 123 <li> 124 <a _href="#"> 125 <i class="iconfont"></i> 126 <cite>已完結</cite> 127 128 </a> 129 </li> 130 <li> 131 <a _href="#"> 132 <i class="iconfont"></i> 133 <cite>未完結</cite> 134 135 </a> 136 </li> 137 138 139 </ul> 140 </li> 141 <li> 142 <a _href="#"> 143 <i class="iconfont"></i> 144 <cite>帖子刪除</cite> 145 146 </a> 147 </li> 148 </ul> 149 </li> 150 <li> 151 <a href="javascript:;"> 152 <i class="iconfont"></i> 153 <cite>系通通計</cite> 154 <i class="iconfont nav_right"></i> 155 </a> 156 <ul class="sub-menu"> 157 <li> 158 <a _href="#"> 159 <i class="iconfont"></i> 160 <cite>整體數量顯示</cite> 161 </a> 162 </li> 163 <li> 164 <a _href="#"> 165 <i class="iconfont"></i> 166 <cite>整體數量詳細顯示</cite> 167 </a> 168 </li> 169 <li> 170 <a _href="#"> 171 <i class="iconfont"></i> 172 <cite>整體數量雷達圖</cite> 173 </a> 174 </li> 175 <li> 176 <a _href="#"> 177 <i class="iconfont"></i> 178 <cite>帖子大比拼</cite> 179 </a> 180 </li> 181 <li> 182 <a _href="#"> 183 <i class="iconfont"></i> 184 <cite>每週用戶統計</cite> 185 </a> 186 </li> 187 <li> 188 <a _href="#"> 189 <i class="iconfont"></i> 190 <cite>每週數量統計</cite> 191 </a> 192 </li> 193 194 </ul> 195 </li> 196 <li> 197 <a href="javascript:;"> 198 <i class="iconfont"></i> 199 <cite>圖標字體</cite> 200 <i class="iconfont nav_right"></i> 201 </a> 202 <ul class="sub-menu"> 203 <li> 204 <a _href="unicode.html"> 205 <i class="iconfont"></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"></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>
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="width: 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>
在運行中出現了這樣的問題；
緣由是出現了死循環
解決方法：
將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>
最終首頁頁面顯示效果：
相關文章
- 1. 用戶模塊 之 完成用戶列表的分頁顯示
- 2. 小程序首頁不顯示tabbar，而非首頁顯示tabbar的方法
- 3. ZENCART首頁顯示 Featured Categorie的方法
- 4. 製做首頁的顯示列表。
- 5. maven項目首頁顯示的問題
- 6. 留言板之首頁模塊
- 7. 製做首頁的顯示列表
- 8. 製作首頁的顯示列表。
- 9. 製作首頁的顯示列表
- 10. CRM之用戶模塊
- 更多相關文章...
- • Thymeleaf顯示Bean的值 - Thymeleaf 教程
- • 使用 XSLT 顯示 XML - XML 教程
- • 委託模式
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 用戶模塊 之 完成用戶列表的分頁顯示
- 2. 小程序首頁不顯示tabbar，而非首頁顯示tabbar的方法
- 3. ZENCART首頁顯示 Featured Categorie的方法
- 4. 製做首頁的顯示列表。
- 5. maven項目首頁顯示的問題
- 6. 留言板之首頁模塊
- 7. 製做首頁的顯示列表
- 8. 製作首頁的顯示列表。
- 9. 製作首頁的顯示列表
- 10. CRM之用戶模塊