Vue ElementUI Axios 前后端案例(day03) 之 Axios

news2024/12/22 19:34:21

前置知识

AJAX

前置知识

答疑

问:我们是否可以这么理解,发送url请求就是服务器之间建立连接,tcp三次握手之后 其中与服务器进行数据交换:通过AJAX可以给服务器发送请求 就是连接建立以后 我们发送我们的浏览器数据 就是所谓的发送url请求

newbing:是的,您的理解是正确的。在使用AJAX技术时,发送URL请求就是在服务器之间建立连接,通过TCP三次握手来完成。连接建立后,我们可以通过AJAX向服务器发送请求并交换数据。这就是所谓的发送URL请求。当然,这里我们仅讨论在AJAX技术中的情况,不涉及其他技术。

gpt:部分理解是正确的,但是还需要补充几点:

  1. 发送 URL 请求并不是建立连接的过程,而是向服务器请求数据的过程。建立连接是在发送请求之前进行的,通过 TCP 三次握手确立连接。

  2. 在 AJAX 技术中,我们不仅可以发送 URL 请求,还可以发送其他类型的请求,比如 JSON、XML 等格式的数据。

  3. AJAX 技术实现了异步通信,即客户端可以在不刷新页面的情况下与服务器进行数据交换。这是 AJAX 技术最重要的特点之一。

  4. AJAX 技术并不是一种新的技术,而是一种组合性的技术,包括 HTML、CSS、JavaScript、XMLHttpRequest 等多个技术的结合。因此,在使用 AJAX 技术时,需要掌握多种技术的使用方法。

那么建立连接凭什么在url请求之前?

gpt:在 HTTP 协议中,客户端和服务器之间建立连接的过程是通过 TCP 协议实现的,而不是通过 HTTP 协议实现的。在建立连接之前,客户端和服务器需要进行三次握手,以确保双方能够正常通信。三次握手的过程如下:

  1. 客户端向服务器发送一个 SYN 报文,表示要建立连接,并指定一个初始序列号。

  2. 服务器收到 SYN 报文后,向客户端发送一个 SYN/ACK 报文,表示服务器已经收到客户端的请求,并同意建立连接。

  3. 客户端收到 SYN/ACK 报文后,向服务器发送一个 ACK 报文,表示客户端已经收到服务器的响应,并同意建立连接。

只有在建立了 TCP 连接之后,客户端才能向服务器发送 HTTP 请求,包括 URL 请求。因此,建立连接必须在 URL 请求之前完成。

问:也就是说输入url 先建立tcp 链接 再 发送http请求?
gpt:是的,输入 URL 后,浏览器首先会解析 URL 地址,得到主机名和端口号等信息,然后通过 DNS 解析获取服务器的 IP 地址。接下来,浏览器会通过 TCP 协议与服务器建立连接,建立连接的过程需要进行三次握手。只有在建立了 TCP 连接之后,浏览器才能向服务器发送 HTTP 请求,包括 URL 请求。因此,输入 URL 的过程中,先建立 TCP 连接,再发送 HTTP 请求。

问:那也就是说ajax 只帮助我们收集了客户端的数据并发送到客户端的通信组件,至于服务器通信组件和客户端通信组件如何建立连接和传输数据的过程,我们程序员并不需要关心是吗?

问:那也就是说ajax 只帮助我们收集了客户端的数据并发送到客户端的通信组件,至于服务器通信组件和客户端通信组件如何建立连接和传输数据的过程,我们程序员并不需要关心是吗?

