飞讯管理员端的主页设计

首先创建一个web项目，由于需要使用react，则使用npm安装react与antd

npm i react react-dom

然后在目录中可见

此两个文件夹

之后使用react需要将jsx翻译为js语句，使用babel。在页面中引入

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

即可实现翻译

之后进行react测试，是否能够正常使用

test.html

<!DOCTYPE html>
<html lang="en">
<head><title>123</title>
</head>
<body><div id="test"></div><script src="node_modules/react/umd/react.development.js"></script><script src="node_modules/react-dom/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script><script type="text/babel">const VDOM=<h1>123123</h1>ReactDOM.render(VDOM,document.getElementById('test'))</script></body>
</html>

运行结果为

成功渲染

之后设计主页index：想法为分为left的列表部分和上端的欢迎界面与中间的主体显示部分，因为不同页面的left列表与上端不变，所以先设计left与top部分。

left.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>飞讯管理端</title><link rel="stylesheet" type="text/css" href="../css/common.css"/><link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body><ul class="sidebar-list"><li><a href="#"><i class="icon-font">&#xe018;</i>系统管理</a><ul class="sub-menu"><c:if test="${Type=='1'}"> <li><a href="./UserList"><i class="icon-font">&#xe006;</i>用户管理</a></li><li><a href=""><i class="icon-font">&#xe006;</i>会议室管理</a></li></c:if></ul></li></ul>
</body>
</html>

top.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="../css/common.css"/><link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<div class="topbar-inner clearfix"><div class="topbar-logo-wrap clearfix"><h1 class="topbar-logo none"><a href="index.html" class="navbar-brand">后台管理</a></h1><ul class="navbar-list clearfix"><li><a class="on" href="index.jsp">首页</a></li><li><a href="index.jsp" target="_blank">飞讯管理员端</a></li></ul></div><div class="top-info-wrap"><ul class="top-info-list clearfix"><li><a href="login.jsp">退出</a></li></ul></div>
</div>
</body>
</html>

index.jsp引入两个部分

<%--Created by IntelliJ IDEA.User: NineThetaDate: 2022/2/28Time: 12:44To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>餐厅点餐管理系统</title><link rel="stylesheet" type="text/css" href="css/common.css"/><link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div class="topbar-wrap white"><jsp:include page="/main/top.jsp"></jsp:include>
</div>
<div class="container clearfix"><div class="sidebar-wrap"><div class="sidebar-title"><h1>菜单</h1></div><div class="sidebar-content"><jsp:include page="/main/left.jsp"></jsp:include></div></div><!--/sidebar--><div class="main-wrap"><div class="crumb-wrap"><div class="crumb-list"><i class="icon-font">&#xe06b;</i><span>欢迎您飞讯管理员端</span></div></div><div class="result-wrap">欢迎   管理员: <span style="color: BLUE"><%=session.getAttribute("username")%></span></div></div><!--/main-->
</div>
</body>
</html>

运行结果