订水商城H5实战教程-02系统登录

2023-10-23 23:01
文章标签 实战 系统 教程 02 登录 商城 h5 订水

本文主要是介绍订水商城H5实战教程-02系统登录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

  • 1 创建数据源
  • 2 创建自定义应用
  • 3 创建全局变量
  • 4 实现登录功能
  • 5 控制弹窗是否显示
  • 6 最终的效果

上一篇我们分析了订水商城的功能，功能分析好了之后，就需要开发功能。用户登录商城的第一步就是进行登录，登录的时候需要同意用户协议，并且录入个人信息。因此我们先设计两个数据源用来满足数据展示和录入的需求。

1 创建数据源

打开控制台，点击数据模型，点击创建按钮
在这里插入图片描述
输入模型名称，先输入用户协议
在这里插入图片描述
点击编辑按钮，添加字段
在这里插入图片描述
在这里插入图片描述
先添加一个协议名称字段，类型选择文本
在这里插入图片描述
再添加一个协议内容字段，类型选择富文本
在这里插入图片描述
再添加一个数据源，记录用户的注册信息
在这里插入图片描述
第一个字段添加用户的姓名，类型选择文本
在这里插入图片描述
添加第二个字段，性别，类型选择枚举，枚举值为先生和女士
在这里插入图片描述

在这里插入图片描述
添加第三个字段，联系方式，类型选择电话
在这里插入图片描述
添加第四个字段，userid，类型选择文本，用来识别数据的权限
在这里插入图片描述
添加第五个字段，角色，类型选择枚举，枚举值分别为客服、水厂、顾客、送水工
在这里插入图片描述

在这里插入图片描述
添加第五个字段，审核状态，类型是枚举，枚举值是待审核、已审核
在这里插入图片描述

在这里插入图片描述

2 创建自定义应用

数据源创建好之后就需要创建应用，我们的H5商城用自定义应用搭建。登录控制台，点击创建应用，点击新建自定义应用
在这里插入图片描述
在这里插入图片描述
这里构建模式保持默认即可，在发布的时候可以切换到第一个图标，选择H5进行构建发布

3 创建全局变量

我们登录到商城首页的时候先要看用户是否登录，如果未登录就弹出登录界面，如果已经登录了我们就显示首页的内容。为了控制用户是否登录，我们要建一个变量来保存用户的登录状态。点击代码区全局变量，点击+号创建全局变量
在这里插入图片描述
点击新建自定义变量
在这里插入图片描述
输入变量名称isLogin，类型选择布尔值
在这里插入图片描述

4 实现登录功能

当用户打开首页的时候，我们根据全局变量的值来显示登录窗口，如果为false我们就弹出登录界面。

先往页面添加一个弹窗组件
在这里插入图片描述
选中弹窗内容，增加一个普通容器
在这里插入图片描述
关闭显示标题选项
在这里插入图片描述
保留一个选项，并且清空选项标题
在这里插入图片描述
然后在单选按钮下继续增加一个普通容器
在这里插入图片描述
里边添加四个文本组件
在这里插入图片描述
文本内容分别设置为我已阅读并同意、《用户服务协议》、及、《隐私政策》
在这里插入图片描述
第二个和第四个文本，我们设置一下颜色，字号设置为13，颜色设置为rgb(98, 169, 232)
在这里插入图片描述
设置普通容器的布局为横向排列
在这里插入图片描述
定位改为绝对定位，距上边14，距左边50
在这里插入图片描述

5 控制弹窗是否显示

选中弹窗组件，给默认是否打开弹窗绑定变量
在这里插入图片描述
绑定为我们的isLogin取反
在这里插入图片描述

!$w.page.dataset.state.isLogin

这样设置之后，如果未登录的状态下就需要登录

6 最终的效果

一切设置好之后，当我们打开首页的时候，就弹出了登录窗口，提示用户进行登录
在这里插入图片描述

这篇关于订水商城H5实战教程-02系统登录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/271032。

相关文章

网页解析 lxml 库--实战

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库，完全使用 Python 语言编写，它对 XPath表达式提供了良好的支 持，因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块，该模块专门用来解析 HTML/XML 文档，下面来介绍一下 lxml 库
阅读更多...
Security OAuth2 单点登录流程

Security OAuth2 单点登录流程

单点登录（英语：Single sign-on，缩写为 SSO），又译为单一签入，一种对于许多相互关连，但是又是各自独立的软件系统，提供访问控制的属性。当拥有这项属性时，当用户登录时，就可以获取所有系统的访问权限，不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议（LDAP）来实现，在服务器上会将用户信息存储到LDAP数据库中。相同的，单一注销（single sign-off）就是指
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
基于人工智能的图像分类系统

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务，目标是自动识别图像中的对象类别。通过卷积神经网络（CNN）等深度学习技术，我们可以构建高效的图像分类系统，广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统，包括环境
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟 开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚 第一站：海量资源，应有尽有 走进“智听
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2