今天完成的事
1，请求后台数据展示；
vue组件周期中，组件创建完成时发起请求：
html通过vue列表渲染展示请求返回的数据：
<el-row class="el-row-add contents-list bdt" v-for="(data, index) in returnData" v-bind:key="index">
<el-col :span="2"><div class="grid-content contents-align">{{index+1}}</div></el-col>
<el-col :span="6"><div class="grid-content contents-align">{{data.title}}</div></el-col>
<el-col :span="4">
<div class="grid-content contents-align">
{{data.type | transformType}}
</div>
</el-col>
<el-col :span="2">
<div class="grid-content">
<div class="contents-align">{{data.createAt | transformDateFormat_1}}</div>
<div class="contents-align">{{data.createAt | transformDateFormat_2}}</div>
</div>
</el-col>
<el-col :span="2">
<div class="grid-content bg-purple">
<div class="contents-align">{{data.updateAt | transformDateFormat_1}}</div>
<div class="contents-align">{{data.updateAt | transformDateFormat_2}}</div>
</div>
</el-col>
<el-col :span="2"><div class="grid-content contents-align">{{data.author}}</div></el-col>
<el-col :span="2">
<div class="grid-content contents-align">
{{data.status == 1? '草稿' : '上线'}}
</div>
</el-col>
<el-col :span="4">
<div class="grid-content">
<el-col :span="8">
<div class="grid-content contents-align">
<a @click="changeStatus(data.id, data.status)">{{data.status == 1? '上线' : '下线'}}</a>
</div></el-col>
<el-col :span="8"><div class="grid-content contents-align"><a>编辑</a></div></el-col>
<el-col :span="8"><div class="grid-content contents-align"><a>删除</a></div></el-col>
</div>
</el-col>
</el-row>
取得的13时间戳数据需要转化为合适的格式展示，vue中使用与angular管道类似功能的过滤器filters：
管道调用：
js：
2，为登录页，列表展示页，列表项新增页，页面丢失页添加合理的嵌套路由规则；并添加路由元数据meta，让路由守卫识别分析；
export default new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/articleHome',
component: articleHome,
children: [
{ path: '', component: dashboard, meta:{ requireAuth: true },},
{ path: '/article-list', component: articleList, meta:{ requireAuth: true }, },
{ path: '/article-increase', component: articleIncrease, meta:{ requireAuth: true }, },
]
},
{ path: '*', component: pageNotFound }
]
})
3，添加全局路由守卫，未经登录，不能访问数据展示页面；
4，添加搜索过滤方法，返回根据条件获取的数据并展示；
methods: {
// 单独处理时间的函数
dealDisabledDate (time) {
// let compara = new Date(this.dateValue1).getTime();
return time.getTime() < this.dateValue1;
},
//分页器页码变动时触发
handleSizeChange(val) {
this.allArguments.size = val;
this.getDataFormBackend();
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.allArguments.page = val;
this.getDataFormBackend();
// console.log(`当前页: ${val}`);
},
searchNewData() {
this.allArguments.startAt = this.dateValue1;
this.allArguments.endAt = this.dateValue2;
this.allArguments.type = this.selectType;
this.allArguments.status =this.selectStatus;
this.getDataFormBackend();
},
clearOldData() {
for (let key in this.allArguments) {
this.allArguments[key] = '';
}
this.getDataFormBackend();
},
getDataFormBackend () {
// console.log(this.allArguments);
// let request = this.$qs.stringify(this.allArguments);
this.$axios.get(`api/a/article/search`, {
params: this.allArguments
})
.then(res => {
if (res.data.code == 0) {
this.returnData = res.data.data.articleList;
this.itemTotal = res.data.data.total;
}
})
},
5，完成新增页面制作；
明天的计划
1，解决使用axios发起put请求失败的原因；
2，为列表展示页添加编辑，删除，产品状态修改的功能；
3，为新增列表页添加合适的逻辑代码，新增列表项；
遇到的问题
1，使用axios发起的put请求状态码成功，但是返回数据不正确，初步判断为请求头的问题；待明天进行测试验证；
收获
1，vue组件生命周期详解：
https://segmentfault.com/a/1190000011381906
2，过滤器转化时间戳，并且其他数据类型转化原理相同:
https://segmentfault.com/q/1010000016230071
3，路由使用详解：
https://www.jianshu.com/p/9a7d79249741
4，路由守卫使用解析：
https://www.jianshu.com/p/6c2048884066
返回列表
评论