gitee地址: gitee.com/wzl080879/e…
登陆功能的实现思路:
1、首先是需要from表单,然后需要给input进行事件绑定,得到用户所输入的信息,
2、当用户点击确定登陆按钮的时候,通过element-ui提供的校验方式进行判断,判断用户输入的信息格式是否正确,不正确的话提示格式错误,
3、如果校验通过的话,然后通过axios请求将后台所需要的那些参数字段传递过去,然后通过后台返回来的状态码进行判断,如果状态码是200的清空,说明登陆成功,然后跳转到首页面
4、跳转到首页面后,在将后台接口返回来的token存到本地存储localStorage或者cookie中,方便后面的操作。
首页用户列表数据的渲染
1、像这些列表数据的话,都是后台有接口的,我们需要通过后台提供的api接口文档,然后进行请求,如过接口需要设置token的话,然后在headers中设置token,
2、然后后台会给我们返回响应,我们这个时候就可以通过返回来的状态码进行一行响应的逻辑处理,最后渲染到页面上。
添加用户的实现思路:
1、首先的话先对模态框进行v-if条件判断,当点击添加用户的按钮,让这个模态框条件成立显示,
2、个模态框里面放一个from表单,模态框的话可以自己写一个,也可以使用element-ui所提供的,
3、当然添加用户时候所需要哪些字段、参数,提前我们和后台都是沟通好的,当点击确定时候必须传递这些字段,
4、然后的话可以对from表单中的input进行绑定,通过v-moduel
5、当用户点击确认键的时候,先判断用户所输入的规则是否正确,不正确的话直接弹出创建失败
6、如果用户名存在,后台也会返回响应的状态码,我们前端可通过状态码来进行判断,如果是201的话说明创建成功,否则都是创建失败,
7、创建成功然后再次请求数据进行页面更新,然后关闭模态框,进行后面的操作
搜索的思路:
1、获取输入框的值,也就是用户输入的字节,可进行模糊搜索、精确搜索,
2、当用户输入时候通过ajax请求后台接口,
3、后台接收到浏览发过来的请求,
4、后台通过查询数据库,
5、将查询的结果返回给浏览器,
6、前端通过console.log()先输出一下后台返回来的数据是否正确,可通过状态码来判断数据是否返回成功,如果返回的数据和状态码都成功,在vue中的话可通过v-for来进行数据渲染,当然实现渲染的方式也有很多,
7、最后的话,也可以对这些功能进行优化:
优化的方案又很多 这里的话使用 防抖 和 节流,防抖和节流都是用于减少对服务器的请求压力的,在项目中,如果一直高频的想后台发送请求,比如:用户按下键盘就发送请求、还有鼠标移动、scroll滚动、窗口变化等待,可通过loadash实现,并且兼容性很好
删除功能的思路:
1、 首先需要一个事件的触发,当用户触发事件为删除事件时候,获取取到当前点击用户的信息,
2、获取要信息后,然后根据后台所需要的字段,把所需要的字段传递通过接口的方式传递给后台,比如后台需要当前用户id的话,然后当我们点击的时候就把这个id通过参数的传递传递给后台处理,
3、删除之后,再次请求列表数据,从而实现获取到的数据是最新的数据。