加油站小程序实战教程03站点管理

目录

  • [1 创建数据源](#1 创建数据源)
  • [2 搭建后台功能](#2 搭建后台功能)
    • [2.1 搭建类目配置功能](#2.1 搭建类目配置功能)
    • [2.2 配置系统信息](#2.2 配置系统信息)
    • [2.3 配置站点功能](#2.3 配置站点功能)
    • [2.4 配置油号功能](#2.4 配置油号功能)
    • [2.5 配置油枪功能](#2.5 配置油枪功能)
    • [2.6 配置站点菜单](#2.6 配置站点菜单)
    • [2.7 设置站点的操作列](#2.7 设置站点的操作列)
  • 总结

在开发小程序的时候,通常需要先拆解业务对应我们的需求分析,根据需求来推导数据结构形成我们的表结构设计。有了表结构设计我们就可以开发功能了,开发时先从后台搭建开始,本篇我们介绍一下站点信息的后台搭建功能。

1 创建数据源

在站点信息功能搭建的时候,我们需要先考虑表结构。因为是多站点,我们通常在小程序里设置筛选条件辅助用户快速的进行查找信息。为此,我们需要先设计一个配置表来配置站点的分类信息

这里我们设计了两级的结构,分别是服务大类和服务子类,没考虑使用枚举字段,一个是方便管理员动态的维护类目。另一方面是在界面搭建的时候通过级联设置来让一二级类目进行联动选择

有了类目配置表之后,我们需要设计站点信息的主表字段

这里一二级类目设置为文本字段,因为关联关系无法作为查询条件,所以设置文本字段会方便一点

除了站点信息外,站点还需要和油号关联,设计一张油号表

之后就是管理油枪信息,油枪也和站点进行关联

2 搭建后台功能

有了表之后,我们就需要搭建后台功能。后台功能可以通过自定义应用进行搭建。切换到可视化开发,点击从空白创建

2.1 搭建类目配置功能

切换到PC模式,点击创建页面的图标

选择表格与表单页,选择站点类目表,布局选择左侧导航布局

选中数据表格,在右侧的属性面板里找到排序字段,设置为按照序号升序排列

点击筛选器

勾选服务大类作为筛选条件

切换到布局设计

切换到左侧导航布局,选中布局导航,点击根据页面一键生成菜单图标

自动生成后我们只需保留列表页即可

可以点击标题配置一下菜单名称和图标

2.2 配置系统信息

点击顶部的文本组件,配置我们系统的名称,设置为加油站小程序后台

选择底部的图标,改为预置图标,设置为退出

将图标自带的事件删除

设置文本内容为退出,设置点击事件

方法选择退出登录

退出的成功时,增加一个打开页面方法,跳转到首页

2.3 配置站点功能

按照上述同样的方法,我们先创建页面,配置站点表

在我们表设计的时候,如果在子表增加了多对一的关联关系,会自动的在主表写入一对多的关系,在表格搭建的时候我们需要把这些不必要展示的列去掉

然后勾选查询条件

2.4 配置油号功能

按照上述方法设置油号功能

2.5 配置油枪功能

按照上述方法配置油枪功能

2.6 配置站点菜单

切换到布局设计,给站点添加菜单

将列表页添加到菜单,修改图标

2.7 设置站点的操作列

因为油号和油枪是和站点相关的,不需要单独设置菜单。子表的功能我们通常是在主表的操作列通过按钮进入。切换到页面设计,选择站点列表页,给操作列增加两个按钮,分别命名为油号和油枪

点击油号的时候要打开我们油号的列表页,传入站点的数据标识。为此需要给油号列表页设置URL参数

设置数据表格的筛选条件,设置为所属站点等于我们的URL参数

在站点列表页,点击油号按钮的时候,点击事件我们设置为打开页面,传入站点的数据标识

油枪的功能按照同样的方法设置即可

总结

本篇我们搭建了和站点相关的数据源,利用微搭的自动生成管理页面的功能,配置了相关功能。在后台搭建的时候,主要是要区分哪个是主表,我们通常搭建主表,然后辅以按钮和子表功能进行联动。

相关推荐
2401_882726481 小时前
组态软件在物联网中的应用
java·物联网·struts·低代码·web
OpenTiny社区4 小时前
TinyEngine v2.2版本发布:支持页面嵌套路由,提升多层级路由管理能力&开发分支调整
前端·低代码·开源·opentiny
V+zmm101347 小时前
智慧物流小程序(论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计
霍格沃兹测试开发学社测试人社区7 小时前
性能测试丨微信小程序性能优化指南
性能优化·微信小程序·小程序
猿毕设10 小时前
【FL0100】基于SSM微信小程序的走失人员的报备平台
java·spring boot·后端·python·微信小程序·小程序
猿毕设10 小时前
【FL0091】基于SSM和微信小程序的社区二手物品交易小程序
java·spring boot·后端·python·微信小程序·小程序
前端小雪的博客.11 小时前
Uniapp 小程序复制、粘贴功能实现
小程序·uni-app
V+zmm1013411 小时前
岳阳市美术馆预约平台(小程序论文源码调试讲解)
java·数据库·微信小程序·小程序·毕业设计