最開始是在用wordpress做為個人博客，由于其過于臃腫和繁瑣，后來改為Hexo托管在github上，但是個人覺得還是在訪問速度方面有些慢且發(fā)布文章不是很方便快捷，所以決定自己作一個輕便的blog。
首先貼出自己的demo
為什么使用vue
因為Vue是一個非常輕量級的前端框架，其他原因我不再一一贅述，具體可見Vue官方文檔
leancloud是什么
leancloud為我們提供數(shù)據(jù)存儲、實時消息和推送、統(tǒng)計分析，對于個人站點的使用是綽綽有余。
本博客框架
采用前端使用vue 1.0做為開發(fā)框架，leancloud為本站提供數(shù)據(jù)儲存服務(wù)。
所有靜態(tài)文件存放在七牛云或阿里OSS上，并不需要另外購買服務(wù)器，這對于個人來說省了不少費用。
文件目錄
看到文件目錄之后應(yīng)該對本站的結(jié)構(gòu)了解很清楚了，代碼中使用到了vuex，使數(shù)據(jù)流動更加清晰和簡單。這個時候我們應(yīng)該關(guān)心在什么地方使用到了leancloud？怎么調(diào)用leancloud？如何在leancloud上存儲數(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)用此方法進行初始化，就可以創(chuàng)建 class 或任何其他操作了。
如何在leancloud上存儲數(shù)據(jù)并查看數(shù)據(jù)?
在對leancloud進行初始化之后，數(shù)據(jù)的增刪改查操作全部是在src／service層中完成的，具體方法可查看代碼以及leancloud官方數(shù)據(jù)存儲文檔
由于時間倉促，本站目前僅實現(xiàn)了以下功能：
- 博客內(nèi)容的發(fā)布、管理
- 支持markdown語法編輯
- 支持簡單的代碼高亮
- 頁面自適應(yīng)
后續(xù)需要實現(xiàn)的功能
- 由于markdown組件中的樣式是自己編寫的，所以只能支持簡單的語法高亮，后續(xù)改進中會加入 PHP、javascript、html等代碼樣式
- 賬戶的登錄(包括創(chuàng)建用戶和第三方用戶的登錄)
- 可根據(jù)白天夜間調(diào)節(jié)主色調(diào)
- 統(tǒng)計分析
- 消息推送
后三個都是可以使用leancloud提供的服務(wù)完成，具體方法會在后續(xù)代碼中提供。
代碼在build完成之后是存放在阿里OSS上的，所以訪問速度會快很多，可以自定義域名。
至此，書寫完畢，如有欠缺，請多指教。
補充：此項目為純前端項目，為安全起見，請在leancloud控制臺》應(yīng)用》安全中心頁面，設(shè)置安全域名即可。
