论文项目总结02-前端模块总结

连累

于 2022-11-29 22:34:21 发布

阅读量243

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_42688411/article/details/127990656

版权

该博客总结了前端开发中的几个关键需求：数据显示、分页显示、添加模板的显示与隐藏，以及修改页面的数据回显。首先，通过axios获取数据并在页面加载后绑定到data属性，使用v-for指令展示在表格上。接着，详细介绍了如何实现分页功能，包括计算页数和选中页。此外，展示了如何控制添加模板的显示和关闭，以及在修改页面时的数据回显策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求一.将数据显示到页面

1.1 需求分解

第一步、在页面加载完成后通过axios发送请求

 //页面加载完成后执行
        created: function () {
            _self = this;
            //通过localStorage的getItem函数获取缓存的uid
            var url = "http://localhost:8080/paper1/paper/list?pageIndex="+this.pageIndex+"&pageSize="+this.pageSize+"&uid="+localStorage.getItem("uid");
            this.requestPapers(url); //调用请求论文列表的函数发送请求
        }
    });

 //请求论文列表
            requestPapers(url){
                //通过axios发送请求get请求，then响应
                axios.get(url).then(respones => {
                    console.log(respones.data);
                    this.papers = respones.data.data; //给论文列表赋值
                    this.pageTotle = respones.data.pageTotle; //给总条数赋值
                    //Math.ceril函数=》小数取整，向上取整
                    this.pageNum = Math.ceil(this.pageTotle / this.pageSize); //计算页数
                });
            },

第2步、在data属性中绑定数据

   data: {
            papers: null, //论文列表

第3步、通过v-for指令显示到页面上（在table上）

最低0.47元/天解锁文章