前后端分离的简易好上手的web后台管理系统--大事件项目(1)用户注册与登录模块

远小
804 阅读3分钟

涉及到的技术与框架

  • Layui 前端UI设计框架 
  • jquery 用来简易实现事件三要素 发送ajax请求
  • cropper 用来事件图片剪切
  • tinyMCE 用来实现文本域编辑器

主要实现板块

  • login 实现登录注册功能
  • index  界面初始化 
  • user 账号信息的增删改  main
  • passage 文章信息的增删改查 main

ajax接口地址

git地址  完整代码

用户登录注册界面的实现

1.html页面设计思路

     中间盒子中放同时放注册和登录两个表单  让其中一个display=none  

点击页面上'去登录'或'去注册账号'的时候切换diaplay的值(toggle)

      jquery自带的show()与hide()方法,其本质是改变display的值

2.html 页面结构

Layui框架中有响应的样式,引入layui.css文件和layui.js文件之后稍加改动即可

layui中样式下面便是html代码

  下面的图片是我自己基于layui框架写的login.html代码的登录部分  注册与登录的样式大同小异,便不赘述了.

此处根据需求我只引用了输入框那个盒子和立即提交的按钮然后加以复制修饰.

layui中标签的classs属性中添加了'layui-form'都会独占一行而且没有左右的padding和margin值.稍加修饰添加了padding值,

字体图标也使用的layui 自带的字体图标   

3.表单验证

layui自带表单验证方法   在表单元素标签属性栏中添加自定义属性

 lay-verify="required|pass"

也可以自己编写自定义属性

4.login.js文件 发送ajax请求

1.阻值表单默认提交事件 然后发送注册与登录的ajax请求 

        此处使用了jquery.ajax方法而不是使用原生js发送ajax方法,好处是有简介,并且不需要查询字符串的格式问题,并且可以使用自带的方法 ,如ajaxPrefilter方法 用于在正式发起ajax操作之前对请求体进行操作.

          下一步是根据接口文档获得数据或提交数据

  1. 项目的请求根路径为 http://ajax.frontend.itheima.net

  2. 以 /api 开头的请求路径，不需要访问权限

  3. 以 /my 开头的请求路径，需要在请求头中携带 Authorization 身份认证字段，才能正常访问成功

$获取元素,绑定事件,执行回调函数

 ->阻值默认行为

->获取数据 

  • 方法一:设置对象,设置相应的name值,然后赋值. 
  • 方法二: jquery自带的获取表单元素的值的方法 serialize()
  • 方法三:使用原生js的new Formdata()方法
  • 方法四:使用layui自带的表单取值方法layui.form.val('filter', object);具体用法,查询文档

->发送ajax请求

  • 注册成功-> 显示注册成功消息:使用layui.layer.msg('成功的消息')弹出层(显示3秒钟)-> 跳转登录界面
  • 登录成功-> 将身份验证的header 存入本地储存localStorage.setItem('token', res.token) -> 跳转初始化页面 location.href = '/index.html'

Layui前端UI框架: https://www.layui.com/

Formdata详解:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

avatar
文章
阅读
粉丝