当前位置：首页 > news >正文

17vue3实战-----使用配置文件生成简易页面

news 来源：原创 2025/5/17 21:23:52

17vue3实战-----使用配置文件生成简易页面

1.写在前面
2.背景
3.实现
- 3.1界面效果
- 3.2新建config配置文件
- 3.3封装组件
- 3.4使用组件

1.写在前面

后台管理系统的开发很简单。无论是用户模块、部门模块、角色模块还是其它模块,界面和业务逻辑都相对比较简单，我会省略这些模块的搭建过程,而着重去讲述一些比较复杂或者新颖的技术点。

2.背景

在后台管理项目,经常会出现以下情况:
在这里插入图片描述
在很多模块中,都有类似以上红色区域的情况。这些表单的个数、种类(可能是select、input…)、具体内容都不同。但他们却又有一些相关的地方。如果一个一个界面搭建会比较麻烦,如果能通过配置文件将红色区域的东西表达出来,根据配置文件来确定红色区域的页面,那这万事大吉了。

3.实现

3.1界面效果

这里我以部门模块为例,以下有两个input和一个date-picker。
在这里插入图片描述

3.2新建config配置文件

在department新建config配置文件:
在这里插入图片描述
department/config/search.config.ts：

const searchConfig = {formItems: [{type: 'input',prop: 'name',label: '部门名称',placeholder: '请输入查询的部门名称',initialValue: 'bbb'},{type: 'input',prop: 'leader',label: '部门领导',placeholder: '请输入查询的领导名称'},{type: 'date-picker',prop: 'createAt',label: '创建时间'}]
}
export default searchConfig

3.3封装组件

将红色搜索区域封装成一个组件:
在这里插入图片描述
components/page-search/page-search.vue:

<template><div class="search"><!-- 1.输入搜索关键字的表单 --><el-form:model="searchForm"ref="formRef":label-width="searchConfig.labelWidth ?? '80px'"size="large"><el-row :gutter="20"><template v-for="item in searchConfig.formItems" :key="item.prop"><el-col :span="8"><el-form-item :label="item.label" :prop="item.prop"><template v-if="item.type === 'input'"><el-inputv-model="searchForm[item.prop]":placeholder="item.placeholder"/></template><template v-if="item.type === 'date-picker'"><el-date-pickerv-model="searchForm[item.prop]"type="daterange"range-separator="-"start-placeholder="开始时间"end-placeholder="结束时间"/></template><template v-if="item.type === 'select'"><el-selectv-model="searchForm[item.prop]":placeholder="item.placeholder"style="width: 100%"><template v-for="option in item.options" :key="option.value"><el-option :label="option.label" :value="option.value" /></template></el-select></template></el-form-item></el-col></template></el-row></el-form><!-- 2.重置和搜索的按钮 --><div class="btns"><el-button icon="Refresh" @click="handleResetClick">重置</el-button><el-button icon="Search" type="primary" @click="handleQueryClick">查询</el-button></div></div>
</template><script setup lang="ts">
import { reactive, ref } from 'vue'
import type { ElForm } from 'element-plus'// 定义自定义事件/接收的属性
interface IProps {searchConfig: {labelWidth?: stringformItems: any[]}
}
const props = defineProps<IProps>()
// 定义form的数据
const initialForm: any = {}
for (const item of props.searchConfig.formItems) {initialForm[item.prop] = item.initialValue ?? ''
}
const searchForm = reactive(initialForm)...
</script><style lang="less" scoped>
...
</style>

3.4使用组件

<template><div class="department"><page-search//将配置传给子组件:search-config="searchConfig"@query-click="handleQueryClick"@reset-click="handleResetClick"/>...</div>
</template><script setup lang="ts" name="department">
import { ref } from 'vue'
import PageSearch from '@/components/page-search/page-search.vue'
import searchConfig from './config/search.config'
...
</script>
<style scoped></style>

其它模块也是一样配置,比如角色模块:

