JAVA开发学习-day21

JAVA开发学习-day21

1. 删除表单数据

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

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

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中寻找合适的组件，并实现点击编辑按钮使弹出框可视，且行原有的数据已经被加载至输入框中。

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

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

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

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

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. 新增数据

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

新增

    
    
    
    
    
        
    




    
        
            
        
        
            
        
        
            
        
        
            
        
    
    

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

/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. 查询数据

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

添加按钮和输入框

查询
新增

    
    
    
    
    
        
    

编写后端模糊查询实现

实现前端方法和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 提供了一套完善的解决方案。