使用vue.js構(gòu)建一個知乎日報

simpleapples 發(fā)布于2019-08-30 15:52 / 1366人閱讀

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

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

項目地址：

Github地址
在線預(yù)覽demo

設(shè)計：

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

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

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

預(yù)覽：

涉及到的技術(shù)：

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

基礎(chǔ)樣式使用basscss，basscss對層疊樣式表的設(shè)計方式簡練、高效、可復(fù)用性強

網(wǎng)絡(luò)請求使用axios

后臺使用Node.js

vuex架構(gòu)：

將getters、mutations、actions變量名設(shè)定一個命名空間，否則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ù)自己習(xí)慣來吧，我是這樣做的：

[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)絡(luò)請求；
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ù)

后記：

大家多多交流，互相學(xué)習(xí)啊，寫的不好的地方情指正哦！

GPU云服務(wù)器云服務(wù)器構(gòu)建一個 Vue.js vue.js 屬性 vue.js自學(xué)

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116402.html

發(fā)表評論

登陸后可評論

0條評論

simpleapples

男|高級講師

我要關(guān)注我要私信

TA的文章

#黑色星期五#Hostigger：美國/荷蘭VPS和VDS年付四折，$19/年起，買2年送1年

閱讀 1826·2021-10-20 13:49
使用vue.js構(gòu)建一個知乎日報

閱讀 1367·2019-08-30 15:52
SCSS學(xué)習(xí)筆記（一）

閱讀 2873·2019-08-29 16:37
關(guān)于Css的垂直居中的一些方法

閱讀 1040·2019-08-29 10:55
企業(yè)級React項目的個人構(gòu)建總結(jié)

閱讀 3076·2019-08-26 12:14
Javascript刪除數(shù)組中某一項或幾項的幾種方法

閱讀 1655·2019-08-23 17:06
Javascript的對象拷貝

閱讀 3240·2019-08-23 16:59
使用vue開發(fā)移動端管理后臺

閱讀 2550·2019-08-23 15:42

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用vue.js構(gòu)建一個知乎日報

相關(guān)文章