Vue-wyclass 仿網易雲課堂App

線上預覽：手機瀏覽或切換谷歌瀏覽器移動除錯

Gif預覽

描述

前端部分

• Vue2.0 + Mint-ui快速構建前端介面（輪播圖，swiper滑塊） —Mint-ui
• Vuex 管理現非父子元件之間的通訊
• 移動裝置相容：使用rem+flexible.js
• Stylus實現css預編譯
• icon-font實現所有小圖示的載入，減少http請求 —-Icon-font
• 路由懶載入：Vue Router結合 Vue非同步元件和Webpack 的 Code Splitting
• axios做ajax請求
• sessionStorage 儲存使用者資訊

後端部分

• 本地使用webpack dev-server 搭建小型express服務
• 伺服器端使用express搭建靜態資源資源介面

待更新的功能

• 用 express + mongodb 儲存使用者狀態

功能實現

首頁

• 1、搜尋框
• 1、tabbar切換
• 4、swiper滑動，切換頁面
• 6、首頁各個介面

分類

• 1、實現切換分類模組
• 2、右側選單

我的學習

• 1、判斷登入狀態
• 2、使用者所學課程展示

個人

• 1、賬戶的登入
• 2、設定介面 退出當前賬號

搜尋介面

• 1、根據使用者輸入查詢所有課程中符合要求的課程並顯示

課程詳細介面

• 1、通過router傳參查詢課程
• 1、根據使用者是否擁有選擇播放視訊許可權
• 2、課程介紹介面

總結

• 1、熟悉使用Vue2.0
• 2、在專案中，將元件進行分離，編寫可以複用的元件，提高效率
• 3、Vuex的狀態管理模組，統一的狀態的管理，讓我們更好的去對資料操作
• 4、util的工具，倒數計時js
• 5、對axios有更進一步的理解，利用cros進行跨域處理
• 6、進行路由的懶載入，優化頁面載入

實現細節

登入攔截

router.beforeEach((to, from, next) => {
  // NProgress.start();
  if (to.path == `/login`) {
    sessionStorage.removeItem(`userInfo`);
  }
  let userInfo = JSON.parse(sessionStorage.getItem(`userInfo`));
   if (!userInfo && to.path != `/account/login`) {
     next({ path: `/account/login` })
   } else {
     next()
   }                            
  next()
})

路由懶載入

export default new Router({
  routes: [
    {
      path: `/home`,
      name: `Home`,
      component: resolve => require([`@/views/Home/Home`], resolve),
    },
    ]
})

vue-router url傳參

   changeToCoursedetails(course){
      this.$router.push({path:"/home/coursedetails" , query:{id:course.id}})
      // this.$router.push({name:"Coursedetails" , params:{id:course.id}}) 
      // 可使用vue.$route 獲取query和params
    },

params的特點是 路由後面要帶引數名
並且傳參的時候，引數名要跟路由後面設定的引數名對應。

但是 重新整理介面，或者跳到別的介面，引數就會消失
params一旦設定在路由，params就是路由的一部分

CORS解決跨域問題

app.use(function (req, res, next) {
    // Website you wish to allow to connect
    res.setHeader(`Access-Control-Allow-Origin`, `*`);
    // Request methods you wish to allow
    res.setHeader(`Access-Control-Allow-Methods`, `GET, POST, OPTIONS, PUT, PATCH, DELETE`);
    // Request headers you wish to allow
    res.setHeader(`Access-Control-Allow-Headers`, `X-Requested-With,content-type`);
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader(`Access-Control-Allow-Credentials`, true);
    // Pass to next layer of middleware
    next();
});

檔案目錄

├─api
│      api.js        ---Axios請求
├─common             
│  ├─font           ---iconfont
│  ├─js
│  └─stylus             ---stylus預處理和函式
├─components
│  │  loading.vue       ---載入介面元件
│  │  NotFound.vue      ---notFound元件
│  │  search.vue        ---查詢元件
│  │  tabbar.vue        ---tabbar元件
│  │  
│  └─star               ---星級元件
├─router
│      index.js         ---router入口檔案
│      
├─views
│  │  Classify.vue          ---主頁分類介面
│  │  Classifydetails.vue   ---分類詳細介面
│  │  Login.vue             ---登入介面
│  │  Mystudy.vue           ---主頁我的學習介面
│  │  
│  ├─Account                ---主頁我的賬號介面
│  │      Account.vue       
│  │      setting.vue       ---設定介面
│  │      
│  ├─Coursedetails          ---課程詳細介面
│  │      catalog.vue       
│  │      comment.vue
│  │      Coursedetails.vue 
│  │      introduce.vue     ---暫開發課程介紹介面
│  │      
│  └─Home                   ---我的主頁中首頁介面
│          classic.vue      ---經典課程介面
│          expert.vue       ---專家介面
│          Home.vue
│          major.vue        ---行家介面
│          recommend.vue    ---推薦介面
│          
└─vuex
    │  store.js             
    │  types.js
    │  
    └─modules
            com.js      ---vuex 狀態管理
            user.js     ---vuex 使用者管理

使用

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

原始碼地址：Github 歡迎star哦