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

<template> <div id="news"> <h2>我是新闻组件</h2><br /> <ul class="list"> <li v-for="(item,key) in list"> <!--动态路由,将具体的值传过去--> <router-link :to="'/detail/'+item.aid"> {{item.aid}}--{{item.title}}</router-link> </li> </ul> </div> </template> <script> export default { data() { return { msg: '我是新闻组件哦!', list: [] } }, 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) { //响应的数据 this.$http.jsonp(urls).then((response)=> { //用到this,this的指向 console.log(response); //将数据赋值给list this.list=response.body.result; }, function(err) { //异常提示 console.log(err); }); } }, mounted(){ //生命周期 this.requestData(); // 调用方法 } } </script> <style lang="scss"> /*列表样式*/ .list{ line-height: 34px; border-bottom: 1px solid #eee; font-size: 16px; /*超链接样式*/ a{ color:#666; } } </style>

Details.vue

<template> <div id="detail"> <!--<h3>我是详情</h3> --> <h2>{{list.title}}</h2> <!-- 如何将html的标签解析呢 v-html--> <!--<div>{{list.content}}</div>--> <div v-html="list.content"></div> </ul> </div> </template> <script> export default { data() { return { msg: 'my detail!', list:[] } }, mounted() { //生命周期 // console.log(this.$route.params); //获取动态路由传值 //获得新闻编号 var aid = this.$route.params.aid; //调用请求的数据 this.requestData(aid); }, methods: { requestData(aid) { //get请求如果跨越的话,后台java要允许跨越哦 //新闻详情接口: var urls = "http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid="+aid; this.$http.get(urls).then((response)=>{ console.log(response); //将请求的数据存入到list列表中 this.list =response.body.result[0]; },(err)=>{ console.log(err); }); } } } </script> <style lang="scss"> /*详情样式*/ #detail{ line-height: 2; /*2倍的行高*/ padding: 10px; img{ /*图片宽*/ max-width: 100%; } } </style>

App.vue 组件(美化头部信息)

<template> <div id="app"> <!--头部样式--> <header class="header"> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/home">首页</router-link> <router-link to="/news">新闻</router-link><br /> </header> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template> <script> export default { name: 'app', data() { //业务逻辑的数据 return { msg: 'hello' } } } </script> <style lang="scss"> /* 头部样式*/ .header{ height: 44px; line-height: 44px; color: #fff; background: #000; text-align: center; /*超链接样式*/ a{ color: #fff; padding: 0px 20px; } } </style>

index.html (复制百度视口)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vuedemo5</title> <!--复制百度视口哦!index.html --> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html> 

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

效果

细节部分


网页的模式

(1)新闻列表


调成手机模式

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

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


下面是美化页面

(1)头部样式

(2)新闻列表样式

(3)新闻详情样式

原文链接:https://blog.csdn.net/hlx20080808/article/details/82725150?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277607816782248557448%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277607816782248557448&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-16-82725150-null-null.nonecase&utm_term=%E6%96%B0%E9%97%BB

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片