今天的话,早上就是去我们这边市里面去做了核算检测,然后让同学帮忙给录屏了,自己也会抽时间看的,下午的话就正常上课了,下午的话就主要讲了搜索(防抖、节流优化方案)、添加新用户、switch开关、编辑修改用户,
搜索的思路:
1、获取输入框的值,也就是用户输入的字节,可进行模糊搜索、精确搜索,
2、当用户输入时候通过ajax请求后台接口,
3、后台接收到浏览发过来的请求,
4、后台通过查询数据库,
5、将查询的结果返回给浏览器,
6、前端通过console.log()先输出一下后台返回来的数据是否正确,可通过状态码来判断数据是否返回成功,如果返回的数据和状态码都成功,在vue中的话可通过v-for来进行数据渲染,当然实现渲染的方式也有很多,
7、最后的话,也可以对这些功能进行优化:优化的方案又很多 这里的话使用 防抖 和 节流,防抖和节流都是用于减少对服务器的请求压力的,在项目中,如果一直高频的想后台发送请求,比如:用户按下键盘就发送请求、还有鼠标移动、scroll滚动、窗口变化等待,可通过loadash实现,并且兼容性很好
添加新用户的思路:
1、首先肯定是需要一个模态框,里面放一个from表单,模态框的话可以自己写一个,也可以使用element-ui所提供的
2、当然创建用户时候所需要哪些字段、参数,提前我们和后台都是沟通好的,当点击确定时候必须传递这些字段,
3、然后的话可以对from表单中的input进行绑定,通过v-moduel
4、当用户点击确认键的时候,先判断用户所输入的规则是否正确,不正确的话直接弹出创建失败
5、如果用户名存在,后台也会返回响应的状态码,我们前端可通过状态码来进行判断,如果是201的话说明创建成功,否则都是创建失败,
5、创建成功然后再次请求数据进行页面更新,然后关闭模态框...
然后自己的话也是,下课就开始做项目,现在的话还有一个编辑修改还没做,明天早上自习课的话会把这些任务都给完成。