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

資訊專欄INFORMATION COLUMN

使用vue.js構(gòu)建一個(gè)知乎日?qǐng)?bào)

longshengwang / 1387人閱讀

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

Vue.js是我所喜愛(ài)的，知乎也是我喜愛(ài)的，突發(fā)奇想使用vue做了一個(gè)知乎日?qǐng)?bào)
項(xiàng)目地址：

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

設(shè)計(jì)：

1.設(shè)計(jì)上沒(méi)有按照知乎日?qǐng)?bào)客戶端的交互及UI設(shè)計(jì)來(lái)做，本渣親自捏了一個(gè)，顏色以黑白灰為主，本來(lái)想加入知乎的藍(lán)色，但是本渣設(shè)計(jì)功力實(shí)在太差，故舍棄掉了藍(lán)色，只采用黑白灰三色。

2.日?qǐng)?bào)條目采用無(wú)邊界設(shè)計(jì)，只添加淡灰色的分割線來(lái)區(qū)分。

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

預(yù)覽：

涉及到的技術(shù)：

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

基礎(chǔ)樣式使用basscss，basscss對(duì)層疊樣式表的設(shè)計(jì)方式簡(jiǎn)練、高效、可復(fù)用性強(qiáng)

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

后臺(tái)使用Node.js

vuex架構(gòu)：

將getters、mutations、actions變量名設(shè)定一個(gè)命名空間，否則store寫的大了，命名肯定會(huì)亂，示例：

// 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分模塊
其實(shí)不用分模塊，但還是分一下吧，為后續(xù)開(kāi)發(fā)著想。

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

[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是用來(lái)處理同步的事情的，比如給state中的變量賦值；

b、actions是用來(lái)處理異步的事情，比如網(wǎng)絡(luò)請(qǐng)求；
c、但是actions也是可以做同步的事情的，但最好按照vuex的建議來(lái)做：在mutations中處理同步操作

具體怎么處理的看我的github，記得點(diǎn)點(diǎn)贊啥的：

vuex地址
store地址

遇到的難題：

跨域?？缬蚴乔岸艘粋€(gè)老生常談的問(wèn)題，我使用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.日?qǐng)?bào)詳情的渲染。日?qǐng)?bào)詳細(xì)內(nèi)容知乎是一個(gè)html格式的字符串，而數(shù)據(jù)的請(qǐng)求及渲染是異步的，正常情況下來(lái)說(shuō)，瀏覽器是無(wú)法解析成功的，但是vue提供的一個(gè)v-html方法，可以搞定，示例代碼如下：

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

后記：

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

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

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

相關(guān)文章

  • 使用vue.js構(gòu)建一個(gè)知乎日?qǐng)?bào)

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

    Kross 評(píng)論0 收藏0

  • 使用vue.js構(gòu)建一個(gè)知乎日?qǐng)?bào)

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

    simpleapples 評(píng)論0 收藏0

  • 2017-09-19 前端日?qǐng)?bào)

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

    Leo_chen 評(píng)論0 收藏0

  • 2017-10-20 前端日?qǐng)?bào)

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

    Genng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<