const searchConfig = {formItems: [{type: 'input',prop: 'name',label: '角色名称',placeholder: '请输入查询的角色名称',initialValue: 'abc'},{type: 'input',prop: 'leader',label: '权限介绍',placeholder: '请输入查询的权限介绍'},{type: 'date-picker',prop: 'createAt',label: '创建时间'}]
}export default searchConfig

甚至有些时候还需要动态改动配置,这些都可以自己去思考。

17vue3实战-----使用配置文件生成简易页面

17vue3实战-----使用配置文件生成简易页面 1.写在前面2.背景3.实现3.1界面效果3.2新建config配置文件3.3封装组件3.4使用组件 1.写在前面后台管理系统的开发很简单。无论是用户模块、部门模块、角色模块还是其它模块,界面和业务逻辑都相对比较简单，我会省略这些模…...

编程日记 2025/5/17 21:23:52

ZZNUOJ(C/C++)基础练习1091——1100(详解版)⭐

目录 1091 : 童年生活二三事（多实例测试） C C 1092 : 素数表(函数专题） C C 1093 : 验证哥德巴赫猜想（函数专题） C C 1094 : 统计元音（函数专题） C C 1095 : 时间间隔（多…...

编程日记 2025/5/17 21:13:24

浏览器的缓存方式几种

浏览器的缓存方式主要分为以下几种： 1. 强制缓存（强缓存 / Memory Cache & Disk Cache） 通过 Expires 或 Cache-Control 头部控制。在缓存有效期内，浏览器直接使用缓存，不发起请求。关键HTTP头： Ex…...

编程日记 2025/5/17 10:39:34

【前端】【面试】【经典一道题】vue中组件传值的几种方式

父子组件传值 1. 父传子：props 这是最常见的父组件向子组件传递数据的方式。父组件在使用子组件时，通过在子组件标签上绑定属性来传递数据，子组件通过 props 选项接收这些数据。  <template><div><Ch…...

编程日记 2025/5/12 17:42:36

SwiftUI 中 .overlay 两种写法的区别及拓展

SwiftUI 中 .overlay 两种写法的区别及拓展一、.overlay 简介功能语法二、写法 1：.overlay(Circle().stroke(Color.blue, lineWidth: 2))代码示例解释优点适用场景三、写法 2：.overlay { Circle().stroke(.white, lineWidth: 4) }代码示例解释优点适用…...

编程日记 2025/5/16 3:50:37

简述mysql 主从复制原理及其工作过程，配置一主两从并验证

原理： MySQL主从复制是基于事件的复制机制。主服务器负责处理所有的写操作和事务，并将这些更改（如INSERT、UPDATE和DELETE）以事件的形式记录到二进制日志（binlog）中。从服务器则通过读取主服务器的二进制日…...

编程日记 2025/5/14 10:54:44

python-leetcode 25.环形链表

题目： 给定一个链表的头节点head,判断链表中是否有环。如果链表中有某个节点，可以通过连续跟踪next指针再次到达，则链表中存在环。为了表示给定链表中的环，评测系统内部使用整数pos来表示链表尾连接到链表中的位置（…...

编程日记 2025/5/13 12:44:31

游戏引擎学习第98天

仓库:https://gitee.com/mrxiao_com/2d_game_2 开始进行一点回顾今天的目标是继续实现正常贴图的操作，尽管目前我们还没有足够的光照信息来使其完全有用。昨日完成了正常贴图相关的基础工作，接下来将集中精力实现正常贴图的基本操作，并准备…...

编程日记 2025/5/14 5:54:38

机器学习 - 进一步理解最大似然估计和高斯分布的关系

一、高斯分布得到的是一个概率吗？ 高斯分布（也称为正态分布）描述的是随机变量在某范围内取值的概率分布情况。其概率密度函数（PDF）为： 其中，μ 是均值，σ 是标准差。需要注意的是…...

编程日记 2025/5/14 2:28:30

物联网水质监测系统设计与实现/基于STM32的水产养殖云监控系统设计

背景随着物联网技术的飞速发展，各行各业都在逐步实现智能化管理，水质监测系统作为环境监测中的一个重要环节，近年来备受关注。如何高效、精准地监测水质，尤其是在远程无法到达的地方，成为了一个迫切需要解决的问题。…...

编程日记 2025/4/19 7:30:31

【学习笔记】计算机网络（三）

第3章数据链路层文章目录第3章数据链路层3.1数据链路层的几个共同问题3.1.1 数据链路和帧3.1.2 三个基本功能3.1.3 其他功能 - 滑动窗口机制 3.2 点对点协议PPP(Point-to-Point Protocol)3.2.1 PPP 协议的特点3.2.2 PPP协议的帧格式3.2.3 PPP 协议的工作状态 3.3 使用广播信…...

编程日记 2025/5/15 4:09:11

Android 系统面试问题

一.android gki和非gki的区别 Android GKI（Generic Kernel Image）和非GKI内核的主要区别在于内核设计和模块化程度，具体如下： 1. 内核设计 GKI：采用通用内核设计，与设备硬件分离，核心功能统一…...

编程日记 2025/5/16 3:35:27

大疆无人机二次开发调试准备

以下机场和遥控器模式只能同时支持一种，因为无人机只能同时对频一种设备，如果同时对频了两种，以最后对频设备为准机场模式保证机场的网口闪烁，网络正常在mqtt中给dock建立用户，配置新建的MQTT账号和密码。组织ID任…...

编程日记 2025/5/16 20:33:42

【嵌入式Linux应用开发基础】文件I/O基础编程

目录一、文件I/O简介二、文件描述符 2.1. 唯一性 2.2. 抽象性 2.3. 有限性三、文件操作函数四、标准文件I/O函数五、文件执行权限 5.1. 权限类型 5.2. 权限分配对象 5.3. 权限表示方法 5.4. 权限设置命令 5.5. 权限设置的重要性 5.6. 实例说明六、设备文件…...

编程日记 2025/5/6 1:31:15

【StableDiffusion容器化部署】分步指南

使用Docker部署和管理Stable Diffusion环境可以有效解决依赖冲突、环境隔离和可移植性问题。以下是分步指南和相关技术细节： 1. 基础环境准备 1.1 安装Docker和GPU支持安装Docker Engine：参考官方文档配置NVIDIA Container Toolkit：# 安装…...

编程日记 2025/5/17 17:29:37

2.11 sqlite3数据库【数据库的相关操作指令、函数】

练习： 将 epoll 服务器客户端拿来用客户端：写一个界面，里面有注册登录服务器：处理注册和登录逻辑，注册的话将注册的账号密码写入数据库，登录的话查询数据库中是否存在账号，并验证密码是否正确…...

编程日记 2025/5/13 15:16:56

安装 Ollama 需要哪些步骤？（windows+mac+linux+二进制+Docker）

安装 Ollama 的步骤根据操作系统不同会有所差异，以下是针对不同操作系统的详细安装指南： Windows 系统下载安装包：访问 Ollama 官方下载页面，下载适用于 Windows 的安装程序 OllamaSetup.exe。运行安装程序：双击下载的安装包，按照提示完成安装。默认安装路径为 C:\User…...

编程日记 2025/5/16 11:34:29

【力扣】148.排序链表

AC截图题目思路基本情况处理： 如果链表为空 (head NULL) 或者链表仅有一个节点 (head->next NULL)，则链表已经是有序的，直接返回头节点 head。分割链表： 使用快慢指针法找到链表的中间节点。slow 指针每次前进一格&…...

编程日记 2025/5/11 11:48:43

Springboot框架扩展功能的使用

Spring Boot 提供了许多扩展点，允许开发者在应用程序的生命周期中插入自定义逻辑。这些扩展点可以帮助你更好地控制应用程序的行为，例如在启动时初始化数据、在关闭时释放资源、或者自定义配置加载逻辑。以下是 Spring Boot 中常见的扩展点： …...

编程日记 2025/5/13 21:45:44

绿虫储能仿真软件解决储能项目中的哪些痛点

痛点一：储能方案定制难如何根据不同用户的需求，制定科学合理的储能方案，一直是行业内的一大难题。每个用户的用电情况、场地条件、预算等都存在差异，想要实现 “千人千面” 的专属方案设计谈何容易。绿虫储能仿真设计软件凭借…...

编程日记 2025/5/15 10:45:18

保姆级教程Docker部署Zookeeper镜像

目录一、安装Docker及可视化工具二、创建Zookeeper网络三、镜像选择四、单节点部署 1、创建挂载目录 2、命令运行容器 3、Compose运行容器 4、查看运行状态 5、验证是否正常运行一、安装Docker及可视化工具 Docker及可视化工具的安装可参考：Ubuntu上…...

编程日记 2025/5/13 11:06:53

【leetcode】滑动窗口刷题总结

滑动窗口算法技巧主要用来解决子数组问题，比如让你寻找符合某个条件的最长/最短子数组或者子串。对于某些题目，并不需要穷举所有子串，就能找到题目想要的答案。滑动窗口就是这种场景下的一套算法模板，帮你对穷举过程进行剪枝优化&…...

编程日记 2025/5/14 6:55:36

【MySQL】通过shell脚本一键同步MySQL数据库结构和数据到指定库中

通过shell脚本对数据库进行覆盖式备份/迁移，简单方便，适合需要快速同步某个库结构和数据到目标库的场景。通过AI调试了好些次得到能用的脚本，本文主要是做一个对该脚本的记录| 安装依赖 # 安装进度条库 sudo apt install pv注：如…...

编程日记 2025/5/15 15:26:31

C# COM 组件在.NET 平台上的编程介绍

.NET学习资料 .NET学习资料 .NET学习资料一、COM 组件简介 COM（Component Object Model）即组件对象模型，是一种微软提出的软件组件技术，它允许不同的软件模块在二进制层面进行交互。COM 组件可以用多种编程语言开发&#xff0…...

编程日记 2025/5/9 6:14:12

数据结构与算法：动态规划dp：背包问题：理论基础（状态压缩/滚动数组）和相关力扣题（416. 分割等和子集、1049.最后一块石头的重量Ⅱ、494.目标和）

背包问题 01背包理论基础对于01背包问题，物品下标为0到i，对应的重量为weight[0]到weight[i]，价值为value[0]到value[i]，每个物品只可以取或不取，背包最大容量为j的场景。常见的状态转移方程如下： dp[i…...

编程日记 2025/5/16 20:27:12

【MySQL例题】我在广州学Mysql 系列——有关数据备份与还原的示例

ℹ️大家好，我是练小杰，今天周二，明天就是元宵节了呀！！😆 俗话说“众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。” 本文主要对数据库备份与还原的知识点例题学习~~ 前情回顾&…...

编程日记 2025/5/12 12:23:40

remote: Permission to xx.git denied to xx. fatal: unable to access https://github.com/xx/xx.git/: The requested URL returned error: 403出现这个就是因为你的（personal access tokens ）PAT过期了删掉旧的token 生成一个新的 mac系统在mac的…...

编程日记 2025/5/1 3:24:01

2021 年 9 月青少年软编等考 C 语言五级真题解析

目录 T1. 问题求解思路分析T2. 抓牛思路分析T3. 交易市场思路分析T4. 泳池思路分析T1. 问题求解给定一个正整数 N N N，求最小的 M M M 满足比 N N N 大且 M M M 与 N N N 的二进制表示中有相同数目的 1 1 1。举个例子，假如给定 N N N 为 78 78 78，二进制表示为 …...

编程日记 2025/5/17 17:26:41

玩转适配器模式

文章目录解决方案现实的举例适用场景实现方式适配器模式优缺点优点：缺点：适配器模式可比上一篇的工厂模式好理解多了，工厂模式要具有抽象的思维。这个适配器模式，正如字面意思，就是要去适配某一件物品。假如你正在开发一款股票市场监测程序，它会从不同来源下载 XML 格…...

编程日记 2025/5/14 21:58:16

Batch Normalization (BN) 和 Synchronized Batch Normalization (SyncBN) 的区别

Batch Normalization 和 Synchronized Batch Normalization 的区别 Batch Normalization (BN) 和 Synchronized Batch Normalization (SyncBN) 的区别1. BN（Batch Normalization）2. SyncBN（Synchronized Batch Normalization）3. 选…...

编程日记 2025/5/16 9:21:25

MySQL主从同步

目录一、MySQL主从同步 1、基于binlog的主从同步 2、基于gtid的主从同步配置二、MySQL 主从读写分离实现方案 2.1 ProxySQL实现mysql8主从同步读写分离 1、ProxySQL基本介绍 2、ProxySQL结构 2、实验环境 3、实现数据库主从复制 4、安装ProxySQL 5、配置ProxySQL …...

编程日记 2025/5/16 12:11:16

CCFCSP认证考试 ——202403-1 词频统计

题目： 在学习了文本处理后，小 P 对英语书中的 n 篇文章进行了初步整理。具体来说，小 P 将所有的英文单词都转化为了整数编号。假设这 n 篇文章中共出现了 m 个不同的单词，则把它们从 1 到 m 进行编号。这样，每篇文章…...

编程日记 2025/5/12 12:25:55

关于“i18n“在vue中的使用

关于"i18n"在vue中的使用  <template><div>{{ $t("This campaign has expired.") }}}}</div> </template> <script> export default {created() {this.onLoading();},methods: {onLoading () {this.$…...

编程日记 2025/5/16 8:03:21

MATLAB中count函数用法

目录语法说明示例对出现次数计数使用模式对数字和字母进行计数多个子字符串的所有出现次数忽略大小写对字符向量中的子字符串进行计数 count函数的功能是计算字符串中模式的出现次数。语法 A count(str,pat) A count(str,pat,IgnoreCase,true) 说明 A c…...

编程日记 2025/5/5 21:51:21

Spring中的＠Component和@Bean有什么区别？

在Spring框架中，Component和Bean都用于定义Bean，但它们的使用场景和方式有所不同。 ### 1. Component - **作用范围**：Component是一个类级别的注解，通常用于标记一个类为Spring的组件。Spring会自动扫描并注册这些类为Bean。 -…...

编程日记 2025/5/17 12:23:53

泛化、选择、分化

泛化是指记忆联系的“发散”，泛化兴奋的基础是模糊兴奋。记忆联系的“发散”有以下几种种情况： 1、联络区的一原始记忆柱群（A1）具有直接或间接与其它任意联络区的任意原始记忆柱群建立记忆联系的潜力。也就是说任何两个对象&…...

编程日记 2025/5/12 12:52:36

剖析 C++ 模拟算法：数据结构、随机数生成与模型验证

模拟算法 (Simulation Algorithms) 是一种通过计算机程序来模拟现实世界或系统行为的算法。它不依赖于特定的数学公式或优化技术，而是直接按照系统的规则和逻辑进行步骤一步地模拟。模拟算法的复杂度和效率取决于模拟系统的复杂程度和模拟的精度要求。在 C 中&…...

编程日记 2025/5/10 12:10:45

51单片机俄罗斯方块整行消除函数

/************************************************************************************************************** * 名称：flash * 功能：行清除动画 * 参数：NULL * 返回：NULL * 备注： * 采用非阻塞延时&#xff0…...

编程日记 2025/5/15 7:31:54

IDEA升级出现问题Failed to prepare an update Temp directory inside installation

IDEA升级出现问题"Failed to prepare an update Temp directory inside installation…" 问题来源： 之前修改了IDEA的默认配置文件路径，然后升级新版本时就无法升级，提示"Failed to prepare an update Temp directory insid…...

编程日记 2025/5/15 17:25:13

Windows系统下设置Vivado默认版本：让工程文件按需打开

在FPGA开发过程中，我们常常需要在一台电脑上安装多个不同版本的Vivado软件，以满足不同项目的需求。然而，当双击打开一个Vivado工程文件（.xpr）时，系统默认会调用一个固定的版本，这可能并不是我们…...

编程日记 2025/5/17 10:51:47

CSS3+动画

浏览器内核以及其前缀 css标准中各个属性都要经历从草案到推荐的过程，css3中的属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所有会加厂商前缀加以区分。如果某个属性…...

编程日记 2025/5/11 2:12:48

Kotlin 2.1.0 入门教程（十一）for、while、return、break、continue

for 循环 for 循环会遍历任何提供迭代器的对象。 for (item in collection) print(item)for (int: Int in ints) {println(int) }for 循环会遍历任何提供迭代器的对象，这意味着该对象必须满足以下条件： 具有一个成员函数或扩展函数 iterator()&#xf…...

编程日记 2025/5/14 13:12:50

深度探索DeepSeek：成本效益之辩与市场展望

摘要 DeepMind的CEO对DeepSeek的成本效益提出质疑，认为其成本被过度炒作。他指出，DeepSeek所使用的技术大多源自谷歌和DeepMind。然而，分析机构SemiAnalysis强调，DeepSeek的优势在于其成本与能力的卓越组合。尽管目前DeepSeek的成…...

编程日记 2025/5/16 12:37:05

DeepSeek投喂数据（训练AI）

1、拉取nomic-embed-text 打开命令行，运行：ollama pull nomic-embed-text 这里需要先安装ollama ，不过大家应该在本地部署模型时已经安装了拉取成功就行了，后续在配置AnythingLLM时用到 2、下载 AnythingLLM 地址&#xff1a…...

编程日记 2025/5/14 1:27:09

Docker 安装与配置 Nginx

摘要 1、本文全面介绍了如何在 Docker 环境中安装和配置 Nginx 容器。 2、文中详细解释了如何设置 HTTPS 安全连接及配置 Nginx 以实现前后端分离的代理服务。 2、同时，探讨了通过 IP 和域名两种方式访问 Nginx 服务的具体配置方法 3、此外，文章还涵…...

编程日记 2025/5/16 18:42:38

常用电路（过压保护、电流/电压采集）

过压保护电路输入电压使用电源（36V）或者typec（20V），需要过压保护电路处理输入再连接到CH224K，保证输入不高于最大获取电压20V MOS管导通条件为栅源极有压差，一般为5-10V 三极管导通条件为基极…...

编程日记 2025/5/16 18:50:48

12.Python模块：模块中的all、模块制作、打包模块、模块安装与使用

在 Python 中，模块是一个包含 Python 代码的文件。模块可以包含函数、类和变量，也可以包括可执行的代码。Python提供了一套强大的模块系统，支持模块的制作、打包、安装和使用。接下来，我们将详细介绍 __all__、模块制作、打包模块…...

编程日记 2025/5/14 22:09:48

Socket通信端口绑定的逻辑实现

在实现网络通信时，一个 Socket 需要维护输入端与输出端的 IP 地址和端口号，同时也需要输入与输出字节缓冲区： 输入端与输出端的 IP 地址和端口号作用标识通信端点：IP 地址用于标识网络中的设备，端口号用于标识设备…...

编程日记 2025/5/17 1:30:17

在freertos中，中断优先级和任务优先级之间的关系和使用方法

中断优先级和任务优先级如何匹配？任务优先级不同任务之间该用多高的优先级？中断优先级不同中断中该用多高的优先级？中断优先级和任务优先级设置时，怎样设置可以让任务在调度时屏蔽中断？怎样设置可以让任务在调度时&…...

编程日记 2025/5/4 23:22:10

解锁摄影潜能：全面解析相机镜头的选择与使用逻辑

目录一、镜头分类：从焦距到用途的底层逻辑 （一）按焦距和视角分类（一级分类） （二）按特殊用途分类（一级分类） 二、参数解码：超越 “光圈越大越好” 的思维定…...

编程日记 2025/5/12 17:54:31

17vue3实战-----使用配置文件生成简易页面

1.写在前面

2.背景

3.实现

3.1界面效果

3.2新建config配置文件

3.3封装组件

3.4使用组件

相关文章：