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

longshengwang 發布于2019-08-01 16:12 / 1379人閱讀

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

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自學

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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