首先房匆，更正一下上一章中的一個小錯誤圾亏，就是在index.jsp中，banner部分沒有添加結(jié)束的標簽,加上去就OK了瓮床，我也是完善頁面的時候發(fā)現(xiàn)的芜茵。
另外叙量，index.jsp中引入的jQuery也需要換成本地的。
<script src="${basePath}/static/js/jQuery.js"></script>
今天我把頁面重構(gòu)了一下九串，添加了內(nèi)容區(qū)和底欄（footer）绞佩，我會把目前的代碼上傳的，有需要的自己去看就行了蒸辆，我們就不在前臺頁面花費太多的時間了征炼。div + css，布局等等躬贡，這些東西以后有時間的話谆奥，我單獨開貼分享吧。
都已經(jīng)寫了三篇文章了拂玻，還沒有寫Java代碼酸些，實在有些說不過去宰译。
1. 登陸頁面
登陸頁我已經(jīng)寫好了，現(xiàn)在看看效果魄懂，簡單說明一下沿侈。
點擊登陸按鈕，可以跳轉(zhuǎn)到登陸頁面市栗。
登陸按鈕就是一個超鏈接缀拭。
JSP頁面就是一個servlet，但是省去了很多寫Servlet的麻煩填帽，login.jsp已經(jīng)寫好了蛛淋，就放在WebContent目錄下。
昨天憋了一上午篡腌，總算寫好了登陸頁面褐荷。我不是專業(yè)做前端的，所以只做了一個大概樣子嘹悼。用了很多css3的屬性叛甫，所以IE678上瀏覽的效果是不好的。
關于這個頁面杨伙，今天我調(diào)整了一下其监，不想搞得那么復雜了，我去掉了所有的圖標和飄動白云限匣，關于css特效棠赛，h5的話呢，以后單獨拿出來說明吧膛腐，畢竟好多人都反應說太花哨了，因為是入門級的小項目鼎俘，我也不想弄得那么復雜了哲身。
雖然頁面單調(diào)了些，不過對于初學者來說贸伐，相對來說比較好理解勘天。之前的頁面的確有點太花哨了，還弄了幾朵云飄來飄去的捉邢，說不定還影響性能脯丝，所以我把這些都去掉了。
2. 新的目錄結(jié)構(gòu)
之前的代碼有很多冗余的地方伏伐，比如標題欄宠进，每個頁面都需要寫一遍。而且js和css都是寫在本頁面的藐翎。實際開發(fā)一般都不會這么做材蹬。所以实幕，我把這些東西都分離出來了，放在各自的目錄里堤器。
以下是新的目錄結(jié)構(gòu)：
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class="header">
<div class='logo'>原創(chuàng)文字</div>
<ul>
<li class='first'><a href="index.jsp">首頁</a></li>
<li class='item'><a href="javascript:void(0)">原創(chuàng)故事</a></li>
<li class='item'><a href="javascript:void(0)">熱門專題</li>
<li class='item'><a href="javascript:void(0)">欣賞美文</li>
<li class='item'><a href="javascript:void(0)">贊助</a></li>
</ul>
<div class='login'>
<span><a href="login.jsp">登陸</a></span>
<span>|</span>
<span><a href="javascript:void(0)">注冊</a></span>
</div>
</div>
這就是標題欄昆庇，以后新增的jsp頁面，只需要把這個header.jsp引入就可以了闸溃。注意整吆，這種引入就相當于把里面的代碼原封不動地拷貝進去，所以如果用相對路徑引用資源文件辉川，就還是以原本的頁面為準表蝙。
引入方式：
<!-- 頭部頁面 -->
<%@include file="common/header.jsp" %>
footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<div class='footer'>
免責聲明：本站所有素材均來自網(wǎng)絡，僅供學習交流员串。如果侵犯了您的權(quán)益勇哗，請聯(lián)系我，我會第一時間刪除侵權(quán)內(nèi)容寸齐。
</div>
taglib.jsp (一些公共的配置等)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
int port = request.getServerPort();
String basePath = null;
if(port==80){
basePath = request.getScheme()+"://"+request.getServerName()+path;
}else{
basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
}
request.setAttribute("basePath", basePath);
%>
basePath 就是項目的根路徑欲诺。這樣做的好處就是，使得JSP看起來很干凈渺鹦，沒有那么多冗余的代碼了扰法。
大概就是這個樣子，接下來毅厚，我們開始寫業(yè)務塞颁。
3. 登陸功能的MVC流程
登陸框中，目前只有用戶名和密碼這兩個選項吸耿。
我們首先要做的就是將這兩個值傳遞到后臺祠锣。所謂的后臺，其實就是Java代碼咽安。為了看起來比較清晰伴网，我們在WebContent目錄下新建一個controller包。
這是一個MVC分層的示意圖
意思就是說妆棒，用戶登錄之后澡腾，我們需要驗證它的用戶名和密碼是否正確，那么就需要將數(shù)據(jù)拿到數(shù)據(jù)庫里面去匹配糕珊《郑總體的流程大概是這樣：我先在前臺獲取用戶名和密碼，然后到controller層（控制層）红选，這一層需要接受你傳過來的用戶名和密碼澜公，進行一些基本的控制。
然后繼續(xù)將數(shù)據(jù)傳遞到service層纠脾，也就是業(yè)務層玛瘸，這一層會根據(jù)具體的業(yè)務對你的數(shù)據(jù)進行判斷和分析蜕青，最后，才傳遞到dao層糊渊，這一層原則上就是和數(shù)據(jù)庫進行交互的右核。多半是寫sql語句然后操作數(shù)據(jù)庫。
就比如說用戶登錄這個功能渺绒，我需要判斷的就是
- 你這個用戶是否存在贺喝？
- 用戶名和密碼是否正確？
最終宗兼，還需要將登錄的標志返回給前臺躏鱼。
dao -> servide -> controller -> JSP
這樣就是一個完整的流程。
4. 從JSP到controller層
讓我們打開login.jsp頁面殷绍，引入jQuery
<script src="${basePath}/static/js/jQuery.js"></script>
登錄框的HTML代碼：
<!-- 登陸框 -->
<div class='content'>
<div class='logo'><i style='font-size:90px;' class="iconfont icon-denglu"></i></div>
<div class='inputBox mt50 ml32'>
<input type="text" id="username" autofocus="autofocus" autocomplete="off" maxlength="60" placeholder="請輸入賬號/郵箱/手機號">
<i style='font-size:20px;margin-left:-32px;opacity:0.8;' class='iconfont icon-yonghuming'></i>
</div>
<div class='inputBox mt50 ml32'>
<input type="password" id="password" autofocus="autofocus" autocomplete="off" maxlength="60" placeholder="請輸入密碼">
<i style='font-size:20px;margin-left:-32px;opacity:0.8;' class='iconfont icon-mima'></i>
</div>
<div class='mt50 ml32'>
<button class="login_btn" onclick="#">登陸</button>
</div>
</div>
我們在下面寫一個script塊染苛，js代碼就全部寫在這里。
給登陸按鈕綁定一個點擊事件：
<div class='mt50 ml32'>
<button class="login_btn" onclick="login()">登陸</button>
</div>
登陸方法
function login(){
var username = $('#username').val();
var password = $('#password').val();
alert(username + "," + password);
}
當成功alert出來數(shù)據(jù)后主到，說明到此為止的代碼是正確的茶行。
接下來，利用jQuery的ajax方法登钥，將數(shù)據(jù)提交到controller層畔师。
function login(){
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
type:"post",//請求方式
url:"${basePath}/controller/loginController.jsp",//請求地址
data:{"username":username,"password":password},//傳遞給controller的json數(shù)據(jù)
error:function(){
alert("登陸出錯！");
},
success:function(data){ //返回成功執(zhí)行回調(diào)函數(shù)牧牢。
}
});
}
我已經(jīng)都寫好注釋了看锉，ajax方法在web開發(fā)過程中，是被普遍使用的塔鳍。
新建一個loginController.jsp 伯铣，這就是所謂的服務器端。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
//設置請求的編碼
//request.setCharacterEncoding("UTF-8");
//獲取客戶端傳遞過來參數(shù)
String username = request.getParameter("username");
String password = request.getParameter("password");
System.out.println(username);
System.out.println(password);
//如果用戶名和密碼不為空
%>
從JSP頁面到controller轮纫，用戶名和密碼是被裝在一個叫做request的變量中懂傀，它其實也就相當于一個json，一個map蜡感，都是差不多的東西，這里就不詳細說明了恃泪。當然了郑兴，他也是JSP九大隱式對象中的一員。
我們來測試一下贝乎，點擊登陸按鈕情连。
成功了！可以看到數(shù)據(jù)已經(jīng)成功傳遞到controller層了览效。
因為我們還沒有數(shù)據(jù)表和JavaBean却舀，所以我們先不急著寫service層虫几，先開始編寫JavaBean吧。
5. 從JavaBean到數(shù)據(jù)庫表挽拔。
我們在src目錄下新建一個存放JavaBean的包
關于JavaBean辆脸，如果不是很了解的話，可以看看這篇文章：
http://www.cnblogs.com/skyblue-li/p/5900216.html
一個記錄用戶信息的JavaBean螃诅，我想了以下這些屬性：
private String id; //主鍵啡氢，采用UUID
private String username; //用戶名
private String password; //密碼
private String headerPic; //頭像
private String email; //電子郵箱
private Integer male; //性別 0男 1女 3保密
private String createTime;//創(chuàng)建時間
private String updateTime;//最后更新時間
private Integer isDelete; // 刪除狀態(tài)0未刪除1刪除
private String address; //地址
private String telephone; //電話
當你的JavaBean設計好了，差不多對應的數(shù)據(jù)庫表也就出來了术裸。
之前寫過一篇關于注解的文章：
http://www.cnblogs.com/skyblue-li/p/5900228.html
現(xiàn)在可以用這個知識點做點有趣的事情了倘是，比如將一個JavaBean轉(zhuǎn)換成建表語句。
新建一個注解包袭艺，里面添加兩個注解
column.java
package annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Target(ElementType.FIELD) //注解的目標
@Retention(RetentionPolicy.RUNTIME)
public @interface Column {
public String field() ; //字段名稱
public boolean primaryKey() default false;//是否為主鍵
public String type() default "VARCHAR(80)";//字段類型
public boolean defaultNull() default true; //是否允許為空
}
Table.java
package annotation;
import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;
@Target(ElementType.TYPE) //注解的目標是類
@Retention(RetentionPolicy.RUNTIME)
public @interface Table {
public String tableName();
}
我們創(chuàng)建了兩個注解搀崭。
接下來，在util包（也就是工具包）中新建兩個工具類
StringUtils 字符串工具類
package util;
public class StringUtils {
public static boolean isEmpty(String str) {
return null == str || str.equals("")
|| str.matches("\\s*");
}
public static String defaultValue(String content,String defaultValue){
if(isEmpty(content)){
return defaultValue;
}
return content;
}
}
isEmpty的作用是判斷字符串是否為空猾编。
defaultValue表示給字符串設置默認值瘤睹，有點類似于oracle數(shù)據(jù)庫中的nvl語法。
TableUtils 數(shù)據(jù)表工具類
package util;
import java.lang.reflect.Field;
import annotation.Column;
import annotation.Table;
public class TableUtils {
public static String getCreateTableSQl(Class<?> clazz){
StringBuilder sb = new StringBuilder();
sb.append("create table ");
//獲取表名
Table table = (Table) clazz.getAnnotation(Table.class);
String tableName = table.tableName();
sb.append(tableName).append("(\n");
Field[] fields = clazz.getDeclaredFields();
String primaryKey = "";
//遍歷所有字段
for (int i = 0; i < fields.length; i++) {
Column column = (Column) fields[i].getAnnotations()[0];
String field = column.field();
String type = column.type();
boolean defaultNull = column.defaultNull();
sb.append("\t" + field).append(" ").append(type);
if(defaultNull){
if(type.toUpperCase().equals("TIMESTAMP")){
sb.append(",\n");
}else{
sb.append(" DEFAULT NULL,\n");
}
}else{
sb.append(" NOT NULL,\n");
if(column.primaryKey()){
primaryKey = "PRIMARY KEY ("+field+")";
}
}
}
if(!StringUtils.isEmpty(primaryKey)){
sb.append("\t").append(primaryKey);
}
sb.append("\n) DEFAULT CHARSET=utf8");
return sb.toString();
}
}
getCreateTableSQl方法是利用反射和注解有關的知識袍镀，給一個JavaBean自動生成建表語句默蚌，目前只支持MySQL，因為這方面的知識我也是剛開始學苇羡，寫得不好的地方還請各位多多包涵绸吸。
接下來，給JavaBean添加注解设江。
@Table(tableName = "t_user")
public class User{
//屬性
}
屬性如下：
@Column(type = "varchar(30)" ,field = "id" ,primaryKey = true ,defaultNull = false)
private String id; //主鍵锦茁，采用UUID
@Column(type = "VARCHAR(20)", field = "username")
private String username; //用戶名
@Column(type = "VARCHAR(20)", field = "password")
private String password; //密碼
@Column(type = "VARCHAR(60)", field = "headerPic")
private String headerPic; //頭像
@Column(type = "VARCHAR(60)", field = "email")
private String email; //電子郵箱
@Column(type = "VARCHAR(2)", field = "sex")
private Integer sex; //性別 0男 1女 3保密
@Column(type = "datetime", field = "create_time")
private String createTime;//創(chuàng)建時間
@Column(type = "timestamp", field = "update_time")
private String updateTime;//最后更新時間
@Column(type = "int(1)", field = "is_delete")
private Integer isDelete; // 刪除狀態(tài) 0未刪除 1刪除
@Column(type = "VARCHAR(200)", field = "address")
private String address; //地址
@Column(type = "VARCHAR(15)", field = "telephone")
private String telephone; //電話
創(chuàng)建一個測試包和測試類：
package test;
import bean.User;
import util.TableUtils;
public class TestMain {
public static void main(String[] args) {
String sql = TableUtils.getCreateTableSQl(User.class);
System.out.println(sql);
}
}
運行
OK，拿到sql語句了叉存。
我已經(jīng)安裝了mysql码俩，用root用戶登陸后，新建一個database
使用這個database
將剛才得到的sql語句復制進去歼捏，加分號稿存，回車。
這就表明數(shù)據(jù)庫表已經(jīng)建好了瞳秽，默認編碼是UTF-8瓣履。
本文結(jié)束。
您的支持是我寫作的最大動力：
最后說一下更新的問題练俐，最近事情比較多袖迎，無奈改為周更了，正常情況下每周日定時更新。至于源碼燕锥，我還沒有放到github上辜贵，打算以后寫得差不多了再發(fā)布吧。
