互联网医院01登录页搭建

本篇我们介绍了用户登录页的过程，包括创建数据模型，搭建后台管理应用，搭建小程序登录页。熟练掌握低代码的搭建流程，灵活运用组件，并设置样式就可以实现丰富的前端效果出来。

低代码布道师

907人浏览 · 2025-12-01 11:09:33

低代码布道师 · 2025-12-01 11:09:33 发布

从本周开始，我们使用云开发个人版作为工具来讲解实战教程。周末花了一点时间已经完成了原型开发，我们的案例是以一家大型三甲医院为样本，用云开发完成一所互联网医院的复刻。本篇是第一篇，登录页的搭建。
在这里插入图片描述

1 为什么要搭建登录页

有读者会问了，云开发不已经提供了登录页了，为什么要自己搭建登录页。这就和云开发的机制有关系。

小程序的合规要求，首页必须是公开访问，不允许强制登录。但是云开发是要求强制登录的，他也可以将页面设置为公开访问，但是公开访问获取不到用户信息和我们的要求又不符合。

为了避免开发好后无法上线，所以我们先自行搭建一个登录页，告诉用户，我是要采集个人信息的，你要不同意就不要使用我的应用。

2 创建数据模型

在登录页上我们需要展示用户协议和隐私协议，需要创建数据模型实现数据的存取。这次搭建我们还是使用MySQL数据库。为什么选择MySQL，因为方便的地方可以在页面自己写sql语句，有些统计分析直接写sql要快不少。

点击数据模型的+号，创建数据模型
在这里插入图片描述
输入数据模型的名称和标识

创建第一个字段，用户协议，类型选择富文本

添加第二个字段，隐私协议，类型选择富文本

权限设置为所有人可读，本人可修改

2 创建后台应用

有了数据表之后，我们就需要搭建后台应用，供管理员来维护相关的协议。打开微搭低代码，切换到管理应用，从空白创建
在这里插入图片描述

点击右上角的页面设计，切换到设计模式

2.1 创建页面

点击创建页面的图标，我们来创建我们的管理页面
在这里插入图片描述
输入页面的标题

切换到布局设计，搭建管理应用的菜单

选择左侧导航布局，右侧点击一键生成菜单的图标

去掉空白页，只保留隐私协议

修改左上角文本的内容，修改为管理后台

修改左下角的图标，改为退出图标
在这里插入图片描述
将图标的点击事件改为退出事件

回到页面设计，选中页面组件，设置布局为左侧导航布局

2.2 搭建页面布局

在内容插槽里添加布局组件，布局组件里添加数据表格组件，选择登录配置数据源，勾选所有场景
在这里插入图片描述
让豆包帮我们生成用户协议和隐私协议

点击表格的新建按钮，填写我们协议的内容

3 创建小程序

数据准备好了之后，就可以搭建小程序了。切换到小程序应用，点击从空白创建
在这里插入图片描述
输入应用的名称，开启登录访问

3.1 搭建页面布局

默认创建了一个空白页，可以修改一下页面的名称改为登录页
在这里插入图片描述
在页面中添加普通容器，并且输入如下样式

:root {
  height: 100vh;
  background-color: #4080FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

在这里插入图片描述
继续添加普通容器，添加如下样式

width: 100%;
  background-color: white;
  border-radius: 1.5rem;
  padding: 2rem;
  position: relative;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

继续添加普通容器，添加如下样式
在这里插入图片描述

position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 6rem;
  background-color: white;
  border-radius: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

里边添加图标组件，修改为大楼的图标
在这里插入图片描述
继续添加普通容器，设置样式

:root {
  margin-top: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

添加文本组件，设置样式
在这里插入图片描述

:root {
  font-size: 1.5rem;  
  font-weight: 700;   
  margin-bottom: 0.5rem; 
}

继续添加文本组件，设置文本的颜色
在这里插入图片描述
继续添加按钮，设置样式

:root {
  width: 100%;
  height: 3rem;
  background-color: #07C160;
  color: white;
  gap: 0.5rem;
  font-size: 1rem;
  border-radius: 0.75rem;
  box-shadow: none;
  margin: 10px 0px 1.5rem;
}