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

若依前端框架增删改查

news 来源：原创 2025/7/28 3:49:41

1.下拉列表根据数据库加载

这个是用来查询框

绑定了 @change 事件来处理站点选择变化后的查询逻辑。

        <el-form-item label="站点选择" prop="stationId" v-has-permi="['ch:m:y']"><el-select v-model="queryParams.stationId" placeholder="请选择站点"@change="handleQuery"><el-option v-for="station in stationOptions" :key="station.stationId":label="station.stationName":value="station.stationId"></el-option></el-select></el-form-item>

这个是用在修改弹框中显示数据的，用于表单提交

        <el-form-item label="站点"><el-select v-model="form.stationId" placeholder="请选择站点"><el-option v-for="station in stationOptions" :key="station.stationId":label="station.stationName":value="station.stationId"></el-option></el-select></el-form-item>

 data() {return {// 站点选项stationOptions: undefined
}
,
created() {// 站点列表,挂载的时候加载this.getStationList()},
methods: {/** 查询站点选项框 */getStationList() {listStation().then(response => {this.stationOptions = response.rowsconsole.log(this.stationOptions)})},

还需要引入方法，这个是查询所有站点的表

import { listStation } from '@/api/system/station'

2.多租户：

首先要在表中加入部门id和创建人id（name也行）

使用：

还是来到web端，系统管理->角色管理->更多->数据权限

3.给一个框设置权限，只有超级管理员能看到

 v-has-permi="['ch:m:y']"

4.查询：

查询参数要改成对应的搜索框的参数

这个列表是用来存后端返回来的数据的，一共在三个地方有

2.data中

3.查询方法中

解析代码：

这个getList是用来搜索到全部代码的

.then() 是 JavaScript 中 Promise 对象的方法，用于处理异步操作完成后的结果。当 listStaff 请求完成后，返回的 response 对象将作为参数传递给 .then() 的回调函数。

getList() {this.loading = true;//遮罩，有加载的图案listStaff(this.addDateRange(this.queryParams, this.dateRange)).then(response => {this.staffList = response.rows;this.total = response.total;this.loading = false;
}

5.新增：

表单中的参数要改

要点击新增弹窗出来首先要设open=true,打开弹窗

:visible.sync="open" 是 Vue.js 中的一个特殊绑定语法，它结合了 Vue 的 v-bind 和 .sync 修饰符，用来控制组件或元素的可见性，并同步更新状态。

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="100px"><el-form-item label="加气员名字" prop="staffName"><el-input v-model="form.staffName" placeholder="请输入加气员名字" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

点击确认按钮后：

当你调用 this.$refs["form"].validate 时，它会根据 rules 中的定义，逐个验证表单字段的输入是否合法。
this.$modal.msgSuccess("修改成功"); 是一个用来显示成功消息的语句，通常出现在基于 Vue.js 或类似框架的项目中

    /** 提交按钮 */submitForm: function() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.staffId != undefined) {updateStaff(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addStaff(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},

表示该插入操作将接收一个 SysStaff 类型的对象作为参数。

useGeneratedKeys 属性设置为 true 表示在执行插入操作时，MyBatis 会使用数据库自动生成的主键值。 keyProperty 属性指定插入操作后，自动生成的主键值会被设置到哪个属性中。

<!--  -->
<insert id="xx" parameterType="SysStaff" useGeneratedKeys="true" keyProperty="staffId"></insert>

点击表单的取消按钮，重置这里面的东西

6.修改：

多选框选择的id值

点击表单的取消按钮，重置这里面的东西

细节：

1.必填项：

]

    rules: {photoCarhead: [{ required: true, message: '请上传原车头照片', trigger: 'change' }]},

2.禁止修改

readonly：用户可以选择和复制文本，但不能编辑。
disabled：完全禁止用户编辑，且不允许选择文本。

3.序号列：

      <!-- 序号列 --><el-table-column label="序号" width="80" align="center"><template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column>

4.必填项：

加上rules

<el-form-item label="车牌号" prop="carLicence" :rules="rules.carLicence"><el-input v-model="form.carLicence" placeholder="请输入车牌号" />
</el-form-item>

在return中的rules中加上必填项

data() {return {form: {carLicence: ''},rules: {carLicence: [{ required: true, message: '车牌号为必填项', trigger: 'blur' }// ... existing validation rules ...]}}
}

1. 在el-form上添加:rules="rules"。
2. 在data的return中定义rules，包含carLicence的必填验证。
3. 可能需要添加trigger和validator，但基本的required已经足够。

5.给下拉列表加权限

这样只能admin能看，随便设的权限，其他人看不了

   <el-form-item label="站点选择" prop="stationId" v-has-permi="['ch:m:y']">

若依前端框架增删改查

1.下拉列表根据数据库加载这个是用来查询框绑定了 change 事件来处理站点选择变化后的查询逻辑。 <el-form-item label"站点选择" prop"stationId" v-has-permi"[ch:m:y]"><el-select v-model"queryParams.stationId" pl…...

编程日记 2025/7/28 3:49:41

YARN Cluster模式和Client模式的区别是什么

在 Apache Spark 的 YARN 部署中，Cluster 模式和Client 模式的核心区别在于 Driver 的启动位置和客户端（提交任务的机器）的角色。以下是两者的详细对比： 1. 核心区别概览特性YARN Cluster 模式YARN Client 模式Driver 位置在 YA…...

编程日记 2025/7/25 14:32:09

哪吒汽车：一边熬夜蹦迪，一边找药投医

两年前，威马CEO沈晖发了个短视频，内容是“活下去，像牲口一样活下去”。如今最能体会沈晖当时心情的，估计就是方运舟了。作为哪吒汽车创始人兼董事长，他连续多次被限高，为了让哪吒汽车活下去&#xff0c…...

编程日记 2025/7/22 18:02:15

Java 集合 List、Set、Map 区别与应用

一、核心特性对比二、底层实现与典型差异 ‌List‌ ‌ArrayList‌：动态数组结构，随机访问快（O(1)），中间插入/删除效率低（O(n)）‌‌LinkedList‌：双向链表结构，头尾操作…...

编程日记 2025/7/26 16:34:23

截至2025年03月21日天地图的Marker不支持添加Label; 同时Label和Icon是不支持自定义HTMLElement只支持String；目前只有InfoWindow支持自定义HTMLElement; 效果图 React核心api import ReactDOM from react-dom/client const content document.createElement(div);…...

编程日记 2025/7/27 12:48:38

深度学习PyTorch之动态计算图可视化 - 使用 torchviz 生成计算图

序号系列文章1深度学习训练中GPU内存管理2深度学习PyTorch之数据加载DataLoader3深度学习 PyTorch 中 18 种数据增强策略与实现4深度学习pytorch之简单方法自定义9类卷积即插即用5深度学习PyTorch之13种模型精度评估公式及调用方法6深度学习pytorch之4种归一化方法（…...

编程日记 2025/7/15 9:37:51

拓展知识三：编码学及密码学

编码和密码的区别研究密码变化的客观规律，应用于编制密码以保守通信秘密的，称为编码学；应用于破译密码以获取通信情报的，称为破译学，总称密码学。编码和密码是两个不同的概念，它们的区别如下：…...

编程日记 2025/7/22 12:20:52

【商城实战(54)】解锁商城国际化密码：内容管理全攻略

【商城实战】专栏重磅来袭！这是一份专为开发者与电商从业者打造的超详细指南。从项目基础搭建，运用 uniapp、Element Plus、SpringBoot 搭建商城框架，到用户、商品、订单等核心模块开发，再到性能优化、安全加固、多端适配&#xf…...

编程日记 2025/7/23 7:49:29

JS 应用WebPack 打包器第三方库 JQuery安装使用安全检测

# 打包器 -WebPack- 使用 & 安全参考： https://mp.weixin.qq.com/s/J3bpy-SsCnQ1lBov1L98WA Webpack 是一个模块打包器。在 Webpack 中会将前端的所有资源文件都作为模块处理。它将根据模块的依赖关系进行分析，生成对应的资源。五个核心概…...

编程日记 2025/7/23 19:20:58

【嵌入式硬件】三款DCDC调试笔记

关于开关电源芯片，重点关注输入电源范围、输出电流、最低压降。 1.MP9943: 以MP9943为例，输入电压范围4-36V，输出最大电流3A，最低压降为0.3V 调整FB使正常输出为5.06V 给定6V空载、5V空载、5V带2A负载的情况： 6V带2A…...

编程日记 2025/7/22 15:25:24

深入理解 HTML5 Web Workers：提升网页性能的关键技术解析

深入理解 HTML5 Web Workers：提升网页性能的关键技术解析引言1. 什么是 Web Workers？Web Workers 的特点： 2. Web Workers 的使用方式2.1 创建一个 Web Worker步骤 1：创建 Worker 文件步骤 2：在主线程中调用 Worker 3…...

编程日记 2025/7/23 20:55:01

计算机网络的分类——按照按拓扑结构分类

计算机的拓扑结构是引用拓扑学中研究和大小、形状无关的点、线关系的方法，将网络中的计算机和通信设备抽象为一个点，把传输介质抽象成一条线，由点和线组成的几何图形就是计算机网络的拓扑结构。计算机网络的拓扑结构主要由通信子网决定&#…...

编程日记 2025/7/12 6:05:28

AI大白话（四）：自然语言处理——AI是如何理解和生成人类语言的？

🌟引言：专栏：《AI大白话》 AI大白话（一）：5分钟了解AI到底是什么？ AI大白话（二）：机器学习——AI是怎么“学习“的？ AI大白话（三）：深度学习——AI的‘大脑‘是如何构建的？大家好！欢迎回到"AI大白话"系列。前面我们聊了AI的基本概念、机器学习的原理…...

编程日记 2025/7/26 16:55:55

Android第六次面试总结（Java设计模式篇一）

单例模式属于创建型设计模式，它保证一个类仅有一个实例，并且提供一个全局访问点来获取该实例。下面为你详细阐述单例模式的好处和坏处。好处资源优化：单例模式能保证一个类只有一个实例，这对于那些创建和销毁开销大的对象&…...

编程日记 2025/7/26 22:29:00

如何在 React 项目中进行服务器端渲染（SSR），它有什么优势

大白话如何在 React 项目中进行服务器端渲染（SSR），它有什么优势什么是服务器端渲染（SSR） 在传统的 React 项目里，页面的渲染工作是在浏览器里完成的。也就是当你访问一个网页时，浏览器会先下…...

编程日记 2025/7/25 6:39:42

JVM 01

今天是2025/03/20 16:36 day 09 总路线请移步主页Java大纲相关文章今天进行JVM前二个模块的归纳首先是JVM的相关内容概括的思维导图以下是针对思维导图中内存管理和垃圾回收（GC） 模块的详细说明： 1. 内存管理（运行时数据…...

编程日记 2025/7/23 19:06:59

MATLAB 调用arduino uno

为了授课，必须重新把arduino用上。采用MATLAB编码，可以简化相关程序授课部分 1 安装包 MATLAB Support Package for Arduino Hardware - File Exchange - MATLAB Central (mathworks.com) 需要这个插件。当然也可下载simulink的模块，但…...

编程日记 2025/7/27 19:12:14

WPS宏开发手册——JSA语法

目录系列文章2、JSA语法2.1、打印输出2.2、注释2.3、变量2.4、数据类型2.5、函数2.6、运算符2.7、比较2.8、if else条件语句2.9、for循环2.10、Math对象（数字常用方法）2.11、字符串常用方法2.12、数组常用方法系列文章使用、工程、模块介绍 JSA语…...

编程日记 2025/7/22 9:51:42

linux如何释放内存缓存

[rootredis ~]# sync #将内存缓存数据强制写入磁盘（保存数据后再做释放） [rootredis ~]# echo 1 > /proc/sys/vm/drop_caches #释放内存缓存...

编程日记 2025/6/28 5:59:51

2025年渗透测试面试题总结-某360-企业蓝军面试复盘（题目+回答）

网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录 360-企业蓝军一、Shiro绕WAF实战方案二、WebLogic遭遇WAF拦截后的渗透路径三、JBoss/WebLogic反序…...

编程日记 2025/7/16 9:04:26

Atlas 800I A2 双机直连部署DeepSeek-R1-w8a8

一、环境信息 1.1、硬件信息 Atlas 800I A2 * 2 1.2、环境信息操作系统：openEuler 22.03 LTS NPU驱动：Ascend-hdk-910b-npu-driver 24.1.0 linux-aarch64.run NPU固件：Ascend-hdk-910b-npu-firware 7.5.0.3.220.run MindIE镜像&#xff…...

编程日记 2025/6/28 2:05:38

OpenHarmony 入门——ArkUI 跨页面数据同步和页面级UI状态存储LocalStorage小结（二）

文章大纲引言一、在代码逻辑使用LocalStorage二、从UI内部使用LocalStorage三、LocalStorageProp和LocalStorage单向同步四、LocalStorageLink和LocalStorage双向同步五、兄弟组件之间同步状态变量七、将LocalStorage实例从UIAbility共享到一个或多个视图引言前面一篇文章主…...

编程日记 2025/7/25 2:40:44

自我革命！优利德全面进入智能示波器时代

AI重构电子测试新范式春节期间，DeepSeek（深度求索）火遍全网。作为国内首个全面对标GPT-4技术架构的AI大模型，DeepSeek凭借其自主研发的通用大语言模型体系，涵盖了从7B到超千亿参数的完整模型矩阵，在数学推…...

编程日记 2025/7/26 11:02:29

Vue3 实战：基于 mxGraph 与 WebSocket 的动态流程图构建

本文将详细介绍如何在 Vue3 项目中集成 mxGraph 可视化库，并通过 WebSocket 实现画布元素的实时更新。适合有 Vue 基础的前端开发者学习参考。一、技术栈准备 Vue3：采用 Composition API 开发mxGraph：JavaScript 流程图库（版本 …...

编程日记 2025/7/20 12:31:40

Python-金融相关代码讲解

文章目录概要整体架构流程1.代码部分2.逐个讲解1）# -*- coding: utf-8 -*-2）基本库引入3）函数模块4）主程序小结1. 问题拆解思维2. 文件处理三件套3. 字典的妙用：4. 上下文管理器（with open...&#xff09…...

编程日记 2025/7/27 21:54:15

深度解读DeepSeek：开源周（Open Source Week）技术解读

深度解读DeepSeek：开源周（Open Source Week）技术解读深度解读DeepSeek：源码解读 DeepSeek-V3 深度解读DeepSeek：技术原理深度解读DeepSeek：发展历程文章目录一、开源内容概览Day1：FlashMLAD…...

编程日记 2025/7/25 5:05:31

【算法】十大排序算法(含时间复杂度、核心思想）

以下是 **十大经典排序算法** 的时间复杂度、空间复杂度及稳定性总结，适用于面试快速回顾：排序算法对比表排序算法最佳时间复杂度平均时间复杂度最差时间复杂度空间复杂度稳定性核心思想冒泡排序O(n)O(n)O(n)O(1)稳定相邻元素交换，大数沉底…...

编程日记 2025/7/24 10:45:27

TCP传输---计算机网络

TCP结构源端口和目标端口：标识通信的应用程序。序列号：标记发送的数据段的顺序序号。确认号 ( ACK)：确认接收到的数据序号。标志位：控制连接状态，包括 SYN（同步）、ACK（确认&#xf…...

编程日记 2025/7/16 22:04:56

创建vue2项目

1、前往 Node.js 官网下载并安装 Node.js，安装完成后，npm 会随之安装。确认 Node.js 和 npm 是否成功安装，可以在命令行中运行以下命令检查版本： node -v npm -v 运行结果：（如下，表示node和n…...

编程日记 2025/7/25 16:32:41

从投机到可持续发展：ETHDenver 2025 的关键启示！

ETHDenver 2025 重点讨论了 Web3 向可持续发展转型，特别强调了人才培养、去中心化治理和激励机制的紧密结合。Polkadot 一直以来的长期观点也进一步支持了行业从投机转向长期、社区驱动增长的趋势。随着 ETHDenver 2025 会议的的落幕，Polkadot 生态中的贡…...

编程日记 2025/7/17 9:12:41

WPS宏开发手册——使用、工程、模块介绍

目录系列文章前言1、开始1.1、宏编辑器使用步骤1.2、工程1.3、工程系列文章使用、工程、模块介绍 JSA语法第三篇练习练习题，持续更新中… 前言如果你是开发人员，那么wps宏开发对你来说手拿把切。反之还挺吃力，需要嘻嘻&#xf…...

编程日记 2025/7/27 11:47:53

操作系统为ubantu的服务器上部署nginx软件基础步骤总结

今天在这里，我们总结一下ubantu的服务器上部署nginx软件，请按照以下步骤进行安装： 1、更新包列表： 首先更新你系统中的可用软件包列表，以确保你可以安装最新版本。 sudo apt update2、 Ubuntu上更新已安装软件包&…...

编程日记 2025/7/27 10:48:42

批量给 PPT 文档添加或删除保护，批量设置打开密码和只读密码

为了保护保护档的安全，我们经常会给 PPT 文档添加打开密码或者只读密码保护。有些场景下，我们也可能会碰到需要删除 PPT 文档的打开密码或者只读密码的需求。今天就给大家介绍一种方法可以一次性批量给多个 PPT 文档添加打开密码或者只读密码保护&#x…...

编程日记 2025/7/17 1:19:56

Elasticsearch 中的数据分片问题

Elasticsearch 分片机制 Elasticsearch 在存储数据时采用分片（Shard）机制，以提高性能和可扩展性。它索引中的数据被划分成多个主分片（Primary Shard） 和副本分片（Replica Shard）&#xff0c…...

编程日记 2025/7/25 12:08:57

如何在IPhone 16Pro上运行python文件？

在 iPhone 16 Pro 上运行 Python 文件需要借助第三方工具或远程服务，以下是具体实现方法和步骤： 一、本地运行方案（无需越狱） 使用 Python 编程类 App 以下应用可在 App Store 下载，支持直接在 iPhone 上编写并运行 …...

编程日记 2025/7/24 19:04:27

Xinference安装、使用详细笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 Xinference安装、使用详细笔记支持推理引擎安装Xinference启动Xinference关于模型的推理引擎运行 qwen2.5-instruct管理模型官方详细文档：具体使用：对…...

编程日记 2025/7/25 14:57:54

NAT 模式

使用LVS的 NAT 模式实现 3 台RS的轮询访问。IP地址和主机自己规划。 1.节点规划主机角色系统网络IPclientclientredhat 9.5仅主机192.168.180.100/24lvslvsredhat 9.5仅主机 NAT192.168.180.200/24 VIP 192.168.72.8/24 DIPnginxrs1redhat 9.5NAT192.168.226.7/24nginxrs2r…...

编程日记 2025/7/26 11:29:31

【中间件】Rabbit离线部署操作

准备安装包： 1.rabbitmq-server-4.0.7-1.el8.noarch.rpm 2.erlang-26.2.5.4-1.el9.x86_64.rpm 3.socat-1.7.4.1-6.el9.x86_64.rpm 操作步骤： 1.上传将RabbitMQ文件夹上传至服务器的home中 2.先安装erlang服务，顺序执行以下命令设置服务的S…...

编程日记 2025/7/26 9:00:02

thinkphp漏洞再现

Thinkphp5x远程命令执行及getshell 1、开环境 2、使用工具攻击开启工具输入地址，点击漏洞检测存在漏洞之后，选择漏洞，执行命令 3、也可以执行远程命令执行命令 ?sindex/think\app/invokefunction&functioncall_user_func_array&…...

编程日记 2025/7/17 20:28:48

a-date-picker 格式化日期格式 YYYY-MM-DD HH:mm:ss

<template><a-range-pickerv-model:value"dateRange":show-time"{ format: HH:mm:ss, // 时间部分格式defaultValue: [moment(00:00:00, HH:mm:ss), moment(23:59:59, HH:mm:ss)] // 默认时间范围}"format"YYYY-MM-DD HH:mm:ss" // 整体…...

编程日记 2025/7/17 3:44:44

【前端】在＜el-form＞里循环插入list内容

这里的list为日志list【logList】 <el-row v-if"logList && logList.length > 0" style"display: flex; flex-direction: column; align-items: center;"><el-rowv-for"(log, index) in logList" :key"index" s…...

编程日记 2025/7/25 23:00:00

Spring Boot 一个接口实现任意表的 Excel 导入导出

Java的web开发需要excel的导入导出工具，所以需要一定的工具类实现，如果是使用easypoi、Hutool导入导出excel，会非常的损耗内存，因此可以尝试使用easyexcel解决大数据量的数据的导入导出，且可以通过Java8的函数式编程解…...

编程日记 2025/7/24 8:08:21

华为交换相关

端口模式 （1）access：只能属于单个VLAN，一般用于连接计算机端口 （2）trunk：端口允许多个VLAN通过，可以接收和发送多个VLAN报文，默认情况下只有管理VLAN不携带标签信息 &…...

编程日记 2025/7/25 18:56:26

「宇树科技」13家核心零部件供应商梳理！

2025年2月6日，摩根士丹利（Morgan Stanley）发布最新人形机器人研报：Humanoid 100: Mapping the Humanoid Robot Value Chain（人形机器人100：全球人形机器人产业链梳理）。 2025年2月20日&#xf…...

编程日记 2025/7/23 22:39:42

Kafka Snappy 压缩异常分析与解决方案

1. 问题描述在使用 Kafka 进行消息发送时，遇到了以下异常： org.apache.kafka.common.KafkaException: java.lang.UnsatisfiedLinkError: /tmp/snappy-1.1.7-ee0a2284-1d05-4116-9ddc-a0d5d4b3f8cd-libsnappyjava.so: Error loading shared library ld…...

编程日记 2025/7/27 9:34:00

Agent系列——Manus调研

一、Manus核心技术解析（代码实现原理） 1. 多智能体协同架构 class PlanningAgent: # 任务规划代理def decompose_task(self, task):return ["unzip_files", "extract_info", "match_skills"]class ExecutionAgent: # …...

编程日记 2025/7/27 22:48:20

CS实现票据样式效果

效果图代码 <template> <div class"outer"><div class"outer-container"></div></div> </template> <script langts> import { reactive, toRefs, onBeforeMount, onMounted } from vue import { useRouter, …...

编程日记 2025/7/22 20:55:12

Maven 简介及其核心概念

Maven 是 Apache 软件基金会组织维护的一款自动化构建工具，专注服务于 Java 平台的项目构建和依赖管理。官网： Introduction – Maven 下载地址： Download Apache Maven – Maven 1 Introduction Maven, a Yiddish word meaning accumulator of knowledge, began as an …...

编程日记 2025/7/24 19:02:01

阿里开源的免费数据集成工具——DataX

企业里真实的数据流转是什么样子的呢？ 左侧描述了一个企业真实的样子，我们总是需要把数据从一个地方搬到另一个地方，最后就是搬来搬去搬成了一张张解不开的网。右侧则表达了使用DataX为中心实现数据的同步。什么是DataX DataX是一个异构…...

编程日记 2025/7/26 9:38:02

医学图像分割数据集肺分割数据labelme格式6299张2类别

数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图像分辨率：1024x1024 图片数量(jpg文件个数)：6299 标注数量(json文件个数)：6299 标注类别数：2 标注类别名称:["leftl…...

编程日记 2025/7/23 15:18:37