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

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

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

总结

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

相关推荐
老李不敲代码13 分钟前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J2 小时前
管理100个小程序-很难吗
android·小程序
samson_www2 小时前
试水低代码平台Nocoly
数据库·低代码·low-code
qq_357389633 小时前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计15 小时前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技1 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
fakaifa1 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
NocoBase1 天前
NocoBase 本周更新汇总:联动规则条件左侧支持变量
低代码·开源·资讯
18538162800余。1 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序