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

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

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

总结

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

相关推荐
ALLSectorSorft3 分钟前
代驾小程序订单系统框架搭建
小程序·代驾小程序
qq_12498707539 分钟前
原生小程序+springboot+vue+协同过滤算法的音乐推荐系统(源码+论文+讲解+安装+部署+调试)
java·spring boot·后端·小程序·毕业设计·课程设计·协同过滤
前端极客探险家9 小时前
微信小程序全解析:从入门到实战
微信小程序·小程序
h_65432109 小时前
微信小程序van-dialog确认验证失败时阻止对话框的关闭
微信小程序·小程序
-曾牛10 小时前
基于微信小程序的在线聊天功能实现:WebSocket通信实战
前端·后端·websocket·网络协议·微信小程序·小程序·notepad++
说私域11 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的“互相拆台”式宣传策略研究
人工智能·小程序·开源·零售
少恭写代码13 小时前
在Taro中开发一个跨端Svg组件,同时支持小程序、H5、React Native
react native·小程序·taro
少恭写代码17 小时前
duxapp 2025-01-13 更新 支持小程序配置文件
小程序
CN自由之翼18 小时前
【微信小程序】webp资源上传失败
微信小程序·小程序
说私域20 小时前
场景新零售:基于开源AI大模型AI智能名片S2B2C商城小程序源码的商业本质回归与创新
人工智能·小程序·开源·零售