Vue项目实战-尚品汇--登录注册功能开发--重点（10）

最新推荐文章于 2023-04-02 10:30:56 发布
最新推荐文章于 2023-04-02 10:30:56 发布
阅读量495 收藏 3
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxd_dxc/article/details/122482037
版权
本文介绍了在Vue项目中开发登录注册功能的过程，包括解决图片引用问题，使用`~@`符号引用资源，实现获取验证码功能，发送请求验证手机号，完成注册与登录的API接口，利用Vuex管理状态，处理登录成功后的token存储和用户信息获取，以及在组件间同步数据。同时，文章还讨论了登录后状态的持久化，退出登录的实现，确保用户体验的顺畅。
摘要由CSDN通过智能技术生成

 报错找不到icons.png，这张图片可以从listConstainer里面的images里面拿到

 解决办法：用~@来表示图片引用中的src

 

 把获取验证码改为按钮

 接下来点击获取验证码按钮，要手机手机号数据，并向服务器发送请求

 

 写完请求

 写仓库

 接下来发请求，获取数据

最低0.47元/天 解锁文章
winterjoycc
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Vue项目--尚品汇（登录注册）、token存储与过期
qq_36582776的博客
01-07 2213
1.样式里也可以使用@符号代替src路径，但是需要使用~@ 2. 注册部分需要表单验证，这里暂时没做 点击发送验证码，后台会给用户手机发送一个验证码，用户填写在注册界面，提交给后台。 调接口，post 3.登录 调接口，post，参数为手机号和密码。服务器会返回用户的token作为用户的唯一标识符。我们首先将其存在vuex中，但是vuex只能暂存，刷新就丢失了。 用户点击登录以后，需要将token带给服务器，与uuid用法类似，放在请求头： 4. ...
项目笔记26（尚品汇）
Revin的博客
03-24 565
文章目录登录注册(一)登录注册静态组件注册业务获取验证码用户注册登录业务 登录注册(一) 登录注册静态组件 首先引入登录注册静态组件。 效果如下所示 注册业务 获取验证码 表单验证先不处理 首先完成验证码的功能，先收集数据，然后利用接口获取验证码 书写接口 接下来给登录注册新建一个仓库user，并注册 接下来书写vuex三连环以及在注册页面发送action 此时可以获取验证码 用户注册 当点击完成注册后，页面应该跳转到登录页面，并且还需要将注册内容存到后台中。为了完成这个功能首先还是先书
【Vue2项目(尚品汇前台)】(六）Register登录与注册模块搭建
matmacchiato的博客
01-24 1037
在样式当中也可以使用@符号，但要加~@/
vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
刘大猫
04-02 778
vue尚品汇商城项目-day05【33.token令牌理解+34.用户登录携带token获取用户信息+35.退出登录】
Day11-尚品汇-用户登录携带token获取用户信息
qq_59110215的博客
10-24 553
卷
vue-element-admin中文版本
最新发布
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-print-nb 兼容低版本浏览器
11-28
在开发过程中，我们经常需要处理各种打印需求，这正是 `vue-print-nb` 插件的作用所在。`vue-print-nb` 是一个针对 Vue.js 应用程序设计的打印插件，它允许开发者方便地实现页面或组件的打印功能。标题提到的“vue-...
vue3.0 vue-quill-editor.rar
09-19
总的来说，Vue3.0 + Vue-Quill-Editor的组合为开发者提供了强大的富文本编辑功能，结合Vue CLI 3的快速开发能力，可以高效地构建出具有图片上传和尺寸调整功能的文本编辑器应用。在实际操作中，需注意版本兼容性、...
vue-admin-template-master.zip
12-05
在"vue-admin-template-master.zip"这个压缩包中，我们很显然有一个使用Vue CLI 3搭建的项目模板，其中集成了Element UI作为UI框架。 首先，让我们详细了解一下Vue CLI 3。Vue CLI 3 提供了一套全面的脚手架工具，...
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <v></v> // 2. 局部引入 //a
Day11-尚品汇-登录业务中讲解存在的问题
qq_59110215的博客
10-25 253
卷
Day11-尚品汇-登录业务
qq_59110215的博客
10-24 165
卷
vue实现登录功能
Yan9_9的博客
07-26 3071
4.客户端收到Token以后可以把它存储起来，比如放在Cookie里或者localStorage里。\6.服务端收到请求，然后去验证客户端请求里面带着的Token，如果验证成功，就向客户端返回请求的数据。\3.验证成功后，服务端会签发一个Token，再把这个Token发送给客户端。\5.客户端每次向服务端请求资源的时候需要带着服务端签发的Token。\2.服务端收到请求，去验证用户名与密码。\1.客户端使用用户名跟密码请求登录。......
vue登录业务逻辑
热门推荐
hjhfreshman的博客
05-27 1万+
这次给大家带来vue2.0实现注册登录步骤详解，vue2.0实现注册登录的注意事项有哪些，下面就是实战案例，一起来看一下。前言前段时间和公司一个由技术转产品的同事探讨他的职业道路，对我说了一句深以为然的话：“不要把自己禁锢在某一个领域，技术到产品的转变，首先就是思维上的转变。你一直做前端，数据的交互你只知道怎么进，却不知道里面是怎么出的，这就是局限性。”醍醐灌顶般，刚好学习vue的时候...
Web项目 - 登录注册业务逻辑
毕业才是起点
08-12 960
web项目，登录注册业务逻辑
尚品汇项目笔记
m0_67393039的博客
03-06 558
尚品汇项目笔记 前端Vue核心 1、vue文件目录分析 2、项目配置 3、组件页面样式 4、清除vue页面默认的样式 5、pages文件夹 6、footer组件显示与隐藏 7、路由传参 8、多次执行相同的push问题 9、定义全局组件 10、代码改变时实现页面自动刷新 11、Home首页其它组件 12、封装axios 13、前端通过代理解决跨域问题 14、请求接口统一封装 15、nprogress进度条插件 16、手动引入vuex 17、async await使用 18、vuex（*****） 19、lo
Day11-尚品汇-退出登录
qq_59110215的博客
10-25 167
代码真烦！
项目笔记27（尚品汇）
Revin的博客
03-25 902
文章目录登录注册（二）用户登录携带token获取用户信息解决上述刷新的问题解决其他模块不加载用户信息的问题解决方法一(不完美) 登录注册（二） 用户登录携带token获取用户信息 书写获取用户信息的接口 接下来书写vuex 考虑应该在什么时候发送请求，按照正常的逻辑，用户输入完账号密码点击登录后，页面应该跳转到home中，此时header不应该是“请登录|免费注册”而是应该展示用户的信息。因此这个请求应该在home挂载完成的时候发起。 此时当用户输入完信息登录之后，页面效果如下。出现这个问题的原因是，
项目笔记21（尚品汇）
Revin的博客
03-22 821
文章目录商品详情页放大镜功能与商品售卖属性展示放大镜功能数据获取动态替换图片放大镜实现商品售卖属性展示动态展示售卖属性售卖属性排他操作简单复习下轮播图的使用 商品详情页放大镜功能与商品售卖属性展示 放大镜功能 数据获取动态替换图片 在上一篇我们已经拿到了服务器的数据，但是并没有针对放大镜模块进行书写，在这里记录一下详情页放大镜模块的内容。首先放大镜是详情页一个子模块，同时放大镜需要详情页请求到的服务器的数据（比如图片地址），因此这里又涉及到了父给子组件传递数据。通过props。 具体如下所示 放大镜实
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值