基于VUE,VUX组件开发的网易新闻页面搭建过程
根据妙味课堂上的一个教程练习总结,供自己复习用
一、功能介绍
一个网易新闻客户端的浏览页面,通过网易新闻的api接口实时获取新闻数据,用vux搭建样式框架,以轮播图,文字滚动,图文列表等形式把内容展示出来,可实现下拉刷新,上滑加载,文本提示更新,导航跳转到其他页面等功能。
二、涉及技术
基础:Html,css,Javascript,响应式,es6,vue-router,vue-jsonp
其他:nodejs,npm,vue,webpack,git,vux
三、模块划分
a,轮播图,图片+标题的形式无缝轮播滚动新闻,点击可跳转至网易的新闻界面
b.文字条切换,文字以上下滑动形式切换
c.新闻列表展示,左图右标题形式,点击可跳转至网易新闻详情页界面
d.底部导航,可导航至其他组件(音乐,电影,阅读)页面,在每个界面始终显示
e.其他:回到顶部,回到首页等
四、搭建过程
1.新建项目(已安装好node,vue-cli等)
执行vue init webpack 1633,新建一个名叫1633的项目,新建好后进入项目,执行npm i安装相关依赖,然后执行 npm run dev,默认8080端口,如果端口被占用,在config/index.js里改下端口,重启服务器,在浏览器中输入localhost:端口号,能弹出vue的欢迎界面,及安装成功。
2.安装vux组件库
执行npm i -s vux ,安装好后可以在package.json 中看到响应的版本信息,由于之后会用到vux 的viewBox,xHeader等组件,这里我们提前安装好相关的依赖
- 执行npm i -D less less-loader
- 引入样式重置 @import '~vux/src/styles/reset.less',这个放在App.vue的style中,同时设置style的属性 lang=less
- 执行npm install vux-loader --save-dev,然后在webpack.dev.conf.js中配置
const vuxLoader=require('vux-loader')
baseWebpackConfig=vuxLoader.merge(baseWebpackConfig,{plugins:['vux-ui']})
(要设置语言包 vuex-i18n,如果不引入,会提示_vm.$t is not a function报错,另,引入了发布到服务器依然会报这个错误。。)
到此,前期的设置基本完成。
3.搭建界面
组件的引入 ,在import { 组件名 } from 'vux',然后再conponents中注册该组件名,就可以使用了,组件使用的时候以小写加连接符的形式,如viewBox,使用时为 <view-box> </view-box>
我们分别引入以下组件:
- viewBox:整体的布局组件,以后其他的组件也是放到这个组件中的,需要设置body,html以及父组件的高度
- XHeader:头部组件,最上方显示名称的地方
- Tabbar,TabbarItem:底部导航组件
- Swiper:轮播图组件
- Marquee:文字滑动组件,跑马灯效果
- Panel:图文列表组件
组件引入完毕,先根据官方文档查看相应的设置,数据先填充案例里的,整体界面能正常运行即可。
4.数据加载
a) 数据来源准备:
- 首屏推荐新闻:http://3g.163.com/touch/jsonp/sy/recommend/0-9.html
- 下拉或上滑加载更多的切换新闻:'http://3g.163.com/touch/jsonp/sy/recommend/'+start+'-'+end+'.html'
- 刷新需要传入的参数:miss:'00',refresh:['A','B01','B02'.....'B10'],共11个
- 首页所需数据格式:
- 轮播图数据:SwiperList: url, img, title
- 文字滑动数据:MarqueeList: title
- 新闻列表数据:PanelList:src, title, desc, url
b) vue jsonp 解决跨域处理:
- 执行npm i -S vue-jsonp 来安装vue jsonp;
- 在main.js中导入vue-jsonp,执行import VueJsonp from 'vue-jsonp';
- 通过use方法,挂载到vue中,vue.use(VueJsonp)
c) 数据处理
首页一进入就获取数据,这个需要把加载数据的函数设置在vue的created生命周期函数中
created () { this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html').then(data => { /* 这里是获取的数据 */ console.log(data) // 处理轮播的数据 this.swiperList = data.live.filter(item => { return item.addata === null && item.picInfo[0]; //这里item.picInfo[0]必须保证有图片,否则显示不出来
}).map(item => { return { url: item.link, img: item.picInfo[0].url, title: item.title } }) // 处理跑马灯数据 this.marqueeList = data.focus.filter(item => { return item.addata === null }).map(item => { return { title: item.title } }) // 处理文章列表数据 this.panelList = data.list.filter(item => { return item.addata === null && item.picInfo[0] && item.digest }).map(item => { return { src: item.picInfo[0].url, title: item.title, desc: item.digest, url: '/detailPage' } }) })}
第一个参数是我们的请求地址它返回给我们的是一个promise对象,可以通过then方法进行调用并return出想要的结果数据,then的参数data即我们拿到的原始数据,通过数组的filter方法筛选出想要的数据,map循环遍历每一项数据,按照需要的类型统一返回出去,再赋值给swiperList和其他的项,swiperList,MarqueeList,PanelList要提前在data()里面定义好,内容为空数组。
d) 渲染数据到界面中
把之前的测试数据删除,绑定上新的数据
<swiper :list="swiperList" :loop="true"></swiper>
<marquee class="my-marquee">
<marquee-item v-for="i in marqueeList" :key='i'>{{i.title}}</marquee-item>
</marquee>
<panel :list="panelList" class="panel-list" :type="type"></panel>
到此,数据填充完毕
e)下拉上滑刷新处理
引入下拉刷新及无限加载组件,执行npm i vue-scroller -S ,安装好后把要刷新的内容包裹进来即可。
<scroller class="my-scroller" :on-refresh="refresh" refreshText="等我一下~" :on-infinite="infinite" ref="myRef"> <swiper :list="swiperList" :loop="true"></swiper> <marquee class="my-marquee"> <marquee-item v-for="i in marqueeList" :key='i'>{{i.title}}</marquee-item> </marquee> <panel :list="panelList" class="panel-list" :type="type"></panel></scroller>
下拉刷新:on-refresh="refresh"
refresh () {
getFreshKey()
this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, {
miss: '00',
refresh: keyValue
}).then(data => {
/* console.log(this.$refs.myRef) 这个方法就像是jq里通过dom获取元素一样,只不过我们要减少dom的操作 */
/* 这里是获取的数据 */
// console.log(data)
// 处理文章列表数据
(省略同上)
this.$refs.myRef.finishPullToRefresh()//停止下拉刷新
this.$vux.toast.text(`本次共刷新了${this.panelList.length}条数据`)//文本提示刷新了多少条数据
}
这里声明了一个getFreshKey函数,每次刷新的时候执行,初始值为0,每刷新一次加1,动态拿到refreshKey中的每一项,赋值给refresh,保证每次刷新
拿到的数据都不一样。
let start = 0;let end = start + 9;let refreshKey = ['A', 'B01', 'B02', 'B03', 'B04', 'B05', 'B06', 'B07', 'B08', 'B09', 'B10'];let key = 0;let keyValue = 'A';function getFreshKey () { key++ if (key === 10) { key = 0 } keyValue = refreshKey[key]}
上滑加载 :on-infinite="infinite"
infinite () { this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, { miss: '00', refresh: keyValue }).then(data => { /* 这里是获取的数据 */ console.log(data)
// 处理文章列表数据 (省略同上)
start += 10;end = start + 9;this.$refs.myRef.finishInfinite() ;//停止上滑刷新//this.$refs.myRef这个是我们在scroller上绑定的ref属性,就像dom操作中选中某一个元素一样
}) 注意:这样操作的上滑加载出来的数据,是追加上来的,这样的话列表的数据就会越来越多,如果希望每次上滑的时候,就把原来的内容替换掉的话,可以这么写:
infinite () { this.$jsonp(`http://3g.163.com/touch/jsonp/sy/recommend/${start}-${end}.html`, { miss: '00', refresh: keyValue }).then(data => { /* 这里是获取的数据 */ console.log(data)
// 处理文章列表数据 (省略同上)
this.panelList=this.pannelList.concat(panelList);//数据拼接
start += 10;end = start + 9;this.$refs.myRef.finishInfinite() ;//停止上滑刷新//this.$refs.myRef这个是我们在scroller上绑定的ref属性,就像dom操作中选中某一个元素一样
})
f)文本提示更新
引入toast 提示组件 import { ToastPlugin } from 'vux',Vue.use(ToastPlugin)
然后把这句代码写在refresh 函数中即可
this.$vux.toast.text(`本次共刷新了${this.panelList.length}条数据`)
5.导航栏的设置
在conponents中分别注册news,movei,music等组件,并把他们引入到router文件夹下的index.js文件中,配置好路由的名称路径等信息,然后就可以把路由
绑定到导航上了,默认第一个进入的就是新闻的界面,其他界面暂未完成,设置为空白页
<tabbar-item selected link="/">
<img slot="icon" src="./assets/icon-1.png">
<span slot="label">新闻</span>
</tabbar-item>
五、打包与发布
打包:执行npm run build ,完成后会生成一个dist的文件
发布:把文件发送到github上面,具体步骤见资料参考
六、问题与改进
1.上滑刷新时速度过快,可把刷新的数据写到一个定时器中
2.在发布到git之后,控制台依然提示有错误,暂时未找到解决方法
七、资料参考:
1.如何在github搭建自己的项目: https://blog.csdn.net/liwenjieit/article/details/78230003
2.vue-scroller的详细用法:https://www.jianshu.com/p/31ad32e7ec13
3.es6 简明教程:http://www.runoob.com/w3cnote/es6-concise-tutorial.html
4.vue.js :http://www.runoob.com/vue2/vue-tutorial.html
5.vue-jsonp解决跨域处理:https://www.cnblogs.com/xiaoli52qd/p/7235901.html
6.jsonp请求百度搜索接口:https://www.jianshu.com/p/8d3b27cc37e7
浏览地址:
转载于:https://www.cnblogs.com/cytheria/p/8690000.html
基于VUE,VUX组件开发的网易新闻页面搭建过程相关推荐
- Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)
Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vue 被设计为可以自底向上逐层应用,更易上手,还便于与第三方库或既有项目整合,因此,Vue完全能够为复杂的单页应用提供驱动. 2 ...
- cms php vue 开源_lucms —— 基于 Vue 和 Laravel 开发的后台管理系统
lucms -- 基于 Vue 和 Laravel 开发的后台管理系统 由 Ucer 创建于2年前, 最后更新于 1年前 版本号 #1 36802 views 8 likes 0 collects 项 ...
- iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍)
iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍) 本来仅仅是打算介绍一下addChildViewController这种方法的,正好今天朋友去换工作面试问 ...
- IOS开发简易的网易新闻页面
IOS开发简易的网易新闻页面 这是简易的网易新闻,使用swift语法去写的 git 仓库地址: https://e.coding.net/lujun1/wangyijianyixinwenswiftb ...
- IOS开发基础之网易新闻环境搭建异步请求json,AFN网络封装第1天
IOS开发基础之网易新闻环境搭建异步请求json,AFN网络封装第1天 视频资料是2015年的,但是AFN是导入框架的关键文件,我尝试使用cocoapods安装最新的AFN,虽然成功了,但是版本太高, ...
- 基于Vue+Express+Mysql开发的手机端电影购票系统(附源码)
基于Vue+Express+Mysql开发的手机端电影购票系统 基于手机的电影购票系统-Vue+Node 一个Vue+Express+Mysql的电影售票项目 项目完整源码下载 https://dow ...
- uniapp基于vue自定义组件
✅作者简介: 五一假期结束了,我是痴心阿文,你们的学友哥,今天给大家分享uniapp基于vue自定义组件!
- IOS开发——仿网易新闻客户端
IOS开发--仿网易新闻客户端 本文没有内容,传个资源 衔接地址:http://download.csdn.net/detail/u012881779/7152281 左侧导航部分: 新闻版块 订阅版 ...
- 爬虫技术 -- 进阶学习(十)网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)...
最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...
- 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp)
转自原文 网易新闻页面信息抓取(htmlagilitypack搭配scrapysharp) 最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决 ...
最新文章
- linux中在vi编辑器中执行存盘退出命令是?
- AtCoder Beginner Contest 204 F Hanjo 2
- 利用OpenCV进行人脸识别
- Spring MVC 中 HandlerInterceptorAdapter的使用
- BAT 力捧的 AI 项目再次爆发,这些程序员都受影响!
- 003——数组(三)count()reset()end()prev()next()current()
- 项目演化系列--分布式锁
- 关于Spring Boot 这可能是全网最好的知识点总结
- xterm远程连服务器连不上_VS Code Remote 发布!开启远程开发新时代
- 【基础】二分算法学习笔记
- 类的加载顺序(例题)
- 排队论模型的monteCarlo法仿真
- 最近在写一个IE9的插件
- DllRegisterServer调用失败的解决办法
- 如何用微信自动添加wifi连接服务器地址,微信服务号如何实现扫码自动连接WIFI?详细步骤介绍!...
- 60906磁悬浮动力系统应用研究与模型搭建
- PHP 每小时抽奖,项目3:PHP抽奖程序 ,抽奖规则代码 分时间段
- 如何通过局域网共享文件夹
- 论文整理Perception-aware Receding Horizon Navigation for MAVs
- 树莓派空气质量检测仪-攀藤G5003ST的连接与使用
热门文章
- VS2010 开发VC++ 生成release版本动态库配置
- iOS----创建静态库
- [转载] 七龙珠第一部——第050话 海盗的陷阱
- SqlTransaction事务和Response.Redirect
- 2008总有一种恐惧让你泪流满面
- 土人系列AS入门教程--对象篇
- Xcode :error: linker command failed with exit code 1(use -v to see invocation) 或 libstdc++.6.0缺失问题
- SPOJ REPEATS Repeats (后缀数组 + RMQ:子串的最大循环节)题解
- 四则运算 python
- WPF 学习笔记(十二)