性格测评小程序04题库管理

目录

  • [1 创建数据源](#1 创建数据源)
    • [1.1 题库表](#1.1 题库表)
    • [1.2 选项表](#1.2 选项表)
  • [2 搭建管理后台](#2 搭建管理后台)
    • [2.1 搭建题库功能](#2.1 搭建题库功能)
    • [2.2 搭建选项功能](#2.2 搭建选项功能)
    • [2.3 题库和选项联动](#2.3 题库和选项联动)
  • [3 最终效果](#3 最终效果)
  • 总结

我们现在性格测评的算法是通过40个题目来测评用户属于哪一个分类,为此后台需要有可以设置题目和选项的功能,本篇我们介绍一下题库管理功能的搭建过程。

1 创建数据源

在数据源设计中,我们考虑将题目和选项拆分开,为此需要创建题库表和选项表

1.1 题库表

创建第一个表题库表

添加第一个字段,题目内容,类型选择文本

添加第二个字段,维度,类型选择枚举

维度设置为EI、SN、TF、JP

继续添加字段,添加题目编号,类型选择自动编号

1.2 选项表

继续添加表,添加选项表

添加第一个字段,选项,类型选择枚举

枚举项设置为A、B、C、D

继续添加字段,添加选项内容

继续添加字段,选项得分,类型选择数字

继续添加字段,题目,类型选择关联关系

2 搭建管理后台

表创建好了之后,我们就需要搭建后台功能。打开我们的后台应用,点击创建页面的图标

2.1 搭建题库功能

选择表格与表单页,选择题库表,选择左侧导航布局

选中数据表格组件,设置排序规则,启用多字段排序,先按维度排序,再按题目编号排序

筛选器勾选维度和题目编号

在操作列添加一个按钮,改为选项

切换到布局设计,添加题库菜单

2.2 搭建选项功能

再次点击创建页面图标,这次选择选项表,还是选择左侧导航布局

选中页面组件,添加URL参数,添加questionid

设置数据筛选,筛选条件设置为题目等于我们的URL参数

设置排序字段,设置为选项,升序

选中页面组件,添加弹窗组件

在弹窗内容里添加表单容器组件

数据模型设置为选项表

修改弹窗标题为新增选项

关闭弹窗的显示底部按钮配置

选中题目组件,设置选中值的数据绑定

绑定为URL参数

选中表单容器,设置表单容器的提交事件

在表单容器的成功时增加两个事件,先是关闭弹窗


关闭之后刷新表格

配置好之后将弹窗默认打开配置关闭

选中新建按钮,将事件设置为打开弹窗

2.3 题库和选项联动

当在题库列表点击选项时候需要跳转,选中选项按钮,事件配置为打开页面

跳转到选项列表页,并且传入所在行的数据标识

3 最终效果

点击题库管理,可以新增题库信息

点击选项可以给题库增加选项

总结

本篇我们介绍了题库以及选项的搭建过程,在做此类功能时关键点是思考如何做表拆分,哪个作为主表,哪个作为子表,主表和子表如何进行关联。表结构设计好之后,在页面的搭建过程中要清楚,页面之间是如何通过参数传递完成跳转的,在新增选项的时候如何得到主表的信息。

相关推荐
刘发财16 分钟前
前端2秒生成500页矢量PDF,rust真的强到没朋友
前端·javascript·rust
梦想平凡1 小时前
百游棋牌源代码开发搭建教程(十):隔离部署、备份恢复与双端验收
java·前端·javascript·数据库·源代码管理
许彰午3 小时前
44-useRowSet镜像实现
java·低代码·架构
kyriewen5 小时前
我花3天抓了一个幽灵bug,凶手藏在第4层
前端·javascript·程序员
mONESY6 小时前
LangGraph.js 从零上手:把 Agent 工作流从一条线变成一张网
javascript
默_笙6 小时前
⚓ AI 的"官方答题卡":withStructuredOutput 与结构化输出的终局之战
前端·javascript
液态不合群7 小时前
低代码不是捷径,是企业数字化转型的底层重构
低代码·重构
河南花仙子科技7 小时前
企业定制小游戏助力品牌软性传播
大数据·科技·游戏·小程序
我家猫叫佩奇8 小时前
🦭 厌倦了千篇一律的线性图标?Naive Icons 正式开源
前端·javascript·css
StevenLdh8 小时前
情绪小恐龙:一个微信小程序从架构设计到部署上线的全记录
微信小程序·小程序·notepad++