前言
作為一名Web新手，我最早接觸的是angular框架，之后我帶著好奇看了看backbone和ember，毫無疑問它們都是十分優秀的作品，但要么太臃腫，要么學習曲線太陡峭。當我看到Vue.js的時候，我就瞬間被它的美感所吸引，angular的雙向綁定與directive，backbone的小巧簡潔，很好地結合在一起。而且它只是一個庫，而非一個框架，你可以自由地設計你的作品和運用其他工具。遺憾的是由于是新作品，并沒有一個強大的社區，有些方面也不太成熟，還有一些bug。這次的博客功能十分簡單，但算是Vue的一個簡單例子。
完成的功能
- 發表博客
依賴的工具
- Vue.js庫
- Express框架
- mongoose
- Bootstrap
- jQuery
- jQuery-tag-plugin
- SuMarkdown
頁面代碼
由于頁面并不復雜，而且大部分與我前面所寫的博客Web實戰之Markdown編輯器中的頁面重合，故這一次就不貼出頁面代碼了
前端代碼
Vue.directive('tags',{
twoWay:true,
bind: function () {
var self=this;
console.log(self);
$(self.el).on('itemAdded',function(){
scope.blog.tags=$(this).val();
});
},
update:function(){},
unbind:function(){
$(this.el).off();
}
});
var scope=new Vue({
el:'body',
data:{
profile:{
avatar:''
},
avatar:'',
blog:{
title:'',
tags:[],
body:'',
author:''
},
msg:'',
display:false
},
methods:{
getProfile:function(){
console.log('start');
$.get('/users/getUser').done(function(data){
if(data.success){
$.extend(scope.profile,data.content.profile);
scope.profile.uname=data.content.username;
}
else{
if(!data.err.message) return;
scope.msg=data.err.messgae;
scope.display=true;
}
}).fail(function(){
scope.msg='未知錯誤，請重試';
scope.display=true;
});
},
submit:function(){
this.blog.author=this.profile.uname;
$.post('/writeBlog',this.blog).done(function(data){
console.log(data);
if(data.success){
scope.msg='發表成功';
scope.display=true;
}
else{
if(!data.err.message) return;
scope.msg=data.err.message;
scope.display=true;
}
}).fail(function(){
scope.msg='未知錯誤，請重試';
scope.display=true;
});
}
}
});
scope.getProfile();
后端代碼
此次的后端代碼也十分簡單
function writeBlog(req,res){
if(req.body.author!==req.session.uname)
return res.json({
success:false,
err:new Err('用戶名不一致')
});
(new Blog(req.body)).save(function(err){
if(!err) res.json({
success:true,
err:null
});
else res.json({
success:false,
err: new Err('后臺錯誤，稍后再試')
});
});
}
效果展示
Screenshot from 2014-12-13 13:01:53.png
