[PBlog] 使用 Java 写的用 markdown 做为写作语法的单页应用博客，已开源

[Lpl]

写在题前

很感谢 @Threezj 同学给的建议，已经使用 AngularJS 把 PC 端的页面给换成了单页应用

NOTE ： 下边的文章管理地址希望各位手下留情，做演示用的...别乱改

地址

预览地址: Pelin 的个人博客

文章管理: PBlog-文章管理 由于使用的 nginx ，所以这个博客系统没有登录之类的，直接使用 nginx 做的权限控制。现在为了做演示，把权限控制去掉了

源代码地址:PBlog-Source

简介

PBlog 基于 Spring Framework + Mybatis ，前端使用 Less 作为预处理样式， marked.js 来处理 markdown 格式内容，并且通过 AngularJS 控制视图跳转实现 PC 端单页应用， gulp 作为前端自动化构建工具; 移动端页面采用 HTML5 + CSS3 标准实现。

The application used following open-source projects:

• Spring Framework
• MyBatis
• jQuery
• Less
• Font Awesome
• AngularJS
• angular-loading-bar.js
• marked.js
• highlight.js
• gulp

开发环境:

• JDK: java version "1.7.0_80"
• JVM: HotSpot(TM) 64-Bit Server VM (build 24.80-b11, mixed mode)
• MySQL: 5.6.24
• IDE: IntelliJ IDEA 15.0.2

安装使用

项目 war 包目录及使用方式：PBlog-releases

进度

Completed:

• 首页 (PC 端和移动端)
• 归档 (PC 端和移动端)
• 分类 (PC 端和移动端)
• 关于 (PC 端和移动端)
• 文章管理

TODO List

• 修复一些页面显示数据的 bug
• 增加日志记录
• 读书
• 日记
• 七牛图片上传
• 单元测试覆盖(coveralls)

结尾

后端的 Java 代码没什么很新颖的东西，还是普通的增删改查，对于初学者来说很容易理解。前端的东西费了很多功夫，没有设计图就参(chao)考(xi)别人的网站，所以如果诸位有发现上边某个样式很像你的网站，请不用怀疑，应该就是你的。

目前来说，还有挺大一部分功能没有能够完善，而且项目目录比较混乱。但是得忙论文了，忙论文期间我慢慢地会给梳理一下，并且把 wiki 写出来。

很欢迎大家提 Pr 和 Issue ，只要你感觉有哪点不合适，都可以提出来。说到重点了，厚着脸皮求个 star ヾ(=^▽^=)ノ

文章管理的那个，还没有做输入校验和表单提交校验，所以测试的话就按照正常测试吧。精力都放在了前端的页面上了，有兴趣的给个 star 也好啊= =

[bdbai]

看起来蛮棒的，后台管理秒开啊。
话说 Markdown 有原生斜体强调的语法，为什么要用 HTML 呢？我帮你改了前几个，希望楼下或者楼主改完它 :)

[Threezj]

突然看到我的名字吓了一跳。我刚学 java 后端不久。也在考虑 java web 可以做一个什么有趣点的项目，感觉小项目的话，后端代码就是增删改查。一些高并发的项目，作为学生又接触不到。

[Lpl]

@bdbai 多谢~我没想着用斜体，我把内容中的<em>标签内容都设置为正常了..不习惯那个样式

@Threezj 我以前不知道单页应用，所以通过你帮忙换成了单页应用了。小项目确实是增删改查= =

[bdbai]

@Lpl 你可以试下反引号包裹，比如
`Gulp`

[Lpl]

@bdbai soga ，单引号包括后会被解析成<code>格式的, 下滑杠包括的会被解析成<em>, 这个 get 到了~

[ooTwToo]

不错不错，以前也有过此类想法。。话说你前后端完全分离了吗？ 感觉前端构建工具跟 java 一起用，总感觉很别扭。😳

[Lpl]

@ooTwToo 没有做分离...我感觉也有点别扭。我当时写的时候没想到用自动化构建工具。也就是离职后感觉公司用 gulp 做构建实现前后端分离不错，就借鉴了一半，没借鉴另一半 （╯－＿－）╯╧╧

[ooTwToo]

@Lpl 噢，话说前端构建这块我还需要花时间恶补一下了。另外你可以表示一下 maven 的 profile 来打包不同环境的配置文件。还有，现在静态博客很受欢迎~你可以试着分离出一个纯前端的 blog~😁

[Lpl]

@ooTwToo 不用啊，不同环境只要安装 maven 3.0+版本的话打包命令都一样~ 静态博客的话我完全写完了，我给分离出来，不过我写的不是响应式的，是写了两套前端的页面，那时候估计要改样式

[tedd]

不太懂 java spring ，请问前台与后台的通信是基于 java spring 提供的 rest api 接口进行的吗？

[okampfer]

我也是原来做后端转而自学前端的，想达到前后端分离、同一套 api 供网页和移动端使用。前端折腾起来很有趣，但花样翻新太快，现自学 react ，想用 react+redux 等实现单页应用，但是 es6 、 babel 、 webpack 那一套还正在边看文档边做的挣扎中……

[Lpl]

@tedd PC 端写的是基于 Spring MVC 的 @ResponsBody 注解返回 json 格式的数据，然后 AngularJS 做视图控制转发; 移动端的话把数据写在 Spring MVC 的 model 中，然后返回控制视图，在 jsp 页面使用 jstl 表达式把数据展示出来。

@okampfer 前端写起来好麻烦...如果没有设计图啥的，还得去抄人家的。我用的不是同一套 api ，移动端和 PC 端用的东西不一样， PC 端用的 rest 风格返回 json 数据，移动端是直接返回了视图

[tedd]

@Lpl 感谢说明，最近我也想学习下 spring ，请问有什么材料推荐吗？我的 java 水平就是停留在学校语法层面，工作后都没有用过

[Lpl]

@tedd 不客气~ 推荐你看一本书《 Spring in action 》中文版的，然后就是搜搜别人写的 demo 之类的，看看他们的源代码，间隙看看 Spring 的官方文档( http://projects.spring.io/spring-framework/)。期间肯定会遇到问题，得耐得下心，一个个解决，这也能够培养解决问题的能力。我感觉是这样的

[funky]

貌似图片什么的还是需要在 Markdown 里面引用外链么，建议加上在 Markdown 里面加上引用本地图片的

[funky]

才发现貌似没有本地图片上传的功能:)

[Lpl]

@funky 嗯，这个目前在写，准备加上七牛的上传，到时候替换下 key 就行了。本地上传的话，太费服务器了。应该这个月下旬能把所有的都写好，可以加个 star 关注下（我感觉我在卖力吆喝(。•́︿•̀。)）

[funky]

@Lpl 上七牛存储的话没有七牛帐号的就 go die 了。虽然我觉得怎么简单怎么来。

[Lpl]

@funky 嗯，也确实有担心这个问题。等写到那的时候会考虑上传到相对路径下