newbing:是的,您说得对。AJAX技术只负责收集客户端数据并将其发送到客户端的通信组件。至于服务器通信组件和客户端通信组件之间如何建立连接和传输数据,这些过程都是由底层协议(如TCP)自动完成的,程序员并不需要关心这些细节。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="msg">

    </div>
    <!-- 引入组件库 -->
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/axios@1.3.5/dist/axios.min.js"></script>
    <!-- 引入这个库之后 相当于axios对象已经被创建 -->
    <script>
        //处理get请求
        //then请求完成之后做的事情 所以可以参数写接收的结果 response和error都是服务器端响应的内容
        //catch请求出错干什么
        axios.get("./data/form-data.json", {
            params: {
                param1: "hello",
                param2: "Axios",
            }
        }).then(function (response) {
            let data = response.data;

            //等号右边的data是指json对象的msg
            document.querySelector("#msg").innerHTML = data.msg;
            // document.getElementById("msg").innerHTML=data.msg;
            console.log(response);
        })
            .catch(function (error) {
                console.log(error);
            });
    </script>
</body>

</html>

相当于 axios.get(“./data/form-data.json”, {
params: {
param1: “hello”,
param2: “Axios”,
}
}) 发送了get请求后面更了两个参数param1和param2
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="栏目名称"> 
                <el-input placeholder="栏目名称" size="small" v-model="searchForm.name"></el-input>
            </el-form-item>
            
            <el-form-item >
                <el-button size="small" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" size="small" @click="add">新增</el-button>
       <!-- 这里:data属性 是用来显示数据的  tabledata则绑定值 在每一行中 prop这是这行数据的键 每一个键对应一个值 name:10001,desc:"新闻",name:"娱乐新闻"-->
        <el-table :data="tableData">
            <el-table-column prop="name" label="栏目名称">
            </el-table-column>
            <el-table-column prop="desc" label="栏目描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <!-- 可以表示项目名称和项目描述下的那一行数据 -->
                <template slot-scope="rowData">
                    <el-button type="primary" size="small" @click="edit(rowData.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(rowData.row.id)">删除</el-button>
                   
                </template>
            </el-table-column>
        </el-table>

        <el-pagination 

            prev-text="上一页"
            next-text="下一页"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="size" 
            :total="total"
            layout="total, sizes, prev, pager, next, jumper" 
            >
        </el-pagination>

        <!-- :visible.sync  表示是否显示对话框 这里面的属性值dialogFormVisible 来控制是否显示对话框-->
        <el-dialog title="新增栏目" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-position="left" label-width="80px" :model="formData">
                <el-form-item label="栏目名称">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="栏目描述">
                    <el-input v-model="formData.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" >
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.zhimg.com/axios@1.3.5/dist/axios.min.js"></script>
    <script>
        let vm=new Vue({
            el: '#app',
            data() {
                return {
                    current: 1,
                    size: 10,
                    total: 35,
                    dialogFormVisible: false,
                    tableData: [],
                    formData :{
                        id: '',
                        name: '',
                        desc: '',
                    },
                    searchForm :{
                        name: '',

                    }
                }
            },
            created() {
                axios.get('./data/column-data.json')
                    .then(response => {
                        this.tableData=response.data;
                    })
                    .catch(err => {
                        console.error(err); 
                    })
            },
            methods: {
                search: function(){
                    
                },
                add: function () {
                    this.dialogFormVisible = true;
                },
                edit: function(row){
                   // console.log(row);
                    this.dialogFormVisible = true;   
                //    this.formData =row;
                    this.formData.name =row.name;
                    this.formData.desc =row.desc;
                },
                save: function(){
                    //1.提交到到后台
                    //2.上对话框隐藏
                    this.dialogFormVisible = false;
                },
                del: function(id){
                    console.log(id);
                    // 这里是this是vm对象 只是elementui将this对象的功能进行继承一样扩展
                    this.$confirm('确认删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            showClose: true,
                            message: '删除成功!',
                            // onClose: function(){
                            //     alert()
                            // }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //一页显示的数据条数发生改变的时候触发
                handleSizeChange: function(){
                    console.log("handleSizeChange")
                },
                //页码发送改变的时候触发
                handleCurrentChange: function(){
                    console.log("handleCurrentChange")
                }
            },

        })
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
表格和表单.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="栏目名称">
                <el-input placeholder="栏目名称" size="small" v-model="searchForm.name"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button size="small" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" size="small" @click="add">新增</el-button>
        <!-- 这里:data属性 是用来显示数据的  tabledata则绑定值 在每一行中 prop这是这行数据的键 每一个键对应一个值 name:10001,desc:"新闻",name:"娱乐新闻"-->
        <el-table :data="tableData">
            <el-table-column prop="name" label="栏目名称">
            </el-table-column>
            <el-table-column prop="desc" label="栏目描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <!-- 可以表示项目名称和项目描述下的那一行数据 -->
                <template slot-scope="rowData">
                    <el-button type="primary" size="small" @click="edit(rowData.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="del(rowData.row.id)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>

        <el-pagination prev-text="上一页" next-text="下一页" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="current" :page-sizes="[5,10, 20, 30, 40]"
            :page-size="size" :total="total" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>

        <!-- :visible.sync  表示是否显示对话框 这里面的属性值dialogFormVisible 来控制是否显示对话框-->
        <el-dialog title="栏目" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-position="left" label-width="80px" :model="formData">
                <el-form-item label="栏目名称">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="栏目描述">
                    <el-input v-model="formData.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="save" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <!-- 引入组件库 -->
    <script src="js/vue.js"></script>
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.zhimg.com/axios@1.3.5/dist/axios.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    current: 1,
                    size: 10,
                    total: 35,
                    dialogFormVisible: false,
                    tableData: [],
                    formData: {
                        id: '',
                        name: '',
                        desc: '',
                    },
                    searchForm: {
                        name: '',

                    }
                }
            },
            created() {
                this.loadData();
            },
            methods: {
                loadData: function () {
                    axios.get('./data/column-data.json', {
                        params: {
                            current: this.current,
                            size: this.size,
                            total: this.total,
                            name: this.searchForm.name
                        }
                    })
                        .then(response => {
                            this.tableData = response.data.record;
                            this.current = response.data.current;
                            this.size = response.data.size;
                            this.total = response.data.total;
                        })
                        .catch(err => {
                            console.error(err);
                        })
                },
                search: function () {
                    //alert();
                    this.loadData();
                    // this.current = 1;
                },
                add: function () {
                    this.dialogFormVisible = true;
                    this.formData.id = '';
                    this.formData.name = '';
                    this.formData.desc = '';

                },
                edit: function (row) {
                    // console.log(row);
                    this.dialogFormVisible = true;
                    this.formData.id = row.id;
                    this.formData.name = row.name;
                    this.formData.desc = row.desc;
                },
                //新增或编辑的逻辑栏目数据
                save: function () {
                    //1.提交到到后台
                    //2.上对话框隐藏
                    this.dialogFormVisible = false;
                    this.$message({
                        type: 'success',

                        message: '新增成功!',
                        // onClose: function(){
                        //     alert()
                        // }
                    });
                    //重新加载后台数据
                    this.loadData();
                },
                del: function (id) {
                    console.log(id);
                    // 这里是this是vm对象 只是elementui将this对象的功能进行继承一样扩展
                    this.$confirm('确认删除, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            showClose: true,
                            message: '删除成功!',
                            // onClose: function(){
                            //     alert()
                            // }            
                        });
                        //重新加载后台数据
                        this.loadData();
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                //一页显示的数据条数发生改变的时候触发
                handleSizeChange: function (pageSize) {
                    // console.log(pageSize);
                    this.size = pageSize;
                    this.loadData();
                },
                //页码发送改变的时候触发
                handleCurrentChange: function (pageNum) {
                    //console.log(pageNum);
                    this.current = pageNum;
                    this.loadData();
                }
            },

        })
    </script>
