1. 根據(jù)靜態(tài)頁面完成JavaBean設(shè)計(jì)

在上一節(jié)中樱哼，我們完成了文章封面的制作，這些都屬于靜態(tài)頁面的部分辜昵。

Paste_Image.png

從圖片中可以看到荸镊，一篇文章的主要信息有：文章標(biāo)題，文章名稱堪置，作者躬存，還有摘要描述。

在《用大白話聊聊JavaSE -- 如何理解Java Bean（一）》中晋柱，我們已經(jīng)討論關(guān)于JavaBean的一些問題优构。

一般來說，JavaBean分為必要字段和輔助字段雁竞，文章標(biāo)題钦椭，文章名稱，作者碑诉，還有摘要描述彪腔，還有文章內(nèi)容這些，應(yīng)該屬于必要字段的范疇进栽。

至于輔助字段德挣，我就不搞那么復(fù)雜了，簡(jiǎn)單設(shè)置幾個(gè)吧快毛，比如發(fā)布時(shí)間格嗅，最后更新時(shí)間，是否發(fā)布唠帝，是否刪除屯掖。

當(dāng)然，我們還需要知道這篇文章是誰寫的襟衰，所以還要再加一個(gè)userid字段贴铜，這樣的話才能和user表關(guān)聯(lián)起來。

最后瀑晒，還需要有一個(gè)分類字段绍坝，一篇文章，肯定是屬于某一個(gè)類別的苔悦，所以這個(gè)也需要加上轩褐。

嗯，就添加這幾個(gè)輔助字段吧间坐，我們弄簡(jiǎn)單一點(diǎn)灾挨。

Paste_Image.png

我們?cè)赽ean包里面新建一個(gè)Article類邑退。

設(shè)置屬性如下：

package bean;

import java.util.Date;

import annotation.Column;
import annotation.Table;

@Table(tableName = "t_article")
public class Article {
    
    @Column(field = "id" , type = "varchar(100)" , primaryKey = true)
    private String id; //主鍵
    
    @Column(field = "header" , type = "varchar(100)")
    private String header; //標(biāo)題
    
    @Column(field = "name" , type = "varchar(60)")
    private String name; //文章名稱
    
    @Column(field = "content" , type = "text")
    private String content; //文章內(nèi)容
     
    @Column(field = "author" , type = "varchar(30)")
    private String author; //作者
    
    @Column(field = "description" , type = "varchar(100)")
    private String description; //概要
    
    @Column(field = "is_published" , type = "int(1)")
    private Integer isPublished; //是否發(fā)布 0 未發(fā)布 1 發(fā)布
    
    @Column(field = "is_delete" , type = "int(1)")
    private Integer isDelete;      //是否刪除   0 未刪除 1 已刪除
    
    @Column(field = "create_time" , type = "datetime")
    private Date createTime;//創(chuàng)建時(shí)間
    
    @Column(field = "update_time" , type = "timestamp" , defaultNull = false)
    private Date updateTime;//最后更新時(shí)間
    
    @Column(field = "user_id" , type = "varchar(100)" , defaultNull = false)
    private String userId;//作者id
    
    @Column(field = "category_id" , type = "int(2)" , defaultNull = false)
    private Integer categoryId;//分類ID

    
}

然后，別忘了生成get劳澄，set以及toString方法地技。

2. Mysql建表

2.1 文章表

在TestMain方法中再生成一下sql語句。

Paste_Image.png

package test;

import bean.Article;
import util.TableUtils;

public class TestMain {
    public static void main(String[] args) {
        String sql = TableUtils.getCreateTableSQl(Article.class);
        System.out.println(sql);
    }
}

運(yùn)行

這是生成出來的sql語句

DROP TABLE IF EXISTS t_article;
DROP TABLE IF EXISTS t_article;
create table t_article(
    id varchar(100) DEFAULT NULL,
    header varchar(100) DEFAULT NULL,
    name varchar(60) DEFAULT NULL,
    content text DEFAULT NULL,
    author varchar(30) DEFAULT NULL,
    description varchar(100) DEFAULT NULL,
    is_published int(1) DEFAULT NULL,
    is_delete int(1) DEFAULT NULL,
    create_time datetime DEFAULT NULL,
    update_time timestamp NOT NULL,
    user_id varchar(100) NOT NULL,
    category_id int(2) NOT NULL,

) DEFAULT CHARSET=utf8

