加油站小程序实战教程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参数

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

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

总结

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

相关推荐
SL_staff7 天前
3周搭完MES系统:JVS低代码+JVS-IoT物联网的实战记录
java·前端·低代码
AprChell9 天前
低代码设计器和低代码设计引擎架构综述
前端·vue.js·低代码
Kagol13 天前
NocoBase 开源项目源码深度分析
低代码
m0_5261194014 天前
iconfont我修改好颜色,但是在小程序项目是黑色的
小程序
2601_9567436815 天前
2026 上海小程序开发甄选:源码、云函数、跨端兼容技术评判
小程序·开发经验·上海
IT_张三15 天前
CSDN-项目分享-暑期备考小程序
小程序
IsJunJianXin15 天前
pdd小程序 cdp 保存响应体
linux·服务器·小程序·pdd小程序·拼多多响应体解密·小程序cdp·拼多多rpc取响应体
UXbot15 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
Geek_Vison15 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
盟接之桥15 天前
电子数据交换(EDI)|制造业汽车零配件场景方案
大数据·网络·人工智能·安全·低代码·汽车·制造