使用vue.js构建一个知乎日报
Vue.js是我所喜爱的,知乎也是我喜爱的,突发奇想使用vue做了一个知乎日报
项目地址:
Github地址
在线预览demo
设计:
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 const FECTH_NEWS_LATEST = 'FECTH_NEWS_LATEST' // 最新消息列表
// mutstions types
export const TOGGLE_NEWS_LATEST = 'TOGGLE_NEWS_LATEST' // 最新消息列表
// getters types
export const DONE_NEWS_LIST_ROOT = 'DONE_NEWS_LIST_ROOT' // 最新消息列表梗
命名具有意义,并且写好注释。
store分模块
其实不用分模块,但还是分一下吧,为后续开发着想。
使用getters将状态(state)、数据(data)发往页面模版(template)上,发数据有两三种方式,根据自己习惯来吧,我是这样做的:
[types.DONE_NEWS_LIST_ROOT]: state => { return state.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地址
store地址
遇到的难题:
跨域。跨域是前端一个老生常谈的问题,我使用node做了一下中转,示例代码如下:
router.get('/news/latest', function (req, res, next) {var options = {method: "GET",url: "http://news-at.zhihu.com/api/4/news/latest"};request(options, function (error, response, body) {if (error) throw new Error(error);res.json(JSON.parse(body))});
});
2.日报详情的渲染。日报详细内容知乎是一个html格式的字符串,而数据的请求及渲染是异步的,正常情况下来说,浏览器是无法解析成功的,但是vue提供的一个v-html方法,可以搞定,示例代码如下:
<div v-html="DONE_NEWS_DETAIL.body"></div>
其中DONE_NEWS_DETAIL是数据
后记:
大家多多交流,互相学习啊,写的不好的地方情指正哦!
使用vue.js构建一个知乎日报相关推荐
- 《Vue.js实战》知乎日报V2.0
因为书中的代码比较久远,许多接口.webpack配置都已更新,但这个项目还是很好玩的,本文的代码都是相对于原书代码的补充. 完整代码:https://github.com/JohnnyMu/zhihu ...
- python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理 从头新建一个Django项目 新建一个前端页面,使用vue应用 在Django中设 ...
- vue.js 构建项目_使用Vue.js和AWS Amplify构建Chatbot
vue.js 构建项目 Over the last few years, chatbots have exploded in popularity. It makes sense that busin ...
- 使用Pusher和Vue.js构建实时聊天应用
如今,实时通信的应用程序越来越流畅,用户体验也变得越来越流行. 在本教程中,我们将使用由Chater提供的服务ChatKit提供支持的Vue.js构建实时聊天应用程序. ChatKit服务将为我们提供 ...
- 使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台 原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
- vue查看本地相册_使用Vue.js构建的Google相册相册查看器
vue查看本地相册 google-photos-vue (google-photos-vue) Google Photos album viewer built with Vue.js. 使用Vue. ...
- 使用 Vue.js 构建 VS Code 扩展
使用 Vue.js 构建 VS Code 扩展 Visual Studio (VS) Code 是开发人员在日常任务中最喜欢使用的代码编辑器之一.它的构建考虑到了可扩展性.在某种程度上,VS Code ...
- 使用 Vuex + Vue.js 构建单页应用 1
鉴于该篇文章阅读量大,回复的同学也挺多的,特地抽空写了一篇 vue2.0 下的 vuex 使用方法,传送门:使用 Vuex + Vue.js 构建单页应用[新篇] ------------------ ...
- Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
文章目录 前言 一.Vue是什么? 二.前端核心分析 1.1.概述 1.2.前端三要素 1.3.结构层(HTML) 1.4.表现层(CSS) 1.5.行为层(JavaScript) 二.前端发展史 2 ...
最新文章
- 在屏幕上输出你好的python语句是_编程实现:在屏幕上输出中文字符“你好,世界”。(输出结果中不带双引号)_学小易找答案...
- Yearning v1.4.2 发布,SQL审核平台
- 学习MongoDB(三) Add an Arbiter to Replica Set 集群中加入仲裁节点
- LeetCode 旋转数组 系列
- react-github案例
- 默认帐户生成器帐户来源
- php数据库的值嵌入input_求助:问个关于用INPUT提取数据库里的值然后修改的问题。...
- Linux学习笔记(四)-Linux常用命令
- day01-pycharm快捷键
- FunTester框架Redis压测预备
- c语言10的10万次方,在c语言编程中 10的n次方应该怎么表达
- Roundcube开启用户自助更改密码功能
- VS2010如何打开VS2012的项目
- 网络系统实现技术--AppleTalk
- C语言结合VBS脚本编写朗读小工具,做一个能够发音的C语言程序
- 利用background-position 制作图片爆炸的效果
- 前端性能优化必备技能 - 利用 Chrome Dev Tools 进行页面性能分析
- 运动坐标系的动力学(欧拉角)
- android 使用SAF框架操作外置sd卡
- 最新《IT营Angular5 Angular4.X入门实战》