使用vue.js构建一个知乎日报

longshengwang 发布于2019-08-01 16:12 / 1377人阅读

摘要：日报详细内容知乎是一个格式的字符串，而数据的请求及渲染是异步的，正常情况下来说，浏览器是无法解析成功的，但是提供的一个方法，可以搞定，示例代码如下其中是数据后记大家多多交流，互相学习啊，写的不好的地方情指正哦

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"])
    }

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方法，可以搞定，示例代码如下：

其中DONE_NEWS_DETAIL是数据

后记：

大家多多交流，互相学习啊，写的不好的地方情指正哦！

GPU云服务器云服务器构建一个 Vue.js vue.js 属性 vue.js自学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50365.html

使用vue.js构建一个知乎日报

摘要：日报详细内容知乎是一个格式的字符串，而数据的请求及渲染是异步的，正常情况下来说，浏览器是无法解析成功的，但是提供的一个方法，可以搞定，示例代码如下其中是数据后记大家多多交流，互相学习啊，写的不好的地方情指正哦 Vue.js是我所喜爱的，知乎也是我喜爱的，突发奇想使用vue做了一个知乎日报项目地址： Github地址在线预览demo 设计： 1.设计上没有按照知乎日报客户端的交互及UI...

Kross 2019-08-20 13:45 评论0 收藏0
使用vue.js构建一个知乎日报

摘要：日报详细内容知乎是一个格式的字符串，而数据的请求及渲染是异步的，正常情况下来说，浏览器是无法解析成功的，但是提供的一个方法，可以搞定，示例代码如下其中是数据后记大家多多交流，互相学习啊，写的不好的地方情指正哦 Vue.js是我所喜爱的，知乎也是我喜爱的，突发奇想使用vue做了一个知乎日报项目地址： Github地址在线预览demo 设计： 1.设计上没有按照知乎日报客户端的交互及UI...

simpleapples 2019-08-30 15:52 评论0 收藏0
2017-09-19 前端日报

摘要：前端日报精选与实现让你的网站秒配证书借助实现元素滚动自动环绕的刘海大型架构设计腾讯大会图文笔记中文翻译种高效缩写法个人文章个节省开发者时间的实用工具库与资源简书通用类和结构与样式分离众成翻译性能调优之调试篇一知乎专栏进阶系列 2017-09-19 前端日报精选 VirtualDOM与diff(Vue实现)让你的网站秒配 HTTPS 证书借助CSS Shapes实现元素滚动自动环绕iP...

Leo_chen 2019-08-22 11:11 评论0 收藏0
2017-10-20 前端日报

摘要：前端日报精选作者的构思和演绎翻译新特性大杀器和把动画转换成原生动画菜鸟的学习之路中文旧文与知乎专栏旧文新读解释闭包需要几行代码知乎专栏前端校招总结个人文章函数式编程系列优雅的使用进行函数编程掘金微软谷歌三星将一起构建的统一文档 2017-10-20 前端日报精选 React作者的构思和演绎（翻译）Make React Great Again —— React v16 新特性大杀器Bo...

Genng 2019-08-21 17:08 评论0 收藏0