Vue+mint-ui+flexible仿移動端App(網易雲課堂)

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 保存用戶狀態

功能實現

首頁

• 一、搜索框
• 一、tabbar切換
• 四、swiper滑動，切換頁面
• 六、首頁各個界面

分類

• 一、實現切換分類模塊
• 二、右側菜單

個人學習

• 一、判斷登陸狀態
• 二、用戶所學課程展現

我的

• 一、帳戶的登陸
• 二、設置界面 退出當前帳號

搜索界面

• 一、根據用戶輸入查找全部課程中符合要求的課程並顯示

課程詳細界面

• 一、經過router傳參查找課程
• 一、根據用戶是否擁有選擇播放視頻權限
• 二、課程介紹界面

總結

• 一、熟悉使用Vue2.0
• 二、在項目中，將組件進行分離，編寫能夠複用的組件，提升效率
• 三、Vuex的狀態管理模塊，統一的狀態的管理，讓咱們更好的去對數據操做
• 四、util的工具，倒計時js
• 五、對axios有更進一步的理解，利用cros進行跨域處理
• 六、進行路由的懶加載，優化頁面加載

實現細節

登陸攔截

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哦