16 Vue路由结合请求数据实现新闻列表新闻详情数据渲染

最新推荐文章于 2023-02-11 08:29:32 发布

七三里

最新推荐文章于 2023-02-11 08:29:32 发布

阅读量913

点赞数

分类专栏： Vue基础中的基础+实战

Vue基础中的基础+实战专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果图：

新闻列表	新闻详情	目录结构

注意点：
1.在index文件中，配置适应手机

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

2.在assets下面写的通用的css

basic.scss

在main.js中引入

import ‘./assets/css/basic.scss’;

3.使用路由 vue-router

4.请求数据 vue-resource

介绍：
basic.scss全局通用的css,在main.js中引入
index.html是配置html的
main.js是配置文件
App.vue是入口文件
Home.vue是首页文件
News.vue是新闻文件

源代码：
basic.scss:

@charset "utf-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}

html{
    font-size: 62.5%;
}

body {
    font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
    color: #555;
    background-color: #F7F7F7;
}
em, i {
    font-style: normal;
}
ul,li{
    list-style-type: none;
}
strong {
    font-weight: normal;
}
.clearfix:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

index.html:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<!--配置适应手机-->
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>vuedemo13</title>
	</head>
	<body>
		<div id="app"></div>
		<script src="/dist/build.js"></script>
	</body>
</html>

main.js:

import Vue from 'vue';
import App from './App.vue';

//引入公共的scss  注意：创建项目时候必须使用scss
import './assets/css/basic.scss';

//请求数据
import VueResource from 'vue-resource';
Vue.use(VueResource);

//引入路由
import VueRouter from 'vue-router';
//使用路由
Vue.use(VueRouter);

//创建组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';

//配置路由
const routes = [
	{ path: '/home', component: Home },
	{ path: '/news', component: News },
	{ path: '/content/:aid', component: Content },  /*动态路由*/
	{ path: '*', redirect: './home' }
]

//实例化VueRouter
const router = new VueRouter({
	routes  //缩写 相当于routes: routes
})

//挂载路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue:

<template>
  <div id="app">
		<header class="header">
			<!-- 路由跳转 -->
			<router-link to='/home'>首页</router-link>
			<router-link to='/news'>新闻</router-link>
		</header>
		<hr>
		
		<!-- 动态加载路由组件 -->
		<router-view></router-view>
		
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'	
    }
  }
}
</script>

<style lang="scss">
	.header {
		height: 4.4rem;
		background: skyblue;
		color: #fff;
		line-height: 4.4rem;
		text-align: center;
		a{
			color: #fff;
			padding: 0 2rem;
		}
	}
</style>

Home.vue:

<template>
	<div id="home">
		<h2>{{msg}}</h2>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '这是一个Home组件！'
			}
		}
	}
</script>

<style>
</style>

News.vue:

<template>
	<div id="news">
		<h2>{{msg}}</h2>
		<ul class="list">
			<li v-for="(item,key) in list">
				<router-link :to="'/content/'+item.aid">{{item.title}}</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '这是一个新闻组件！',
				list: []
			}
		},
		methods:{
			requestData() {
				var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
				this.$http.jsonp(api).then((response) => {
					//注意 用到this要注意this指向
					this.list = response.body.result;
				},(error) => {
					console.log(error);
				})
			}
		},
		mounted() {
			this.requestData();
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		li{
			height: 3.4rem;
			line-height: 3.4rem;
			border-bottom: 1px solid #eee;
			font-size: 1.6rem;
			a{
				color: #666;
			}
		}
	}
</style>

Content.vue:

<template>
	<div id="content">
		<h2>{{list.title}}</h2>
		<div v-html="list.content"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '数据',
				list: []
			}
		},
		mounted() {
			// console.log(this.$route.params);  /*获取动态数值传值*/
			var aid = this.$route.params.aid;
			//调用请求数据的方法
			this.requestData(aid);
		},
		methods:{
			requestData(aid) {
				var api = 'http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
				//请求数据
				this.$http.get(api).then((response) => {
					console.log(response);
					this.list = response.body.result[0];				
				},(error) => {
					console.log(error);
				})
			}
		}
	}
</script>

<style lang="scss">
	#content{
		line-height: 2;
		img {
			max-width: 100%;
		}
	}
</style>

七三里

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
16 Vue路由结合请求数据实现新闻列表新闻详情数据渲染

效果图：新闻列表新闻详情目录结构注意点：1.在index文件中，配置适应手机<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">2.在assets下面写的通用的cssbasic.scss...
复制链接

扫一扫