《軟件工程綜合實踐》學習內容3
軟件工程綜合實踐轉眼已經接近尾聲了，通過這九天的學習，我們可以說是收獲頗豐。
在實踐的最後幾天，我們一步一步地完善網頁頁面，在網上找到相應的素材對其進行美工操作。網上的素材千千萬萬，但是找到合適的素材卻不簡單，好在經過一番耐心尋找之後，終於找到合適的代碼。經過修改完善之後，我們的主要代碼如下：
（1）登陸操作的代碼
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -->
<title>Login and Registration Form with HTML5 and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
<meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
<meta name="author"
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/animate-custom.css" />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="">
<strong>« 返回 </strong>上一級
</a>
<span class="right">
<a href=" #">
<strong>歡迎來到京東，祝你購物愉快！</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>J<span>D</span></h1>
</header>
<section>
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a class="hiddenanchor" id="toregister"></a>
<a class="hiddenanchor" id="tologin"></a>
<div id="wrapper">
<div id="login" class="animate form">
<!-- 這句是自己寫的 from 表單需要改成自己的 -->
<form action="<%=basePath%>user/login" autocomplete="on" method="post">
<h1>Log in</h1>
<p>
<label for="username" class="uname" data-icon="u" > Your username </label>
<font color="red">${unameErr }</font> <!-- 這句是自己寫的 -->
<!-- 輸入框的名字 需要和實體類中相應的屬性對應 -->
<input id="username" name="username" required="required" type="text" placeholder="Please input username"/>
</p>
<p>
<label for="password" class="youpasswd" data-icon="p"> Your password </label>
<font color="red">${pwdErr }</font> <!-- 這句是自己寫的 -->
<!-- 輸入框的名字 需要和實體類中相應的屬性對應 -->
<input id="pwd" name="pwd" required="required" type="password" placeholder="Please input pwd,eg. X8df!90EO" />
</p>
<p class="keeplogin">
<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
<label for="loginkeeping">Keep me logged in</label>
</p>
<p class="login button">
<input type="submit" value="Login" />
</p>
<p class="change_link">
<font color="red"> Welcome to JD.com!</font>
<a href="user/toaddUser" class="to_register">Join us</a>
</p>
</form>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
網頁效果圖：
（2）註冊操作的代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用戶註冊</title>
<STYLE type=text/css>
td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 24px;
color: blue;
}
</STYLE>
</head>
<body>
<divclass="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<center>
<span class="right">
<a href=" #">
<strong>歡迎來到京東，祝你購物愉快！</strong>
</a>
</span>
</center>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<center>
<h1><font color ="#D9D919" >J</font><font color="#FF0000"><span>D</span></font></h1>
</header>
</center>
<h1 align="center"><td><font color=blue>用戶註冊</font></td> </h1>
<div align="center">
<form name="reg" action="<%=basePath%>user/addUser" method="post" >
<table width="90%" border="0">
<tr>
<td width="50%" align="right" height="25"><font face="Arial, Helvetica, sans-serif">請輸入要註冊的用戶名：</font></td>
<td width="50%" align="left" height="25">
<input type="text" name="username">
<br>
</td>
</tr>
<tr>
<td width="50%" align="right" height="25">請輸入密碼：</td>
<td width="50%" align="left" height="25"> <input type="password" name="pwd"></td>
</tr>
</table>
<p>
<input type="submit" name="sub" value="註冊">
</p>
</form>
</div>
</body>
</html>
網頁效果圖：
《軟件工程綜合實踐》學習內容3