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();
}
}