JAVA开发学习-day21

news2024/11/16 5:38:56

JAVA开发学习-day21

1. 删除表单数据

根据ElementUI的官方组件指南，为表单每列的数据添加删除按钮

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
    <el-table-column label="操作">
        <template #default="scope">
<el-button type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

在script中编写del方法，使用户点击按钮时向后端发送delete请求，从而删除该行数据，删除后再刷新表单数据，完成删除操作

<script setup>
const del = function (index, row) {
    ElMessageBox.confirm(
        '确认删除该行数据吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //提交数据
            easyapi.del('/api/staff', row.id)
            //刷新表单数据
            tableData.value.splice(index, 1)
            //提示删除成功
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>

api/index.js

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})},
    del:(url,id)=>{
        //url /api/staff
        //id  12
        //url = /api/staff/12
        //url = http://localhost:8080/staff/12
        url = url + '/' + id;
        return http({url:url,method:'delete'})
    }
};

export default API;

此时点击删除即可实现删除数据

2. 编辑数据

为每行数据添加编辑按钮，我们想要点击编辑时弹出一个编辑信息的弹出框，ElementUI中寻找合适的组件，并实现点击编辑按钮使弹出框可视，且行原有的数据已经被加载至输入框中。

添加新增按钮和编辑弹出框

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
    <el-table-column label="操作">
        <template #default="scope">
<el-button type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
<el-button type="success" @click="edit(scope.$index, scope.row)">编辑</el-button>
        </template>
    </el-table-column>
</el-table>


<!--start 新增信息的弹出框 -->
<el-dialog v-model="addWinVisible" title="新增员工数据" width="500">
    <el-form :model="addObject">
        <el-form-item label="编号" :label-width="80">
            <el-input v-model="addObject.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="80">
            <el-input v-model="addObject.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="薪资" :label-width="80">
            <el-input v-model="addObject.salary" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名" :label-width="80">
            <el-input v-model="addObject.username" autocomplete="off" />
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="closeAddWin">取消</el-button>
            <el-button type="primary" @click="addSave">
             确认
            </el-button>
        </div>
    </template>
</el-dialog>
<!--end 新增信息的弹出框 -->

在script中实现edit方法，使得点击编辑按钮弹出框可以出现

<script setup>
import { ref, onMounted } from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkNode } from 'element-plus/es/components/cascader-panel/src/utils.mjs';
//定义绑定的数据
const tableData = ref([]);
//控制新增信息窗口是否显示
const editWinVisible = ref(false);
//编辑数据绑定对象
const editObject = ref({});

//显示编辑窗口
const openEditWin = function () {
    editWinVisible.value = true;
}
const closeEditWin = function () {
    editWinVisible.value = false;
}

//点击编辑按钮，执行的方法
const edit = function (index, row) {
    //绑定要修改的数据
    editObject.value = row;
    editObject.value.id = row.id;
    editObject.value.code = row.code;
    editObject.value.name = row.name;
    editObject.value.salary = row.salary;
    editObject.value.username = row.username;
    editIndex = index;
    console.log(editObject.value)
    //打开对话框
    openEditWin();
}

</script>

此时点击编辑按钮，可以看到弹出框弹出和输入框中的数据

在这里插入图片描述

编辑点击弹出框中的取消和确认按钮所触发的方法，使点击取消按钮时，隐藏弹出框；点击确认按钮时，向后端发送put请求来修改数据，并刷新表单，给出成功提示，并隐藏弹出框

<script setup>
import { ref, onMounted } from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkNode } from 'element-plus/es/components/cascader-panel/src/utils.mjs';
//定义绑定的数据
const tableData = ref([]);
//控制新增信息窗口是否显示
const editWinVisible = ref(false);
//编辑数据绑定对象
const editObject = ref({});
//记录编辑数据的下标
var editIndex = -1;

//显示编辑窗口
const openEditWin = function () {
    editWinVisible.value = true;
}
const closeEditWin = function () {
    editWinVisible.value = false;
}

//点击编辑按钮，执行的方法
const edit = function (index, row) {
    //绑定要修改的数据
    editObject.value = row;
    editObject.value.id = row.id;
    editObject.value.code = row.code;
    editObject.value.name = row.name;
    editObject.value.salary = row.salary;
    editObject.value.username = row.username;
    editIndex = index;
    console.log(editObject.value)
    //打开对话框
    openEditWin();
}
//保存修改编辑数据
const editSave = async () => {
    //发送请求
    let result = await easyapi.putJson('/api/staff', editObject.value)
    //刷新表单
    tableData.value[editIndex] = result.data;
    //提示
    ElMessage({
        type: 'success',
        message: '编辑数据成功',
    })
    //关闭窗口
    closeEditWin()
}

