成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

用 Vue 全家桶二次開(kāi)發(fā) V2EX 社區(qū)

shiguibiao / 3327人閱讀

摘要：一開(kāi)發(fā)背景為了全面的熟悉技術(shù)棧，結(jié)合的開(kāi)放開(kāi)發(fā)了這個(gè)簡(jiǎn)潔版的。在線(xiàn)預(yù)覽來(lái)自官方以及的整理。當(dāng)頁(yè)面刷新后也無(wú)法顯示，請(qǐng)查看控制臺(tái)的異步請(qǐng)求是否返回。

一、開(kāi)發(fā)背景

為了全面的熟悉Vue+Vue-router+Vuex+axios技術(shù)棧，結(jié)合V2EX的開(kāi)放API開(kāi)發(fā)了這個(gè)簡(jiǎn)潔版的V2EX。 在線(xiàn)預(yù)覽

API來(lái)自官方以及djyde的整理。

在線(xiàn)訪(fǎng)問(wèn)請(qǐng)節(jié)制使用，跨域是通過(guò)Nginx配置反向代理實(shí)現(xiàn)的，所以每小時(shí)120次API請(qǐng)求是算在服務(wù)器頭上的（沒(méi)啥說(shuō)的了）。

當(dāng)頁(yè)面刷新后也無(wú)法顯示，請(qǐng)查看控制臺(tái)的異步請(qǐng)求是否返回403。如果是的話(huà)，要么你等等（很久），要么你clone這個(gè)庫(kù)到本地去玩。

項(xiàng)目地址：v2ex-vue

二、項(xiàng)目演示

分類(lèi)頁(yè)

文章頁(yè) & 用戶(hù)頁(yè)

懶加載

移動(dòng)端

路由

首頁(yè)默認(rèn)顯示最新的帖子

首頁(yè) /

全部 /topic

分類(lèi) /topic/:name

文章 /article/:id

用戶(hù) /user/:name

結(jié)構(gòu)

目錄是cmd生成的（稍微進(jìn)行了一下修改，默認(rèn)的太難看了） tree /f >tree.txt

├─components
│ Topic.vue // 某一分類(lèi)下的文章或某個(gè)用戶(hù)的全部文章
│ TopicList.vue // 全部分類(lèi)
├─router
│ index.js // 路由
├─store
│ state.js // 存放API地址和最近一次請(qǐng)求的文章和評(píng)論
│ getters.js // 讀取state的值
│ mutations.js // 存儲(chǔ)懶加載
│ actions.js // 存儲(chǔ)異步請(qǐng)求
│ index.js // Vuex
├─ App.vue // 主頁(yè)面
├─ main.js // Vue主文件

三、項(xiàng)目?jī)?yōu)勢(shì)

界面設(shè)計(jì)簡(jiǎn)潔

沉浸式的閱讀體驗(yàn)

可以按分類(lèi)/文章/用戶(hù)瀏覽

在文章頁(yè)顯示用戶(hù)評(píng)論

圖片使用懶加載模式

總之，實(shí)現(xiàn)了你看帖所需要的一切

項(xiàng)目基于Vue全家桶

適配移動(dòng)端

有完善的文檔注釋

有疑問(wèn)歡迎提交issue

感興趣的歡迎給顆star ^_^

...

四、項(xiàng)目缺陷

不支持翻頁(yè)（沒(méi)有找到翻頁(yè)的API）

...

五、項(xiàng)目安裝

項(xiàng)目兼容IE9+，使用項(xiàng)目前，請(qǐng)確保安裝好了NodeJS。

git clone https://github.com/bergwhite/v2ex-vue.git  // 克隆項(xiàng)目
cd v2ex-vue  // 進(jìn)入項(xiàng)目目錄
npm install  // 安裝依賴(lài)
npm run dev  // 運(yùn)行項(xiàng)目
六、解決方案 6.1 本地開(kāi)發(fā)跨域方案

本地開(kāi)發(fā)中，通過(guò)配置代理表實(shí)現(xiàn)跨域。

config/index.js
-------------------
proxyTable: {
  "/api": {
    target: "https://www.v2ex.com",
    changeOrigin: true,
    pathRewrite: {
      "^/api": "/api"
    }
  }
}
6.2 讓Vuex支持IE

直接引入Vuex無(wú)法在IE中顯示，需要引入babel-polyfill。

