摘要：仿網(wǎng)易云課堂在線預覽手機瀏覽或切換谷歌瀏覽器移動調(diào)試預覽描述前端部分快速構(gòu)建前端界面輪播圖，滑塊管理現(xiàn)非父子組件之間的通信移動設(shè)備兼容使用實現(xiàn)預編譯實現(xiàn)所有小圖標的加載，減少請求路由懶加載結(jié)合異步組件和的做請求存儲用

在線預覽：手機瀏覽或切換谷歌瀏覽器移動調(diào)試

Gif預覽

前端部分

Vue2.0 + Mint-ui快速構(gòu)建前端界面（輪播圖，swiper滑塊） ---Mint-ui

Vuex 管理現(xiàn)非父子組件之間的通信

移動設(shè)備兼容：使用rem+flexible.js

Stylus實現(xiàn)css預編譯

icon-font實現(xiàn)所有小圖標的加載，減少http請求 ----Icon-font

路由懶加載：Vue Router結(jié)合 Vue異步組件和Webpack 的 Code Splitting

axios做ajax請求

sessionStorage 存儲用戶信息

后端部分

本地使用webpack dev-server 搭建小型express服務

服務器端使用express搭建靜態(tài)資源資源接口

待更新的功能

用 express + mongodb 保存用戶狀態(tài)

1、搜索框

1、tabbar切換

4、swiper滑動，切換頁面

6、首頁各個界面

1、實現(xiàn)切換分類模塊

2、右側(cè)菜單

1、判斷登錄狀態(tài)

2、用戶所學課程展示

1、賬戶的登錄

2、設(shè)置界面 退出當前賬號

1、根據(jù)用戶輸入查找所有課程中符合要求的課程并顯示

1、通過router傳參查找課程

1、根據(jù)用戶是否擁有選擇播放視頻權(quán)限

2、課程介紹界面

1、熟悉使用Vue2.0

2、在項目中，將組件進行分離，編寫可以復用的組件，提高效率

3、Vuex的狀態(tài)管理模塊，統(tǒng)一的狀態(tài)的管理，讓我們更好的去對數(shù)據(jù)操作

4、util的工具，倒計時js

5、對axios有更進一步的理解，利用cros進行跨域處理

6、進行路由的懶加載，優(yōu)化頁面加載

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),
    },
    ]
})

   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的特點是 路由后面要帶參數(shù)名
并且傳參的時候，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對應。

但是 刷新界面，或者跳到別的界面，參數(shù)就會消失
params一旦設(shè)置在路由，params就是路由的一部分

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預處理和函數(shù)
├─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       ---設(shè)置界面
│  │      
│  ├─Coursedetails          ---課程詳細界面
│  │      catalog.vue       
│  │      comment.vue
│  │      Coursedetails.vue 
│  │      introduce.vue     ---暫開發(fā)課程介紹界面
│  │      
│  └─Home                   ---我的主頁中首頁界面
│          classic.vue      ---經(jīng)典課程界面
│          expert.vue       ---專家界面
│          Home.vue
│          major.vue        ---行家界面
│          recommend.vue    ---推薦界面
│          
└─vuex
    │  store.js             
    │  types.js
    │  
    └─modules
            com.js      ---vuex 狀態(tài)管理
            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哦