导入项目文件后开始编写管理员界面
首先创建loginController 和对应的视图层mlogin.jsp
测试框架是否成功
@Controller @RequestMapping("/login") public class LoginController extends BaseController { @RequestMapping("/login") public String login(){ return "/login/mlogin"; } }
1.开始编写管理员界面：
首先在common文件夹抽取js文件
<%--引入jstl--%>
<%@ taglib prefix="c" uri="/WEB-INF/tlds/c.tld" %>
<%@ taglib prefix="fmt" uri="/WEB-INF/tlds/fmt.tld" %>
<%@ taglib prefix="fn" uri="/WEB-INF/tlds/fn.tld" %>
<%@ taglib prefix="pg" uri="/WEB-INF/tlds/pager-taglib.tld" %>
<%--封装方法--%>
<c:set var="bathPath" value="${pageContext.request.contextPath}"/>
<script>
var bathPath ="${bathPath}";
</script>
写 在mlogin.jsp,加入一个背景图查看能否成功
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglib.jsp"%>
<html>
<head>
<title>管理员登录</title>
<%--引入css文件--%>
<link type="text/css" rel="stylesheet" href="${bathPath}/resource/ml/css/style.css">
<link type="text/css" rel="stylesheet" href="${bathPath}/resource/css/pintuer.css">
<link type="text/css" rel="stylesheet" href="${bathPath}/resource/css/admin.css"> <%--颜色--%>
<%--引入jquery文件和js文件--%>
<script src="${bathPath}/resource/js/jquery.js"></script>
<script src="${bathPath}/resource/js/pintuer.js"></script>
</head>
<body>
<div class="bg"></div>
管理员登录页面登录
</body>
</html>
OK，继续编写前端登录页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglib.jsp"%>
<html>
<head>
<title>管理员登录</title>
<%--引入css文件--%>
<link type="text/css" rel="stylesheet" href="${bathPath}/resource/ml/css/style.css">
<link type="text/css" rel="stylesheet" href="${bathPath}/resource/css/pintuer.css">
<link type="text/css" rel="stylesheet" href="${bathPath}/resource/css/admin.css"> <%--颜色--%>
<%--引入jquery文件和js文件--%>
<script src="${bathPath}/resource/js/jquery.js"></script>
<script src="${bathPath}/resource/js/pintuer.js"></script>
</head>
<body>
<div class="bg"></div>
<div class="container">
<div class="line bouncein">
<div class="xs6 xm4 xs3-move xm4-move">
<div style="height: 150px;"></div>
<div class="media media-y margin-big-bottom"></div>
<form action="${bathPath}/login/toLogin" method="post">
<div class="panel login-box">
<div class="text-center margin-big padding-big-top"><h1>管理员登录</h1></div>
<div class="panel-body" style="padding: 30px;padding-bottom: 10px;padding-top: 10px">
<div class="form-group">
<div class="field field-icon-right">
<input type="text" class="input input-big" name="username" value="admin" placeholder="登录账号" data-validate="required:请填写账号">
<span class="icon icon-user margin-small"></span>
</div>
</div>
<div class="form-group">
<div class="field field-icon-right">
<input type="password" class="input input-big" name="password" value="111111" placeholder="请输入密码" data-validate="required:请填写密码">
<span class="icon icon-user margin-small"></span>
</div>
</div>
</div>
<div style="padding: 30px;">
<input type="submit" class="button button-block bg-main text-big input-big" value="登录"/>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
在后端验证 一下