Vue+mint-ui+flexible仿移動(dòng)端App(網(wǎng)易云課堂)

iOS122 發(fā)布于2019-08-22 15:12 / 3077人閱讀

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

Vue-wyclass 仿網(wǎng)易云課堂App

在線預(yù)覽：手機(jī)瀏覽或切換谷歌瀏覽器移動(dòng)調(diào)試

Gif預(yù)覽

描述

前端部分

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

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

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

Stylus實(shí)現(xiàn)css預(yù)編譯

icon-font實(shí)現(xiàn)所有小圖標(biāo)的加載，減少http請(qǐng)求 ----Icon-font

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

axios做ajax請(qǐng)求

sessionStorage 存儲(chǔ)用戶信息

后端部分

本地使用webpack dev-server 搭建小型express服務(wù)

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

待更新的功能

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

功能實(shí)現(xiàn) 首頁

1、搜索框

1、tabbar切換

4、swiper滑動(dòng)，切換頁面

6、首頁各個(gè)界面

分類

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

2、右側(cè)菜單

我的學(xué)習(xí)

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

2、用戶所學(xué)課程展示

個(gè)人

1、賬戶的登錄

2、設(shè)置界面退出當(dāng)前賬號(hào)

搜索界面

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

課程詳細(xì)界面

1、通過router傳參查找課程

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

2、課程介紹界面

總結(jié)

1、熟悉使用Vue2.0

2、在項(xiàng)目中，將組件進(jìn)行分離，編寫可以復(fù)用的組件，提高效率

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

4、util的工具，倒計(jì)時(shí)js

5、對(duì)axios有更進(jìn)一步的理解，利用cros進(jìn)行跨域處理

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

實(shí)現(xiàn)細(xì)節(jié) 登錄攔截

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

但是刷新界面，或者跳到別的界面，參數(shù)就會(huì)消失
params一旦設(shè)置在路由，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請(qǐng)求
├─common             
│  ├─font           ---iconfont
│  ├─js
│  └─stylus             ---stylus預(yù)處理和函數(shù)
├─components
│  │  loading.vue       ---加載界面組件
│  │  NotFound.vue      ---notFound組件
│  │  search.vue        ---查找組件
│  │  tabbar.vue        ---tabbar組件
│  │  
│  └─star               ---星級(jí)組件
├─router
│      index.js         ---router入口文件
│      
├─views
│  │  Classify.vue          ---主頁分類界面
│  │  Classifydetails.vue   ---分類詳細(xì)界面
│  │  Login.vue             ---登錄界面
│  │  Mystudy.vue           ---主頁我的學(xué)習(xí)界面
│  │  
│  ├─Account                ---主頁我的賬號(hào)界面
│  │      Account.vue       
│  │      setting.vue       ---設(shè)置界面
│  │      
│  ├─Coursedetails          ---課程詳細(xì)界面
│  │      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