标签：array 封装 上线 请求 perl 引用 conf ges swiper
mixins.styl
ellipsis()
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
引入方式：
<style lang="stylus" scoped>
@import ‘~styles/mixins.styl‘
.icon-desc
position: absolute
left: 0
right: 0
bottom: 0
height: .44rem
line-height: .44rem
text-align: center
color: $darkTextColor
ellipsis()
</style>
场景：比如你得到一组list数据要展示在页面上，一页展示8条，超过8条要展示在下一页，滑动翻滚展示那种。可以利用计算属性来达到效果
<script> export default { name: ‘HomeIcons‘, props: { list: Array }, data () { return { swiperOption: { autoplay: false } } }, computed: { pages () { const pages = [] this.list.forEach((item, index) => { const page = Math.floor(index / 8) if (!pages[page]) { pages[page] = [] } pages[page].push(item) }) return pages } } } </script>
vue提供了好几种ajax的方法，但是我们这边采用的是axios 模块，是vue官方提供的模块。
npm install axios --save 下载
import axios from ‘axios‘ 引用
使用方法：
export default { name: ‘Home‘, components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend }, methods: { getHomeInfo () { axios.get(‘/api/index.json?city=‘ + this.city) // 利用axios执行ajax请求 .then(this.getHomeInfoSucc) // 请求成功之后执行这个回调函数 }, getHomeInfoSucc (res) { res = res.data if (res.ret && res.data) { const data = res.data this.swiperList = data.swiperList this.iconList = data.iconList this.recommendList = data.recommendList this.weekendList = data.weekendList } } }, mounted () { // 挂载的时候执行这个函数 this.lastCity = this.city this.getHomeInfo() }, }
为啥要有这个功能呢？思考一下，我们前端开发的时候，数据是我们模拟的，接口url也是我们模拟的，然后我们开发ok之后后台给我们接口，我们再一个修改修改url，这样是很不友好的，也容易犯错，难不能这样呢？我们写的url就是后台真正的url，但是可以做一个转发，转发到我本地的数据源，这样当真正上线的时候，我们就不用再一个修改接口了。实现这个效果需要在配置文件中配置下。
\config\index.js 中
proxyTable: { ‘/api‘: { target: ‘http://localhost:80‘, pathRewrite: { ‘^/api‘:"/static/mock" //意思是当我们请求api开头的接口时，vue就会帮我们自动转发到/static/mock路径下 } } },
标签：array 封装 上线 请求 perl 引用 conf ges swiper
原文地址：https://www.cnblogs.com/coder-lzh/p/9278986.html