因?yàn)?update_time 是timestamp類型秒拔，也就是時(shí)間戳莫矗，那么我們給他一個(gè)默認(rèn)值，默認(rèn)就是當(dāng)前時(shí)間砂缩。

改成：

update_time timestamp NOT NULL
DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

在mysql數(shù)據(jù)庫里面運(yùn)行一下作谚，發(fā)現(xiàn)報(bào)錯(cuò)了

[Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') DEFAULT CHARSET=utf8' at line 13

哦，原來在屬性的最后一行不能有逗號(hào)庵芭。

Paste_Image.png

看來之前寫的方法還有點(diǎn)問題妹懒，這邊我們先把逗號(hào)去掉吧。

再次運(yùn)行sql語句双吆，OK眨唬，成功建表了。

3. 制造測(cè)試數(shù)據(jù)好乐，JUint初探

接下來匾竿，我們來虛擬一些數(shù)據(jù)。

我們?cè)趖est包下新建一個(gè)類蔚万，叫做TestInsertOperation岭妖，就是測(cè)試INSERT操作的意思。

我們用JUint來測(cè)試反璃。

JUnit是一個(gè)基于Java語言的單元測(cè)試框架昵慌，用起來比較方便。它的源代碼很輕巧淮蜈，而且優(yōu)雅地運(yùn)用了多種設(shè)計(jì)模式废离，應(yīng)該來說，這是一個(gè)非常優(yōu)秀的框架礁芦。

首先在這個(gè)TestInsertOperation類中添加一個(gè)方法

/**
 *  測(cè)試：給文章插入數(shù)據(jù)
 */
@Test
public void insertArticle(){
    
}

@Test是一個(gè)注解，加上它以后悼尾，才會(huì)被JUint測(cè)試框架識(shí)別柿扣。

把光標(biāo)放在@Test上面，ctrl + 1

Paste_Image.png

這個(gè)東西就跳出來了闺魏，點(diǎn)擊第一項(xiàng)未状，JUint的依賴包就被加載進(jìn)來了。

接下來析桥，在測(cè)試方法 insertArticle 中寫上測(cè)試代碼:

String sql = "INSERT INTO t_article(id,header,name,content,author,"
            + "description,is_published,is_delete,create_time,update_time"
            + ",user_id,category_id) VALUES (?,?,?,?,?,?,?,?,?,?,?,?) ";
String id = UUID.randomUUID().toString(); //主鍵
String header = "Java Web實(shí)用技術(shù)";
String name  = "如何將MyEclipse項(xiàng)目導(dǎo)入eclipse";
String content = "我們經(jīng)常會(huì)在網(wǎng)上下載一些開源項(xiàng)目司草，或者從別的地方遷移一些項(xiàng)目進(jìn)來艰垂，但經(jīng)常會(huì)發(fā)現(xiàn)導(dǎo)入后各種報(bào)錯(cuò)。這是初學(xué)java肯定會(huì)遇到的問題埋虹，本文對(duì)一些常見的處理方案做一個(gè)總結(jié)猜憎。（本文將MyEclipse項(xiàng)目導(dǎo)入eclipse的過程為例，其他情況也可參考這個(gè)流程）";
String author = "Jack";
String description = "解決項(xiàng)目導(dǎo)入的沖突問題...";
int isPublished = 1 ;
int isDelete = 0;
String create_time = "2016-10-19 10:43:10";
String update_time = "2016-10-19 10:43:10";
String userId = "319600c3-550a-4f9f-80cf-deebe2376528";
int categoryId = 2;
DataBaseUtils.update(sql, id,header,name,content,author,description,isPublished,isDelete,create_time,update_time,userId,categoryId);
System.out.println("新增成功搔课！");

鼠標(biāo)雙擊方法名

Paste_Image.png

按一下F11胰柑，開始測(cè)試（如果F11不起作用，那么就右鍵爬泥，Run As柬讨， JUnit Test）

測(cè)試結(jié)果：

Paste_Image.png

OK，沒有錯(cuò)誤袍啡。

控制臺(tái)也沒有報(bào)錯(cuò)踩官，而且成功打印了 "新增成功！" 這幾個(gè)字境输。

