资源
完全免费的LOGO在线设计制作工具
经典模块化前端框架块化前端框架layui
HTML 取色器
项目结构
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>oe</display-name>
<jsp-config>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/fmt</taglib-uri>
<taglib-location>/WEB-INF/fmt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/fmt-rt</taglib-uri>
<taglib-location>/WEB-INF/fmt-rt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/core</taglib-uri>
<taglib-location>/WEB-INF/c.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/core-rt</taglib-uri>
<taglib-location>/WEB-INF/c-rt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/sql</taglib-uri>
<taglib-location>/WEB-INF/sql.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/sql-rt</taglib-uri>
<taglib-location>/WEB-INF/sql-rt.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/x</taglib-uri>
<taglib-location>/WEB-INF/x.tld</taglib-location>
</taglib>
<taglib>
<taglib-uri>http://java.sun.com/jsp/jstl/x-rt</taglib-uri>
<taglib-location>/WEB-INF/x-rt.tld</taglib-location>
</taglib>
<jsp-property-group>
<description>html encoding</description>
<display-name>JSPConfiguration</display-name>
<url-pattern>*.html</url-pattern>
<el-ignored>true</el-ignored>
<page-encoding>UTF-8</page-encoding>
<scripting-invalid>false</scripting-invalid>
<include-prelude></include-prelude>
<include-coda></include-coda>
<!-- 解决jsp include html 乱码问题 -->
</jsp-property-group>
</jsp-config>
<welcome-file-list>
<welcome-file>login.jsp</welcome-file>
<!-- 网页默认访问页面 -->
</welcome-file-list>
</web-app>
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在线考试系统</title>
<link rel="stylesheet" type="text/css" href="css/layui/css/layui.css">
</head>
<style>
.layui-tab {
margin-right: 10%;
margin-top: 10%;
background-color: #EFFBFB;
}
body {
background-color: #D8D8D8;
}
</style>
<body class="layui-layout-body">
<div class="layui-fluid">
<div class="layui-tab layui-layout-right ">
<ul class="layui-tab-title">
<li class="layui-this">登录</li>
<li>注册</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<form class="layui-form" action="login" method="POST">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="id" required lay-verify="number" placeholder="请输入学号/工号" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份:</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="学生">
<input type="radio" name="status" value="2" title="老师">
<input type="radio" name="status" value="3" title="管理员" checked>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<div class="layui-tab-item">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">重复密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<c:if test="${not empty requestScope.message}">
<script>
alert("<c:out value="${requestScope.message}"></c:out>");
</script>
</c:if>
<script src="css/layui/layui.js"></script>
<script>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use('element', function () {
var element = layui.element;
//…
});
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
});
});
</script>
</html>
login.java
package pers.ant.oe.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import pers.ant.oe.bean.adminBean;
import pers.ant.oe.dao.adminDao;
@SuppressWarnings("serial")
@WebServlet("/login")
//Servlet3可以通过注解的实现替代web.xml的配置
public class login extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userid = request.getParameter("id");
String password = request.getParameter("pwd");
String status = request.getParameter("status");
//System.out.println("id="+userid+" pwd="+password+" status="+status);查看信息
Integer id = new Integer(userid);
if(status.equals("1")) {
}else if(status.equals("2")) {
}else if(status.equals("3")) {
adminBean user = adminDao.check(id,password);
if(user==null) {
request.setAttribute("message", "用户名不存在或者密码错误");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else {
HttpSession session = request.getSession();
session.setAttribute("id",userid);
request.getRequestDispatcher("/admin/index.jsp").forward(request, response);
}
}
}
}
footer.html
<div class="layui-footer" style=" text-align: center;">
<!-- 底部固定区域 -->
<span>©由ant制作</span>
</div>
head.html
<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="img/admin.ico" class="layui-nav-img">
管理员
</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="">退出</a></li>
</ul>
</div>
left.html
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">学生管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">查看学生</a></dd>
<dd><a href="javascript:;">添加学生</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">老师管理</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">查看老师</a></dd>
<dd><a href="javascript:;">添加老师</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">发布通知</a></li>
</ul>
</div>
</div>
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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="css/layui/css/layui.css">
<link rel="short-icon" href="img/logo.ico">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<%@include file="head.html" %>
<%@include file="left.html" %>
<div class="layui-body">
<!-- 内容主体区域 -->
<div style="padding: 15px;">内容主体区域</div>
</div>
<%@include file="footer.html" %>
</div>
<script src="css/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
运行截图