已完成功能
- 綁定登陸
- 緩存管理
- 主題設(shè)置
- 課表查詢
- 分?jǐn)?shù)查詢
項(xiàng)目演示
gif演示:
gif演示
不同主題:
藍(lán)
白
粉
黃
紅
瀏覽地址
部署地址預(yù)覽: shool_login_vue
項(xiàng)目說明
最近在學(xué)vue.js镀琉，就是想練練手而已黑界，所以結(jié)合python flask web框架搭建的后臺(tái)服務(wù)寫了這個(gè)項(xiàng)目运翼，這個(gè)項(xiàng)目現(xiàn)在用nginx進(jìn)行部署没龙，部署在我租用的騰訊云服務(wù)器，這服務(wù)器是在香港區(qū)域肢执，有時(shí)候訪問會(huì)比較吃力，加上配置也不高，玩玩而已既峡，無所謂了哈哈。
項(xiàng)目技術(shù)要點(diǎn)
1.前后端分離碧查，跨域問題解決方案
這個(gè)項(xiàng)目采用的是jsonp解決方案运敢，其實(shí)就是利用了js文件可以跨域請(qǐng)求的原理。我這里使用了vue-jsonp的插件忠售，使用方法非常簡(jiǎn)單：
1.安裝npm i -s vue-jsonp
2.注冊(cè)全局
3.調(diào)用的時(shí)候：this.$jsonp(url,data)传惠，這里返回的是 Promise對(duì)象，可以使用.then()進(jìn)行串行異步任務(wù)档痪，這個(gè)特點(diǎn)很重要涉枫，比如我需要先登錄請(qǐng)求，再有其他的請(qǐng)求腐螟，那么這時(shí)候就很有用了愿汰。
項(xiàng)目?jī)?nèi)封裝好的：jluzhRequest.js
這里透露一個(gè)bug:使用異步請(qǐng)求第一次登陸后，直接打開課表頁面時(shí)乐纸，會(huì)沒辦法獲取課表衬廷，按f12終端提示回調(diào)函數(shù)沒有定義,莫名其妙。但是汽绢，切換其他界面吗跋，再回來就成功了，又不報(bào)錯(cuò)了宁昭，不知道是為什么跌宛，哈哈
2.這個(gè)項(xiàng)目使用的是什么樣式框架
這個(gè)項(xiàng)目是基于Muse-UI樣式開發(fā)的,但是由于Muse-ui自帶的輪播不滿足我想要的效果，比如課表的切換积仗。所以疆拘，這里也用到了另外的切換插件vue-awesome-swiper
UI地址: Muse-UI
swiper插件: vue-awesome-swiper
3.項(xiàng)目大概都用到那些vue知識(shí)
0.基本知識(shí)：
語法：v-bind、v-for寂曹、v-show哎迄、v-if、v-else-if隆圆、v-else漱挚、v-on、v-resize(屏幕大小變化是觸發(fā))渺氧、vue實(shí)例的生命周期(created鉤子函數(shù),mounted鉤子函數(shù))旨涝、監(jiān)聽屬性(computed,watch)，data數(shù)據(jù)屬性侣背、metchod方法屬性
結(jié)構(gòu)：template(視圖模板)颊糜、script(js代碼邏輯)哩治、style(樣式，帶有scoped的區(qū)別)
1.組件化:傳參props;子組件$emit()觸發(fā)父組件函;組件的數(shù)據(jù)屬性data一定是函數(shù),返回的是對(duì)象
2.vuex:主要是用于多頁面變量共用衬鱼，主要是state屬性业筏、mutations屬性、getters屬性
3.vue-router:頁面路由鸟赫，這里的話要注意的是子頁面配置蒜胖，如果一個(gè)頁面要有子頁面，那么這個(gè)頁面需要有一個(gè)或多個(gè)<router-view></router-view>出口
最后項(xiàng)目地址: school_login_vue
