引言
本次项目用到的技术
协议：HTTP.
前端：HTML, CSS, JavaScript, JS-WebAPI, jQuery.
后端：Servlet, Thymeleaf, JDBC.
数据库：MySQL.
测试：IDEA, Chrome, Fiddler
本次项目的业务流程
- 搭建项目环境
- 设计数据库
- 根据数据库设计实体类
- 封装数据库
- 定好前后端交互的思路
- 实现页面
一、搭建项目环境
- 创建好目录
- 引入依赖
( Servlet、MySQL、Thymeleaf ) - 往 web.xml 文件中放入一些代码
- 部署程序
( 通过 Smart Tomcat 进行部署 ) - 验证是否就绪
( 通过一个 HelloServlet 类验证 )
二、设计数据库
- 通过自己写的 sql 语句，往 MySQL 数据库中，插入【blog 表】、【user 表】
【blog 表】 预期用来存储博客的信息 ( 标题、内容、发布时间 )
【user 表】预期用来存储用户的信息 ( 用户账号、用户密码 )
create database if not exists practice_blog; use practice_blog; -- 创建博客表 drop if exists blog; create table blog ( -- 博客 ID (自增主键) blogID int primary key auto_increment, -- 博客标题 (字符串类型) title varchar(50), -- 博客内容 (字符串类型，表示中等长度文本) content mediumtext, -- 博客发布的时间 (日期类型) postTime datetime, -- 作者的账号ID userID int ); -- 创建用户表 drop if exists user; create table user ( -- 用户的账号ID (自增主键) userID int primary key auto_increment, -- 用户的账号 (保证用户名唯一) username varchar(50) unique, -- 用户的密码 password varchar(20) );
三、根据数据库设计实体类
1. Blog 类
public class Blog { private int blogID; private String title; private String content; private Timestamp postTime; private int userID; }
2. User 类
public class User { private int userID; private String username; private String password; }
四、封装数据库
JDBC 编程步骤
- 创建数据源
- 和数据库建立连接
- 构造 sql 语句并操作数据库
- 执行 sql
- 遍历结果集（select 查询的时候需要有这一步）
- 释放资源
1. 创建一个 DBUtil 类 ( Database Utility )
DBUtil 这个类，用来封装一些数据库的方法，供外面的类使用。
好处一：外面的类需要创建一些同样的实例， 这些实例是固定的。然而，有了DBUtil这个类，外面的类就不需要每次创建额外的实例，直接从 DBUtil 类 拿即可。
( DBUtil 中的单例模式正是做到了这一点)
好处二：同样地，外面的类需要用到一些同样的方法，有了 DBUtil 这个类，对于代码与数据库之间的一些通用的操作方法，直接从 DBUtil 类 导入即可。
我们可以将 DBUtil 这个类想象成一个充电宝，而将使用这个 DBUtil 公共类的其他类，称为手机、平板、mp3…毫无疑问，充电宝就是为电子设备提供服务的，而这些电子设备其实只有一个目的：通过充电宝这个公共资源为自己充电。
2. 封装 BlogDB ( Blog Database )
(1) insert 方法
插入一篇博客，( 博客从浏览器编写，然后上传到服务器，服务器再上传到数据库 )
(2) searchAll 方法
查找所有博客，为了后续展示在博客列表页
(3) searchOne 方法
查找单篇博客，为了后续展示在博客内容页
(4) deleteOne 方法
删除博客，为了后续在浏览器页面上点击生效
(5) findCount 方法
查找当前用户的文章总数
3. 封装 UserDB（ User Database ）
(1) insert 方法
插入一名用户，( 从前端输入账号和密码上传到服务器，服务器再上传到数据库 )
(2) searchByUsername 方法
通过 username 来查找用户
(3) searchByUserID 方法
通过 userID 来查找用户
五、 定好前后端交互的思路
1. 实现每个页面的思想
- 博客列表页
- 博客内容页
- 博客登录页
- 博客编辑页
博客列表页和博客内容页是基于模板引擎实现的，我们将之前写死的列表页和内容页，稍作改动，变为模板文件，放入 【template】目录下，以备后用。我们可以将这两个模板文件理解为动态页面，即它随着服务器后端的代码改动而改动。
而登录页和编辑页不需要变为模板文件，因为它们本身不需要进行展示，只需要提交，所以，我们可以通过 form 表单的形式来构造 HTTP请求。
必须明确：
列表页和内容页是通过 浏览器输入 URL 路径这种形式来构造 HTTP 请求的。这种方式，绝大多数情况下，都是一个 GET 请求，所以，我们需要在 Servlet 代码中，构造 GET 响应。
登录页和编辑页是通过 form 表单的形式构造 HTTP 请求的，一般和 input 标签相关的提交按钮，都是 POST 方法。
2. 创建 ThymeleafConfig 类
创建 ThymeleafConfig 类，在类中初始化模板引擎 TemplateEngine，并将其实例化的对象 engine 放入 ServletContext 中，以备后用。
遵循 ( ServletCotext + Listener ) 这个固定写法
ServletCotext 用来存储对象，Listener 是监听器，用来监听 ServletContext.
其他类若想实例化 TemplateEngine 的时候，不必单独实例化了，直接 ServletContext
中拿即可。
// 固定写法: ServletContext + Listener 监听器 @WebListener public class ThymeleafConfig implements ServletContextListener { @Override public void contextInitialized(ServletContextEvent servletContextEvent) { ServletContext servletContext = servletContextEvent.getServletContext(); // 1. 创建 TemplateEngine 实例, 表示模板引擎 TemplateEngine engine = new TemplateEngine(); // 2. 创建 ServletContextTemplateResolver ServletContextTemplateResolver resolver = new ServletContextTemplateResolver(servletContext); resolver.setPrefix("WEB-INF/template/"); resolver.setSuffix(".html"); resolver.setCharacterEncoding("UTF-8"); // 3. 将 resolver 和 engine 联系起来 engine.setTemplateResolver(resolver); // 4. 将 engine 放到 ServletContext 中，以备后用，它就像冰箱一样，随时拿随时放 servletContext.setAttribute("engine", engine); System.out.println("TemplateEngine 初始化完毕！"); } @Override public void contextDestroyed(ServletContextEvent servletContextEvent) { } }
3. 使用模板渲染时的步骤
1. 从 ServletContext 中取出 TemplateEngine 实例
( TemplateEngine 和 ServletContextTemplateResolver 已经在 ThymeleafConfig 类中实现好了，我们直接从 Servlet 中拿对象 engine 即可)
2. 构建好 WebContext，将模板文件的变量和 Java 中的变量联系起来
( 类似于 【 ${blogs} 和 blogs 】这样的替换 )
3. 使用 process 方法，完成模板最终的渲染
