2分钟
任务 4 创建前端
任务目标
创建登录页JSP和登录成功页JSP。
任务步骤
1.编辑首页
修改已经存在index.jsp，使用如下代码进行替换，这里需要关注的是img标签的src属性，它填写的是之前创建的生成验证码Servlet的url。表单form的action属性填写之前创建的登录Servlet的url。若index.jsp不存在可以选中WebContent，在【New】菜单中选中【JSP File】创建一个新的JSP文件。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<form action="http://127.0.0.1:8080/testweb/DoLoginServlet" method="POST">
<fieldset>
<legend>请登录！</legend>
用户名:<input type="text" name="account" placehodler="输入用户名"><br><br>
密码: <input type="password" name="password" placehodler="输入密码"><br><br>
<img id="imgcode" alt="图片不存在" src="http://127.0.0.1:8080/testweb/DoValidateCodeServlet" height="40px"><a id="changeCode" href="#####"> 看不清，换一张！</a><br><br>
验证码：<input type="text" name="code">
<br><br>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>2.创建登录成功页
在webContent路径创建一个haveLogin.jsp页面用于对应登录成功后的跳转。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录成功</title>
</head>
<body>
<p>登录成功</p>
</body>
</html>
学员评价