登录界面到个人中心

news/2024/11/30 20:30:01/

登录页面:

1. 使用路由渲染登录组件

  1. 在 /src/views 目录之下,创建 Login 文件夹,并在其下新建 Login.vue登录组件

  2. 在 /src/router/index.js 路由模块中,导入需要通过路由渲染的 login.vue 登录组件

  3. 在路由模块的 routes 数组中,声明登录组件的路由规则

  4. 在 App.vue 根组件中声明路由占位符

 2.渲染登录组件的头部区域

    1.渲染登录组件的 header 头部区域

    2.为 <van-nav-bar> 组件添加 fixed 属性,实现顶部固定定位

3.根据接口要求绑定获取表单数据

   1.在登录页面组件的实例选项 data 中添加 user 数据字段

    2.使用 v-model 绑定对应数据

   3.创建 src/api/user.js 模块,封装登录请求方法

   4.给登录按钮注册点

 4.登录状态提示

 直接通过 this.$toast 调用。

 5.表单的验证:

验证规则对象:用正则验证

 6.验证手机号

1.给 Field 添加 name 属性用来验证单个表单项

2.监听发送按钮的点击

3.在 api/user.js 中添加封装发送短信的数据接口

 7.封装用户Token

使用本地储存保存token,登录成功以后将后端返回的 token 相关数据存储到容器中

个人页面

1.在 vuex 中请求用户的基本信息

1.在 /src/api/userAPI.js 模块中,定义请求用户基本信息的 API 方法

2.按需导入请求用户基本信息的 API

3.配置页面组件,创建首页、问答、视频、我的页面路由,页面使用vant 中的Tabbar标签栏,将 layout 组件配置到一级路由  

4.使用vant组件,导入标签组件,使用span标签来写入名字和日期  写入stley样式调整位置

5.用vant的宫格组件来写作品、收藏、历史模块,然后写入样式

6.封装 API接口


http://www.ppmy.cn/news/43023.html

相关文章

c++11 标准模板(STL)(std::unordered_multimap)(十三)

定义于头文件 <unordered_map> template< class Key, class T, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator< std::pair<const Key, T> > > class unordered…

图像分割中的混淆矩阵和利用混淆矩阵计算指标

目录 1. 介绍 2. 创建混淆矩阵 2.1 update 方法 2.2 compute 方法 2.3 str 方法 3. 测试 4. 完整代码 1. 介绍 语义分割中&#xff0c;性能指标可以利用混淆矩阵进行计算 这里实现的方法和图像分类中不一样&#xff0c;需要的可以参考&#xff1a;混淆矩阵Confusion M…

springboot+jwt令牌简单登录案例

1. 什么是JWT&#xff1f;JSON Web Token JSON Web Token (JWT)是⼀个开放标准(RFC 7519)&#xff0c;它定义了⼀种紧凑的、⾃包含的⽅式&#xff0c;⽤于 作为JSON对象在各⽅之间安全地传输信息。该信息可以被验证和信任&#xff0c;因为它是数字签名的。 1.1 什么时候应该⽤…

webgl-画一个彩色矩形

html <!DOCTYPE html> <head> <style> *{ margin: 0px; padding: 0px; } </style> </head> <body> <canvas id webgl> 您的浏览器不支持HTML5,请更换浏览器 </canvas> <script src"./main.js"></script&g…

SDUT操作系统课程(CAST)专题二+专题四参考总结

专题二+进程调度算法 RR q=1(含做题代码) 总结:到达时间一到对应进程进入,执行队首进程一次,对应的服务时间划一记号(推荐用正字),队首进程未执行到完成的话重新进入队尾,队首进程执行到完成的话出队,下一秒继续执行队首进程,当5个进程全部入队之后只要执行后两步操…

更新按日期分表,多个表添加字段

更新日志表 SET sql ‘’; SELECT GROUP_CONCAT(CONCAT(‘ALTER TABLE , table_name, ADD COLUMN result_total bigint(20) NULL DEFAULT 0 COMMENT “接口返回数据量”;’) SEPARATOR ’ ) INTO sql FROM information_schema.tables WHERE table_name LIKE ‘t_dg_service_…

九龙证券|这一刻,资本市场进入全新时代!

2023年4月10日&#xff0c;第一批10家主板注册制企业上市鸣锣敲钟&#xff0c;奏响了触及本钱商场灵魂深处革新的序曲。 动能切换中的我国对于高效资源配置的渴望&#xff0c;与革新进行时的本钱商场对于全面注册制的探究&#xff0c;一起凝集成一股连绵有力之暖流&#xff0c;…

数据一致性校验(pt-table-checksum)

介绍 pt-table-checksum 和 pt-table-sync 是 percona 公司发布的、检查 MySQL 主从数据库数据一致性校验的工具。pt-table-checksum 利用 MySQL 复制原理&#xff0c;在主库执行校验和计算&#xff0c;并对比主从库校验和&#xff0c;由此判断主从库数据是否一致。如果发现数…