0%

Java Web项目实战-四

Posted on Edited on In Valine:

之前写的那一些卡在了ajax登陆验证，出现各种谜之bug，再加上最近在准备各种各样的笔试面试，所以好长一段时间没有去研究这个问题。也许是我步子迈太大了，有些基础还没有掌握扎实，所以另辟蹊径，不用ajax和servlet，先从最简单的JSP做起，直接使用表单提交功能做登陆验证。

这次我打算把界面弄好看点，为了更好地适配移动端，使用bootstrap可以省很多事。Boostrap并不需要刻意的去学习，只需要在使用的时候查询手册就知道该怎么写了（当然，需要HTML和css基础

使用bootstrap需要将其css样式表引用到我们的页面上，同时要记得引入jQuery，因为bootstrap是基于jQuery的
如下：

1
2
3
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

接着写整个页面

login.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ 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>My JSP 'login.jsp' starting page</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>  
.col-center-block {  
float: none;  
display: block;  
margin-left: auto;  
margin-right: auto;  
}  
    </style> 
  </head>
 
<body>
<div class="container">
<div class="row">
    <div class="span2 col-center-block">
        <form action="servlet/LoginServlet">
            <fieldset>
                 <legend>请登录</legend> 
                 <div class="row">
                 <div class="col-xs-4">
                 <label>用户名</label><input type="text" class="form-control" placeholder="请输入名字" name="username" /> 
                 </div></div>
                 <div class="row"><div class="col-xs-4">
                 <label>密码</label><input type="password" class="form-control" placeholder="请输入密码" name="password" /> 
                 </div></div>
                 <span class="help-block"></span>
                 <div class="row"><div class="col-xs-2">
                 <button type="submit" value="submit" class="btn">提交</button></div></div>
            </fieldset>
        </form>
    </div>
</div>
</div>
  </body>
</html>

(偷懒把以前做过的一个项目copy过来233，打算在原有的基础上改造成一个轻博客那样的吧，之前做一半的那个就先放一边，等我把框架全吃透了再说)

web.xml

对了，还有web.xml要配置好，即jsp和servlet之间的映射关系
浏览器最先读取的就是web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>controller.LoginServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/servlet/LoginServlet</url-pattern>
  </servlet-mapping>

</web-app>