【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第九节）

1. 根据静态页面完成JavaBean设计

在上一节中，我们完成了文章封面的制作，这些都属于静态页面的部分。

从图片中可以看到，一篇文章的主要信息有：文章标题，文章名称，作者，还有摘要描述。

在《用大白话聊聊JavaSE -- 如何理解Java Bean（一）》中，我们已经讨论关于JavaBean的一些问题。

一般来说，JavaBean分为必要字段和辅助字段，文章标题，文章名称，作者，还有摘要描述，还有文章内容这些，应该属于必要字段的范畴。

至于辅助字段，我就不搞那么复杂了，简单设置几个吧，比如发布时间，最后更新时间，是否发布，是否删除。

当然，我们还需要知道这篇文章是谁写的，所以还要再加一个userid字段，这样的话才能和user表关联起来。

最后，还需要有一个分类字段，一篇文章，肯定是属于某一个类别的，所以这个也需要加上。

嗯，就添加这几个辅助字段吧，我们弄简单一点。

我们在bean包里面新建一个Article类。

设置属性如下：

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; //标题

@Column(field = "name" , type = "varchar(60)")
private String name; //文章名称

@Column(field = "content" , type = "text")
private String content; //文章内容

@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; //是否发布 0 未发布 1 发布

@Column(field = "is_delete" , type = "int(1)")
private Integer isDelete;      //是否删除   0 未删除 1 已删除

@Column(field = "create_time" , type = "datetime")
private Date createTime;//创建时间

@Column(field = "update_time" , type = "timestamp" , defaultNull = false)
private Date updateTime;//最后更新时间

@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语句。

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);
}
}

运行

这是生成出来的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

因为 update_time 是timestamp类型，也就是时间戳，那么我们给他一个默认值，默认就是当前时间。

改成：

update_time timestamp NOT NULL

DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

在mysql数据库里面运行一下，发现报错了

[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

哦，原来在属性的最后一行不能有逗号。

看来之前写的方法还有点问题，这边我们先把逗号去掉吧。

再次运行sql语句，OK，成功建表了。

3. 制造测试数据，JUint初探

接下来，我们来虚拟一些数据。

我们在test包下新建一个类，叫做TestInsertOperation，就是测试INSERT操作的意思。

我们用JUint来测试。

JUnit是一个基于Java语言的单元测试框架，用起来比较方便。它的源代码很轻巧，而且优雅地运用了多种设计模式，应该来说，这是一个非常优秀的框架。

首先在这个TestInsertOperation类中添加一个方法

/**
*  测试：给文章插入数据
*/
@Test
public void insertArticle(){

}

@Test是一个注解，加上它以后，才会被JUint测试框架识别。

把光标放在@Test上面，ctrl + 1

这个东西就跳出来了，点击第一项，JUint的依赖包就被加载进来了。

接下来，在测试方法 insertArticle 中写上测试代码:

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实用技术";
String name  = "如何将MyEclipse项目导入eclipse";
String content = "我们经常会在网上下载一些开源项目，或者从别的地方迁移一些项目进来，但经常会发现导入后各种报错。这是初学java肯定会遇到的问题，本文对一些常见的处理方案做一个总结。（本文将MyEclipse项目导入eclipse的过程为例，其他情况也可参考这个流程）";
String author = "Jack";
String description = "解决项目导入的冲突问题...";
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("新增成功！");

鼠标双击方法名

按一下F11，开始测试（如果F11不起作用，那么就右键，Run As， JUnit Test）

测试结果：

OK，没有错误。

控制台也没有报错，而且成功打印了 "新增成功！" 这几个字。

我已经在库里查到这条数据了，现在，用jdbc的方式将刚刚插入的数据查询出来。

在库里看到它的 ID 为 2145ed72-164a-401c-af29-248625a775b8。

好的，现在新写一个方法来获取这条数据：

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);
}

测试结果：

Article [ id = 2145ed72-164a-401c-af29-248625a775b8,

header = Java Web实用技术,

name = 如何将MyEclipse项目导入eclipse,

content = 我们经常会在网上下载一些开源项目，或者从别的地方迁移一些项目进来，但经常会发现导入后各种报错。这是初学java肯定会遇到的问题，本文对一些常见的处理方案做一个总结。（本文将MyEclipse项目导入eclipse的过程为例，其他情况也可参考这个流程）,

author = Jack,

description = 解决项目导入的冲突问题...,

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 分类表

分类表的话比较简单，为了简单起见，我们就不写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是自增长的。

制造数据：

INSERT INTO `t_category` VALUES ('1', '连载小说');
INSERT INTO `t_category` VALUES ('2', '编程代码类');
INSERT INTO `t_category` VALUES ('3', '生活感悟');

insert 操作可以直接在mysql中进行操作，也可以用jdbc来操作。

jdbc操作的代码如下

/**
* 插入分类数据
*/
@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 = ?", "生活感悟");
}

