使用vue.js構建一個知乎日報

Kross 發(fā)布于2019-08-20 13:45 / 1952人閱讀

摘要：日報詳細內(nèi)容知乎是一個格式的字符串，而數(shù)據(jù)的請求及渲染是異步的，正常情況下來說，瀏覽器是無法解析成功的，但是提供的一個方法，可以搞定，示例代碼如下其中是數(shù)據(jù)后記大家多多交流，互相學習啊，寫的不好的地方情指正哦

Vue.js是我所喜愛的，知乎也是我喜愛的，突發(fā)奇想使用vue做了一個知乎日報

項目地址：

Github地址
在線預覽demo

設計：

1.設計上沒有按照知乎日報客戶端的交互及UI設計來做，本渣親自捏了一個，顏色以黑白灰為主，本來想加入知乎的藍色，但是本渣設計功力實在太差，故舍棄掉了藍色，只采用黑白灰三色。

2.日報條目采用無邊界設計，只添加淡灰色的分割線來區(qū)分。

3.整個網(wǎng)頁是一個單頁應用(Single Page Web App)，所有的數(shù)據(jù)使用vuex來進行管理，在store里統(tǒng)一管理。

預覽：

涉及到的技術：

該項目使用vue-cli構建、打包，配合vue全家桶（vue、vuex、vue-router）進行編碼、開發(fā)

基礎樣式使用basscss，basscss對層疊樣式表的設計方式簡練、高效、可復用性強

網(wǎng)絡請求使用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分模塊
其實不用分模塊，但還是分一下吧，為后續(xù)開發(fā)著想。

使用getters將狀態(tài)（state）、數(shù)據(jù)（data）發(fā)往頁面模版（template）上，發(fā)數(shù)據(jù)有兩三種方式，根據(jù)自己習慣來吧，我是這樣做的：

[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是用來處理異步的事情，比如網(wǎng)絡請求；
c、但是actions也是可以做同步的事情的，但最好按照vuex的建議來做：在mutations中處理同步操作

具體怎么處理的看我的github，記得點點贊啥的：

vuex地址
store地址

遇到的難題：

跨域?？缬蚴乔岸艘粋€老生常談的問題，我使用node做了一下中轉(zhuǎn)，示例代碼如下：

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.日報詳情的渲染。日報詳細內(nèi)容知乎是一個html格式的字符串，而數(shù)據(jù)的請求及渲染是異步的，正常情況下來說，瀏覽器是無法解析成功的，但是vue提供的一個v-html方法，可以搞定，示例代碼如下：

其中DONE_NEWS_DETAIL是數(shù)據(jù)

后記：

大家多多交流，互相學習啊，寫的不好的地方情指正哦！

云服務器 GPU云服務器構建一個 Vue.js vue.js 屬性 vue.js自學

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81223.html

使用vue.js構建一個知乎日報

摘要：日報詳細內(nèi)容知乎是一個格式的字符串，而數(shù)據(jù)的請求及渲染是異步的，正常情況下來說，瀏覽器是無法解析成功的，但是提供的一個方法，可以搞定，示例代碼如下其中是數(shù)據(jù)后記大家多多交流，互相學習啊，寫的不好的地方情指正哦 Vue.js是我所喜愛的，知乎也是我喜愛的，突發(fā)奇想使用vue做了一個知乎日報項目地址： Github地址在線預覽demo 設計： 1.設計上沒有按照知乎日報客戶端的交互及UI...

simpleapples 2019-08-30 15:52 評論0 收藏0
使用vue.js構建一個知乎日報

摘要：日報詳細內(nèi)容知乎是一個格式的字符串，而數(shù)據(jù)的請求及渲染是異步的，正常情況下來說，瀏覽器是無法解析成功的，但是提供的一個方法，可以搞定，示例代碼如下其中是數(shù)據(jù)后記大家多多交流，互相學習啊，寫的不好的地方情指正哦 Vue.js是我所喜愛的，知乎也是我喜愛的，突發(fā)奇想使用vue做了一個知乎日報項目地址： Github地址在線預覽demo 設計： 1.設計上沒有按照知乎日報客戶端的交互及UI...

longshengwang 2019-08-01 16:12 評論0 收藏0
2017-09-19 前端日報

摘要：前端日報精選與實現(xiàn)讓你的網(wǎng)站秒配證書借助實現(xiàn)元素滾動自動環(huán)繞的劉海大型架構設計騰訊大會圖文筆記中文翻譯種高效縮寫法個人文章個節(jié)省開發(fā)者時間的實用工具庫與資源簡書通用類和結(jié)構與樣式分離眾成翻譯性能調(diào)優(yōu)之調(diào)試篇一知乎專欄進階系列 2017-09-19 前端日報精選 VirtualDOM與diff(Vue實現(xiàn))讓你的網(wǎng)站秒配 HTTPS 證書借助CSS Shapes實現(xiàn)元素滾動自動環(huán)繞iP...

Leo_chen 2019-08-22 11:11 評論0 收藏0
2017-10-20 前端日報

摘要：前端日報精選作者的構思和演繹翻譯新特性大殺器和把動畫轉(zhuǎn)換成原生動畫菜鳥的學習之路中文舊文與知乎專欄舊文新讀解釋閉包需要幾行代碼知乎專欄前端校招總結(jié)個人文章函數(shù)式編程系列優(yōu)雅的使用進行函數(shù)編程掘金微軟谷歌三星將一起構建的統(tǒng)一文檔 2017-10-20 前端日報精選 React作者的構思和演繹（翻譯）Make React Great Again —— React v16 新特性大殺器Bo...

Genng 2019-08-21 17:08 評論0 收藏0