data () {
return {
}
}
}
</script>
<style lang="scss" scoped>
.content{
background-color: #eee;
}
</style>
三、数据加载
加载数据与加载页面是存在先后顺序的，比较通用方法是先加载页面，显示数据加载效果，在数据加载完成之后显示完整的页面。数据加载效果作为组件添加到应用中，比较繁琐，所以使用自定义指令的方式实现数据加载效果的显示。
数据加载效果
四、接口文件
import fetch from 'isomorphic-fetch'
import store from 'store'
import router from './router'
var env = process.env.NODE_ENV
var rootUrl
if (env === 'development') {
rootUrl = ''
}
if (env === 'production') {
rootUrl = ''
}
const post = function (url, params = {}) {
return fetch(rootUrl + url, {
method: 'post',
headers: {
'Content-type': 'application/json; charset=utf-8',
'Authorization': store.get('token')
},
body: JSON.stringify(params)
}).then(function (res) {
if (res.status === 401) {
// 没有权限
api.logout()
} else {
return res.json()
}
})
}const urls = [
'classAtCurDate' // 普通接口列表
]
var api = {}
for (var url of urls) {
(function (url) {
api[url] = (params) => {
console.log(url)
return post('course/' + url, params)
}
})(url)
}
// 需要特殊处理的接口
api.logout = () => {
store.clearAll()
router.push('login')
}
api.login = (params) => {
store.set('id', 1)
store.set('token', 2)
return Promise.resolve({params})
}
export default api
可以在全局设置，也可以在需要时导入
// 在main.js中导入api接口
import api from '../src/api'
Vue.$api = Vue.prototype.$api = api五、登录权限设置
路由加载前，检查是否有登录权限（判断用户id是否存在），如果存在直接跳过登录页进入首页，如果不存在在跳转登录页。
router.beforeEach((to, from, next) => {
if (cache.get('id') && to.path === '/login') {
next('/index')
} else if (!cache.get('id') && to.path !== '/login') {
next('/login')
} else {
next()
}
})六、常用第三方组件
许多常用组件都已经有了很好的实现，在项目开发中重复造轮子是一件很不明智的事情。vue移动应用有很多合适的库可以选择，如mint-ui、vux，这里不一一列举，想了解更多的可以自行谷歌，或直接到GitHub上搜索，这里已mint-ui为例，讲一下比较常用的一些组件。
