家校通小程序实战教程05教师登录

1 搭建角色选择页面

小程序我们是分为三个角色，分别是老师、学生家长、家委会成员。当用户登录小程序首页的时侯，需要先选择角色再进入到系统中。

打开我们的小程序，在首页添加普通容器，里边放三个按钮用来区分三种角色

在这里插入图片描述
选中普通容器，切换到样式，设置为纵向排列，居中对齐

修改一下按钮的内容，分别设置为我是老师、我是学生家长、我是家委会

调整一下按钮的宽度和外边距

增加一个文本组件，内容修改为请选择对应的角色进入系统，设置一定的外边距
在这里插入图片描述

2 设置登录方法

当用户点击我是老师按钮的时候，需要根据当前用户的openid去教师表里获取数据。如果获取到了说明已经注册过，如果未获取到就跳转到加入班级页面，输入口令加入班级

我们身份验证是要通过openid去查询，目前教师表还未增加对应的字段。切换到云数据库，选择教师表，切换到配置模型，点击编辑字段
在这里插入图片描述
点击添加字段

添加一个openid字段

字段添加好之后，点击可视化设计，在代码区，点击点击新建按钮，创建一个自定义方法
在这里插入图片描述

输入如下代码

export default async function ({ event, data }) {

  const openid = $w.auth.currentUser.openId
  const teacher = await $w.cloud.callDataSource({
    dataSourceName: "jsb",
    methodName: "wedaGetItemV2",
    params: {
      // 筛选内容，筛选内容推荐使用编辑器数据筛选器生成
      filter: {
        where: {
          $and: [
            {
              openid: {
                $eq: openid, // 获取单条时，推荐传入_id数据标识进行操作
              },
            },
          ],
        },
      },
      select: {
        $master: true, // 常见的配置，返回主表
      },
    },
  });
  if (Object.keys(teacher).length > 0) {
    $w.utils.navigateTo({
      pageId: 'index', // 页面 Id
      params: { key: 'value' },
    });
  }else{
     $w.utils.navigateTo({
      pageId: 'index', // 页面 Id
      params: { key: 'value' },
    });
  }
}

我们这里的逻辑是先获取当前用户的openid，然后调用数据模型的查询单条方法，查询条件是openid。根据返回的结果，如果有值说明已经注册了，就跳转到教师主页。如果没有值，就跳转到加入班级页面

3 创建加入班级页面

点击页面创建的图标，输入页面的名称加入班级

在这里插入图片描述

删掉默认的网格布局，添加普通容器

在普通容器里添加单行输入组件和按钮组件

单行输入的标题修改为输入口令，按钮的内容修改为加入班级

选则普通容器，调整样式，改为纵向排列，居中对齐

在这里插入图片描述
加入班级后也需要进行调整，我们就需要知道是什么角色点击进入的。选中页面组件，添加URL参数，增加role

后续我们在做用户注册的时候需要根据角色信息跳转到对应的页面

4 创建教师主页页面

点击创建页面的图标，创建教师主页
在这里插入图片描述

教师主页，我们现在保持空白，后续在具体业务里再进行搭建

5 完善登录方法

页面都有了之后，我们需要完善一下登录方法。在用前端API做页面跳转的时候，首先是要得到页面的id。点击页面列表，找到需要跳转的页面，点击三个点
在这里插入图片描述
选择复制页面ID

然后完善一下我们的登录方法

if (Object.keys(teacher).length > 0) {
    $w.utils.navigateTo({
      pageId: 'u_jiao_shi_zhu_ye', // 页面 Id
      params: { key: 'value' },
    });
  }else{
     $w.utils.navigateTo({
      pageId: 'u_jia_ru_ban_ji', // 页面 Id
      params: { role : 'teacher' },
    });
  }