</script>

api/index.js

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})},
    del:(url,id)=>{
        //url /api/staff
        //id  12
        //url = /api/staff/12
        //url = http://localhost:8080/staff/12
        url = url + '/' + id;
        return http({url:url,method:'delete'})
    },
    putForm:function(url,params){
        return http({url:url,method:'put', params: params})
    },
    putJson:function(url,data){
        return http({url:url,method:'put',data:data})
    }
};

export default API;

完成后，即可成功修改数据

3. 新增数据

在表单上方添加新增按钮，与编辑类似，点击新增按钮时会弹出一个新增的弹出框

<el-button type="primary" @click="openAddWin">新增</el-button>
<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
    <el-table-column label="操作">
        <template #default="scope">
<el-button type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
<el-button type="success" @click="edit(scope.$index, scope.row)">编辑</el-button>
        </template>
    </el-table-column>
</el-table>

<!--start 新增信息的弹出框 -->
<el-dialog v-model="addWinVisible" title="新增员工数据" width="500">
    <el-form :model="addObject">
        <el-form-item label="编号" :label-width="80">
            <el-input v-model="addObject.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="80">
            <el-input v-model="addObject.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="薪资" :label-width="80">
            <el-input v-model="addObject.salary" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户名" :label-width="80">
            <el-input v-model="addObject.username" autocomplete="off" />
        </el-form-item>
    </el-form>
    <template #footer>
<div class="dialog-footer">
    <el-button @click="closeAddWin">取消</el-button>
    <el-button type="primary" @click="addSave">
        确认
        </el-button>
        </div>
    </template>
</el-dialog>
<!--end 新增信息的弹出框 -->

当点击弹出框的确认按钮时便将绑定对象的数据通过post的方式发送到后端，并将返回的数据通过push方法插入到表单尾部中

<script setup>
import { ref, onMounted } from 'vue'
import easyapi from '../api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkNode } from 'element-plus/es/components/cascader-panel/src/utils.mjs';
//定义绑定的数据
const tableData = ref([]);
//控制新增信息窗口是否显示
const addWinVisible = ref(false);
//新增数据绑定对象
const addObject = ref({});

//显示新增窗口
const openAddWin = function () {
    //新增数据输入框中不需要初始数据
    addObject.value = {}
    addWinVisible.value = true;
}
const closeAddWin = function () {
    addWinVisible.value = false;
}

const addSave = async function () {
    //保存新增的数据 addObject
    //发送请求
    let result = await easyapi.postJson('/api/staff', addObject.value);
    tableData.value.push(result.data);
    //刷新表单

    //提示新增成功
    ElMessage({
        type: 'success',
        message: '新增数据成功',
    })
    //关闭窗口
    closeAddWin()

}
</script>

/api/index.js

import http from '../util/http.js';

const API={
    get:(url)=>{return http({url:url,method:'get'})},
    del:(url,id)=>{
        url = url + '/' + id;
        return http({url:url,method:'delete'})
    },
    postForm:function(url,params){
        return http({url:url,method:'post', params: params})
    },
    postJson:function(url,data){
        return http({url:url,method:'post',data:data})
    },
    putForm:function(url,params){
        return http({url:url,method:'put', params: params})
    },
    putJson:function(url,data){
        return http({url:url,method:'put',data:data})
    }
};

export default API;

完成后，就可以新增数据了

4. 查询数据

在表单的上面添加输入框和查询按钮，一个输入框输入员工编号，一个输入框输入姓名，当点击查询时通过这两项对数据进行模糊查询，将返回的值赋予表单，就实现了查询

添加按钮和输入框

<el-input v-model="checkObj.code" style="width: 150px" placeholder="请输入查询的编号" />
<el-input v-model="checkObj.name" style="width: 150px" placeholder="请输入查询的姓名" />
<el-button type="primary" @click="checkData">查询</el-button>
<el-button type="primary" @click="openAddWin">新增</el-button>
<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="code" label="编号" width="180" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="salary" label="薪资" />
    <el-table-column label="操作">
        <template #default="scope">