npm install babel-polyfill --save-dev  // 安裝babel-polyfill

src/main.js
---------------
import "babel-polyfill"  // 在vue主文件中導(dǎo)入
6.3 在線(xiàn)部署跨域方案

通過(guò)配置Nginx反向代理實(shí)現(xiàn)跨域。由于是代理HTTPS，所以你需要生成SSL證書(shū)。

/etc/nginx/nginx.conf
------------------------------
http {
    server {
        listen    80;
        listen    443;
        server_name www.v2ex.com;
        ssl on;
        ssl_certificate /etc/nginx/ssl/nginx.crt;
        ssl_certificate_key /etc/nginx/ssl/nginx.key;
        location / {
            root   /usr/share/nginx/html;
            index  index.html;
        }
        location /api/ {
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass https://www.v2ex.com/api/;
        }
    }
}

PS：正在找工作，北京有坑的歡迎聯(lián)系

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

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

相關(guān)文章

  • 用NodeJS打造多人在線(xiàn)聊天室（NodeJS & SocketIO & Expre

    摘要：技術(shù)棧項(xiàng)目背景這個(gè)項(xiàng)目主要是為了玩玩，項(xiàng)目的方向大概是做出類(lèi)似的在線(xiàn)聊天系統(tǒng)。項(xiàng)目使用進(jìn)行部署和管理，功能在不斷的迭代開(kāi)發(fā)中。首頁(yè)用戶(hù)列表用戶(hù)中心注冊(cè)登陸注銷(xiāo)用戶(hù)資料指定聊天室開(kāi)始安裝使用之前，請(qǐng)?jiān)谥行薷牡陌惭b路徑。 技術(shù)棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項(xiàng)目背景 這個(gè)項(xiàng)目主要是為了玩玩NodeJS，項(xiàng)目的方向大概...

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

  • 用NodeJS打造多人在線(xiàn)聊天室（NodeJS & SocketIO & Expre

    摘要：技術(shù)棧項(xiàng)目背景這個(gè)項(xiàng)目主要是為了玩玩，項(xiàng)目的方向大概是做出類(lèi)似的在線(xiàn)聊天系統(tǒng)。項(xiàng)目使用進(jìn)行部署和管理，功能在不斷的迭代開(kāi)發(fā)中。首頁(yè)用戶(hù)列表用戶(hù)中心注冊(cè)登陸注銷(xiāo)用戶(hù)資料指定聊天室開(kāi)始安裝使用之前，請(qǐng)?jiān)谥行薷牡陌惭b路徑。 技術(shù)棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項(xiàng)目背景 這個(gè)項(xiàng)目主要是為了玩玩NodeJS，項(xiàng)目的方向大概...

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

  • vue2.0寫(xiě)的V2EX社區(qū)

    摘要：按照如下配置可通過(guò)解決跨域問(wèn)題。但是這個(gè)不行，已親測(cè)豆瓣可以實(shí)現(xiàn)跨域，不知道是不是提供的是情況。本地開(kāi)發(fā)解決跨域終極方法僅僅適用于開(kāi)發(fā)環(huán)境安裝谷歌插件即可地址 v2ex A vue.js project for V2EX 預(yù)覽圖 首頁(yè) showImg(https://segmentfault.com/img/remote/1460000008631284); 主題 showImg(ht...

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

  • React 版 V2EX 社區(qū)（ react & react-router & ax

    摘要：目錄項(xiàng)目簡(jiǎn)介在線(xiàn)演示截圖演示踩坑項(xiàng)目簡(jiǎn)介項(xiàng)目使用進(jìn)行開(kāi)發(fā)項(xiàng)目兼容移動(dòng)端使用代理并支持跨域另外還寫(xiě)過(guò)一個(gè)版項(xiàng)目，以及聊天室，找工作，北京。 目錄 項(xiàng)目簡(jiǎn)介 在線(xiàn)演示 截圖演示 踩坑 項(xiàng)目簡(jiǎn)介（1/4） 項(xiàng)目使用React、Reac-router、Axios、ANTD UI進(jìn)行開(kāi)發(fā) 項(xiàng)目兼容移動(dòng)端 使用Nginx代理V2EX API并支持CORS跨域 另外還寫(xiě)過(guò)一個(gè)Vue版V2EX項(xiàng)...

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

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

0條評(píng)論

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