</body>

</html>

column.json

{
    "current": 1,
    "size": 5,
    "total": 38,
    "record": [
        {
            "id": "1001",
            "name": "新闻",
            "desc": "娱乐新闻"
        },
        {
            "id": "1002",
            "name": "新闻",
            "desc": "娱乐新闻"
        },
        {
            "id": "1003",
            "name": "国际",
            "desc": "国际新闻"
        }
    ]
}

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

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

相关文章

家用洗地机有什么优缺点?入门级家用洗地机

家用清洁产品近几年发展迅猛&#xff0c;扫拖机器人、洗地机等热门品类更是在家电产品销量普遍下滑的趋势下&#xff0c;仍然保持着大幅增长。越来越多的消费者开始关注清洁类产品&#xff0c;但扫拖机器人和吸尘器的清洁效果有限&#xff0c;洗地机会在功能上更加的完善&#…

2023年全国职业院校技能大赛软件测试赛题第1套

2023年全国职业院校技能大赛 软件测试赛题第1套 赛项名称&#xff1a; 软件测试 英文名称&#xff1a; Software Testing 赛项编号&#xff1a; GZ034 归属产业&#xff1a; 电子与信息大类 …

通过适当的异常处理进行快速调试

编写良好的代码和异常处理 作为开发人员&#xff0c;开发中最令人恼火的部分通常是调试。与我共事过的大多数程序员都会赞同这种观点。通常&#xff0c;看到异常的第一反应是烦恼和沮丧的混合。易于调试的异常通常会在调试后的几分钟内产生根本原因。最让我烦恼的是那些在系统…

