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 保存用户状态

功能实现

首页

  • 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哦

157 声望
9 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.7k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 20k评论 9

157 声望
9 粉丝
宣传栏