基于SpringBoot+Mybatis+JSP的班级管理项目（五）系统主页中心布局设计及用户展示

抓蛙宫城石

已于 2023-06-12 10:53:35 修改

阅读量157

点赞数

文章标签： java mybatis spring boot

于 2023-06-12 09:45:16 首次发布

本文链接：https://blog.csdn.net/m0_64393446/article/details/131162433

版权

一、主页设计

主页

index.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
</head>
<%--frameset使用时不能存在body标签
    cols:将页面划分的列数
    rows：将页面划分的行数
    注意：在一个frameset上，cols rows不能同时出现
--%>
<frameset rows="50px,*" border="1px" borderColor="black" noresize = "noresize">

    <%--引入标题--%>
    <frame src="${pageContext.request.contextPath}/back/main/head.jsp">
        <frameset cols="200px,*">

            <frame src="${pageContext.request.contextPath}/back/main/menu.jsp">

            <%--中心布局--%>
            <frame src="${pageContext.request.contextPath}/back/main/home.jsp" name="content">

        </frameset>
</frameset>
</html>

menu.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<ul class="list-group" style="">
    <li class="list-group-item"><a href="${pageContext.request.contextPath}/back/student/index.jsp" target="content">学生管理</a></li>
    <li class="list-group-item"><a href="${pageContext.request.contextPath}/back/group/index.jsp" target="content">小组管理</a></li>
    <li class="list-group-item"><a href="${pageContext.request.contextPath}/back/clazz/index.jsp" target="content">班级管理</a></li>
    <li class="list-group-item"><a href="${pageContext.request.contextPath}/back/city/index.jsp" target="content">城市管理</a></li>
    <li class="list-group-item"><a href="${pageContext.request.contextPath}/back/tag/index.jsp" target="content">标签管理</a></li>
</ul>

home.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>

<h1>我是中心页面</h1>

运行界面：

二、模块设计

student

index.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生管理</title>
</head>
<body>

<h1>学生管理</h1>

</body>
</html>

clazz

index.jsp

<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>班级管理</title>
</head>
<body>

<h1>班级管理</h1>

</body>
</html>

运行界面:

主页的home路径上加入name = "content", menu.jsp中路径加入target = "content"，这样就能在点击菜单时跳转页面，改变home页

三、用户展示

head.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">班级管理系统 <small>V1.0</small></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">
                <c:if test="${sessionScope.user!=null}">
                    <li><a href="javascript:;">欢迎:<span class="text-danger"> ${sessionScope.user.name}</span></a></li>
                    <a href="${pageContext.request.contextPath}/user/logout" target="_top" type="button"
                       class="btn btn-danger navbar-btn">退出</a>
                </c:if>
                <c:if test="${sessionScope.user==null}">
                    <li><a href="javascript:;"><span class="text-info">您当前还是访客身份，赶紧去登录吧~~</span></a></li>
                    <a href="${pageContext.request.contextPath}/back/login.jsp" target="_top" type="button"
                       class="btn btn-primary navbar-btn">登录</a>
                </c:if>

            </ul>
        </div>
    </div>
</nav>

退出登录功能实现

userController.java

//用户退出
    @RequestMapping("logout")
    public String logout(HttpSession session){
        session.invalidate();
        return "redirect:/back/login.jsp";
    }

四、项目启动

未登录时

登录时

抓蛙宫城石

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于SpringBoot+Mybatis+JSP的班级管理项目（五）系统主页中心布局设计及用户展示

主页的home路径上加入name = "content", menu.jsp中路径加入target = "content"，这样就能在点击菜单时跳转页面，改变home页。
复制链接

扫一扫