vue实现多布局模式

1、目标效果 源码地址&#xff1a;multipal-layout-demo: vue2实现多布局暗黑模式 默认布局&#xff1a;头部宽度100%&#xff0c;侧边栏、内容区 顶部布局&#xff1a;头部宽度100%&#xff0c;内容区 侧边栏布局&#xff1a;侧边栏高度100%&#xff0c;头部、内容区 2、原理…

python+vue课堂教学效果实时评价系统

系统权限按管理员&#xff0c;教师和学生这三类涉及用户划分。 (a) 管理员&#xff1b;管理员使用本系统涉到的功能主要有&#xff1a;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;教学视频管理&#xff0c;教学课件管理&#xff0c;类型管理&#xff0c;视频…

ArcGIS Pro导航工具

主要导航工具为浏览工具 、屏幕导航器 、书签 、转到XY工具 。 其它还包括链接视图、地图比例&#xff08;2D&#xff09;、场景高度&#xff08;3D&#xff09;、暂停并刷新绘制、照相机属性、在3D模式下导航、键盘快捷键等。 1 主要导航工具 地图和场景的默认工具为浏览工具…

【python视图3】networkx图操作示例

一、说明 根据定义&#xff0c;图是节点&#xff08;顶点&#xff09;以及已识别的节点对&#xff08;称为边、链接等&#xff09;的集合。在 NetworkX 中&#xff0c;节点可以是任何可哈希对象&#xff0c;例如文本字符串、图像、XML 对象、另一个图形、自定义节点对象等。 如…

如何区分高压和低压电阻接地系统

电阻接地系统或电阻接地中性线系统是通过一个或多个电阻在中性线和大地之间有意连接的系统。在这些系统中&#xff0c;接地故障期间造成的损坏远小于在牢固接地系统中接地故障期间造成的损坏&#xff0c;并且设备上的机械应力也大大降低。 电阻通常具有比接近接地点的系统电抗…

WIN10-22H2专业版_电脑维修人员专用装机系统镜像【04.20更新】

WIN10-22H2专业版是由站长亲自封装的电脑维修人员专用装机系统镜像&#xff0c;系统干净无广告&#xff0c;稳定长效不卡顿&#xff0c;适合电脑维修店用来维修电脑重装系统。此版本是WIN10系统里非常稳定的正式版本之一&#xff0c;适合在维修电脑时重装系统或者大批量装机使用…

2023-spring 1. 补给马车

&#x1f34e;道阻且长&#xff0c;行则将至。&#x1f353; &#x1f33b;算法&#xff0c;不如说它是一种思考方式&#x1f340; 算法专栏&#xff1a; &#x1f449;&#x1f3fb;123 一、&#x1f331;2023-spring 1. 补给马车 题目描述&#xff1a;远征队即将开启未知的冒…

防晒服饰赛道持续加速扩容 未来行业集中度有望进一步提升

