html5手机的注册页面,H5页面结合vue实现登录注册组件
介绍
结合`vue`框架作手机H5页面的登录注册组件
登录注册相关知识点
1.cookie和token的作用(个人理解,如果不到位,恳请指出)
token:
我的电脑通过http请求登录某一个网页,登录成功之后,服务器会返回一个token给我的电脑。
然后我只要把这个token保存下来,等下一次用我的电脑请求同一个页面时,服务器会自动验证我的token。
它会用它自己才知道的密钥解析这个token是不是它上一次发送给我电脑的。
如果解析之后数据一致,那么我就可以不用登录直接访问页面,如果不一致,则会认证不通过。
cookie:登录之后,服务器也会返回一个cookie给我的浏览器。
cookie的作用是可以保存在本地。所以这里我是用请求到的token保存在cookie里面。
就可以做到下次免登录就可以访问页面了。
2.登录注册与cookie、token的联系
第一次登录注册------->服务器返回token、cookie----->不保存token,关闭浏览器---->下一次登录需要输入账号密码
第一次登录注册------->服务器返回token、cookie----->把token保存在cookie里面,使其token保存在本机上----->关闭浏览器---->下一次登录不需要账号密码就可以访问该页面
3.获取cookie、设置cookie、删除cookie
1)把这个三个方法放在公共的js文件中,需要用到时调用
4.代码实现
1).用v-model双向绑定数据
点击下一步的时候,用正则判断用户名和手机号是否是满足要求,满足要求则可以点击下一步
同样,也是用v-model双向绑定数据
2).我把ajax请求放在api文件里面,在组件需要用到的时候,再调用这个函数
3).在登录注册组件调用这个函数
引进请求后台接口的函数,以及设置cookie的函数
import { getCodeNum, getRegister } from 'api/register.js'
import { setCookie } from 'common/js/cookie.js'
4).在路由进入之前判断有没有token,是为了请求用户信息的接口,可以获取注册成功之后的头像以及用户名
5).退出登录,清除cookie
html5手机的注册页面,H5页面结合vue实现登录注册组件相关推荐
- 怎样微信扫描二维码跳转页面,H5页面在微信中下载APP的实现方式
使用微信推广的用户经常都会遇到推广链接被拦截导致无法下载app的情况,此时用户在微信中打开会提示" 已停止访问该网页 ".这对于使用微信营销的商家来说就很不友好且损失非常大,因为用 ...
- 安卓手机联调Chrome调试H5页面
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 文章目录 1 前言 2 debugx5.qq.com 3 手机连接电脑并打开开发者选项和USB调试 ...
- h5适配华为手机_手机端H5页面适配 踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...
- android手机联调,安卓手机联调Chrome调试H5页面
欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~ 文章目录 1 前言 2 debugx5.qq.com 3 手机连接电脑并打开开发者选项和USB调试 ...
- 去哪编辑html5页面,h5页面 判断网页在哪打开
const ua = navigator.userAgent.toLowerCase(); const isInWeibo = () => / Weibo /i.test(ua); //微博 t ...
- 手机扫码进入h5页面填写信息
页面的二维码 html上的二维码 ```javascript <template><view class="page"><view class=&qu ...
- 谷粒学院 Day12.登录页面模式、整合JWT、整合QQ邮箱、用户登录注册接口【后端】、用户登录注册【前端】
项目结构: 配置文件 application.properties配置类 spring.jackson.time-zone=GMT+8# nacos注册中心 spring.cloud.nacos.di ...
- vue+elementui 登录注册页面实现
1.实现效果 2. 代码实现 2.1使用elementUI文档中Tabs标签页 2.2在components中新建两个文件 login.vue register.vue ...
- python注册登陆程序未响应_SpringBoot实现登录注册常见问题解决方案
一.用户名密码都正确的情况下被登录拦截器拦截 控制台报错:org.apache.ibatis.executor.ExecutorException: A query was run and no Re ...
- Vue实现登录注册功能
1.效果展示 2.注意:vue登录注册用到了 Vuex + localstorage+router等,使用了vue2,创建项目 3.先是在router中的index.js中写路由配置 import V ...
最新文章
- arduino红外遥控库IRremote的IRsend类sendRaw函数溢出问题及其解决方法
- 【运筹学】运输规划求最大值 ( 运输规划求最大值问题示例 | 转为运输规划求最小值的方式 )
- 计算机硬盘登记表,硬盘固件的 P 表与 G 表
- java队列转集合_Java集合 使用Queue
- Excel添加读音(中英均可)
- C++的#include_next
- 【终极方法】This method must return a result of type boolean
- 次数统计-CountMap
- 信息学奥赛C++语言:求平均分
- 用python自动化玩游戏封号吗_用 Python 自动化办公能做到哪些有趣或有用的事情?...
- Linux操作系统相关命令
- 一个bat文件运行多个java jar包
- 初级工程师该如何去学习,如何去研发开关电源?
- 网管师职业规划(3)
- 关于IE6 双倍间距的真正原因
- Visual Studio 2019 集成CefSharp
- 动手实现图像双线性插值——实现图像resize
- GEE系列:第7单元 利用GEE进行遥感影像分类【随机森林分类】
- 如何让那些模糊的照片变得高清?不会PS也能解决
- hadoop 编程规范(hadoop专利分析)