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

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

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

总结

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

相关推荐
27669582921 小时前
美团民宿 mtgsig 小程序 mtgsig1.2 分析
java·python·小程序·美团·mtgsig·mtgsig1.2·美团民宿
程序员一一涤生1 小时前
Dify开发必备:分享8个官方文档不曾解释的关键技巧
低代码·dify·ai平台
web_Hsir2 小时前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
fakaifa3 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe3 小时前
微信小程序唤起app
微信小程序·小程序
NocoBase4 小时前
NocoBase 本周更新汇总:优化及缺陷修复
低代码·开源·资讯
不老刘4 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
Mr.Liu65 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳15 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域16 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源