百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第三十七天到第三十八天:我是精明的小卖家(三)

普通

人数125人在学习该课程,有111人已经完成该课程

时间平均用时3.2

课程概述

作业提交截止时间:09-01

第三十七天到第三十八天:我是精明的小卖家(三)

课程目标

今天我们将学习LocalStorage,基于它来实现对于数据的写操作

课程描述

我们在做这种系统时,经常会有在数据表格中同时进行数据编辑的需求,这里面涉及两个工作,一个是实现在数据编辑的交互问题,另一个是解决数据编辑完成后的传输问题。今天我们就来学习一下。

编辑

需求

  • 我们首先为所有表格增加一个编辑功能,在原来的表格输出的数据单元格,全部变成input输入框,里面为数据。
  • 在页面中增加一个保存按钮,点击保存后将数据保存到LocalStorage中
  • 页面加载的时候,优先从LocalStorage读取数据

阅读

我们需要阅读一些基础的背景知识点:

设计

在学习完LocalStorage后,我们需要梳理一下业务流程,首先是数据读取,原来是直接使用提供的JS文件,现在我们需要先判断LocalStorage中是否有数据,有的话从LocalStorage中读取,没有的话再使用JS文件中的数据。

对于数据的编辑和保存,可以如下实现:

  • 给所有input输入框增加一个onblur事件,在事件中增加对于输入内容的判断,是否为正确的数字,是的话什么都不做,不是的话弹出提示框(alert)
  • 点击保存的时候,遍历所有input,按照一定顺序,把数据写入LocalStorage中。

体验更好的编辑

需求

如果对于一个强编辑需求的场景,上面的方案可能合适,甚至可以直接上一个Web电子表格组件,但如果对于数据的编辑是小部分的需求场景时,一堆input框看上去就不是那么优雅了。

我们希望你实践一下,看上去不是输入框,但鼠标移动上去或者点击就变成一个可编辑的状态。需求如下:

  • 把表格恢复成没有input的状态
  • 当鼠标滑动过某一个数字的单元格时,数字旁边显示一个铅笔的icon,或者显示灰色的小小的编辑两个字
  • 当鼠标点击某个数字的单元格时,这个数字进入编辑状态,单元格内容变成一个输入框,输入框右边是取消和确定
  • 点击取消,输入框消失,恢复出原来数字
  • 点击确定,输入框消失,数字变成编辑的,这个过程中需要判断输入的正确性,如果输入的不是数字,则弹出提示
  • 点击该单元格以外的页面其他任何地方,除了响应对应行为外,同时等同于点击了取消,输入状态消失
  • 理论上,同一时刻,只有一个单元格处于编辑状态
  • 在输入框中,按ESC键等同于按取消
  • 在输入框中,按回车键等同于按确认

Ajax可选需求

需求

真正项目中,大部分是通过Ajax和Server通过接口来完成上面的事情,有余力的同学可以通过自己写一个简单的服务代码来学习前后端数据通信的主要方式Ajax。

提交

把你的代码放在Github后进行提交

总结

依然把今天的学习用时,收获,问题进行记录

下一个任务预告

明天我们继续该任务的下一个环节

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记

暂无优秀学习笔记~