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

效果展示