我已經(jīng)在庫里查到這條數(shù)據(jù)了蔗牡，現(xiàn)在，用jdbc的方式將剛剛插入的數(shù)據(jù)查詢出來畴嘶。

在庫里看到它的 ID 為 2145ed72-164a-401c-af29-248625a775b8蛋逾。

好的，現(xiàn)在新寫一個(gè)方法來獲取這條數(shù)據(jù)：

public void getArticle(){
    String sql = "select * from t_article where id = ?";
    Article article = DataBaseUtils.queryForBean(sql, Article.class, "2145ed72-164a-401c-af29-248625a775b8");
    System.out.println(article);
}

測(cè)試結(jié)果：

Article [ id = 2145ed72-164a-401c-af29-248625a775b8,
header = Java Web實(shí)用技術(shù),
name = 如何將MyEclipse項(xiàng)目導(dǎo)入eclipse,
content = 我們經(jīng)常會(huì)在網(wǎng)上下載一些開源項(xiàng)目窗悯，或者從別的地方遷移一些項(xiàng)目進(jìn)來区匣，但經(jīng)常會(huì)發(fā)現(xiàn)導(dǎo)入后各種報(bào)錯(cuò)。這是初學(xué)java肯定會(huì)遇到的問題蒋院，本文對(duì)一些常見的處理方案做一個(gè)總結(jié)亏钩。（本文將MyEclipse項(xiàng)目導(dǎo)入eclipse的過程為例，其他情況也可參考這個(gè)流程）,
author = Jack,
description = 解決項(xiàng)目導(dǎo)入的沖突問題...,
isPublished = 1,
isDelete = 0,
createTime = Wed Oct 19 10:43:10 CST 2016,
updateTime = Wed Oct 19 10:43:10 CST 2016,
userId = 319600c3-550a-4f9f-80cf-deebe2376528,
categoryId = 2 ]

這樣就成功了欺旧。

2.2 分類表

分類表的話比較簡(jiǎn)單姑丑，為了簡(jiǎn)單起見，我們就不寫JavaBean了辞友，直接在mysql中建表吧栅哀。

建表語句：

