基于Ghost的前后端分离网站

用到的技术栈

DIV + CSS, JQuery, RESTful, JSON API

技术选型

话说之前用Ghost来做个人博客，其简洁易用的特性很让人喜欢。开源免费，基于Node.js开发，性能甩出WordPress好几条街。而且提供JSON API，适合做前后端分离架构的网站，妈妈再也不用担心我写恶心的模板语言了。而且Ghost提供RESTful风格的JSON API,接口清晰明了，简单易用。

image.png image.png image.png

所谓的前后端分离就是用Ghost做后台内容管理，前台页面通过调用Ghost的API来展示数据。这样做的好处就是手机端和电脑端可以同时调用同样的API，只需要解决界面适配的问题。

开发流程

先去官网下载最新的Ghost源码：https://ghost.org/developers/
解压之后安装第三方依赖：npm install
然后运行: npm start index.js

image.png

可以看到Ghost已经启动，监听在88端口，访问服务器的外网路径加端口号就可以访问你的博客了。

image.png

路径后加/ghost是你的后台管理地址

image.png

开启pulic API, 在Labs中

image.png

环境基本搭建好了，接下来就是如何通过API获取数据并展示了。
先来访问下默认的前台界面，看一下token，你就可以通过Ajax请求来获取数据了。
发送POST请求，获取数据：

image.png

具体参考文档：http://api.ghost.org/docs/ajax-calls-from-an-external-website

image.png

总结

在实际项目部署的时候有一个坑，就是图片上传的时候都是保存的相对路径，比如我获取的文章数据是这样的：

image.png

但是我把Ghost放在作为一个子目录放在项目中：

image.png

所以会出现图片无法显示的情况，这是后就需要祭出Nginx大杀器了。需要用Ngxin来做URL Rewrite