飞讯管理员端的主页设计

最新推荐文章于 2022-11-08 14:32:40 发布

Nine-Theta

最新推荐文章于 2022-11-08 14:32:40 发布

阅读量1.3k

点赞数

分类专栏：创新实训文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_46025739/article/details/123427456

版权

创新实训专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先创建一个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: NineTheta
  Date: 2022/2/28
  Time: 12:44
  To 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>

运行结果

实现了大体的框架

Nine-Theta

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
飞讯管理员端的主页设计

首先创建一个web项目，由于需要使用react，则使用npm安装react与antdnpm i react react-dom 然后在目录中可见此两个文件夹之后使用react需要将jsx翻译为js语句，使用babel。在页面中引入<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>即可实现翻译之后进行react测试，是否能够正常使用test.html
复制链接

扫一扫