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

目录

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

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

1 创建数据源

在站点信息功能搭建的时候,我们需要先考虑表结构。因为是多站点,我们通常在小程序里设置筛选条件辅助用户快速的进行查找信息。为此,我们需要先设计一个配置表来配置站点的分类信息
在这里插入图片描述
这里我们设计了两级的结构,分别是服务大类和服务子类,没考虑使用枚举字段,一个是方便管理员动态的维护类目。另一方面是在界面搭建的时候通过级联设置来让一二级类目进行联动选择

有了类目配置表之后,我们需要设计站点信息的主表字段
在这里插入图片描述
这里一二级类目设置为文本字段,因为关联关系无法作为查询条件,所以设置文本字段会方便一点

除了站点信息外,站点还需要和油号关联,设计一张油号表
在这里插入图片描述
之后就是管理油枪信息,油枪也和站点进行关联
在这里插入图片描述

2 搭建后台功能

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

2.1 搭建类目配置功能

切换到PC模式,点击创建页面的图标
在这里插入图片描述
选择表格与表单页,选择站点类目表,布局选择左侧导航布局
在这里插入图片描述
选中数据表格,在右侧的属性面板里找到排序字段,设置为按照序号升序排列
在这里插入图片描述
点击筛选器
在这里插入图片描述
勾选服务大类作为筛选条件
在这里插入图片描述
切换到布局设计
在这里插入图片描述
切换到左侧导航布局,选中布局导航,点击根据页面一键生成菜单图标
在这里插入图片描述
自动生成后我们只需保留列表页即可
在这里插入图片描述
可以点击标题配置一下菜单名称和图标
在这里插入图片描述

2.2 配置系统信息

点击顶部的文本组件,配置我们系统的名称,设置为加油站小程序后台
在这里插入图片描述
在这里插入图片描述
选择底部的图标,改为预置图标,设置为退出
在这里插入图片描述
将图标自带的事件删除
在这里插入图片描述
设置文本内容为退出,设置点击事件
在这里插入图片描述
方法选择退出登录
在这里插入图片描述
退出的成功时,增加一个打开页面方法,跳转到首页
在这里插入图片描述

2.3 配置站点功能

按照上述同样的方法,我们先创建页面,配置站点表
在这里插入图片描述
在我们表设计的时候,如果在子表增加了多对一的关联关系,会自动的在主表写入一对多的关系,在表格搭建的时候我们需要把这些不必要展示的列去掉
在这里插入图片描述
然后勾选查询条件
在这里插入图片描述

2.4 配置油号功能

按照上述方法设置油号功能
在这里插入图片描述
在这里插入图片描述

2.5 配置油枪功能

按照上述方法配置油枪功能
在这里插入图片描述
在这里插入图片描述

2.6 配置站点菜单

切换到布局设计,给站点添加菜单
在这里插入图片描述
将列表页添加到菜单,修改图标
在这里插入图片描述

2.7 设置站点的操作列

因为油号和油枪是和站点相关的,不需要单独设置菜单。子表的功能我们通常是在主表的操作列通过按钮进入。切换到页面设计,选择站点列表页,给操作列增加两个按钮,分别命名为油号和油枪
在这里插入图片描述
点击油号的时候要打开我们油号的列表页,传入站点的数据标识。为此需要给油号列表页设置URL参数
在这里插入图片描述
在这里插入图片描述
设置数据表格的筛选条件,设置为所属站点等于我们的URL参数
在这里插入图片描述
在这里插入图片描述
在站点列表页,点击油号按钮的时候,点击事件我们设置为打开页面,传入站点的数据标识
在这里插入图片描述
油枪的功能按照同样的方法设置即可

总结

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/979989.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vidma Ver.2.14.0 高级版

Vidma Ver.2.14.0 高级版 Vidma 是一款易于使用的视频编辑器,提供多种音乐和流行视频效果选择,让您的视频在社交媒体上脱颖而出。您可以通过添加 swooshing 文本、流行效果、复古滤镜、精美贴纸、平滑过渡等等,轻松地从您的宝贵时刻创建有意…

网络通信/IP网络划分/子网掩码的概念和使用

文章目录 概述子网的考题子网掩码的历史有/无类地址子网划分!子网掩码超网技术/CIDR子网掩码和路由IP子网掩码定义 网络规划网络规划-拆子网网络规划-组超网子网划分案例 区分于其他特殊IP地址IP地址和网络地址子网掩码和网络地址子网掩码和广播地址 子网间的通信其他 概述 本…

win11编译pytorch cuda128版本流程

Geforce 50xx系显卡最低支持cuda128,torch cu128 release版本目前还没有释放,所以自己基于2.6.0源码自己编译wheel包。 1. 前置条件 1. 使用visual studio installer 安装visual studio 2022,工作负荷选择【使用c的桌面开发】,安装完成后将…

一周学会Flask3 Python Web开发-Jinja2模版中加载静态文件

锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 一个Web项目不仅需要HTML模板,还需要许多静态文件,比如 CSS、JavaScript文件、图片以及音频等。在Fla…

DeepSeek开源周 Day04:从DualPipe聊聊大模型分布式训练的并行策略

DualPipe简介 今天是DeepSeek开源周的第四天,官方开源了一种新型并行计算优化策略——DualPipe。 其实大家阅读过Deepseek-V3技术报告的同学,对这个技术并不陌生。 开源地址:https://github.com/deepseek-ai/DualPipe 核心亮点 DualPipe&…

