注:昨日发布的文章标题应该是「Vue2.0 实现简易豆瓣电影 webApp」,因小编操作不当,特向各位读者小伙伴道歉。接下来请阅读「使用 Vue.js 构建一个知乎日报」。
Vue.js 是我所喜爱的,知乎也是我喜爱的,突发奇想使用 vue 做了一个知乎日报
项目地址:
Github 地址:https://github.com/pomelo-chuan/Zhihu-Daily-Vue.js
在线预览 demo:https://lovestreet.leanapp.cn/zhihu/#/
设计:
1.设计上没有按照知乎日报客户端的交互及 UI 设计来做,本渣亲自捏了一个,颜色以黑白灰为主,本来想加入知乎的蓝色,但是本渣设计功力实在太差,故舍弃掉了蓝色,只采用黑白灰三色。
2.日报条目采用无边界设计,只添加淡灰色的分割线来区分。
3.整个网页是一个单页应用(Single Page Web App),所有的数据使用 vuex 来进行管理,在 store 里统一管理。
预览:
涉及到的技术:
该项目使用 vue-cli 构建、打包,配合 vue 全家桶(vue、vuex、vue-router)进行编码、开发
基础样式使用 basscss,basscss 对层叠样式表的设计方式简练、高效、可复用性强
网络请求使用 axios
后台使用 Node.js
vuex架构:
将 getters、mutations、actions 变量名设定一个命名空间,否则store写的大了,命名肯定会乱,示例:
// actions types
export constFECTH_NEWS_LATEST = 'FECTH_NEWS_LATEST'// 最新消息列表
// mutstions types
export constTOGGLE_NEWS_LATEST = 'TOGGLE_NEWS_LATEST'// 最新消息列表
// getters types
export constDONE_NEWS_LIST_ROOT = 'DONE_NEWS_LIST_ROOT'// 最新消息列表梗
命名具有意义,并且写好注释。
store 分模块
其实不用分模块,但还是分一下吧,为后续开发着想。
使用 getters 将状态(state)、数据(data)发往页面模版(template)上,发数据有两三种方式,根据自己习惯来吧,我是这样做的:
[types.DONE_NEWS_LIST_ROOT]: state => {
returnstate.NewsListRoot } computed: { ...mapGetters([ 'DONE_NEWS_LATEST', 'DONE_LOADING_ONE', 'DONE_LOADING_TWO', 'DONE_NEWS_LIST_ROOT']) } <div v- for= "list in DONE_NEWS_LIST_ROOT">
<!-- ===使用v-for来循环渲染数据=== -->
</div>
mutations 与 actions:
a、mutations 是用来处理同步的事情的,比如给 state 中的变量赋值;
b、actions 是用来处理异步的事情,比如网络请求;
c、但是 actions 也是可以做同步的事情的,但最好按照 vuex 的建议来做:在 mutations 中处理同步操作
具体怎么处理的看我的 github,记得点点赞啥的:
vuex 地址:https://github.com/pomelo-chuan/Zhihu-Daily-Vue.js/tree/master/src/vuex
store 地址:https://github.com/pomelo-chuan/Zhihu-Daily-Vue.js/blob/master/src/vuex/modules/zhihudata.js
遇到的难题:
跨域。跨域是前端一个老生常谈的问题,我使用 node 做了一下中转,示例代码如下:
router.get( '/news/latest', function(req, res, next){
varoptions = { method: "GET", url: "https://news-at.zhihu.com/api/4/news/latest"}; request(options, function(error, response, body){
if(error) thrownewError(error); res.json( JSON.parse(body)) });});
2.日报详情的渲染。日报详细内容知乎是一个 html 格式的字符串,而数据的请求及渲染是异步的,正常情况下来说,浏览器是无法解析成功的,但是 vue 提供的一个 v-html 方法,可以搞定,示例代码如下:
<div v-html= "DONE_NEWS_DETAIL.body"> </div>
其中 DONE_NEWS_DETAIL 是数据
后记:
大家多多交流,互相学习啊,写的不好的地方情指正哦!
【热门阅读】
SegmentFault - 2016 Top Rank
埋名 - 一个前端开发工程师的 Vim 和 IDE 一样
扶桑木下- 小程序丨厕所雷达
吴彦欣 - 搭建本地 HTTPS 测试环境
tomcat的猫- 上次发版我就改了一行代码
weichuyang - 爬取知乎 60 万用户信息之后的简单分析
乖小鬼YQ - 割裂的前端工程师——2017 年前端生态窥
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » 新闻网站建设源码(新闻网站搭建)
1 评论