Web实战之发表博客

前言

作为一名Web新手，我最早接触的是angular框架，之后我带着好奇看了看backbone和ember，毫无疑问它们都是十分优秀的作品，但要么太臃肿，要么学习曲线太陡峭。当我看到Vue.js的时候，我就瞬间被它的美感所吸引，angular的双向绑定与directive，backbone的小巧简洁，很好地结合在一起。而且它只是一个库，而非一个框架，你可以自由地设计你的作品和运用其他工具。遗憾的是由于是新作品，并没有一个强大的社区，有些方面也不太成熟，还有一些bug。这次的博客功能十分简单，但算是Vue的一个简单例子。

完成的功能

• 发表博客

依赖的工具

• Vue.js库
• Express框架
• mongoose
• Bootstrap
• jQuery
• jQuery-tag-plugin
• SuMarkdown

页面代码

由于页面并不复杂，而且大部分与我前面所写的博客Web实战之Markdown编辑器中的页面重合，故这一次就不贴出页面代码了

前端代码

JavascriptVue.directive('tags',{
twoWay:true,
bind: function () {
var self=this;
console.log(self);
$(self.el).on('itemAdded',function(){
scope.blog.tags=$(this).val();
});
$(self.el).on('itemRemoved',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();


后端代码

此次的后端代码也十分简单

Javascriptfunction 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('后台错误，稍后再试')
});
});
}


效果展示