最開始是在用wordpress做為個(gè)人博客，由于其過于臃腫和繁瑣溅潜，后來改為Hexo托管在github上术唬，但是個(gè)人覺得還是在訪問速度方面有些慢且發(fā)布文章不是很方便快捷，所以決定自己作一個(gè)輕便的blog伟恶。
首先貼出自己的demo
為什么使用vue
因?yàn)閂ue是一個(gè)非常輕量級(jí)的前端框架碴开，其他原因我不再一一贅述毅该，具體可見Vue官方文檔
leancloud是什么
leancloud為我們提供數(shù)據(jù)存儲(chǔ)博秫、實(shí)時(shí)消息和推送潦牛、統(tǒng)計(jì)分析，對于個(gè)人站點(diǎn)的使用是綽綽有余挡育。
本博客框架
采用前端使用vue 1.0做為開發(fā)框架巴碗，leancloud為本站提供數(shù)據(jù)儲(chǔ)存服務(wù)。
所有靜態(tài)文件存放在七牛云或阿里OSS上即寒，并不需要另外購買服務(wù)器橡淆，這對于個(gè)人來說省了不少費(fèi)用。
文件目錄
看到文件目錄之后應(yīng)該對本站的結(jié)構(gòu)了解很清楚了母赵，代碼中使用到了vuex逸爵，使數(shù)據(jù)流動(dòng)更加清晰和簡單。這個(gè)時(shí)候我們應(yīng)該關(guān)心在什么地方使用到了leancloud凹嘲？怎么調(diào)用leancloud师倔？如何在leancloud上存儲(chǔ)數(shù)據(jù)并查看數(shù)據(jù)？切莫急周蹭，接下來便是：
在什么地方使用到了leancloud趋艘？
從上圖中可看出，代碼中使用了vuex操作數(shù)據(jù)凶朗，所以在service層與leanchoud了發(fā)生了數(shù)據(jù)交互瓷胧，部分代碼如下：
export const getArticles = ({
dispatch
}, data) => {
const query = new AV.Query('Articles');
query.descending('createdAt');
query.limit(data.limit); // 最多返回 10 條結(jié)果
query.skip(data.start);
query.find().then(function(results) {
dispatch('getArticles', results);
}, function(error) {});
};
但是這樣使用就可以了嗎？No
怎么調(diào)用leancloud棚愤？
本站是直接在index.html中加入下面代碼：
<script src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
在ext/vue_ext.js文件中封裝leancloud初始化的方法搓萧，如下：
function AVInit(){
const appId = 'Your appID';
const appKey = 'Your appkey';
AV.init({ appId:appId, appKey:appKey });
}
然后在App.vue中調(diào)用此方法進(jìn)行初始化，就可以創(chuàng)建 class 或任何其他操作了宛畦。
如何在leancloud上存儲(chǔ)數(shù)據(jù)并查看數(shù)據(jù)?
在對leancloud進(jìn)行初始化之后矛绘，數(shù)據(jù)的增刪改查操作全部是在src／service層中完成的，具體方法可查看代碼以及leancloud官方數(shù)據(jù)存儲(chǔ)文檔
由于時(shí)間倉促刃永，本站目前僅實(shí)現(xiàn)了以下功能：
- 博客內(nèi)容的發(fā)布货矮、管理
- 支持markdown語法編輯
- 支持簡單的代碼高亮
- 頁面自適應(yīng)
后續(xù)需要實(shí)現(xiàn)的功能
- 由于markdown組件中的樣式是自己編寫的，所以只能支持簡單的語法高亮斯够，后續(xù)改進(jìn)中會(huì)加入 PHP囚玫、javascript、html等代碼樣式
- 賬戶的登錄(包括創(chuàng)建用戶和第三方用戶的登錄)
- 可根據(jù)白天夜間調(diào)節(jié)主色調(diào)
- 統(tǒng)計(jì)分析
- 消息推送
后三個(gè)都是可以使用leancloud提供的服務(wù)完成读规，具體方法會(huì)在后續(xù)代碼中提供抓督。
代碼在build完成之后是存放在阿里OSS上的，所以訪問速度會(huì)快很多束亏，可以自定義域名铃在。
至此，書寫完畢，如有欠缺定铜，請多指教阳液。
補(bǔ)充：此項(xiàng)目為純前端項(xiàng)目，為安全起見揣炕，請?jiān)趌eancloud控制臺(tái)》應(yīng)用》安全中心頁面帘皿，設(shè)置安全域名即可。
