首先创建一个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"></i>系统管理</a><ul class="sub-menu"><c:if test="${Type=='1'}"> <li><a href="./UserList"><i class="icon-font"></i>用户管理</a></li><li><a href=""><i class="icon-font"></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"></i><span>欢迎您飞讯管理员端</span></div></div><div class="result-wrap">欢迎 管理员: <span style="color: BLUE"><%=session.getAttribute("username")%></span></div></div><!--/main-->
</div>
</body>
</html>
运行结果
实现了大体的框架