电商小程序07显示用户个人信息

目录

  • 1 全局变量
  • 2 控制登录按钮显示
  • 3 设置布局
  • 4 搭建我的页面
  • 5 修改个人信息
  • 总结

在登录章节我们已经实现了用户名和密码登录首页的功能,在登录之后,可以切换到我的页面,显示用户的头像和名称,可以修改个人信息。本篇我们介绍一下个人信息如何显示。

1 全局变量

在用户登录的时候,我们需要将用户的信息放入全局变量中,为此需要在代码区新建一个全局变量user,类型选择对象
在这里插入图片描述
在登录成功时需要将数据源的信息赋值给全局变量,可以复制全局变量的路径,然后用等号进行赋值

if (user._id) {$w.app.dataset.state.user = user$w.utils.redirectTo({pageId: "index", // 页面 IdpackageName: "", // 主应用为空或不填,子模块填写 子包目录,查找位置 子包编辑器 --- 页面 --- 子包目录params: { key: "value" },});} else {$w.utils.showToast({title: "用户名或者密码错误",icon: "error",duration: 2000, // 2秒});}

这里添加了一句全局变量赋值的代码

2 控制登录按钮显示

在登录按钮旁边添加一个文本组件,内容修改为已登录。按钮和文本我们希望变成一个互斥的状态,在未登录的时候显示按钮,而在已登录的时候显示文本信息。

在微搭里可以设置组件的条件展示来达到这个效果,给登录按钮绑定条件展示,设置如下的表达式

!$w.app.dataset.state.user._id

在这里插入图片描述
这里的叹号表示取反的意思,首先会计算表达式的值,未登录情况下计算结果是false,我们再取反就变成了true

文本组件直接绑定我们的表达式

$w.app.dataset.state.user._id

在这里插入图片描述

3 设置布局

一般小程序底部有一个导航栏用来切换页面,在低代码中我们通过设置布局来实现。点击左上角的布局图标
在这里插入图片描述
选择tab栏导航布局,然后设置tab栏组件的菜单
在这里插入图片描述
回到页面,选中页面组件,设置我们的布局
在这里插入图片描述

4 搭建我的页面

在左上角点击新建页面的图标,创建我的页面
在这里插入图片描述
在列里添加数据详情组件,数据模型选择注册用户信息
在这里插入图片描述
图片组件绑定为数据容器的头像字段
在这里插入图片描述
文本组件绑定为数据容器的姓名字段
在这里插入图片描述
数据详情组件需要根据全局变量的数据标识来过滤数据,设置筛选条件
在这里插入图片描述
用数据详情组件的原因是当修改页面返回数据的时候可以自动刷新

5 修改个人信息

在点击图标的时候跳转到修改个人信息页面
在这里插入图片描述
注意这里传入了全局变量的数据标识到下一个页面,这里的参数可以在下一个页面进行设置,设置具体的URL参数即可
在这里插入图片描述
修改个人信息页面,我们使用了表单容器组件进行搭建,注意需要接收我们的URL参数作为数据过滤的条件
在这里插入图片描述
然后在表单提交的时候我们设置一个返回上一页的事件就全部配置好了
在这里插入图片描述

总结

我们本篇介绍了如何显示个人信息的功能,注意需要注意的地方就是页面传参及数据过滤,只要把这两个知识点掌握,一般这种交互页面就很容易搭建了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678410.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Spring MVC篇】参数的传递及json数据传参

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【Spring MVC】 本专栏旨在分享学习Spring MVC的一点学习心得,欢迎大家在评论区交流讨论💌 目录 一、普通参数的传…

STM32能够做到数据采集和发送同时进行吗?

STM32能够做到数据采集和发送同时进行吗? 在开始前我有一些资料,是我根据网友给的问题精心整理了一份「STM32的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!&am…

【JavaScript】对象的属性和方法

文章目录 1. 对象的属性基本属性嵌套属性计算属性名 2. 对象的方法基本方法简化方法 3. 属性和方法的访问点表示法方括号表示法 4. 属性和方法的删除删除属性删除方法 5. 属性的遍历for...in 循环Object.keys() 6. 总结 在 JavaScript 中, 对象是一种复合值&#x…

专业140+总分420+河海大学863信号与系统考研经验电子信息通信与信息技术,真题,大纲,参考书。

今年的成绩出来倍感欣慰,决定考研的时候并没有想到自己可以考出420的分数,通过自己一年来的努力,成功上岸,期中专业课863信号与系统140接近满分(非常感谢信息通信Jenny老师的专业课辅导和平时悉心答疑,不厌…

从零开始学howtoheap:fastbins的house_of_spirit攻击1

how2heap是由shellphish团队制作的堆利用教程,介绍了多种堆利用技术,后续系列实验我们就通过这个教程来学习。环境可参见从零开始配置pwn环境:优化pwn虚拟机配置支持libc等指令-CSDN博客 1.fastbins的house_of_spirit攻击 house_of_spirit是…

【MATLAB源码-第138期】基于matlab的D2D蜂窝通信仿真,对比启发式算法,最优化算法和随机算法的性能。

操作环境: MATLAB 2022a 1、算法描述 D2D蜂窝通信介绍 D2D蜂窝通信允许在同一蜂窝网络覆盖区域内的终端设备直接相互通信,而无需数据经过基站或网络核心部分转发。这种通信模式具有几个显著优点:首先,它可以显著降低通信延迟&…

波奇学Linux: 文件描述符

文件和操作系统的关系 操作系统控制进程,文件的打开是在进程中进行。意味着用来控制进程的PCB必然有文件的信息,操作系统通过控制PCB的信息来控制文件的读写。 Q1:如何证明文件打开是在进程中进行? 编写c文件调用fopen来操作文件…

SpringBoot 接入讯飞星火大模型实现对话

申请地址 https://xinghuo.xfyun.cn/sparkapi?scrprice 免费申请200万Token 开发文档 https://www.xfyun.cn/doc/spark/Web.html#_1-接口说明 页面最下面有相关demo可以参考 介绍 接口是以套接字的形式分段返回,而且非http请求,比较繁琐,官…

如何使用Airtest进行UI自动化测试

一、环境搭建 1、Airtest客户端下载 访问官网http://airtest.netease.com/,根据自己的系统下载相应的客户端安装; 2、python工具下载与环境搭建 在本地python环境中安装airtest和pocoui,然后用命令行运行脚本; 1、建议使用3.…

笔记:《NCT全国青少年编程能力等级测试教程Python语言编程二级》

NCT全国青少年编程能力等级测试教程Python语言编程二级 ISBN:9787302565857 绪论 专题1 模块化编程 考查方向 考点清单 考点 模块化编程 (一)模块化编程思想:结构清晰、降低复杂度;提高代码复用率;易于扩展、维护,方便阅读、优化。 …

猫头虎分享已解决Bug || RuntimeError: size mismatch, m1: [32 x 100], m2: [500 x 10]

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

奶茶点餐|奶茶店自助点餐系统|基于微信小程序的饮品点单系统的设计与实现(源码+数据库+文档)

奶茶店自助点餐系统目录 目录 基于微信小程序的饮品点单系统的设计与实现 一、前言 二、系统功能设计 三、系统实现 1、商品信息管理 2、商品评价管理 3、商品订单管理 4、用户管理 四、数据库设计 1、实体ER图 2、具体的表设计如下所示: 五、核心代码 …

【More Effective C++】条款2:使用C++转型操作符

C旧式转型的缺点包括: 没有类型安全检查:允许将任何指针转换为其他类型指针,可能导致未定义行为的错误;难以识别和维护:语法(type)expression 或 type(expression)在代码中难以被快速识别; 为了解决上述问…

算法||如何优化算法?算法如何评价和分析

目录 1.一个好的算法所具备的特性 2.算法分析‐‐‐评价算法 3.算法复杂度 4.时间复杂度 如何统计在程序中统计算法执行语句数 5.空间复杂度 6.程序优化的最核心思路: 总结 1.一个好的算法所具备的特性 正确: 符合语法,能够编译、链接 能够正确处理简单的输入…

Rust语言之字符串

文章目录 一、字符二、字符串1.&str2.string创建字符串遍历字符串变更字符串指定位置插入字符串字符串拼接宏拼接(format!) 三、切片1.字符串切片2.数组(向量)切片 Rust语言设计官方教程 一、字符 Rust提供char为字符存储变量…

Qt知识点总结目录

一.Qt安装配置和创建项目 Qt所有版本下载地址 Qt安装配置教程windows版(包括:Qt5.8.0版本,Qt5.12,Qt5.14版本下载安装教程)(亲测可行) QT从入门到入土(一)——Qt5.14.…

Linux操作系统基础(八):Linux的vi/vim编辑器

文章目录 Linux的vi/vim编辑器 一、vi/vim编辑器介绍 二、打开文件 三、VIM编辑器的三种模式(重点) 四、命令模式相关命令 五、底行模式相关命令 Linux的vi/vim编辑器 一、vi/vim编辑器介绍 vi是visual interface的简称, 是Linux中最经典的文本编辑器 vi的核心设计思想…

技术精英求职必备:网络安全工程师简历制作全指南

简历编写核心原则 撰写针对网络安全工程师职位的简历时,关键在于准确展现您在网络安全领域的专业技能、项目经验和技术成就。简历应作为您展示安全策略制定、风险管理、入侵检测和响应能力的窗口。确保每一项经历和技能都紧密贴合网络安全工程师的角色要求。具体的…

在 Windows上恢复删除照片的 4 种有效方法

您是否曾在 Windows 7/8/10/11 中不小心删除过照片?如何轻松快速地恢复已删除的照片?在这里这篇文章列出了几种在Windows 11/10/8/7中恢复已删除照片的可行方法,而MiniTool数据恢复软件 是丢失照片恢复的最佳选择。 意外删除的照片 根据一项…

蓝桥杯官网练习题(翻转)

问题描述 小蓝用黑白棋的 n 个棋子排成了一行,他在脑海里想象出了一个长度为 n 的 01 串 T,他发现如果把黑棋当做 1,白棋当做 0,这一行棋子也是一个长度为 n 的 01 串 S。 小蓝决定,如果在 S 中发现一个棋子…