eb实战之发表博客

前言

作为一名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

作者：suemi
链接：https://www.jianshu.com/p/d9caa410fb08