已完成功能
- 绑定登陆
- 缓存管理
- 主题设置
- 课表查询
- 分数查询
项目演示
gif演示:
gif演示
不同主题:
蓝
白
粉
黄
红
浏览地址
部署地址预览: shool_login_vue
项目说明
最近在学vue.js，就是想练练手而已，所以结合python flask web框架搭建的后台服务写了这个项目，这个项目现在用nginx进行部署，部署在我租用的腾讯云服务器，这服务器是在香港区域，有时候访问会比较吃力，加上配置也不高，玩玩而已，无所谓了哈哈。
项目技术要点
1.前后端分离，跨域问题解决方案
这个项目采用的是jsonp解决方案，其实就是利用了js文件可以跨域请求的原理。我这里使用了vue-jsonp的插件，使用方法非常简单：
1.安装npm i -s vue-jsonp
2.注册全局
3.调用的时候：this.$jsonp(url,data)，这里返回的是 Promise对象，可以使用.then()进行串行异步任务，这个特点很重要，比如我需要先登录请求，再有其他的请求，那么这时候就很有用了。
项目内封装好的：jluzhRequest.js
这里透露一个bug:使用异步请求第一次登陆后，直接打开课表页面时，会没办法获取课表，按f12终端提示回调函数没有定义,莫名其妙。但是，切换其他界面，再回来就成功了，又不报错了，不知道是为什么，哈哈
2.这个项目使用的是什么样式框架
这个项目是基于Muse-UI样式开发的,但是由于Muse-ui自带的轮播不满足我想要的效果，比如课表的切换。所以，这里也用到了另外的切换插件vue-awesome-swiper
UI地址: Muse-UI
swiper插件: vue-awesome-swiper
3.项目大概都用到那些vue知识
0.基本知识：
语法：v-bind、v-for、v-show、v-if、v-else-if、v-else、v-on、v-resize(屏幕大小变化是触发)、vue实例的生命周期(created钩子函数,mounted钩子函数)、监听属性(computed,watch)，data数据属性、metchod方法属性
结构：template(视图模板)、script(js代码逻辑)、style(样式，带有scoped的区别)
1.组件化:传参props;子组件$emit()触发父组件函;组件的数据属性data一定是函数,返回的是对象
2.vuex:主要是用于多页面变量共用，主要是state属性、mutations属性、getters属性
3.vue-router:页面路由，这里的话要注意的是子页面配置，如果一个页面要有子页面，那么这个页面需要有一个或多个<router-view></router-view>出口
最后项目地址: school_login_vue
网友评论