Vue怎么邮箱注册和短信注册登录页面一、项目环境二、项目演示三、主要模块说明

这篇文章主要讲解了“Vue怎么邮箱注册和短信注册登录页面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue怎么邮箱注册和短信注册登录页面”吧！前端技术栈：Vue-Cli前端软体：WebStorm 2020.3前端样式: Bootstrap后端技术栈：SpringBoot后端软体：IntelliJ IEDA2019JavaJDK：1.8服务器：阿里云Centos 7其他：MyBatis，Redis，MySql，Docker，Shiro项目源码：shoppingProject01_pub : version6.0项目参考：Project05；不良人_Vue-Cli；不良人_Redis；不良人_Axios；尚硅谷_Redis项目功能：
1）邮箱注册登录：
用户应用邮箱注册点击提交后，网站会给用户发送邮件附带激活码链接，用户点击链接实现账号激活传送门。
2）短信注册登录：
用户应用手机号注册时，点击“获取验证码”按钮，手机会接收到网站发送的短信附带验证码。基于Redis实现了验证码有效期5分钟，每个手机号只能获取三次短信验证码传送门。
3）alipay支付：
通过下载Android版支付宝沙箱app用户可通过alipay扫码购买网站上的商品，后台MySql会记录该订单行为传送门，网页展示如图1所示。
4）用户小分级：
当用户扫码购买年度VIP会员后，购买网站上的商品一律半价，后台MySql记录用户角色的变更。
5）用户积分排行榜：
用户购买商品会增加自己的积分，网页展示如图2所示。
项目中遇到的大坑：
1）邮件发送功能本地测试通过，服务器端测试Bug频出，解决办法。
2）项目在服务器部署后，无法连接服务器上的Redis。解决办法：（1）将Redis在服务器部署而非Docker；（2）将Redis端口改为7000；（3）防火墙active状态下放行服务器和阿里云的7000端口；（4）修改Redis.conf文件。
3）git上传本地源码到gitee，误操作导致本地源码被gitee上的旧代码覆盖，第二天才发现。解决办法：因为在服务器上留有源码的jar包，通过反编译工具jd_gui救回半条命。另外git上传文件参考传送门。1Vue-Cli模块说明：1.1 Vue-Cli的概述：1）以前后端分离、单页面web应用(SPA)为特点，Vue-Cli可以创建一个Vue项目，这个项目存在脚手架规范。Vue-Cli的优势如下：
(1) 基于脚手架规范的开发会变得很灵活。
(2) Vue-Cli基于webpack构建并带有合理的默认配置，打包工具webpack能够聚合单页面和各种开发组件。
(3) Vue-Cli是一个丰富的官方插件集合，继承了前端生态中最好的工具。2）安装过程：
(1) 安装WebStorm(用于开发)，安装node.js，安装vue-cli，安装axios(用于发起跨域请求)，引入bootstrap样式。3）部署过程：4）Vue-Cli开发要点：
（1）在WebStorm中，开发过程主要面向src文件，如图3所示：

[1] 首先掌握路由(router)和组件(components[公有组件],views[私有组件])，组件就是一个个“页面”，组件建立后要向路由进行注册； [2] asserts封装了bootstrap样式，并在main.js中被导入； [3] 为免费云主机域名了发送跨域请求，在utils中封装了axios实例，代码如下：在各组件中，对于后端的get和post请求方法如下：[4] 组件之间的跳转和传值方法如下：2用户积分排行榜模块说明：
1.1 Reids概述：
1） Redis是一种基于内存的数据存储NoSql；
2） Redis支持丰富的数据类型(String, List, Set, ZSet, Hash)；
3） Redis有两种持久化方法: （1）快照(snapshot)存储，也叫rdb持久化，保存当前时刻的数据状态；（2） AOF(append only file)存储，将所有redis的写命令记录到日志文件中，Redis支持持久化间隔最快也是一秒，所以它是事务不安全的，即是可能丢失数据的。
4）Redis的应用场景：
(1) 利用Redis字符串完成项目中手机验证码存储的实现。——本项目采用
(2) 利用Redis字符串类型完成具有时效性的业务功能，如订单还有40分钟即将关闭。
(3) 利用Redis实现分布式集群系统中的Session共享。
(4) 利用Redis的ZSet数据类型(可排序set类型：元素+分数)实现排行榜功能。 ——本项目采用
(5) 利用Redis完成分布式缓存。 ——本项目实现MySql中数据的缓存
(6) 利用Redis存储认证之后的token信息。 ——非常方便，本项目采用。
(7) 利用Redis解决分布式集群系统中分布式锁问题。1.2基于Redis实现前端组件从后端获取用户信息：
Step1：前端Login.vue组件中用户输入登录信息提交的接口如下：Step2：后端/user/login接口实现如下：Redis整合SpringBoot有两种Template，即RedisTemplate和StringRedisTemplate。其中StringRedisTemplate是RedisTemplate的子类，两个方法基本一致，不同之处在于操作的数据类型不同，RedisTemplate中的两个泛型都是Object，意味着存储的key和value都可以是一个对象，而StringRedisTemplate的两个泛型都是String，意味着StringRedisTemplate的key和value都只能是字符串。
在Step2中，我将token和数据库中的用户信息userDB绑定在一起存入了Redis中，后续前端组件获取登录用户信息的代码如下：后端/user/token的接口如下：Step3：用户退出登录时，应消除浏览器中对应的token，后端接口代码如下：1.3基于Redis的用户积分排行榜实现：
MySql中的用户信息如图4所示：

Redis中的UserRank如图5所示：Step1：当用户登录时，他的首要任务是接入UserRank对应的信息，后端代码如下：userDB是数据库中当前登录用户的信息（一定是有的，你注册了，对吧？），若用户首次登录我将他的分数在数据库设置为0.0，之后我在Redis的ZSet中加入这个用户，你知道，Set集合不会存储重复key值的元素，因此不会同一个用户出现在UserRank中两次。两个template完成了token绑定User，User绑定UserRank中Score的过程，之后的分数更新过程会反复使用这两个template实现。
Step2：当用户信息更新时，相应的与用户信息有关的两个template都要发生变化，代码如下：Step3：当用户扫码支付时，首次进入的后端controller如下：在alipayService有一个小型用户分级，即vip用户购物价格减半：在payForItem相同文件下，调用了payCommonService，在这里会实现用户积分更新和用户等级更新：将”VIP”这件商品的id设置为“666”，当用户购买该商品时，当前用户更新过程如下：当前用户积分更新过程如下：感谢各位的阅读，以上就是“Vue怎么邮箱注册和短信注册登录页面”的内容了，经过本文的学习后，相信大家对Vue怎么邮箱注册和短信注册登录页面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐: 用小程序做电商有哪些优势

这篇文章主要介绍“用小程序做电商有哪些优势”，在日常操作中，相信很多人在用小程序做电商有哪些优势问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”用小程序做电商有哪些优势”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！1、流量入口…