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

已于 2023-04-20 16:17:32 修改
阅读量531 收藏 1
点赞数
文章标签： vue.js elementui 前端
于 2023-04-20 09:15:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpblog/article/details/130258374
版权

前置知识

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": "国际新闻"
        }
    ]
}
lpblog
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue使用axios出现options请求方法
12-12
将下面http://www.test.com/day05/jiekou.php地址，改成自己指定位置的域名或ip 1.从一段简易代码说起 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
Vue3+Elementplus+Axios 入门教程详解
majingbobo的博客
10-29 3109
Vue3+Elementplus+Axios 入门教程
《Vue3实战》使用axios获取文件数据以及走马灯Element plus的运用
weixin_58070962的博客
08-07 1013
vue3实战,Elementplus组件走马灯运用
前端开发环境：Vue、Element Plus、Axios
最新发布
hitmengfanchao的博客
06-05 1698
本文介绍了前端开发环境的搭建，包括：Vue项目创建、在Vue项目中引入Element-Plus和Axios。通过一个简单的登录程序说明如何开发基于Vue的前端项目。
Vue ElementUI Axios 前后端案例(day01) 之Vue
lpblog的博客
04-12 727
Vue是一款新进式JavaScript框架，用来动态构建用户界面。。遵循MVVM模式。编码简洁、体积小、运行效率高，适合移动/PC端开发。。本身只关注UI,可以轻松引入vue插件或其它第三库开发项目。。国内大规范使用、生态系统完善。宫网地址：https:/cn.vuejs.org作者：尤雨溪，曾就职Google。
基于elementUI的loading全局加载
和曲而歌
02-08 1543
应用场景 场景：前端再发送Ajax请求，请求后台数据时，不允许点击当前页面其他按钮。 Loading 还可以以服务的方式调用。引入 Loading 服务 1.引入库 代码如下（示例）： import { Loading } from 'element-ui' 2.定义全局loading 代码如下（示例）： /* 全局多彩加载层 */ Vue.prototype.$baseColorfullLoading = (wer) => { const loading = Loading.servic
Ajax+Vue+ElementUI
meini32的博客
08-23 908
文章目录1.Ajax1.1 介绍1.2 Ajax快速入门1.3 案例-用户注册时，检测用户名是否数据库已经存在1.4 Axios1.4.1 Axios快速入门1.4.2 请求别名1.5 JSON1.5.1 Json的基础语法1.5.2 FastJson的使用5.3.2 Fastjson 使用2. Vue2.1 介绍2.2 Vue快速入门2.3 Vue常用指令和生命周期3. ElementUI3.1 快速入门3.2 Element 布局 1.Ajax 1.1 介绍 Ajax（Asynchronous
Vue学习Day9案例
04-30
总结来说，"Vue学习Day9案例"涵盖了使用Vue.js进行Web开发的关键知识点，包括Vue的组件化架构、异步数据处理、以及如何利用`axios`与后端API进行通信。这个案例为初学者提供了一个实际的练习场景，有助于理解和掌握...
Day8 智慧商城 Vue2
08-27
在本课程"Day8 智慧商城 Vue2"中，我们将深入探讨如何使用Vue.js框架构建一个功能完善的智慧商城应用。Vue.js是一款轻量级的前端JavaScript框架，以其易用性、灵活性和高效的更新机制受到开发者们的广泛欢迎。在这个...
vue2-day8.zip
08-10
在“vue2-day8.zip”这个压缩包中，我们可以推测这可能是某个Vue 2教程或学习资源的第八天内容。下面我们将详细讨论Vue 2中的关键知识点。 1. **虚拟DOM**：Vue 2 使用虚拟DOM技术，提高了应用性能。虚拟DOM允许...
Vue笔记，Vue笔记，Vue笔记
07-18
"Day 03"可能涵盖了Vue的生命周期，包括beforeCreate、created、beforeMount、mounted等钩子函数，以及如何在不同阶段进行操作。此外，还会讨论条件渲染（如`v-if`和`v-show`）和列表渲染（如`v-for`）。 "Day 04...
箭头函数详解()=>{}
热门推荐
weixin_30685029的博客
08-06 1万+
摘要：箭头函数有几个使用注意点。 （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，箭头函数继承而来的this指向永远不变。 （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。 （4）不可以使用yield命令，因此箭头函数不能用...
Vue ElementUI Axios 前后端案例(day02) 之 ElementUI
lpblog的博客
04-17 289
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 组件通过基础的 24 分栏，迅速简便地创建布局。 就是这样分了24个格子使用单一分栏创建基础的栅格布局。 通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。分栏之间存在间隔。 Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。支持偏移指定的栏数。 通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。
vue使用axios+element上传文件
爱学习的大雄的博客
12-08 2120
本篇文章只是当作记录，文件的上传只完成了简单的功能，如果有其它需求需要后面自己加上。
Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)
见证自己学习,成长的记录
01-10 6281
本次用element-ui的table组件，简单案例演示下前后端数据交互。Vue引入并使用Element-UI组件库的两种方式这就是一个基本的前端调用后端查询，因为我是后端开发，对前端不是很专业，这是我做个人项目中遇到的一个问题。分享给你，希望对你有用后续的话也会分享vue增删改查基本的代码。
（九）axios前后端跨域数据交互--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-22 5865
本次任务应用axios，实现前后端跨域数据交互。（1）掌握axios的使用方法，包括全局设置；（2）Element中``对话框使用，并实现数据增加；（3）指定记录删除，以及批量数据删除；（4）Element中``对话框使用，并实现指定记录修改。
vue+axios+mysql实现分页查询，条件查询以及批量删除
m0_45101736的博客
07-10 4346
感觉里面的动态代理写的还行
SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据（包括删除多条数据）
RuanFun的博客
09-20 3763
SpringBoot结合Vue+axios框架实现增删改查功能（包括删除多条数据）+网页端实时显示数据库数据（剖析难点：实时更新，数据回显，获取选中行数据，选中多行数据，模糊查询语句）【全网最全】
基于Vue和Element UI实现前后端分离和交互
weixin_74268571的博客
09-25 3341
Element UI简介，如何运用Vue+Element UI搭建前端登陆注册，并通过ssm框架处理后端数据请求，以及axios全局配置和CORS跨域
springboot security+vue 前后端分离 登录接口
05-25
下面是一个简单的 Spring Boot Security + Vue 的前后端分离登录接口示例： 1. 后端实现 首先，我们需要创建一个 Spring Boot 项目，并添加以下依赖： ```xml <!-- Spring Boot Security --> <groupId>org....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值