开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇

开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
前期回顾开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

30秒学会 —— 《获取验证码基本操作》_0.活在风浪里的博客-CSDN博客前期回顾 懒人必备 —— 时间神器 moment_0.活在风浪里的博客-CSDN博客亲测好用,及其好使的插件,开发懒人必整,就算是自己可以写,一大堆代码,真的要写吗?https://blog.csdn.net/m0_57904695/article/details/123767269?spm=1001.2014.3001.5501先说先验证码思路,其实很简单,1、前端触发获取验证码,同步显示有效验证倒计时; 2、后台通过代理平台发送验证短信; 解释:你在页面触发验证码请求后,后台接...https://blog.csdn.net/m0_57904695/article/details/123781413?spm=1001.2014.3001.5501
在篇幅一 Vue项目实战 一 我们实现了登录的封装 ,并且效果也出现了,接下来点击登录按钮进入哔哔哩哩首页
篇幅一完成图 开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
回顾 开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

项目开始因为登录和注册按钮是类似的,所以封装
思路:子组件写结构样式(button),父组件发送ajax请求 ,在子组件使用监听去监听用户名、密码、如果正则校验通过,则子传父,将值传到父组件
开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

效果图 点击按钮发送ajax 开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

发送接口前的准备 跨域、环境变量、封装ajax、封装Api、封装请求方法,此项目会很细致!
请求之前可以借助Postman测试一下接口通不通
开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片


开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片


开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
在页面使用我们封装过得接口,这里使用到了async、await
开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

因为配置了跨域,所以变成我们本地发起的请求了,本地浏览器不受跨域影响
原接口:开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片
配置后:
【开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇】开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片


开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

开源项目|Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇
文章图片

结语: 这一小节完!
2022/3/31





    推荐阅读