Skip to content

Cendeal/school_login_vue

 
 

Repository files navigation

已完成功能

  • 绑定登陆
  • 缓存管理
  • 主题设置
  • 课表查询
  • 分数查询

项目演示

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

Releases

No releases published

Packages

No packages published

Languages

  • Vue 85.7%
  • JavaScript 12.4%
  • Other 1.9%