vue 移动端

最新推荐文章于 2025-06-25 09:08:29 发布

原创最新推荐文章于 2025-06-25 09:08:29 发布 · 822 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

这篇博客探讨了在Vue.js移动端应用中进行表单验证、验证码处理、Token管理和个人中心模块的实现。表单验证利用:rules属性定义验证规则，验证码结合<button>和倒计时组件实现交互。Token在登录成功后存储于Vuex，并持久化在本地存储中。个人中心模块采用路由模式的TabBar标签栏，而my页面根据Token判断用户登录状态并提供相应的操作选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单验证

可以给标签添加 :rules="验证规则对象" , 在 data 中定义这个规则

data(){
 return {
  formRules:{
   mobile:[
    {required:true,message:'手机号不能为空'},  //  required 表示是否必须 /  message 为提示信息
    {pattern: /^1[3|5|7|8]\d{9}$/,message: '手机号格式错误'}   //  pattern  为验证规则
   ]
  }
 }
}

还可以在标签中添加type属性(规定输入的类型),maxlength属性(内容的自大长度)

验证码

验证按钮<button> 和倒计时组件同时只展示一个, 可以通过定义一个变量,再配合 v-if 来实现

倒计时组件有一个结束事件 finish , 通过@finish 来改变变量的值,让按钮再展现出来

Token

在登录成功后会获得 Token 值,需要存储的一个公共位置,方便取用

将 Token 值存储到 Vuex 容器中,数据是响应式的,而且方便获取,再将 Token 放到本地存储中, 可以实现 Token 的持久化 ( Token 有两小时的时效性,过期需要重新登录获取)

个人中心模块

TabBar 标签栏

为实现点击切换功能, 使用路由模式标签栏

<van-tabbar route>
  <van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
   ...
</van-tabbar>

在 router 的 index.js 中配置路由参数

const routers = [
 {
  path:'/',
  component:()=> import('路径'),
  children:[
   {path:'',name:'',component:()=>import('路径')},
   ...
  ]
 }
]

my页面

头部区域 , 未登录和已登录分别用<div>标签包裹 , 通过 v-if 判断有无 Token 值, 有值则显示已登录的区域, 无值显示未登录的区域

未登录时, 点击实现跳转, 进入登录页, 给登录页添加后退功能 @click="$router.back()",可以回退到my页面

已登录, 给退出按钮绑定一个点击事件, 在组件中使用 this.$dialog 来调用弹框组件

确认退出,清除登录状态 (容器中和本地存储中的 Token )