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

朴灿烈づ我的快乐病毒、 2024-02-18 23:44 5阅读 0赞

## **主要操作技能：** ##

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

新闻详情接口：[http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488][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">
    		
    			<h2>{
       {list.title}}</h2>	
    		
    			
    			<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="/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>
        
        <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！

![70][]

### 效果 ###

### *细节部分* ###

![70 1][]

![70 2][]

![70 3][]

![70 4][]

![70 5][]

--------------------

### 网页的模式 ###

（1）新闻列表

![70 6][]

![70 7][]

--------------------

### 调成手机模式 ###

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

![70 8][]

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

![70 9][]

--------------------

### 下面是美化页面 ###

***（1）头部样式***

![70 10][]

***（2）新闻列表样式***

![70 11][]

***（3）新闻详情样式***

![70 12][]

[http_www.phonegap100.com_appapi.php_a_getPortalArticle_aid_488]: http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488
[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5c220e1a9a254b4f98a14b2a98b8a1ff.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/14d37df28a24439caacd0421dd92a499.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8b50a99986004221abea2b8cb025c911.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ae60e8f9b1744e799cbe0e2acb94b661.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6497138871ad4243ac00fa1a5edbbd2b.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b1701c0437634146877e26f7271bbb65.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c3d9ddfcbe364639a0906ce7a72a7728.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0474b5a1b02f4260b8006c6f1b7590c8.png
[70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/79fc1156d6e949caa33e4834ea295efe.png
[70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/f8648b48ad3e4f22a314bbbc8efa921c.png
[70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fc9a454bcd2748c6b7c2d162f172df61.png
[70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c7e1ad9ea1654a5dba6b66cbcab63665.png
[70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2086bb7ca0a347beb2d213a7f495d052.png