共计 1332 个字符，预计需要花费 4 分钟才能阅读完成。
工具
- IDE 为idea16*
- JDK 环境为1.8
- gradle 构建，版本：2.14.1
- Mysql 版本为5.5.27
- Tomcat 版本为7.0.52
- 流程图绘制（xmind）
- 建模剖析软件PowerDesigner16.5
- 数据库工具 MySQLWorkBench，版本：6.3.7build
本期指标
1. 文章浏览前端页面全副实现
2. 依据页面框架进行解耦
页面从属信息
文章信息
文章零碎前端页面
文章零碎作为咱们博客零碎中重要的一环，咱们须要的不仅仅是文章零碎，更多的是能够了解成一个自媒体平台，咱们的外围价值通过这个体现进去了，能力把其余的货色做好。
上次咱们的文章中能够看到前端页面的一些货色，次要是：
- 文章列表（文章内容）
- 文章分类导航
- 标签聚合导航
- 站点根本信息
- 等···
出于便当思考咱们须要把头尾独自抽取进去寄存，页面其余的内容咱们须要依据须要解决。当初咱们先不思考那么多，咱们只是基于程序正当建设的角度来说，咱们须要把页面下面动态变化的信息都独立做成接口来供内部调用，而后个别不怎么变动的货色咱们就间接固化到页面中，即是说：
两头的列表咱们采纳分页加载，全副动静从接口获取
下面的一些其余变动的信息咱们从申请的时候就附加给它
所以，咱们须要把后面的首页接口重写一下。
首先，咱们给首页获取数据的接口打上过期的标记。
既然咱们曾经把首页的设置为过期，那么新的接口必须对照着做一个，那么咱们须要怎么解决呢？依照后面的思路来讲，咱们当初须要依据需要将咱们页面信息拆分成多个接口，首先须要把右边咱们圈进去的局部整合到一起，那么咱们须要先把个人信息分类导航和标签聚合这几个独立进去，所以得咱们间接上代码。
说实话感觉下面没啥解释的，说白了就是将数据依照肯定的构造组合起来，具体展现的 json 如何，咱们能够间接在上面看：
通过下面咱们组织的 json，咱们能够很清晰明了的看到咱们的数据结构是依据页面构造来组合的，所以咱们须要数据的时候对应着取值就能够解决问题。
说了这么多后端的接口，咱们当初须要拿数据去前台展现，所以咱们须要在前端获取数据。前台数据展现还是应用 doT.min.js 来展现，代码如下：
下面咱们能够看到 pagefn 用了几次，这个是 doT 的关键词，意思是设置模板。
其实在下面的代碼中我們能够看到 doT 模板和其余的都差不多，無非就是依照固定的格局組裝数据，反正就是网页怎么写的，而后把格局套上，而后依照格局输入就行了。
做到这里后，咱们就能看到做出的后果是什么样子的了。效果图临时不上，大家前面自行下载我的项目运行就晓得了。
既然这里做了，那么咱们势必要做一下我的项目的文章详情。文章详情咱们应该怎么办呢？咱们须要 通过要害数据去查找到具体的文章信息。
咱们能够看到下面的 json 数据中蕴含一个 id 的字段，而后咱们对照数据库会看到 id 和数据库的 id 也是对应的。所以咱们须要用接口实现通过 ID 查找数据库对应的文章信息。思路有了，那么代码实现就是很容易的，间接代码如下：
下面的代码一个是 RESTful 格调申请地址的文章页面，一个是 api 接口拜访地址。上面别离是 Service 和 Dao 层的代码。
那么目前前端页面相干的货色根本实现，这一期也完结了，前面咱们就是配置零碎后端了。加油，有趣味额的一起来吧。
