电商管理系统
步骤1
<div class="index">
<!-- 头部标题 -->
<van-nav-bar :fixed="true" title="主页" class="i-title" z-index="99" />
<!-- 频道区域 -->
<van-tabs v-model="active" sticky offset-top="46">
<van-tab v-for="(item, index) in channelList" :title="item.name" :key="index" >
<!-- 下拉刷新组件 -->
<van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
{{active}}
<!-- 频道下的文章区域 -->
<van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
<van-cell v-for="(subitem, subindex) in item.articleList" :key="subindex" :title="subitem.title" />
</van-list>
</van-pull-refresh>
</van-tab>
</van-tabs>
<div class="channelbtn">
<van-icon name="bars" />
</div>
</div>
</template>
<script>
import { apiGetChannel } from '../../../api/channel'
import { localGet } from '../../../utils/mylocal'
import { apiGetArticleList } from '../../../api/article'
export default {
data () {
return {
// loading: false,
// finished: false,
// list: [],
// isLoading: false,
channelList: [],
active: 0
}
},
methods: {
async onLoad () {
// 请求服务中的文章数据
const currentChannel = this.channelList[this.active]
const id = currentChannel.id
const res = await apiGetArticleList(id)
currentChannel.articleList = res.data.data.results
currentChannel.loading = false
},
onRefresh () {
console.log('onRefresh')
},
// 得到频道数据
async getChannel () {
// 得到token
const token = this.$store.state.userInfo.token
// 判断是否登录
if (token) {
const res = await apiGetChannel()
// 将数据保存起来
this.channelList = res.data.data.channels
} else {
// 从localstorage中得到数据
const localChanel = localGet('channel')
// 判断localstorage中是否存在数据
if (localChanel) {
// 将本地保存的频道数据取出赋值给channelList
this.channelList = localChanel
} else {
const res = await apiGetChannel()
// 将数据保存起来
this.channelList = res.data.data.channels
}
}
this.addOtherProp()
console.log(this.channelList)
},
addOtherProp () {
this.channelList.forEach(item => {
// item.articleList = []
this.$set(item, 'articleList', [])
// item.loading = false
this.$set(item, 'loading', false)
// item.finished = false
this.$set(item, 'finished', false)
// item.isLoading = false
this.$set(item, 'isLoading', false)
})
}
},
created () {
// 请求频道数据
this.getChannel()
}
}
</script>
<style lang="less" scoped>
.index {
margin-top: 46px;
margin-bottom: 50px;
.i-title {
background-color: #3e9df8;
/deep/ .van-nav-bar__title {
color: #fff;
}
}
.channelbtn {
position: fixed;
top: 46px;
right: 0px;
z-index: 999;
width: 10%;
height: 44px;
background-color: pink;
text-align: center;
line-height: 44px;
}
/deep/ .van-sticky {
width: 90%;
}
}
</style>
步骤2
import axios from 'axios'
// 导入store
import store from '../store/index.js'
// 创建一个 axios 对象
const instance = axios.create({
baseURL: 'http://ttapi.research.itcast.cn' // 设置基地址
})
// 设置拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 1.0 得到token
const token = store.state.userInfo.token
// 2.0 判断
if (token) config.headers.Authorization = `Bearer ${token}`
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
// 暴露给外界
export default instance
步骤3
// 封装操作 local 的方法
// 存储方法
export function localSet (value, key = 'userInfo') {
window.localStorage.setItem(key, JSON.stringify(value))
}
// 获取的方法
export function localGet (key = 'userInfo') {
return JSON.parse(window.localStorage.getItem(key))
}
// 删除方法
export function localDel (key = 'userInfo') {
window.localStorage.removeItem(key)
}
