2021-05-14

<hmtt>

1.Vant的什么组件能给用户提示信息

<Toast>

// 如果是采用全局引入Vant组件库的方式，则可直接通过this.$toast.xxx调用

//加载中
this.$toast.loading({
  message: '加载中...',
  forbidClick: true, // 禁用背景点击
  duration: 0, // 持续时间，单位ms，默认2000，0表示永远
})

// 成功
this.$toast.success('登录成功')

// 失败
this.$toast.fail('登录失败')

 

2.如何添加表单验证规则? 当表单验证失败时,会触发submit时间吗?

1.给VanField组件添加rules属性: :rules = [{ required : true,  message :  " 错误消息 "}]

2.不会

3. 使用pattern选项: { pattern: /xxx/ , message: " 错误消息 " }

 

3.点击表单中的普通按钮为何会触发表单提交? 如何解决? 如何手动校验单个表单项

1.因为button的type属性默认值为submit

将VanButton的native-type设置为button即可解决 

2.给VanForm添加ref属性     this.$refs.form.validate("name") , 注意validate函数的返回值为Promise对象

 

4.Vant组件库的倒计时组件叫什么? 如何格式化倒计时效果? 如何监听倒计时结束了?

1.VanCountDown  给VanCountDown添加format属性指定规则

2.给VanCountDown添加finish事件

 

5.能不能再调用接口发送成功在显示倒计时?

1.能, 而且更好, 当发送失败时无需再关闭倒计时 (因为本来就还没显示)

try {
    await sendSms(this.user.mobile)
    this.$toast.success('发送成功')
    this.isCountDownShow = true // 显示倒计时
} catch (err) {
    ...
}

6.登录成功后获取的token往哪存  Vuex中的数据在什么时候会重置?

1.Vuex (响应式) + localStorage (持久化)

2.浏览器属性时,所以需要从localStrorage中获取token,作为Vuex的初始值

 

7.自己封装本地存储模块有什么优点?

1.自动序列化/反序列化处理 - JSON.stringify / JSON.parse方便使用

代码组织结构更加清晰

 

8.本项目中token无效时,后台返回的THHP状态码是多少? refresh_token的作用是什么?

1.401

2.当token过期是,用来请求后台接口获取新token的token  ( refresh_token的有效期比token长 )

 

9.个人中心模块 - >>  需要完成那些功能 

1.TbaBar处理 / 页面布局 

2.出里已登录和未登录的页面展示 

3.展示登录用户信息

4.使用请求拦截器统一添加Token

5.用户退出

 

10. 底部TabBar页面需要怎么处理? TabBar如果开启了route模式, v-model="active"还有用吗?  如果父路由默认子路由,父路由配置name还有意义吗? 

 

1.弄个公共的父路由,将TabBar写到父路由组件中, 在将底部压面配置成子路由,在父路由中通过RouterView来承载各页面内容

2.没有了,因为开启route模式后,是根据路径来匹配的,不是根据索引

3.没有意义,因为访问父路由时,会直接默认子路由,所以可以直接使用默认子路由的name

 

11.在html或css中使用@访问src目录是,需要在@前面加什么?   vue-router如何后退

1.加 ~  符号 , 如- >>  ~@

2.this.$router.back()

 

12.用户头像是传统的img显示的? 能在标签上直接设置宽高属性吗? 使用那种填充模式?

1.不是 , 使用Vanlmage组件更加方便

2.不能,因为不会经过postcss-pxtorem处理

fit = "cover" , 保持宽高缩放,短边完全显示,裁剪长边

 

13.如何让VanGrid组件拥有点击反馈效果?

1.在VanGrid标签上添加clickable属性

 

14.如何判断用户是否登录? 如何弹出确认对话框?

1.通过获取Vuex中的user状态

2.this.$dialog.confirm({ title: "确认退出?" })

 

15.获取登录用户信息接口需要token吗?

1.需要,通过设置Authorization请求头,注意记得手动添加 'Bearer + 空格' 前缀

 

 16.拦截器是设置在axios上还是自己创建的axios实例上? 请求拦截器在什么时候执行? 要注意什么?

1.设置在自己创建的aixos实例上, 因为咱们项目中都是使用axios,create方法创建的axios实例发送的请求

2.只要是通过该axios实例发送请求,在发出去前都会先执行拦截器

   要注意:  一定要在拦截器函数中return请求配置对象config, 否则就卡在这发不出去了