使用vue.js构建一个知乎日报
2017-01-16 16:36
791 查看
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
将getters、mutations、actions变量名设定一个命名空间,否则store写的大了,命名肯定会乱,示例:
命名具有意义,并且写好注释。
store分模块
其实不用分模块,但还是分一下吧,为后续开发着想。
使用getters将状态(state)、数据(data)发往页面模版(template)上,发数据有两三种方式,根据自己习惯来吧,我是这样做的:
mutations与actions:
a、mutations是用来处理同步的事情的,比如给state中的变量赋值;
b、actions是用来处理异步的事情,比如网络请求;
c、但是actions也是可以做同步的事情的,但最好按照vuex的建议来做:在mutations中处理同步操作
具体怎么处理的看我的github,记得点点赞啥的:
vuex地址
store地址
跨域。跨域是前端一个老生常谈的问题,我使用node做了一下中转,示例代码如下:
2.日报详情的渲染。日报详细内容知乎是一个html格式的字符串,而数据的请求及渲染是异步的,正常情况下来说,浏览器是无法解析成功的,但是vue提供的一个v-html方法,可以搞定,示例代码如下:
其中DONE_NEWS_DETAIL是数据
大家多多交流,互相学习啊,写的不好的地方情指正哦!
项目地址:
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和Flask来构建一个单页的App的示例
- 使用 Vuex + Vue.js 构建单页应用
- 如何使用Vuex+Vue.js构建单页应用
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- Vue.js插件axios——封装一个可以灵活使用的ajax
- 使用vue构建一个上传图片表单
- 使用Vue.js 2.0搭建单页应用:从构建到部署
- 使用Django + Vue.js快速而优雅地构建前后端分离项目
- 分享一个使用 vue.js 开发的网站
- Vue.js使用vue-router构建单页应用
- Asp.net+Vue2构建简单记账WebApp之三(使用Vue-cli构建vue.js应用)
- 使用Vue.js创建一个时间跟踪的单页应用
- 使用 Vuex + Vue.js 构建单页应用
- 分享一个使用 vue.js 开发的网站
- 使用 Node.js、Express、AngularJS 和 MongoDB 构建一个Web程序
- 使用Vue.js创建一个时间跟踪的单页应用
- Vue.js使用vue-router构建单页应用
- 使用vue.js写一个tab选项卡效果
- 使用vue构建一个上传图片表单
- 使用Vue.js和Element-UI做一个简单的登录页面