vue2.0 之 douban (六)axios的简单使用
2017-09-14 21:51
711 查看
由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如
安装axios
在main.js引入axios
在各个组件里获取数据,就是这么简单
由于豆瓣app首页的数据,我们不能直接通过api获取数据,只能先将数据保存下来进行访问,大家做项目的时候,访问静态数据json会遇到路径404,这里我们可以通过在dev-server.js里添加静态数据的路由,例如:我们先将豆瓣的首页数据先保存到/src/data/homeData.json,
dev-server.js 添加
在组件里面访问
接下来我们将静态数据显示到首页中:静态数据分为热门和推荐,我么先fetchData获取数据,通过判断card.name,赋值给recommendData、hotData
在Index.vue循环media-cell组件
Index.vue
header.vue
swipe.vue
cell.vue
cell-media.vue
var.less
添加 reset.css
效果图
proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'https://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } },
安装axios
npm install --save axios vue-axios
在main.js引入axios
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
在各个组件里获取数据,就是这么简单
this.axios.get(api).then((response) => { console.log(response.data) })
由于豆瓣app首页的数据,我们不能直接通过api获取数据,只能先将数据保存下来进行访问,大家做项目的时候,访问静态数据json会遇到路径404,这里我们可以通过在dev-server.js里添加静态数据的路由,例如:我们先将豆瓣的首页数据先保存到/src/data/homeData.json,
dev-server.js 添加
/**************** 静态数据 start ****************/ var app = express() var homeData = require('../src/data/homeData.json') var apiRoutes = express.Router() apiRoutes.get('/homeData',function(req,res){ res.json({ errno: 0, data: homeData }) }) app.use('/api',apiRoutes) /**************** 静态数据 end *****************/
在组件里面访问
this.axios.get('/api/homeData').then((response) => { console.log(response.data) })
接下来我们将静态数据显示到首页中:静态数据分为热门和推荐,我么先fetchData获取数据,通过判断card.name,赋值给recommendData、hotData
export default { name: 'index', components: { mHeader, mSwipe, mCell, mCellMedia }, data() { return { recommendData: [], hotData: [] } }, created() { this.fetchData(); }, methods: { fetchData() { this.axios.get('/api/homeData').then((response) => { let data = response.data.data.recommend_feeds; let recommend = []; let hot = []; for (var i in data) { if (data[i].card && data[i].card.name == '为你推荐') { recommend.push(data[i]); } else { hot.push(data[i]); } } this.recommendData = recommend; this.hotData = hot; }) } } }
在Index.vue循环media-cell组件
<m-cell-media :author="item.target.author.name" :column="item.source_cn" :img="item.target.cover_url" v-for="(item,index) in hotData" :key="item.id"> <span slot="title">{{item.title}}</span> <span slot="describe">{{item.target.desc}}</span> </m-cell-media>
Index.vue
<template>
<div>
<!-- 头部 -->
<header class="m-header is-fixed is-bg top-search">
<div class="search-wrap">
<img src="../../assets/images/ic_search_gray.png" alt="">
<span class="placeholder">影视 图书 唱片 小组 舞台剧等</span>
<img src="../../assets/images/ic_scan_gray.png" alt="">
</div>
<!-- <div class="m-header-button is-right" style="text-align: center;width: 50px;">
<a href="javascript:;"><img class="m-icon-img" src="../../assets/images/ic_chat_white.png" /></a>
</div> -->
</header>
<!-- 主体 -->
<div class="page-content">
<!-- 轮播图 -->
<m-swipe swipeid="swipe01" :autoplay="1000" paginationDirection="right">
<div class="swiper-slide " slot="swiper-con"><img src="../../assets/images/banner/01.jpg" alt=""></div>
<div class="swiper-slide " slot="swiper-con"><img src="../../assets/images/banner/02.jpg" alt=""></div>
<div class="swiper-slide " slot="swiper-con"><img src="../../assets/images/banner/03.jpg" alt=""></div>
</m-swipe>
<!-- cell -->
<m-cell title="提醒" icon>
<img src="../../assets/images/ic_mine_notification.png" slot="icon">
<a href="javascript:;" slot="cell-right"><img src="../../assets/images/ic_arrow_gray_small.png" alt=""></a>
</m-cell>
<m-cell title="设置">
<a href="javascript:;" slot="cell-right"><img src="../../assets/images/ic_arrow_gray_small.png" alt=""></a>
</m-cell>
<!--热门-->
<div class="hot-wrap">
<m-cell title="热门" label="hot">
<!--<a href="javascript:;" slot="cell-right">更多<img src="../../assets/images/ic_arrow_gray_small.png" alt=""></a>-->
</m-cell>
<m-cell-media :author="item.target.author.name" :column="item.source_cn" :img="item.target.cover_url" v-for="(item,index) in hotData"
:key="item.id">
<span slot="title">{{item.title}}</span>
<span slot="describe">{{item.target.desc}}</span>
</m-cell-media>
</div>
<!--推荐-->
<!-- <div class="recommend-wrap">
<m-cell title="推荐" label="recommend"></m-cell>
<m-cell-media :author="item.target.author.name" :column="item.source_cn" :bg="item.target.cover_url" v-for="(item,index) in recommendData" :key="item.id">
<span slot="title">{{item.title}}</span>
<span slot="describe">{{item.target.desc}}</span>
</m-cell-media>
</div> -->
</div>
</div>
</template>
<script>
import mHeader from '../../components/header'
import mSwipe from '../../components/swipe'
import mCell from '../../components/cell'
import mCellMedia from '../../components/cell-media'
export default { name: 'index', components: { mHeader, mSwipe, mCell, mCellMedia }, data() { return { recommendData: [], hotData: [] } }, created() { this.fetchData(); }, methods: { fetchData() { this.axios.get('/api/homeData').then((response) => { let data = response.data.data.recommend_feeds; let recommend = []; let hot = []; for (var i in data) { if (data[i].card && data[i].card.name == '为你推荐') { recommend.push(data[i]); } else { hot.push(data[i]); } } this.recommendData = recommend; this.hotData = hot; }) } } }</script>
<style lang="less">
// 头部
header.m-header {
padding: 0 0 0 10px;
}
.is-fixed~.page-content {
padding-top: 44px;
padding-bottom: 50px;
}
.top-search {
.search-wrap {
// width: 100%;
height: 30px;
background: #fff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
color: #c0c0c0;
padding: 0 12px;
.placeholder {
flex: 1;
text-align: left;
padding-left: 12px;
}
img {
width: 20px;
height: 20px;
}
}
}
// 热门
.hot-wrap,
.recommend-wrap {
padding-top: 12px;
}
</style>
header.vue
<template> <header class="m-header" :class="{'is-bg':bg,'is-fixed':fixed}"> <div class="m-header-button is-left" v-show="leftShow"> <slot name="left"></slot> </div> <h1 class="m-header-title" v-text="title"></h1> <div class="m-header-button is-right"> <slot name="right"></slot> </div> </header> </template> <script> /** * @param title - header显示的标题 * @param bg - header是否显示的标题背景 * @param {slot} [left] - 左侧的图片内容和文字 * @param {slot} [right] - 右侧的图片内容和文字 * @exmaple * <m-header title="豆瓣app" :bg="true"> * <a href="javascript:;" slot="left"><img class="m-icon-img" src="../../assets/images/ic_bar_back_white.png"/>返回</a> * <a href="javascript:;" slot="right">分享</a> * </m-header> */ export default { props: { title: { type: String, default: '' }, bg: { type: Boolean, default: false }, fixed: { type: Boolean, default: false }, leftShow: { type: Boolean, default: true } } } </script> <style lang="less"> /*导入颜色变量*/ @import "../assets/less/var.less"; .m-header { display: flex; align-items: center; height: 44px; padding: 0 10px; background: #fff; color: @headerDefaultColor; position: relative; &:after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; background: @headerBorderColor; transform: scaleY(0.5); } a { color: @headerDefaultColor; } .m-header-button { width: 70px; align-items: stretch; &.is-left { text-align: left; } &.is-right { text-align: right; } .m-icon-img { width: 20px; height: 20px; } .margin-right-10 { margin-right: 10px; } } .m-header-title { flex: 1; text-align: center; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &.is-bg { background: @headerBg; color: #fff; a { color: #fff; } .m-header-title { color: #fff; } &:after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 0px; background: @headerBorderColor; transform: scaleY(0.5); } } &.is-fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 9; } } </style>
swipe.vue
<template> <div class="swiper-container" :class="swipeid"> <div class="swiper-wrapper"> <slot name="swiper-con"></slot> </div> <!-- 分页器 --> <div :class="{'swiper-pagination':pagination}" :style="{'text-align':paginationDirection}"></div> </div> </template> <script> import '../assets/lib/swiper/js/swiper.js' export default { props: { swipeid: { type: String, default: '' }, effect: { type: String, default: 'slide' }, loop: { type: Boolean, default: true }, direction: { type: String, default: 'horizontal' }, autoplay: { type: Number, default: 5000, }, paginationType: { type: String, default: 'bullets' }, pagination: { type: Boolean, default: true }, paginationDirection:{ type:String, default:'center' } }, mounted() { var That = this; new Swiper('.'+That.swipeid, { //循环 loop: That.loop, //分页器 pagination: '.swiper-pagination', //分页类型 paginationType: That.paginationType, //fraction,progress,bullets //自动播放 autoplay: That.autoplay, //方向 direction: That.direction, //特效 effect: That.effect, //slide,fade,coverflow,cube //用户操作swiper之后,是否禁止autoplay autoplayDisableOnInteraction : false, }) } } </script> <style> @import '../assets/lib/swiper/css/swiper.css'; .swiper-container img{ width: 100% } .swiper-pagination-bullet-active { background: #fff; } </style>
cell.vue
<template> <div class="m-cell normal" :class="label"> <div class="m-cell-title"> <slot name="icon"></slot> {{title}} </div> <div class="m-cell-right"> <slot name="cell-right"></slot> </div> </div> </template> <script> export default { props: { title: { type: String, default: '' }, hot: { type: Boolean, default: false }, recommend: { type: Boolean, default: false }, icon: { type: Boolean, default: false }, label: { type: String, default: 'normal' } } } </script> <style lang="less"> .m-cell { position: relative; padding: 10px 5px 10px 15px; display: flex; justify-content: space-between; align-items: center; &:before { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; background: #eee; transform: scaleY(0.5); } .m-cell-title { font-size: 15px; img { width: 20px; height: 20px; } } .m-cell-right { font-size: 12px; a { color: #666; } img { width: 20px; height: 20px; } } &.normal {} &.hot { padding: 0px 5px 0px 15px; height: 22px; &:after { content: ''; position: absolute; width: 5px; left: 0; top: 0px; bottom: 0px; background: #ff8447; } &:before { height: 0 } } &.recommend { padding: 0px 5px 0px 15px; height: 22px; &:after { content: ''; position: absolute; width: 5px; left: 0; top: 0px; bottom: 0px; background: #42bd56; } &:before { height: 0 } } } </style>
cell-media.vue
<template> <div class="m-cell-media-wrap"> <a href="javascript:;"> <div class="m-cell-media-top"> <div class="m-cell-media"> <div class="m-cell-title m-ellipsis-2"> <slot name="title"></slot> </div> <div class="m-cell-detail m-ellipsis-2"> <slot name='describe'></slot> </div> </div> <div class="m-pull-right right-img" :style="{'background-image':'url('+img+')'}"> </div> </div> <div class="m-cell-media-bottom"> <p v-if="author">作者:{{author}}</p> <p v-if="column">{{column}}</p> </div> </a> </div> </template> <script> export default { props: ['author', 'column', 'img'] } </script> <style lang="less"> .m-cell-media-wrap { display: flex; flex-direction: column; padding: 18px 20px; position: relative; &:after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 1px; background: #eee; transform: scaleY(0.5); } .m-cell-media-top { display: flex; flex-direction: row; .m-cell-media { flex: 1; padding-right: 45px; } .m-cell-title { font-size: 17px; line-height: 22px; color: #333; font-weight: bold; } .m-cell-detail { font-size: 12px; padding-top: 12px; color: #939393; } .m-pull-right { width: 94px; height: 94px; overflow: hidden; background-position: center center; background-size: cover; img { width: 100%; } } } .m-cell-media-bottom { display: flex; justify-content: space-between; padding-top: 20px; margin-top: 12px; color: #bfbfbf; position: relative; &:before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 1px; background: #eee; } } } </style>
var.less
//APP默认颜色 @defaultColor:#42bd56; //header @headerBg:@defaultColor; @headerDefaultColor:rgb(73,73,73); @headerBorderColor:#e4e4e4; //tabbar @tabbarBorderColor:#e4e4e4; @tabbarActiveColor: @defaultColor;
添加 reset.css
效果图
相关文章推荐
- (Vue2.0)axios与vuex中actions结合使用的实现
- 《转》vue更新到2.0之后vue-resource不在更新,axios的使用
- vue项目中关于axios的简单使用
- vue2.0 仿手机新闻站(四)axios
- 在vue中通过axios异步使用echarts的方法
- vue中axios解决跨域问题和拦截器的使用方法
- ios vue2.0使用html5中的audio标签不能播放音乐
- vue组件化挖矿之旅(五):axios的使用
- vue-cli 使用axios的操作方法及整合axios的多种方法
- 使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
- vue中axios解决跨域问题和拦截器使用
- 【vue】element、vue2.0+、vuex、axios开发中遇到的坑点
- vue中axios的使用方法
- vue项目中axios使用详解
- Vue中Axios使用
- Vue2.0 过滤器的简单使用
- 使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
- 使用vue2.0与bootstrap3进行简单列表分页
- OpenCV学习笔记(8)VS2008 MFC下使用OpenCV2.0进行简单图像处理
- IOS-datePicker的简单使用