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、搜尋框
• 2、tabbar切換
• 3、swiper滑動，切換頁面
• 4、首頁各個介面

分類

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

我的學習

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

個人

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

搜尋介面

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

課程詳細介面

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

總結

• 1、理解元件化思想，編寫複用元件，提高專案效率
• 2、Vuex可以對資料狀態更好的管理，實現元件間良好的通訊
• 3、第三方庫的合理使用，可大大增加開發效率
• 4、對axios有更進一步的理解，利用cros進行跨域處理
• 5、進行路由的懶載入，優化頁面載入
• 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哦