<el-button type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
<el-button type="success" @click="edit(scope.$index, scope.row)">编辑</el-button>
        </template>
    </el-table-column>
</el-table>

编写后端模糊查询实现

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

实现前端方法和api
在这里插入图片描述

在这里插入图片描述

5. JSON Form-data

5.1 JSON

  • 定义：JSON (JavaScript Object Notation)是一种轻量级的数据交换格式，其设计初衷是使之易于阅读和编写，并且便于机器解析和生成。
  • 内容类型：使用 JSON 格式发送数据时，内容类型（Content-Type）应设定为application/json。

5.2 Form-data

  • 定义：Form-data，或称表单数据，是一种编码方式，在 HTML 表单与服务器交互时常用，尤其兼容文件上传操作。
  • 内容类型：发送 Form-data 格式时，内容类型应设定为multipart/form-data。

5.3 数据交换的深层对比

虽然从宏观的角度看，JSON 和 Form-data 的主要区别在于内容类型和数据格式，但在实际的使用场景中，两者的差异会影响它们的适用性。

应用场景

JSON

  • 复杂数据结构：JSON 非常适合传送具有复合结构的数据，例如列表或嵌套对象。
  • API 交互：在构建 RESTful API 时，JSON 几乎成为了标准选择，原因在于它的可读性和结构化特征使得开发者更容易创建和维护 API。

Form-data

  • 文件上传：Form-data 是处理文件上传的首选方法，尤其在 Web 表单中，需要同时提交文件和数据时，Form-data 展现出了其独特优势。
  • 传统 Web 表单：许多基于 HTML 表单的传统 Web 应用倾向于使用 Form-data 方式提交数据，因为这种方式不需要额外的 JavaScript 代码即可直接与表单元素交互。

性能考量

在讨论 JSON 与 Form-data 之间的优劣时，性能因素经常被提及。一般来说，JSON 因为其纯文本特性，在处理简单数据结构时性能较好。

而 Form-data 由于需要处理复杂的编码和分隔，可能在发送大量小型数据时效率稍低，但这种差异在现代网络技术下通常是可以忽略的。

选择 JSON 还是 Form-data，很大程度上取决于你的具体需求：

  • 如果你需要传送简单或结构化的数据给服务器，而不涉及文件上传，那么 JSON 可能是更优的选择。
  • 如果你的场景中需要上传文件，尤其是在 Web 表单中，Form-data 则无疑更为合适。
  • 对于需要同时处理文件和数据的情况，Form-data 提供了一套完善的解决方案。

，Form-data 展现出了其独特优势。

  • 传统 Web 表单：许多基于 HTML 表单的传统 Web 应用倾向于使用 Form-data 方式提交数据，因为这种方式不需要额外的 JavaScript 代码即可直接与表单元素交互。

性能考量

在讨论 JSON 与 Form-data 之间的优劣时，性能因素经常被提及。一般来说，JSON 因为其纯文本特性，在处理简单数据结构时性能较好。

而 Form-data 由于需要处理复杂的编码和分隔，可能在发送大量小型数据时效率稍低，但这种差异在现代网络技术下通常是可以忽略的。

选择 JSON 还是 Form-data，很大程度上取决于你的具体需求：

  • 如果你需要传送简单或结构化的数据给服务器，而不涉及文件上传，那么 JSON 可能是更优的选择。
  • 如果你的场景中需要上传文件，尤其是在 Web 表单中，Form-data 则无疑更为合适。
  • 对于需要同时处理文件和数据的情况，Form-data 提供了一套完善的解决方案。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

那些你应该掌握的linux命令

那些你应该掌握的linux命令

一、路径授权 要给 a 用户 b 路径的所有操作权限,可以使用以下命令&#xff1a; sudo chown -R a:a /b sudo chmod -R 770 /b1.sudo chown -R a:a /b chown 命令用于更改文件或目录的所有者和所属组。-R 选项表示递归地应用于目录及其内部的所有文件和子目录。a:a 表示将所有…
阅读更多...
24/8/8算法笔记 条件筛选决策树根节点

24/8/8算法笔记 条件筛选决策树根节点

筛选决策树的根节点是建立决策树过程中的一个重要步骤&#xff0c;主要原因包括&#xff1a; 减少计算量&#xff1a;选择合适的根节点可以减少树的深度&#xff0c;从而减少模型训练和预测时的计算量。 提高模型性能&#xff1a;选择最佳分裂点可以最大化模型的性能&#xff…
阅读更多...
更换低版本jdk8后的idea页面怎么换回来

