登录业务的前端是admin_login.jsp网页，界面如下图所示：
JSP网页是在HTML网页的基础上，插入了Java程序段和JSP标记，可以将后端数据动态插入到JSP页面。
编写admin_login.jsp
在eshop项目WebContent目录下新建admin目录，在admin目录下新建admin_login.jsp网页文件，文件代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String host=request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+host+"/";
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城管理员登录</title>
<!-- 导入css样式文件 -->
<link type="text/css" rel="stylesheet" href="<%=host %>/admin/css/common.css" />
<link type="text/css" rel="stylesheet" href="<%=host %>/admin/css/login.css" />
<!-- 导入jquery文件 -->
<script type="text/javascript" src="<%=host %>/script/jquery-1.9.1.js" charset="utf-8"></script>
<script>
/*验证表单数据不能为空*/
function check(){
var value = $.trim($("#name").val());
/*判断登录账号是否为空*/
if(value == null || value == ''){
alert("登录账号不能为空");
return false;
}
value = $.trim($("#psw").val());
/*判断登录密码是否为空*/
if(value == null || value == ''){
alert("登录密码不能为空");
return false;
}
return true;
}
</script>
</head>
<body>
<div class="content">
<div class="titlebar">
<div class="title">商城后端管理系统</div>
</div>
<div class="loginbox">
<div class="logintitle">登录商城后端管理系统</div>
<form action="<%=host%>/admin/shopmanager/verifyuser.do" id="categoryForm" onsubmit="return check()">
<div class="formbox">
<div class="inputitem">
<div class="inputtext">登录账号：</div>
<div class="inputedit">
<input type="text" id="name" name="name" value="" />
</div>
</div>
<div class="inputitem">
<div class="inputtext">登录密码：</div>
<div class="inputedit">
<input type="password" id="psw" name="psw" value="" />
</div>
</div>
<div class="inputitem">
<div class="info">${info}</div>
</div>
<div class="submitbox">
<button type="submit" class="roundbtn" onclick="">登录</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>在admin_login.jsp网页中，Java程序段的host变量指向项目部署后的根目录。使用host变量可以解决因相对路径出现的问题。例如在JSP页面中调用Controller类的do方法时，就需要在路径前面拼接host变量指向的值。
admin_login.jsp网页的check()方法是表单提交前的验证方法，用于验证登录账号和登录密码的input输入域不能为空。
admin_login.jsp网页的form表单提交给ShopManagerControll类的verifyuser.do方法，该方法处理商城管理员登录请求。如果登录成功，该方法会直接跳转到admin_index.jsp页面，如果登录失败该方法返回登录失败信息，失败信息存储在返回的info对象中。
admin_login.jsp网页引入了common.css、login.css和jquery-1.9.1.js文件。需要在项目中添加这些文件。
编写common.css文件
common.css文件是商城管理模块通用的css文件，该文件定义了商城管理模块的JSP网页所需的通用样式。
在admin目录下新建css目录，在css目录下新建common.css样式文件，文件代码如下：
@CHARSET "UTF-8";
/*全局通用初始样式*/
body{margin:0; padding:0;}
ul{display:block;margin:0;padding:0;list-style:none;}
li{display:block;margin:0;padding:0;list-style: none;}
img{border:0; margin: 0;}
dl,dt,dd,span{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
table{border-collapse:collapse;border-spacing: 0;}
button{border:0; background-color: transparent; outline: none;}
.roundbtn{width: 100px;height: 45px; line-height: 45px;border-radius:5px; background-color: #0099ff; color:#ffffff;}编写login.css文件
login.css是admin_login.jsp的主要样式文件。
在admin目录的css目录下新建login.css样式文件，文件代码如下：
.content{width:100%;overflow: hidden;}
.titlebar{width:100%;height:60px;background-color:#0099ff;}
.title{width:100%;height: 60px;line-height: 60px; font-size: 18px; color: #ffffff;margin-left: 20px;}
.loginbox{width:960px;margin: 30px auto; overflow: hidden; height: 400px;}
.logintitle{width:100%;height: 60px;line-height: 60px;font-size: 18px; color: #000000;}
.formbox{width:400px;}
.formbox input{width: 100%;}
.inputitem{width:100%;height:60px;line-height: 60px;}
.inputtext{width:auto;float:left;}
.inputedit{width:200px;float:left;margin-left: 20px;}
.submitbox{width:100%; margin: 30px auto; text-align: center;}
.info{width:100%; color: #ff0000;}添加jquery-1.9.1.js文件
jquery-1.9.1.js文件是jQuery推出的js框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
在eshop项目WebContent目录下新建script目录，从网上下载jquery-1.9.1.js文件，并复制到script目录下。
所有前端文件编写完成后，在Server中运行admin_login.jsp，输入错误的账号和密码并提交表单，后端会返回错误信息显示在admin_login.jsp页面中，输入正确的账号（admin）和密码（123456），登录成功后，网页将跳转到main_index.jsp页面，但我们还没有创建main_index.jsp页面，因此浏览器会显示找不到网页的错误信息。