DROP TABLE IF EXISTS `t_category`;
CREATE TABLE `t_category` (
  `category_id` int(11) NOT NULL AUTO_INCREMENT,
  `category_name` varchar(20) CHARACTER SET utf8 DEFAULT NULL,
  PRIMARY KEY (`category_id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

ID是自增長(zhǎng)的。

制造數(shù)據(jù)：

INSERT INTO `t_category` VALUES ('1', '連載小說');
INSERT INTO `t_category` VALUES ('2', '編程代碼類');
INSERT INTO `t_category` VALUES ('3', '生活感悟');

insert 操作可以直接在mysql中進(jìn)行操作称龙，也可以用jdbc來操作留拾。

jdbc操作的代碼如下

/**
 * 插入分類數(shù)據(jù)
 */
@Test
public void insertCategory(){
    DataBaseUtils.update("insert into t_category set category_name = ?", "連載小說");
    DataBaseUtils.update("insert into t_category set category_name = ?", "編程代碼類");
    DataBaseUtils.update("insert into t_category set category_name = ?", "生活感悟");
}

測(cè)試一下就行了。

好的鲫尊，插入完畢后，我們新建一個(gè)測(cè)試方法來查詢一下疫向。

/**
 * 獲取分類列表
 */
@Test
public void getCategoryList(){
    String sql = "select * from t_category where 1 = 1";
    List list = DataBaseUtils.queryForList(sql);
    System.out.println(list);
}

結(jié)果：

[ {category_name=連載小說, category_id=1},
{category_name=編程代碼類, category_id=2},
{category_name=生活感悟, category_id=3} ]

嗯咳蔚，OK了豪嚎。

4. service層開發(fā)

上面的測(cè)試代碼主要是dao部分的，但因?yàn)楸卷?xiàng)目省去了dao層谈火，所以侈询，有什么操作的話，我們直接在service層解決掉算了堆巧。

新建一個(gè) ArticleService 類

Paste_Image.png

首頁的文章列表：

Paste_Image.png

從靜態(tài)頁面中妄荔，我們可以看到，文章被分為幾個(gè)不同的類別谍肤，比如連載小說啦租，就是一個(gè)單一的類別瓷耙，我們應(yīng)該是通過類別去加載相應(yīng)的文章铅协。

在數(shù)據(jù)庫表中，連載小說的分類ID為1冶伞，那么我們?nèi)绻胍樵兂鲈摲诸愊碌奈恼孪等危蜁?huì)寫出這樣的sql語句：

select * from t_article where category_id = 1;

我們先不管到底怎么和首頁對(duì)接的恳蹲，先把后臺(tái)邏輯寫好再說。

在 ArticleService 類中定義一個(gè)查詢方法

/**
 * 通過類別獲取文章列表
 * @param categoryId
 * @param start 
 * @param end  
 */
public List<Map<String,Object>> getArticlesByCategoryId(Integer categoryId,Integer start,Integer end){
    String sql = "select id,header,name,author,"
        + "description from t_article where 1 = 1 "
        + " and is_delete = 0"
        + " and is_published = 1"
        + " and category_id = ?"
        + "  order by update_time desc limit ?,?";
    return DataBaseUtils.queryForList(sql, categoryId,start,end);
}

測(cè)試代碼：

ArticleService ArticleService = new ArticleService();
List list = ArticleService.getArticlesByCategoryId(2,0,10);
System.out.println(list);

我測(cè)試了一下俩滥，應(yīng)該沒問題嘉蕾。sql查詢的話，我做了一個(gè)簡(jiǎn)單的排序霜旧，就是根據(jù)最后更新時(shí)間倒序排序错忱。

相信你也已經(jīng)看出來了，因?yàn)槲覀円呀?jīng)有了 DataBaseUtils 這個(gè)工具類挂据，所以大大減少了我們的java代碼以清。

不然的話，我們還需要手動(dòng)去獲取連接崎逃，然后生成 PreparedStatement 的實(shí)例掷倔，一大堆 try catch ，最后還要關(guān)閉連接个绍。

有了 DataBaseUtils 勒葱，這些重復(fù)的代碼就可以省略了。

在這個(gè) getArticlesByCategoryId 方法中巴柿，我故意沒有把文章內(nèi)容查詢出來错森。

原因很簡(jiǎn)單，因?yàn)槲恼聝?nèi)容不需要展示在首頁篮洁，我就是查詢出來也沒用。

我把id查出來了殃姓，這樣的話袁波，當(dāng)用戶通過點(diǎn)擊文章封面瓦阐，進(jìn)入詳情頁的時(shí)候，就可以獲取文章id篷牌，有了這個(gè)id睡蟋，我們是不是就可以去數(shù)據(jù)庫把文章內(nèi)容給查出來了呢？

所以枷颊，我們肯定還需要一個(gè)方法戳杀，就是通過文章id查詢出文章內(nèi)容的方法。

代碼：

/**
 * 通過文章id獲取文章內(nèi)容
 * @param id
 * @return
 */
public List<Map<String,Object>> getContentByArticleId(String id){
    String sql = "select content from t_article where id = ?";
    return DataBaseUtils.queryForList(sql,id);
}

測(cè)試了一下夭苗，也是沒問題的哈信卡。

5. 與前臺(tái)頁面對(duì)接

好的，后臺(tái)已經(jīng)寫好了题造，我們現(xiàn)在和前臺(tái)對(duì)接一下傍菇。

打開index.jsp

Paste_Image.png

找到編程代碼類：

<div class='category'>
    <div class='title'>編程代碼類</div>
    <ul class='items'>
        <li class='item'></li>
        <li class='item'></li>
        <div style='clear:both'></div>
    </ul>
</div>

現(xiàn)在，我們要把它變成動(dòng)態(tài)的界赔。

首先丢习，在index.jsp頁面頂部的地方，導(dǎo)入必要的包淮悼。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="service.ArticleService" pageEncoding="UTF-8"%>

然后咐低，新建一個(gè) ArticleService 的實(shí)例。

<% ArticleService articleService = new ArticleService(); %>

接下來袜腥，在 編程代碼類 的div上方獲取 list 數(shù)據(jù)见擦。

<%
    //查詢出編程代碼類的相關(guān)文章
    List<Map<String,Object>>  articles2 = articleService.getArticlesByCategoryId(2, 0, 6);
    pageContext.setAttribute("articles2", articles2);
%>
${articles2}
<div class='category'>
    <div class='title'>編程代碼類</div>
    <ul class='items'>
        <li class='item'></li>
        <li class='item'></li>
        <div style='clear:both'></div>
    </ul>
</div>

pageContext是JSP九大隱式對(duì)象的一員，顧名思義瞧挤，它的作用域就是當(dāng)前頁面锡宋。

${articles2}表示在html代碼中顯示articles2的具體信息，注意特恬，這個(gè)信息是Java代碼獲取的执俩。

我們只要刷新一下頁面，這些代碼邏輯就會(huì)被執(zhí)行癌刽。

好的役首，我們刷新一下。

Paste_Image.png

報(bào)錯(cuò)了显拜。

沒關(guān)系衡奥，看看它說什么。

錯(cuò)誤信息：

message /index.jsp (line: 2, column: 1) Page directive must not have multiple occurrences of pageencoding

哦远荠，它說我們must not have矮固，一定不能有。

一定不能有什么呢譬淳？繼續(xù)往下看档址。

multiple occurrences of pageencoding（多個(gè)pageencoding出現(xiàn)）

哦盹兢，一定不能出現(xiàn)多個(gè) pageencoding 。

我們來看看頁面守伸。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page language="java" import="service.ArticleService" pageEncoding="UTF-8"%>

嗯绎秒，我們真的定義了多個(gè)pageEncoding。

好的尼摹，我們刪掉多余的pageEncoding见芹。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page language="java" import="java.util.*"%>
<%@ page language="java" import="service.ArticleService"%>

再來一次，刷新頁面蠢涝。

Paste_Image.png

效果出來了玄呛。

${articles2}變成了：

[{id=2145ed72-164a-401c-af29-248625a775b8, author=Jack, description=解決項(xiàng)目導(dǎo)入的沖突問題..., name=如何將MyEclipse項(xiàng)目導(dǎo)入eclipse, header=Java Web實(shí)用技術(shù)}]

然后，我們需要用JSTL標(biāo)簽庫中的一個(gè)叫做 c:forEach 標(biāo)簽惠赫。

它的作用是循環(huán)遍歷把鉴，我們直接上代碼吧。

<%
    //查詢出編程代碼類的相關(guān)文章
    List<Map<String,Object>>  articles2 = articleService.getArticlesByCategoryId(2, 0, 6);
    pageContext.setAttribute("articles2", articles2);
%>

<div class='category'>
    <div class='title'>編程代碼類</div>
    <ul class='items'>
        <c:forEach items="${articles2}" var="item">
            <li class='item'>
                <div class='item-banner'>
                    <div class='item-header'>${item.header}</div>
                    <div class='item-name'>${item.name}</div>
                    <div class='item-author'>@${item.author} 著</div>
                </div>
                <div class='item-description'>${item.description}</div>
            </li>
        </c:forEach>
        <div style='clear:both'></div>
    </ul>
</div>

我們用了一個(gè)forEach標(biāo)簽儿咱，將{articles2}是一個(gè)list，所以是可以遍歷的混埠。

var="item" 是遍歷出來的每一個(gè)對(duì)象怠缸。

效果：

Paste_Image.png

因?yàn)樽謹(jǐn)?shù)太多，加上行高的關(guān)系钳宪，整個(gè)封面被擠下來了揭北。

Paste_Image.png

嗯，我手動(dòng)來調(diào)一下css樣式吧吏颖。

讓文章名稱強(qiáng)制不換行搔体，溢出部分用 ... 顯示

.item-name {
    font-size: 22px;
    line-height: 74px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;    
}

鼠標(biāo)劃上去的時(shí)候，顯示一個(gè) tip 提示

<div class='item-name' title = "${item.name}">${item.name}</div>

Paste_Image.png

這樣就OK了半醉。

好的疚俱，與前臺(tái)對(duì)接完畢了。

我又弄了幾條測(cè)試數(shù)據(jù)缩多。

Paste_Image.png

假模假式的呆奕，稍微有那么點(diǎn)樣子了。

嗯衬吆，今天就到這里了梁钾，下一節(jié)咱們繼續(xù)。