已完成功能

• 綁定登陸
• 緩存管理
• 主題設(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