前端学习（四）：智慧商城项目-启动部分

好恶发
109 阅读2分钟

前文

今天我们通过一个黑马程序员的一个小案例，来继续巩固Vuex方面的知识

一、准备部分

安装基础项目

请自行搭建

image.png

安装Vant

image.png

vant-contrib.gitee.io/vant/v2/#/z…

移动端对性能要求较高，推荐按需引入

全局到日

image.png

按需引入

image.png

vw适配

官网：vant-contrib.gitee.io/vant/v2/#/z…

image.png

注意：文件位置

image.png

postcss.config.js

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375
    }
  }
}

路由设计

image.png

（1）一、二级路由设置

image.png

（2）设置路由出口

image.png

请记得，二级路由需要开启一个新的出口，就位于档当前一级路由组件位置

（3）基于Vant设置二级路由入口

image.png

图形验证码部分

（1）基于Vant实现头部组件

使用Vant导航栏

image.png

（2）封装axios请求方法

axios官网：www.axios-http.cn/docs/instan…

1.创建实例

image.png

2.建立请求和响应拦截器

image.png

image.png

注意：我们自己的编辑的http请求头要和接口对应

image.png

3.暴露实例

image.png

（3）图片验证码获取图片唯一key值和图片地址

image.png

第一步始终是分析需求：

点击图片刷新图片地址与唯一key值

点击按钮，获取短信验证码

点击登录按钮，携带短信验证码与图片key值提交至后台，以供验证身份

从需求发现，至少需求三次网络请求

1.点击图片刷新图片地址与唯一key值

在login.js中，暴露封装的api

image.png

在需求组件中，引入这个函数

image.png

使用异步第调用这个函数，并且处理下来的参数

image.png

重点：学会怎么看后端接口

image.png

image.png

通过观察发现，请求不需要携带参数，返回的参数是一个名称为data对象的，因此我们采取上述的结构方式，去接受数据

2.点击按钮，获取短信验证码

手机发送短信的前置条件是什么？

我们需要提交手机验证码、图形码、key值（为什么需要key值？因为数据库内部确定图形码与key值具有映射关系，才能确定是否输入正确）

因此我们的思路：

在一个元素上使用点击事件，事件中调用api，发起网络请求，后台数据核对无误后，向手机发起验证码

补充：

点击元素，需要设计一个值为60的常量，在点击同时，开启一个计时器

梳理一下：

首先校验一下手机号码和图片验证码是否输入正确

image.png

其次点击元素，判断是否处于60秒间隔期内，不是，发起请求，反之等待

image.png

最后回收计时器，数字归档

image.png

image.png 4.vant的轻提示Tost使用

image.png

avatar
文章
阅读
粉丝