Vue.js框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能（小试牛刀）

项目结构

news.html（新闻列表文件）

    
    
    
    
    
    
    
    
    




    

        

            

            

                
{{item.title}}
                
{{item.content | stripHTML}}
            
            

                查看详情
            
        
    

js/news.js（新闻列表js文件）

let url = 'http://your_ip:your_port/api/api_name';
new Vue({
    el: '#app',
    data: {
        list: [],
    },
    created: function () {
        this.init();
    },
    methods: {
        init: function () {
            this.$http.post(url, {start: 0, count: 6}, {emulateJSON: true}).then(function (r) {
                this.list = r.body.data;
            }, function () {
                alert('接口请求失败！');
            });
        }
    },
    filters: {
        stripHTML: function (c) {
            return c.stripHTML().substring(0, 30) + "...";
        }
    }
});

detail.html（详情页html）

    
    
    
    
    
    
    
    
    




    

        
{{title}}
        
{{date|format}}
        

    
    

        [上一篇] {{prevTitle}}

        [下一篇] {{nextTitle}}


    

js/detail.js（详情页js）

let url = 'http://your_ip:your_port/api/api_name';
new Vue({
    el: '#app',
    data: {
        list: [],
    },
    created: function () {
        this.init();
    },
    methods: {
        init: function () {
            this.$http.post(url, {start: 0, count: 6}, {emulateJSON: true}).then(function (r) {
                this.list = r.body.data;
            }, function () {
                alert('接口请求失败！');
            });
        }
    },
    filters: {
        stripHTML: function (c) {
            return c.stripHTML().substring(0, 30) + "...";
        }
    }
});

css/vue-common.css（公用简单样式，聊胜于无，用于测试看清楚具体内容）

table tr td:first-child {
    /**背景图片*/
    width: 200px;
    height: 100px;
    /**居中填满*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

a {
    text-decoration: none;
}

.hasLink {
    color: black;
    border-bottom: 1px solid black;
}

.hasLink:hover {
    color: blue;
    border-bottom: 1px solid blue;
}

.noLink {
    color: lightgray;
}

._active {
    background-color: red;
}