数据库程序设计第三天--框架搭建(layui)

一、说在前面

  今天目标完成后台框架的搭建,使用layUI的接口来搭建。

二、任务进度

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="Bean.*" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台布局</title>
  <link rel="stylesheet" href="layui/layui.css" >
  <script src="js/jquery-1.11.0.min.js"></script>
<title>隔离人员管理系统</title>
<style>
    /* #location{
        display:none;
    } */
</style>
</head>
<script>
    function onloadF(){
        //alert("登陆成功,欢迎您!");
        <%Object bean= request.getAttribute("bean"); %> 
        var level=${bean.level};
        //alert(level);
        if(level==0){
            //alert("我是管理员")
            document.getElementById('location').setAttribute("display","none")
        }
    } 
</script>
<body class="layui-layout-body" onload="onloadF()">
<% 
    Object message = request.getAttribute("message");
    if(message!=null && !"".equals(message)){
%>
    <script type="text/javascript">
        alert("<%=request.getAttribute("message")%>");
    </script>
<%
} 
%>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">隔离人员管理系统</div>
    <!-- 头部区域(可配合layui已有的水平导航) -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
         Yogurt
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="index.html">退出</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
      <c:if test="${bean.level ==0}">
      <li class="layui-nav-item " id="admin">
          <a class="" href="javascript:;">管理员权限</a>
          <dl class="layui-nav-child" >
            <dd><a href="adminShowServlet" target="frame" >用户信息管理</a></dd>
            <dd><a href="isolatedAreaShowServlet" target="frame">隔离地区信息管理</a></dd>
            <dd><a href="peopleShowServlet" target="frame">隔离人员信息管理</a></dd>
          </dl>
        </li>
      </c:if>
       <c:if test="${bean.level ==1}">
       <li class="layui-nav-item" id="location" >
          <a href="javascript:;">隔离地权限</a>
          <dl class="layui-nav-child">
            <dd><a href="areaShowServlet?wname=${bean.account}" target="frame">隔离人员信息管理</a></dd>
            <dd><a href="areaMessegServlet?wname=${bean.account}" target="frame">隔离地信息</a></dd>
          </dl>
        </li>
       </c:if>
       <c:if test="${bean.level ==2}">
        <li class="layui-nav-item" id="people">
          <a href="javascript:;">隔离人员权限</a>
          <dl class="layui-nav-child">
            <dd><a href="personalShowServlet?pname=${bean.account}" target="frame">个人信息</a></dd>
            <dd><a href="personalMessegShow?pname=${bean.account}" target="frame">隔离记录</a></dd>
          </dl>
        </li>
       </c:if>
        
        
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 10px" >
    <iframe id="righFrame" name="frame"  width="100%" height="550px" scrolling="no"  style="border:0px solid #CCC;"></iframe> 
    </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
               底部边界
  </div>
</div>
<script src="layui/layui.all.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>
</body>
</html>
houtai

 

posted @ 2020-07-12 11:40  酸奶面包  阅读(227)  评论(0编辑  收藏  举报