更换低版本jdk8后的idea页面怎么换回来

一、问题阐述 一开始我的idea是下面的界面&#xff1a; 这个页面美观&#xff0c;简洁。后来因为工作需要&#xff0c;从jdk17切换到jdk8的时候&#xff0c;页面变了 这个没有前面的好看&#xff0c;怎么回事&#xff1f; 二、解决方案 1、file——setting 2、搜索ui——New UI…
阅读更多...
全新博客X主题/简约WordPress主题模板/主题巴巴/免授权版源码+自适应设计

全新博客X主题/简约WordPress主题模板/主题巴巴/免授权版源码+自适应设计

源码简介&#xff1a; 博客X这款超酷的Wordpress主题&#xff0c;是主题巴巴团队打造的设计杰作。想象一下&#xff0c;你的博客首页能展示那些炫酷的幻灯片置顶文章、还有各种精心策划的专题列表&#xff0c;这些内容模块的设计简直吸睛了&#xff0c;能让来访的用户眼前一亮…
阅读更多...
JAVA集中学习第四周学习记录(三)

JAVA集中学习第四周学习记录(三)

系列文章目录 第一章 JAVA集中学习第一周学习记录(一) 第二章 JAVA集中学习第一周项目实践 第三章 JAVA集中学习第一周学习记录(二) 第四章 JAVA集中学习第一周课后习题 第五章 JAVA集中学习第二周学习记录(一) 第六章 JAVA集中学习第二周项目实践 第七章 JAVA集中学习第二周学…
阅读更多...
SSL VPN综合实验

SSL VPN综合实验

一、实验目的及拓扑 实验目的&#xff1a;构建企业内网和企业分支站点&#xff0c;其中企业内网通过防火墙实现双机热备并且与企业分支固定站点实现站点到站点IPsec VPN互联&#xff0c;与企业分支移动站点实现SSL VPN互联&#xff0c;企业内网各主机可以实现对分支站点内网的…
阅读更多...
可观测性(observability)

可观测性(observability)

一、定义 wiki百科的定义 In software engineering, more specifically in distributed computing, observability is the ability to collect data about programs’ execution, modules’ internal states, and the communication among components.[1][2] To improve obser…
阅读更多...
8月最新ChatGPT系统源码SparkAi系统，支持AI换脸+智能体GPTs应用+AI绘画+AI视频+文档分析

8月最新ChatGPT系统源码SparkAi系统，支持AI换脸+智能体GPTs应用+AI绘画+AI视频+文档分析

一、文章序言 人工智能技术正在快速发展&#xff0c;AI语言模型、AI绘画和AI视频已经在多个领域得到了广泛应用。这些技术不仅在科技创新方面表现出色&#xff0c;还在艺术创作、内容生产和商业应用中展示出巨大的潜力。 SparkAi创作系统是一款基于ChatGPT和Midjourney开发的…
阅读更多...
矩阵乘法的结合律的证明

矩阵乘法的结合律的证明

矩阵的乘法在矩阵运算中相较于加法更加复杂&#xff0c;对矩阵乘法的运算律的证明也更复杂&#xff0c;但其中对结合律的证明是最难的&#xff0c;因为它涉及到3个矩阵的相乘。本证明不同于其他一些比较粗浅的用方阵去证明或者用三个含很少元素的简单矩阵做一个例证&#xff0c…
阅读更多...
App渗透测试（工具使用）

App渗透测试（工具使用）

Python工具 在文件中打开终端&#xff0c;执行如下命令进行装库。 python3 -m pip install -r txt文件 执行如下命令扫描 python3 .py -i apk文件
阅读更多...
Docker最佳实践（七）：安装MinIO文件服务器

Docker最佳实践（七）：安装MinIO文件服务器

大家好&#xff0c;欢迎各位工友。 Minio是一个开源免费的高性能对象存储服务器&#xff0c;专为大规模数据集和高并发访问而设计。它具有出色的读写性能和低延迟&#xff0c;可以满足对数据速度和效率要求较高的应用场景。本篇呢我们就来演示一下如何在Docker中搭建Minio容器&…
阅读更多...
MySQL数据库基础：约束

MySQL数据库基础：约束

