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)安装请求数据c
主要操作技能：
(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）新闻详情样式
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献7条内容
所有评论(0)