Vue.js框架--路由并请求数据实现新闻列表及详情（十八）

主要操作技能：

(1)  提供对外的接口
新闻列表接口：http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1

新闻详情接口：http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488

(2)安装请求数据
cnpm install vue-resource --save

(3)在main.js文件中配置 
import VueResource from 'vue-resource'
Vue.use(VueResource);

(4)在新闻页面中应用
 methods: {
            requestData() {
                //新闻列表接口：
                var urls = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

                //jsonp请求数据时，后台API接口要支持jsonp
                this.$http.jsonp(urls).then(function(response) { //响应的数据
                    console.log(response);
                }, function(err) { //异常提示
                    console.log(err);
                });
            }
        },
        mounted(){  //生命周期
            this.requestData(); // 调用方法
        }
 

代码：新闻与详情组件

News.vue

Details.vue

App.vue 组件（美化头部信息）

 

index.html (复制百度视口)

鼠标右键|检查|选中复制就OK！

 

效果

细节部分

 

 

 

 

---

网页的模式

（1）新闻列表

---

调成手机模式

鼠标右键|检查|调成手机的模式查看哦！

根据新闻列表查询具体的详情

---

下面是美化页面

（1）头部样式

 

（2）新闻列表样式

（3）新闻详情样式