【Java项目】美食&旅行博客

核心功能

美食&旅行博客的主要功能是展示博客、以及对博客的基本管理（发表博客、修改博客、删除博客、关于作者）

---

核心技术

1. 客户端
   1）使用JSP、JavaScript、CSS、jQuery、Bootstrap作为客户端页面开发
   2）UEditor富文本编辑器前端插件
2. 服务端
   1）Servlet
   2）JDBC
   3）Jackson作为JSON数据格式与Java对象序列化/反序列化工具
   4）UEditor服务端上传图片接口使用与配置
3. 其他
   1）Maven
   2）Tomcat
   3）MySQL

---

开发环境

1. IDEA
2. Maven3.6.1
3. JDK8

---

框架搭建

1. 创建Maven项目
   在项目中的pom.xml中加入相关依赖
2. 完成前端基本页面设计
   其中包括：使用Bootstrap框架、css定义使用的样式、
   font-awesome-4.7.0字体样式库、Bootstrap校验插件：
   bootstrapvalidator、百度富文本编辑器：Ueditor

---

设计业务接口

• 文章列表页面：文章列表（article_list）、发布新博客、修改博客、删除博客、关于作者；

• 文章详情页面：文章详情、修改博客、关于作者；

• 统一的API返回数据格式：
  1、操作成功与否：success（boolean型）
  2、返回类型都为application/json;charset=utf-8
  3、消息：客户端显示message（String型）
  4、数据：业务相应数据data（Object型）
  5、堆栈日志：出现错误时，URL加上请求参数devToken=xxx，用来展示开发调试服务器堆栈信息stackTrace（String型）

• 客户端解析后返回数据：

	文章列表	文章详情	新增文章	修改文章	删除文章
url	/articleList	/articleDetail	/articleAdd	/articleUpdate	/articleDelete
请求	请求GET请求: userAccount=stu	请求POST表单请求	请求POST表单请求	请求POST表单请求	请求GET请求:ids=[1,2,3]
响应	application / json	application / json	application / json	application / json	application / json

---

设计数据库表

用户表和文章表之间是一对多的关系

t_user表至少存在一个用户账号字段
t_article需要id、title、content、use_id（与t_user连接）

---

代码详细设计

1. 定义Servlet请求接口：
   ArticleListServlet：文章列表（/articleList）
   ArticleDetailServlet：文章详情（/articleDetail）
   ArticleAddServlet：新增文章（/articleAdd）
   ArticleUpdateServlet：修改文章（/articleUpdate）
   ArticleDeleteServlet：删除文章（/articleDelete）
   1）创建AbstractBaseServlet类：需要继承父类HttpServlet，我们使用的主要为get和post请求，所以还需要重写doGet和doPost方法，并预留下抽象方法供具体的Servlet子类实现
   2）依次创建API接口需要的上述五个Servlet，继承AbstractBaseServlet并完成抽象方法。
   3）初步调试保证配置无误：在postman中进行API请求模拟。请求方法使用get提交 url：http://localhost:8080/blog/articleList?userAccout=stu

2. 设计统一返回类：
   1）属性：success、code、message、stackTrace、data
   2）可能会包括一些常用的预设属性值，可以使用创建者设计模式来进行属性的装配。如使用异常类来设置属性值等。

3. 设计自定义异常：
   1）设计一个自定义异常的基类：BaseException，继承自RuntimeException，可以设置code、message属性；
   2）设计一个请求参数异常ParameterException；
   3）一个应用系统异常SystemException，继承自BaseException；

4. 设计JSON序列化、反序列化类
   1）当request请求头为application/json时，需要读取request请求体requestbody中 的 json 数据。
   2）response返回时，需要将java对象序列化为json字符串并写入response。

---

项目难点

1. 项目总体实现流程：
   1）在浏览器输入博客地址，提交http请求，找本地post的DNS服务器，如果找不到就往上层找，直到找到域名；
   2）根据域名找到ip（由于本次使用的localhost，所以找到本机ip即可），请求到本机的服务器地址，此时请求jsp页面，服务器返回前端客户端静态html页面（在页面中请求相关静态资源请求例如：css等），页面初始化完毕
   3）手动点击发布新文章、修改、删除按钮，触发ajax请求，通过Servlet处理业务，之后利用数据库的SQL操作，操作成功后返回给前端一个JSON数据。

2. 梳理请求的客户端与服务端实现如下图所示：

---

后端管理功能展示

• 博客首页

• 发布新博客

1）编写博客页面

2）博客首页新增博客

---

• 修改博客

1）首页面修改博客

首页面勾选需要修改的博客，点击导航栏的修改博客

2）展示原来博客详情

3）修改后博客首页博客已更新

---

• 删除文章列表

1）首页

点击首页导航栏中删除文章列表进入删除操作页面

2）删除文章列表详情

勾选需要删除的博客文章，点击导航栏的删除文章

3）删除博客提示弹框

选择确认则删除博客或者取消删除博客

4）删除文章后首页

需要删除的博客文章已删除

---

• 关于作者

---

项目优化

1. 浏览器端：
   1）压缩源码和图片：css文件源代码可以普通压缩、jpg格式图片在保证质量的前提下压缩到50%-70%
   2）选择合适的图片格式：颜色多采用jpg、颜色少采用png
2. 管理端：
   1）功能：可以增加注册、登录相应模块
   2）性能：相应时间较长（可以规定一个sql查询时间和页面响应时间来对应查看）
   3）美观：文章列表风格简单，可以使用semantic UI框架升级

---

项目测试

1、功能测试：
1）链接测试：是否按照指示链接跳转到该链接的页面，链接的页面是否存在，是否存在孤立的页面；
2）表单测试：测试发布一篇新博客、修改博客、删除博客的提交信息的完整性，以校验提交给服务器的信息的正确性；
3）数据库测试：数据的一致性和输出是否错误；
2、性能测试：
1）连接速度测试
2）压力测试：发布博客字数超过最大容量的结果
3、可用性测试：
1）导航测试：导航是否清晰明了，该项目的主要部分是否通过主页存取，连接到外部网站是否可以打开、web页面结构、风格、导航是否一致；
2）图形测试：图形标示是否有明确用途，尺寸是否合适；
3）内容测试：检验web应用系统提供信息的正确性；
4、客户端兼容性测试：
1）平台测试：windows、Linux等
2）浏览器测试：Chrome、IE、Firefox等

---

项目代码

完整代码请点击此处查看

如无法点击，链接如下：
https://github.com/LXL7868/Blog/commit/2deb2bb4cb16c41e2d06e0cb917e60691dff174a