基于C#的CANoe CLR Adapter开发指南

一、引言 CANoe 是一款广泛应用于汽车电子开发和测试的工具,它支持多种编程接口,方便开发者进行自定义扩展。CANoe CLR Adapter 允许我们使用 C# 语言与 CANoe 进行交互,充分利用 C# 的强大功能和丰富的类库。本文将详细介绍如何基于 C# 进行…

Redis实现滑动窗口限流实践(Redisson限流器版)

文章目录 一、滑动窗口限流原理二、Redisson限流器三、代码示例1. 引入依赖2. 配置Redis连接3. 使用Redisson限流器4. 使用示例 四、总结五、其他优化方向六、代码说明 在高并发系统中,为了保护系统稳定性,防止突发流量压垮服务,限流是一种常…

实现Python+Django+Transformers库中的BertTokenizer和BertModel来进行BERT预训练,并将其应用于商品推荐功能

一、环境安装准备 #git拉取 bert-base-chinese 文件#创建 虚拟运行环境python -m venv myicrplatenv#刷新source myicrplatenv/bin/activate#python Django 集成nacospip install nacos-sdk-python#安装 Djangopip3 install Django5.1#安装 pymysql settings.py 里面需要 # 强制…

ollama本地部署DeepSeek-R1大模型使用前端JS调用的详细流程

以下是关于如何在本地部署 DeepSeek-R1 大模型(通过 Ollama),并使用前端 JavaScript 调用其功能的详细流程。 前提条件 硬件要求: 建议至少 16GB RAM(运行较小模型如 1.5B 或 7B 参数版本),如果…

Rocky Linux 8.5 6G内存 静默模式(没图形界面)安装Oracle 19C

Oracle19c 下载地址 Database Software Downloads | Oraclehttps://www.oracle.com/database/technologies/oracle-database-software-downloads.html#db_ee 目录 一、准备服务器 1、服务器可以克隆、自己装 2、修改主机名 3、重启 4、关闭selinux 5、关闭防火墙 5.1、…

【Qt QML】QML鼠标事件(MouseArea)

QML鼠标事件全面解析 一、MouseArea基础概念 在 QML 中,鼠标事件是处理用户与界面元素交互的重要部分。QML 提供了多种方式来处理鼠标事件,MouseArea 是 QML 中用于处理鼠标事件的核心元素,它可以覆盖在其他元素之上,捕获鼠标操作并触发相应的信号。 1、基本用法 import …

【Project】基于Prometheus监控docker平台

一、设计背景 1.1项目简介 本项目旨在创建一个全面的容器化应用程序监控解决方案,基于Prometheus监控Docker平台上的各种服务。在当今的软件开发环境中,容器化技术已成为一种关键的工具,使应用程序能够更快速、可靠地交付和扩展。然而&…

SV——Clocking block的应用

在system verilog中,clocking block是一种简化时钟域信号同步和采样的机制。可以帮助验证工程师简化复杂时序问题,尤其是在测试平台中,既要对信号进行驱动,又要对信号进行采样。 clocking block块一般有以下应用场景:…

RabbitMQ 的介绍与使用

一. 简介 1> 什么是MQ 消息队列(Message Queue,简称MQ),从字面意思上看,本质是个队列,FIFO先入先出,只不过队列中存放的内容是message而已。 其主要用途:不同进程Process/线程T…

unity pico开发 一:环境准备

文章目录 前言一些容易混淆的概念下载SDK导入SDK配置环境注册PICO APP下载PDC 前言 本文将配置pico开发所有必须的环境 官方文档 一些容易混淆的概念 OpenXR:OpenXR是国际通用的vr开发协议,目的是为了解决各个硬件设备自己搞自己的sdk,导致…

Java数据结构_一篇文章了解常用排序_8.1

本文所有排序举例均默认为升序排列。 目录 1. 常见的排序算法 2. 常见排序算法的实现 2.1 插入排序 2.1.1 基本思想: 2.1.2 直接插入排序 2.1.3 希尔排序(缩小增量排序) 2.2 选择排序 2.2.1 基本思想: 2.2.2 直接选择排…

Uniapp开发微信小程序插件的一些心得

一、uniapp 开发微信小程序框架搭建 1. 通过 vue-cli 创建 uni-ap // nodejs使用18以上的版本 nvm use 18.14.1 // 安装vue-cli npm install -g vue/cli4 // 选择默认模版 vue create -p dcloudio/uni-preset-vue plugindemo // 运行 uniapp2wxpack-cli npx uniapp2wxpack --…

【Mark】记录用宝塔+Nginx+worldpress+域名遇到的跨域,301,127.0.0.1,CSS加载失败问题

背景 想要用宝塔搭建worldpress,然后用域名直接转https,隐藏掉ipport。 结果被折磨了1天,一直在死活在301,127.0.0.1打转 还有css加载不了的情况 因为worldpress很多是301重定向的,所以改到最后我都不知道改了什么&am…

0x03 http协议和分层架构

HTTP协议 简介 Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则 http协议基于TCP协议:面向连接,安全基于请求-响应模型:一次请求对应一次响应HTTP协议是无状态的协议&#xff…

汽车小助手智能体

汽车小助手:智能驱动汽车服务新体验 链接:文心智能体平台AgentBuilder | 想象即现实 文心智能体平台AgentBuilder,是百度推出的基于文心大模型的智能体平台,支持广大开发者根据自身行业领域、应用场景,选取不同类型的…