电商小程序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…

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

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

【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.…

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

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

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

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

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 中发现一个棋子…

口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)

口腔小程序目录 目录 基于微信小程序的口腔门诊预约系统的设计与实现 一、前言 二、系统功能设计 三、系统实现 1、小程序前台界面实现 2、后台管理员模块实现 四、数据库设计 1、实体ER图 2、具体的表设计如下所示: 五、核心代码 六、论文参考 七、最新…

【调试】pstore原理和使用方法总结

什么是pstore pstore最初是用于系统发生oops或panic时,自动保存内核log buffer中的日志。不过在当前内核版本中,其已经支持了更多的功能,如保存console日志、ftrace消息和用户空间日志。同时,它还支持将这些消息保存在不同的存储…

JavaScript 遍历文档生成目录结构

JavaScript 遍历文档生成目录结构 要遍历 HTML 文档并生成目录结构&#xff0c;你可以使用 JavaScript 来进行 DOM 操作和遍历。以下是一个简单的示例代码&#xff0c;演示了如何遍历文档中的标题元素&#xff08;例如 <h1>、<h2>、<h3> 等&#xff09;&…

Rust基础拾遗--核心功能

Rust基础拾遗 前言1.所有权与移动1.1 所有权 2.引用3.特型与泛型简介3.1 使用特型3.2 特型对象3.3 泛型函数与类型参数 4.实用工具特型5.闭包 前言 通过Rust程序设计-第二版笔记的形式对Rust相关重点知识进行汇总&#xff0c;读者通读此系列文章就可以轻松的把该语言基础捡起来…

在VSCode中创建Java项目

在VSCode中创建Java项目 首先&#xff0c;保证安装了Java的JDK. WinR -> 输入cmd -> 输入 java -version -> 然后可以看到安装的JDK版本&#xff0c;如果没安装可以去找教程。 JDK安装参考教程 打开VSCode&#xff0c;打开扩展&#xff08;Ctrl Shift S&#xff…

FreeRTOS.chg脚本出现意外状态

PE代码生成的时候遇到这么个问题 警报如下 Description Resource Path Location Type ERROR: Unexpected status of script: Beans\FreeRTOS\FreeRTOS.chg, please contact Freescale support. M18_BMCU FreeRTOS Processor Expert Problem 意思就是这个脚本文件有问题&…

Linux第45步_通过搭建“DNS服务器”学习图形化配置工具

学习的意义&#xff1a;通过搭建“DNS服务器”&#xff0c;来学习“图形化配置工具”。“DNS服务器”&#xff0c;我们用不到&#xff0c;但为后期移植linux系统服务&#xff0c;因为在移植系统时&#xff0c;需要用到这个“图形化配置工具”。 1、“menuconfig图形化配置工具…

93 log4j-slf4j-impl 搭配上 log4j-to-slf4j 导致的 StackOverflow

前言 呵呵 最近想要 做一个 mongo 低版本的客户端读取高版本的服务端传递过来的数据造成的一个错误的时候, 出现了这样的问题 引入了 mongo-java-driver 之后, 使用相关 api 的时候会触发 com.mongo.internal.connection.BaseCluser 的初始化, 其依赖的 Loggers 间接的依赖…