llayui寫的頁面樣式參考
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var = "ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ipms人員信息管理系統</title>
<link type="text/css" rel ="stylesheet" href="${ctx }/layui/css/layui.css"></link>
<link type="text/css" rel="stylesheet" href="${ctx }/css/index.css"></link>
<script type="text/javascript" src="${ctx }/js/jquery-3.2.1.min.js"></script>
<!-- 這個script必須放到這里,不能移到最上面,否則功能不管用 -->
<script type="text/javascript" src="${ctx }/layui/layui.all.js"></script>
<%-- <script src="${ctx }/layui/layui.js" charset="utf-8"></script> --%>
<script type="text/javascript" src="${ctx }/js/index.js"></script>
<script type="text/javascript" src="${ctx }/js/timeChange.js"></script>
</head>
<body>
<!-- 最上面導航欄 start -->
<div class="layui-row layui-bg-black " id="topbox" >
<div class="layui-col-md5 ">
<div class="grid-demo" style="padding:15px 0 0 20px;">
<h3>ipms人員信息管理系統</h3>
</div>
</div>
<div class="layui-col-md5 ">
<ul class="layui-nav ">
<li class="layui-nav-item"><a href="">最新活動</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">產品功能</a>
<dl class="layui-nav-child">
<dd><a href="">選項1</a></dd>
<dd><a href="">選項2</a></dd>
<dd><a href="">選項3</a></dd>
</dl>
</li>
<li class="layui-nav-item "><a href="">大數據</a></li>
<li class="layui-nav-item ">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動模塊</a></dd>
<dd><a href="">后台模版</a></dd>
<dd class="layui-this"><a href="">選中項</a></dd>
<dd><a href="">電商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item "><a href="">關於我們</a></li>
</ul>
</div>
<div class="layui-col-md2">
<div class="grid-demo" style="padding:10px 20px 0 0;">
<%-- <form action="coredom06.jsp" method="post">
<input type="text" name="uname" value="${param.uname}">
<input type="submit" value="登錄">
</form>
<c:if test="${param.uname=='admin' }" var=”adminchock”>
<c:out value="管理員歡迎您！">
</c:out>
</c:if>
${adminchock}
<c:if test="${param.username != null }" >
<c:out value="${param.username}:歡迎你~">
</c:out>
</c:if>--%>
<a href="javascript:;" class="layui-btn layui-btn-warm layui-btn-radius"
style="float:left;">注冊</a>
<a href="javascript:;" class="layui-btn layui-btn-radius" style="float:left;">登錄</a>
</div>
</div>
</div>
<!--最上面導航欄 end -->
<!--中間部分 start -->
<div class="layui-row" style="margin-top:90px;">
<div class="layui-col-xs2 ">
<!--側邊導航 start 占1 -->
<div class="layui-side">
<div class="layui-side-scroll">
<!--用的是側邊導航 -->
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="demo" style="top:60px;position:fixed; z-index:100;">
<!-- <ul class="layui-nav layui-nav-tree "> </ul>-->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認展開</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">選項1</a></dd>
<dd><a href="javascript:;">選項2</a></dd>
<dd><a href="">跳轉</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動模塊</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">電商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">產品</a></li>
<li class="layui-nav-item"><a href="">大數據</a></li>
</ul>
</div>
</div>
<!--側邊導航 end -->
</div>
<!-- 用列偏移留出來的白 占10 start-->
<div class="layui-col-xs9 layui-col-md-offset2" id="middlebox" >
<div class="grid-demo layui-carousel" id="test10">
<!--大圖輪播 start -->
<div carousel-item="">
<div><img src="${ctx }/imgs/1.png"></div>
<div><img src="${ctx }/imgs/2.png"></div>
<div><img src="${ctx }/imgs/3.png"></div>
<div><img src="${ctx }/imgs/4.png"></div>
</div>
<!--大圖輪播 end -->
</div>
<div class="layui-row layui-col-space30" id="dakuang" style="margin-top:30px;
position:relative;top:0px;">
<div class="layui-col-xs4">
<div class="grid-demo">
<div id="leftadv">
<div style="border-bottom:2px solid #faca52;padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b> 焦點要聞</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div class="line-limit-length" style="margin:10px 0; font-size:16px; overflow:hidden;">
<!--遍歷資料庫database中的數據 -->
<ul id="cyclezl"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="grid-demo">
<div id="rightadv">
<div style="border-bottom:2px solid #faca52; padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b> 項目中心</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div class="line-limit-length" style="margin:10px 0; font-size:16px;" >
<!--遍歷項目管理表projet中的數據 -->
<ul id="cyclexm"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="grid-demo" >
<div id="leftadv" >
<div style="border-bottom:2px solid #faca52;padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b> 通知公告</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div class="line-limit-length " style="margin:10px 0; font-size:16px;overflow:hidden;">
<!--遍歷公告表notice中的數據 -->
<ul id="cycletz"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="grid-demo" >
<div id="leftadv" >
<div style="border-bottom:2px solid #faca52;padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b>學員風采</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div style="margin:10px 0; font-size:16px;">
<!--遍歷資料庫database中的數據 -->
<ul id="cyclexy"></ul>
</div>
</div>
</div>
</div>
</div>
<!--下一行 -->
<!-- <div class="layui-row " id="" style="margin-top:30px;position:relative;top:0px;">
</div> -->
</div>
<!-- 用列偏移留出來的白 占10 end-->
</div>
<!--中間部分 end -->
<!-- 最下面 -->
<div class="layui-row" style="position:absolate;bottom:0px;">
<div class="layui-col-md6 layui-bg-black" style="height:45px;padding-top:15px;" >
<div class="grid-demo "> </div>
</div>
<div class="layui-col-md2 layui-bg-black" style="height:45px;padding-top:15px;">
<div class="grid-demo ">@ ipms人員信息管理系統 歡迎您 ! </div>
</div>
<div class="layui-col-md4 layui-bg-black" style="height:45px;padding-top:15px;" >
<div class="grid-demo "> </div>
</div>
</div>
</body>
</html>
js頁面ajax代碼傳遞后台數據
$(function() {
/* 最上面導航欄 js start */
layui.use('element', function(){
var element = layui.element; //導航的hover效果、二級菜單等功能，需要依賴element模塊
element.render();
//監聽導航點擊
element.on('nav(demo)', function(elem){
//console.log(elem)
layer.msg(elem.text());
});
});
/* 最上面導航欄 js end */
layui.use(['carousel','form'], function(){
var carousel = layui.carousel,form = layui.form;
//圖片輪播
carousel.render({
elem:'#test10',
width:'950px',
height:'440px',
interval:3000
});
});
/**
* 數據返回主頁所用ajax
*
*/
/**
* a方法調用(傳到哪個controllor頁面,返回回來的哪個json對象,給index.jsp頁面的哪個id追加內容,jsp頁面顯示哪個參數);
*/
a("/IPMS/database/selectDatabase.do","Database","#cyclezl","filename"); //Database表參數傳遞
a("/IPMS/projectmsg/selectProject.do","Projet","#cyclexm","pname"); //Projet表參數傳遞
a("/IPMS/notice/selectNotice.do","Notice","#cycletz","title");//Notice表參數傳遞
function a(urll,project,tagid,name){
$.ajax({
dataType :"json",
type : "post",
url : urll,
success : function(data) {
//可以取到數據
// console.log(data);
//for(var i=0;i< project.length; i++) 當項查找的數據是從后台傳過來的時候就得用中括號[]而不能用.了,否則就出不來數據
for(var i=0;i<10; i++)
{
//循環每一個標簽,就開始向標簽中塞東西了
//console.log(data[project]);
// console.log(data[project][i].createtime);
$(tagid).append("<li style='font-size:16px;'>" +
"<i class='layui-icon' style='font-size:5px;'></i> " +
"<b class='line-limit-length' style='width:200px;display:inline-block;'>"+ data[project][i][name] +"</b>"+
"<span style='font-size:14px;float:right;'>"+ddate(data[project][i].createtime)+"</span></li>");
}
},
error: function() {
alert("后台異常,請聯系管理員!");
}
});
}
/*這個v方法調用是給頁面最下面要顯示的圖片傳遞參數
* a("","Usertable","#cyclexy","username");*/
v();
function v () {
$.ajax({
dataType :"json",
type : "post",
url : "/IPMS/Usertable/selectUsertable.do",
success : function(data) {
for(var i=0;i<4; i++)
{
$("#cyclexy").append("<li class='line-limit-length' " +
"style='width:220px;height:190px;font-size:14px;text-align:center;padding:5px; display:inline-block;'>" +
"<img src='/IPMS/imgs/"+data.Usertable[i].headportriait+"'" +
"style='background-size:100% 100%; width:170px; height:170px;'><br>" +
data.Usertable[i].username+"</li>");
}
},
error: function() {
alert("后台異常,請聯系管理員!");
}
});
}
});
后台四個頁面controllor層之一,內容參考
package com.ipms.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
import com.ipms.model.Database;
import com.ipms.service.DatabaseService;
@Controller
@RequestMapping("/database")
public class DatabaseController {
@Autowired
private DatabaseService databaseService;
/**
* index頁面查詢數據所需方法
*
* @return Projet
*/
@ResponseBody
@RequestMapping("/selectDatabase")
public String selectDatabase() {
JSONObject jo = new JSONObject();
List<Database> da = databaseService.selectAll();
jo.put("Database", da);
return jo.toJSONString();
}
}