一、開發背景

  • 為了全面的熟悉Vue+Vue-router+Vuex+axios技術棧,結合V2EX的開放API開發了這個簡潔版的V2EX。 在線預覽
  • API來自官方以及djyde的整理。
  • 在線訪問請節制使用,跨域是通過Nginx配置反向代理實現的,所以每小時120次API請求是算在服務器頭上的(沒啥說的了)。
  • 當頁面刷新后也無法显示,請查看控制台的異步請求是否返回403。如果是的話,要麼你等等(很久),要麼你clone這個庫到本地去玩。
  • 項目地址:v2ex-vue
  • 為了使用Markdown編輯器,我重新發表了這篇文章(簡書這點需要改進啊)

二、項目演示

分類頁


topic

文章頁 & 用戶頁


article & user

懶加載


lazyLoad

移動端


mobile

路由

首頁默認显示最新的帖子

  • 首頁 /
  • 全部 /topic
  • 分類 /topic/:name
  • 文章 /article/:id
  • 用戶 /user/:name

結構

目錄是cmd生成的(稍微進行了一下修改,默認的太難看了) tree /f >tree.txt

├─components
│ Topic.vue // 某一分類下的文章或某個用戶的全部文章
│ TopicList.vue // 全部分類
├─router
│ index.js // 路由
├─store
│ state.js // 存放API地址和最近一次請求的文章和評論
│ getters.js // 讀取state的值
│ mutations.js // 存儲懶加載
│ actions.js // 存儲異步請求
│ index.js // Vuex
├─ App.vue // 主頁面
├─ main.js // Vue主文件

三、項目優勢

  • 界面設計簡潔
  • 沉浸式的閱讀體驗
  • 可以按分類/文章/用戶瀏覽
  • 在文章頁显示用戶評論
  • 圖片使用懶加載模式
  • 總之,實現了你看帖所需要的一切
  • 項目基於Vue全家桶
  • 適配移動端
  • 有完善的文檔註釋
  • 有疑問歡迎提交issue
  • 感興趣的歡迎給顆star ^_^

四、項目缺陷

  • 不支持翻頁(沒有找到翻頁的API)

五、項目安裝

項目兼容IE9+,使用項目前,請確保安裝好了NodeJS。

git clone https://github.com/bergwhite/v2ex-vue.git  // 克隆項目
cd v2ex-vue  // 進入項目目錄
npm install  // 安裝依賴
npm run dev  // 運行項目

六、解決方案

6.1 本地開發跨域方案

本地開發中,通過配置代理表實現跨域。

config/index.js
-------------------
proxyTable: {
  '/api': {
    target: 'https://www.v2ex.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'
    }
  }
}

6.2 讓Vuex支持IE

直接引入Vuex無法在IE中显示,需要引入babel-polyfill。

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

src/main.js
---------------
import 'babel-polyfill'  // 在vue主文件中導入

6.3 在線部署跨域方案

通過配置Nginx反向代理實現跨域。由於是代理HTTPS,所以你需要生成SSL證書。

/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:正在找工作,北京有坑的歡迎聯繫


分享