一、防晒服饰行业概述 国内防晒服饰市场主要包括具有防晒功能的衣服、伞具、帽子、墨镜、口罩、面罩、披肩、袖套及手套等产品。相比较防晒护肤品需要定时补涂、具有过敏风险、防晒效果欠佳以及消耗量大的缺陷&#xff0c;防晒服饰具有覆盖面广、使用方便、防晒效果好、对身体…

ChatGPT: 如何利用OpenAI的GPT-3.5构建智能对话助手

ChatGPT: 如何利用OpenAI的GPT-3.5构建智能对话助手 GPT-3.5&#xff1a;OpenAI的语言模型在自然语言处理领域的重要地位和应用潜力 GPT-3.5是OpenAI开发的一种强大的语言模型&#xff0c;具有广泛的应用潜力和在自然语言处理领域的重要地位。作为OpenAI最新一代的语言模型&…

初识C++之C++11

目录 一、C11的概念 二、统一的列表初始化 1.{ }初始化 2.initializer_list 三、decltype 四、lambda表达式 1. lambda表达式的出现原因 2. lambda表达式的使用 2.1 捕捉列表 2.2 参数列表 2.3 mutable 2.4 返回值类型 2.5 函数体 2.6 使用方式 3. lambda表达式…

c++积累11-强制类型转换运算符(static_cast/reinterpret_cast/const_cast/dynamic_cast)

1、背景 将类型名作为强制类型转换运算符的做法是C语言的老式做法&#xff0c;C为保持兼容而予以保留。强制类型转换是有一定风险的&#xff0c;C引入新的转换机制&#xff0c;主要为了客服C语言转换的三个缺点&#xff1b; 1、没有从形式上体现转换功能和风险的不同。 例如&a…

LeetCode特训 --- Week2 (主打滑动窗口 + 字符串匹配题目)

目录 滑动窗口原理 真懂了滑动窗口? 滑动 字符串细节 开干切题 滑动窗口原理 滑动窗口&#xff1a;维护一前一后两根指针, 或者说一左一右两个指针。更主要的是维护左右指针中的区间. 同时不断的向前滑动&#xff0c;直到整个序列滑动结束&#xff0c;前指针走到序列末尾…

总结:Grafana Mimir调用

一、背景 Prometheus单实例&#xff0c;可用性低&#xff0c;可靠性低&#xff0c;不能存储更多数据。 解决业务问题 如&#xff1a;当前QKE是一个集群一个项目一个prometheus实例&#xff0c;那么当我一个应用分多个集群部署的时候&#xff0c;查询数据时就得从三个promethe…

streamlit (python构建web可视化框架)笔记

文章目录 一、安装使用streamlit二、streamlit使用1.展示和数据样式2.dataframe()生成交互表和table()方法生成静态表3.绘制折线图4.绘制地图5.一些组件slider()滑动条 checkbox()确认框 selectbox()选择器6.侧边栏7.布局分列8.多页 三、Steamlit可视化简单应用--冒泡排序可视化…

java获取当前系统时间

在Java中&#xff0c;可以使用以下几种方法获取当前系统时间&#xff1a; 方法1&#xff1a;使用java.util.Date类 java import java.util.Date; public class Main { public static void main(String[] args) { Date date new Date(); System.out.println("当前时间&…

短视频app开发:如何设计个性化推荐算法

短视频app的迅速崛起已经成为了移动互联网领域中的一股热潮。然而&#xff0c;如何设计个性化推荐算法已经成为了这个领域中的一个核心问题。在本文中&#xff0c;我们将深入探讨如何为短视频app开发设计个性化推荐算法&#xff0c;以及如何使用短视频源码来实现这一目标。 简…

类间关系和内部类和数组

Final关键词 定义Pepole类&#xff0c;运用了final修饰方法eat()&#xff0c;该方法不能被改写&#xff0c;但可以随类进行继承。 用final修饰的类&#xff0c;不能有子类。 内部成员类定义方式 外部类.成员类 对象名 new 外部类&#xff08;&#xff09;.new 内部类。 局部…