测试一下就行了。

好的，插入完毕后，我们新建一个测试方法来查询一下。

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

结果：

[ {category_name=连载小说, category_id=1},

{category_name=编程代码类, category_id=2},

{category_name=生活感悟, category_id=3} ]

嗯，OK了。

4. service层开发

上面的测试代码主要是dao部分的，但因为本项目省去了dao层，所以，有什么操作的话，我们直接在service层解决掉算了。

新建一个 ArticleService 类

首页的文章列表：

从静态页面中，我们可以看到，文章被分为几个不同的类别，比如连载小说，就是一个单一的类别，我们应该是通过类别去加载相应的文章。

在数据库表中，连载小说的分类ID为1，那么我们如果想要查询出该分类下的文章，就会写出这样的sql语句：

select * from t_article where category_id = 1;

我们先不管到底怎么和首页对接的，先把后台逻辑写好再说。

在 ArticleService 类中定义一个查询方法

/**
* 通过类别获取文章列表
* @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);
}

测试代码：

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

我测试了一下，应该没问题。sql查询的话，我做了一个简单的排序，就是根据最后更新时间倒序排序。

相信你也已经看出来了，因为我们已经有了 DataBaseUtils 这个工具类，所以大大减少了我们的java代码。

不然的话，我们还需要手动去获取连接，然后生成 PreparedStatement 的实例，一大堆 try catch ，最后还要关闭连接。

有了 DataBaseUtils ，这些重复的代码就可以省略了。

在这个 getArticlesByCategoryId 方法中，我故意没有把文章内容查询出来。

原因很简单，因为文章内容不需要展示在首页，我就是查询出来也没用。

我把id查出来了，这样的话，当用户通过点击文章封面，进入详情页的时候，就可以获取文章id，有了这个id，我们是不是就可以去数据库把文章内容给查出来了呢？

所以，我们肯定还需要一个方法，就是通过文章id查询出文章内容的方法。

代码：

/**
* 通过文章id获取文章内容
* @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);
}

测试了一下，也是没问题的哈。

5. 与前台页面对接

好的，后台已经写好了，我们现在和前台对接一下。

打开index.jsp

找到编程代码类：

<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>

现在，我们要把它变成动态的。

首先，在index.jsp页面顶部的地方，导入必要的包。

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

然后，新建一个 ArticleService 的实例。

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

接下来，在 编程代码类 的div上方获取 list 数据。

<%
//查询出编程代码类的相关文章
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九大隐式对象的一员，顾名思义，它的作用域就是当前页面。

${articles2}表示在html代码中显示articles2的具体信息，注意，这个信息是Java代码获取的。

我们只要刷新一下页面，这些代码逻辑就会被执行。

好的，我们刷新一下。

报错了。

没关系，看看它说什么。

错误信息：

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

哦，它说我们must not have，一定不能有。

一定不能有什么呢？继续往下看。

multiple occurrences of pageencoding（多个pageencoding出现）

哦，一定不能出现多个 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"%>

嗯，我们真的定义了多个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"%>

再来一次，刷新页面。

效果出来了。

${articles2}变成了：

[{id=2145ed72-164a-401c-af29-248625a775b8, author=Jack, description=解决项目导入的冲突问题..., name=如何将MyEclipse项目导入eclipse, header=Java Web实用技术}]

然后，我们需要用JSTL标签库中的一个叫做 c:forEach 标签。

它的作用是循环遍历，我们直接上代码吧。

<%
//查询出编程代码类的相关文章
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>

我们用了一个forEach标签，将${articles2}进行了遍历。因为${articles2}是一个list，所以是可以遍历的。

var="item" 是遍历出来的每一个对象。

效果：

因为字数太多，加上行高的关系，整个封面被挤下来了。

嗯，我手动来调一下css样式吧。

让文章名称强制不换行，溢出部分用 ... 显示

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

鼠标划上去的时候，显示一个 tip 提示

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

这样就OK了。

好的，与前台对接完毕了。

我又弄了几条测试数据。



假模假式的，稍微有那么点样子了。

嗯，今天就到这里了，下一节咱们继续