脚本宝典收集整理的这篇文章主要介绍了Vue+mint-ui+flexible仿移动端App(网易云课堂),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在线预览:手机浏览或切换谷歌浏览器移动调试
Gif预览
前端部分
后端部分
待更新的功能
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的特点是 路由后面要带参数名
并且传参的时候,参数名要跟路由后面设置的参数名对应。
但是 刷新界面,或者跳到别的界面,参数就会消失
params一旦设置在路由,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预处理和函数
├─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哦
以上是脚本宝典为你收集整理的Vue+mint-ui+flexible仿移动端App(网易云课堂)全部内容,希望文章能够帮你解决Vue+mint-ui+flexible仿移动端App(网易云课堂)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。