&#x1f48e;我的主页&#xff1a;MySQL &#x1f48e;1. 约束的概述 约束是作用于表中字段的规则&#xff0c;用于限制存储在表中的数据 目的&#xff1a;保证数据库中数据的正确性&#xff0c;有效性和完整性 &#x1f48e;2. 约束的分类 &#x1f48e;2.1 非空约束 非空…
阅读更多...
linux之top

linux之top

要在 Linux 系统上查看 CPU 使用情况&#xff0c;可以使用top命令&#xff1a; 根据您提供的 top 命令的输出&#xff0c;我们可以看到系统的一些基本信息和当前运行的进程。下面是输出的主要部分的解释&#xff1a; 仅供参考&#xff1a; 系统概述: 时间&#xff1a;当前时间…
阅读更多...
MATLAB(R和C++)大肠杆菌合成生物机械数学模型

MATLAB(R和C++)大肠杆菌合成生物机械数学模型

&#x1f3af;要点 &#x1f3af;合成大肠杆菌生物学网络 | &#x1f3af;量化基因型-表型图 | &#x1f3af;化学诱导离散浓度下培养细菌评估整个浓度范围内的表达模式 | &#x1f3af;定性更改合成模型拓扑结构、定量更改相互作用的强度 | &#x1f3af;开发机械数学模型 | …
阅读更多...
新增题目同步到ES

新增题目同步到ES

文章目录 &#x1f31e; Sun Frame&#xff1a;SpringBoot 的轻量级开发框架&#xff08;个人开源项目推荐&#xff09;&#x1f31f; 亮点功能&#x1f4e6; spring cloud模块概览常用工具 &#x1f517; 更多信息1.创建ES的索引和映射1.创建索引2.创建映射 2.sun-club-infra …
阅读更多...
C语言 ——— 学习、使用memmove函数 并模拟实现

C语言 ——— 学习、使用memmove函数 并模拟实现

目录 memmvoe函数的功能 学习memmove函数​编辑 模拟实现memmove函数 memmvoe函数的功能 memmvoe函数的功能类似于memcpy函数&#xff0c;都是内存拷贝&#xff0c;唯一的区别是memcpy函数不能成功拷贝原数据&#xff0c;而memmvoe函数可以 举例来说&#xff1a; [1, 2, 3…
阅读更多...
【Material-UI】Checkbox 组件自定义详解

【Material-UI】Checkbox 组件自定义详解

文章目录 一、Checkbox 组件概述1. 组件介绍2. 基本用法 二、Checkbox 组件的基本自定义1. 更改复选框的颜色2. 调整复选框的大小 三、Checkbox 组件的高级自定义1. 自定义图标2. 自定义复选框的边框和形状 四、使用主题进行全局自定义1. 定义全局主题2. 动态主题切换 五、总结…
阅读更多...
springboot整合springmvc使用外置的Servlet容器

springboot整合springmvc使用外置的Servlet容器

目录 1. 创建2. 配置3. 配置Tomcat4. 心得 1. 创建 2. 配置 首先创建两个文件夹 配置&#xff1a; 3. 配置Tomcat 右上角的按钮 添加 保证这几个不冲突&#xff0c;保证你的tomcat的文件没问题&#xff01;&#xff01;&#xff01; 点击部署 选择第二个war exploded…
阅读更多...
零基础5分钟上手谷歌云GCP核心云开发技能 - 搭建和维护高可用数据库集群

零基础5分钟上手谷歌云GCP核心云开发技能 - 搭建和维护高可用数据库集群

简介&#xff1a; 欢迎来到小李哥全新谷歌云GCP云计算知识学习系列&#xff0c;适用于任何无云计算或者谷歌云技术背景的开发者&#xff0c;让大家零基础5分钟通过这篇文章就能完全学会谷歌云一个经典的服务开发架构方案。 我将每天介绍一个基于全球三大云计算平台&#xff0…
阅读更多...
GPT解逻辑数学题之8个8变1000的故事

GPT解逻辑数学题之8个8变1000的故事

目录 初试正解 我&#xff1a; GPT4&#xff1a; 再问思索 我&#xff1a; GPT4&#xff1a; 提醒错误 我&#xff1a; GPT4&#xff1a; 给出正解提示 我&#xff1a; GPT4&#xff1a; 不愿放弃 我&#xff1a; GPT4&#xff1a; 再次尝试 我&#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023