框架练习--layui, ajax controllor

发布时间：2023-09-06 01:46责任编辑：郭大石关键词：暂无标签

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 {@Autowiredprivate 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

原文地址：https://www.cnblogs.com/ziyanxiaozhu/p/8608967.html

框架练习--layui, ajax controllor

知识推荐