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('後臺錯誤，稍後再試')
       });
    });
}

效果展現