码迷，mamicode.com
首页 > Web开发 > 详细

框架练习--layui, ajax controllor

时间：2018-03-20 15:22:14      阅读：457      评论：0      收藏：0      [点我收藏+]

标签：显示   context   主页   导航   odi   方案   sid   tor   二级菜单   

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>&nbsp" +
						"<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();
	}
}

　　

 

框架练习--layui, ajax controllor

标签：显示   context   主页   导航   odi   方案   sid   tor   二级菜单   

原文地址：https://www.cnblogs.com/ziyanxiaozhu/p/8608967.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！