AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用

2024-06-24 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用

概述

当使用 Vue.js 结合 Axios 发送异步请求进行前后端交互时，通常会按照以下步骤进行：

1. 安装 Axios

首先，在你的 Vue 项目中安装 Axios。可以使用 npm 或者 yarn 安装：

npm install axios
# 或者
yarn add axios

2. 在 Vue 组件中使用 Axios

假设你有一个 Vue 组件，想要在该组件中发送异步请求。以下是一个简单的示例：

<template>
  <div>
    <h2>Users List</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('Error fetching users', error);
        });
    }
  }
}
</script>

解释：

  • 模板部分 (<template>): 在模板中，我们简单地列出了用户列表。
  • 脚本部分 (<script>):
  • 导入 Axios: 使用 import axios from 'axios'; 导入 Axios 库。
  • data(): 在 Vue 实例中，我们定义了 users 数组，用来存储从后端获取的用户数据。
  • mounted() 钩子: 在组件挂载后立即调用 fetchUsers() 方法，用来获取用户数据。
  • fetchUsers() 方法: 使用 Axios 发送 GET 请求到 https://jsonplaceholder.typicode.com/users，这是一个模拟的 JSON 数据服务。
  • .then()：当请求成功时，将返回的用户数据 response.data 赋值给 this.users。
  • .catch()：处理请求失败的情况，输出错误信息到控制台。

注意事项：

  • 在实际开发中，你需要根据你的后端 API 的实际地址来替换 axios.get() 中的 URL。
  • 你可以在 Axios 请求中添加更多配置，例如请求头、请求参数等。
  • 在实际应用中，可能需要处理加载状态、错误处理等更复杂的场景。

这种方式利用 Axios 结合 Vue.js 进行异步请求可以使前端与后端进行数据交互，实现动态数据展示和更新。

前后端调用

数据层开发的代码都已经书写完毕

表现层也书写完毕

接下来我们要书写的是功能

及把数据返回到页面的指定部分

或者是在前端使用功能 然后进行操作

正常情况我们是应该把前端页面放在前端服务器上面的

我们这边直接用tomcat

我们在后端完成全栈开发

首先会拿到前端页面 我们需要做的是补全script标签里的代码

如果单体工程的页面放置在resource下

出现了bug

用maven的clean功能

除了问题先clean重新编译一下

我们把前端页面引入

axios发送异步请求

static文件夹

查看页面

页面结构

<!DOCTYPE html>
 
<html xmlns: xmlns:>
 
<head>
 
    <!-- 页面 -->
 
    <meta charset="utf-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <title>大数据实验室人员管理</title>
 
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
 
    <!-- 引入样式 -->
 
    <link rel="stylesheet" href="../plugins/elementui/index.css">
 
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
 
    <link rel="stylesheet" href="../css/style.css">
 
</head>
 
 
<body class="hold-transition">
 
<div id="app">
 
    <div class="content-header">
 
        <!--logo-->
        <img src='../img/logo.png' style="align-content: center" alt="Centered Image">
 
        <!--大标题-->
        <h1 style="text-align:center;font-size: 50px;color: #3a8ee6;">大数据应用与开发实验室人员管理系统</h1>
 
 
    </div>
 
    <div class="app-container">
 
        <div class="box">
 
            <div class="filter-container">
                <el-input placeholder="人员类别" v-model="pagination.type" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-input placeholder="人员名称" v-model="pagination.name" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-input placeholder="人员描述" v-model="pagination.description" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="getAll()" class="dalfBut">查询</el-button>
                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
            </div>
 
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
 
                <el-table-column type="index" align="center" label="序号"></el-table-column>
 
                <el-table-column prop="type" label="人员类别" align="center"></el-table-column>
 
                <el-table-column prop="name" label="人员名称" align="center"></el-table-column>
 
                <el-table-column prop="description" label="描述" align="center"></el-table-column>
 
                <el-table-column label="操作" align="center">
 
                    <template slot-scope="scope">
 
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
 
                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
 
                    </template>
 
                </el-table-column>
 
            </el-table>
 
            <!--分页组件-->
            <div class="pagination-container">
 
                <el-pagination
                        class="pagiantion"
 
                        @current-change="handleCurrentChange"
 
                        :current-page="pagination.currentPage"
 
                        :page-size="pagination.pageSize"
 
                        layout="total, prev, pager, next, jumper"
 
                        :total="pagination.total">
 
                </el-pagination>
 
            </div>
 
            <!-- 新增标签弹层 -->
 
            <div class="add-form">
 
                <el-dialog title="新增人员" :visible.sync="dialogFormVisible">
 
                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                             label-width="100px">
 
                        <el-row>
 
                            <el-col :span="12">
 
                                <el-form-item label="人员类别" prop="type">
 
                                    <el-input v-model="formData.type"/>
 
                                </el-form-item>
 
                            </el-col>
 
                            <el-col :span="12">
 
                                <el-form-item label="人员名称" prop="name">
 
                                    <el-input v-model="formData.name"/>
 
                                </el-form-item>
 
                            </el-col>
 
                        </el-row>
 
 
                        <el-row>
 
                            <el-col :span="24">
 
                                <el-form-item label="描述">
 
                                    <el-input v-model="formData.description" type="textarea"></el-input>
 
                                </el-form-item>
 
                            </el-col>
 
                        </el-row>
 
                    </el-form>
 
                    <div slot="footer" class="dialog-footer">
 
                        <el-button @click="cancel()">取消</el-button>
 
                        <el-button type="primary" @click="handleAdd()">确定</el-button>
 
                    </div>
 
                </el-dialog>
 
            </div>
 
            <!-- 编辑标签弹层 -->
 
            <div class="add-form">
 
                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">
 
                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                             label-width="100px">
 
                        <el-row>
 
                            <el-col :span="12">
 
                                <el-form-item label="人员类别" prop="type">
 
                                    <el-input v-model="formData.type"/>
 
                                </el-form-item>
 
                            </el-col>
 
                            <el-col :span="12">
 
                                <el-form-item label="人员名称" prop="name">
 
                                    <el-input v-model="formData.name"/>
 
                                </el-form-item>
 
                            </el-col>
 
                        </el-row>
 
                        <el-row>
 
                            <el-col :span="24">
 
                                <el-form-item label="描述">
 
                                    <el-input v-model="formData.description" type="textarea"></el-input>
 
                                </el-form-item>
 
                            </el-col>
 
                        </el-row>
 
                    </el-form>
 
                    <div slot="footer" class="dialog-footer">
 
                        <el-button @click="cancel()">取消</el-button>
 
                        <el-button type="primary" @click="handleEdit()">确定</el-button>
 
                    </div>
 
                </el-dialog>
 
            </div>
 
        </div>
 
    </div>
 
</div>
 
</body>
 
<!-- 引入组件库 -->
 
<script src="../js/vue.js"></script>
 
<script src="../plugins/elementui/index.js"></script>
 
<script type="text/javascript" src="../js/jquery.min.js"></script>
 
<script src="../js/axios-0.18.0.js"></script>
 
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            formData: {},//表单数据
            rules: {//校验规则
                type: [{required: true, message: '人员类别为必填项', trigger: 'blur'}],
                name: [{required: true, message: '人员名称为必填项', trigger: 'blur'}]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                type: "",
                name: "",
                description: ""
            }
        },
 
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            
        },
 
        methods: {
            //列表
            getAll() {
            },
 
            //弹出添加窗口
            handleCreate() {
            },
 
            //重置表单
            resetForm() {
            },
 
            //添加
            handleAdd() {
            },
 
            //取消
            cancel() {
            },
 
            // 删除
            handleDelete(row) {
            },
 
            //弹出编辑窗口
            handleUpdate(row) {
            },
 
            //修改
            handleEdit() {
            },
 
            //分页查询
 
            //切换页码
            handleCurrentChange(currentPage){
            },
 
            //条件查询
        }
    })
 
</script>
 
</html>

我们需要做的是补全js里面的内容

我们首先测试是否控制台能够运行

如果刷新 控制台能返回run

那说明运行起来了

成功运行

接下来书写发送异步请求的代码

先试一下发送信息

getAll() {
    // console.log("run")
    axios.get("/users").then((res)=>{
        console.log(res.data)
    });
 
},

能成功发送

我们每次都要这样测一下

钩子函数里调getALL

getALL里用axios发送了一个异步请求

请求方式是get

后面是路径

然后是做的事情 我们用箭头函数简化书写

箭头函数（Arrow functions）是ES6中引入的一种新的函数声明语法，相比传统的函数声明，箭头函数具有一些特点和限制：

// 无参数箭头函数
const func1 = () => {
  // 函数体
};
 
// 单参数箭头函数，可以省略括号
const func2 = arg => {
  // 函数体
};
 
// 多参数箭头函数，需要用括号括起来
const func3 = (arg1, arg2) => {
  // 函数体
};
 
// 箭头函数的隐式返回
const multiply = (x, y) => x * y;
 
// 如果函数体只有一条语句，可以省略大括号和 return
const double = x => x * 2;

特点：

  1. 语法简洁：
  • 箭头函数的语法更加简洁明了，通常能够以更少的代码表达同样的功能。
  1. 词法作用域：
  • 箭头函数不会创建自己的 this，它会捕获所在上下文的 this 值，因此其 this 值由外围最近一层非箭头函数决定。
  1. 适合简单函数：
  • 箭头函数特别适合用来定义内联函数或者较为简单的回调函数，例如在数组方法的参数中使用。
  • 没有自己的 this：箭头函数内部没有 this 绑定，它会捕获其所在上下文的 this 值作为自己的 this 值。这使得箭头函数在处理回调函数时，不需要显式绑定 this 或者使用 .bind() 方法来固定 this。
  • 不能用作构造函数：箭头函数不能使用 new 关键字调用，因此不能作为构造函数使用，不能使用 new 实例化对象。
  • 没有 arguments 对象：箭头函数没有 arguments 对象，只能通过命名参数、剩余参数（rest parameters）来获取函数的参数。
  • 不适合定义对象方法：由于箭头函数没有自己的 this，因此不适合用来定义对象的方法，因为无法正确绑定对象的 this。

箭头函数的引入大大简化了函数的定义和使用，尤其是在处理回调函数和函数表达式时更加方便和清晰。

这样我们前端访问后端就跑成功

文章标签：
JavaScript
前端开发
自然语言处理
存储
JSON
关键词：
vue axios
axios案例
axios vue
交互axios
axios异步请求
多多!
目录
相关文章
光明顶阳顶天
|
3月前
|
资源调度 JavaScript
在 Vue 项目中，如何使用 Axios 进行数据请求？
【10月更文挑战第3天】
光明顶阳顶天
470 59
光明顶阳顶天
|
3月前
|
缓存 JavaScript 搜索推荐
在 Vue 项目中，Axios 的请求拦截器的作用
【10月更文挑战第3天】
光明顶阳顶天
128 61
热爱技术的小郑
|
5月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗？有看过它的源码吗？
文章讨论了Vue项目目录结构的设计原则和实践，强调了项目结构清晰的重要性，提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则，并展示了单页面和多页面Vue项目的目录结构示例。
热爱技术的小郑
55 0
我是快乐的嘟嘟
|
4月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口，请求会发送两次
vue中使用axios请求post接口，请求会发送两次
我是快乐的嘟嘟
309 61
邹荣乐
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
邹荣乐
190 4
光明顶阳顶天
|
3月前
|
JavaScript UED
在 Vue 项目中使用 Axios 发送请求时如何处理错误？
【10月更文挑战第3天】
光明顶阳顶天
186 2
杀死一只知更鸟debug
|
4月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios，然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据，并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码，包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
杀死一只知更鸟debug
179 0
vue 中 axios 的安装及使用
蓝易云
|
4月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式：使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式，适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API，使用起来更为简洁，但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式，它们都能有效地在Vue应用中实现Ajax请求的功能。
蓝易云
56 4
六卿
|
4月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器，并使用Vue结合Axios进行前端开发和接口调用，同时讨论了开发过程中遇到的跨域问题及其解决方案。
六卿
74 0
vue配合axios连接express搭建的node服务器接口_简单案例
刘大猫.
|
3月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
刘大猫.
42 0

热门文章

最新文章

  • 1
    这款免费 IDEA 插件让你开发 Spring 程序更简单
  • 2
    【开发IDE升级】如何对IDEA版本进行升级
  • 3
    Proxy + Fetch 实现类似于 axios 的基础 API
  • 4
    使用idea中的Live Templates自定义自动生成Spring所需的XML配置文件格式
  • 5
    分享干货：idea常用快捷键分类总结（适合速查~~建议收藏♥）
  • 6
    【Spring配置】idea编码格式导致注解汉字无法保存
  • 7
    SpringBoot项目的html页面使用axios进行get post请求
  • 8
    SpringBoot项目的html页面使用axios进行get post请求
  • 9
    IDEA13+Maven + Jetty-plugin 调试项目
  • 10
    如何使用idea 连接达梦数据库？
  • 1
    axios拦截器：每次请求自动带上 token
    196
  • 2
    axios拦截器的使用？
    55
  • 3
    vue----axios的七大特性
    79
  • 4
    vue3中axios添加请求和响应的拦截器
    222
  • 5
    前端axios传参总结
    198
  • 6
    前端vue3分享——项目封装axios、vite使用env环境变量
    479
  • 7
    ＜ 今日小技巧：Axios封装，接口请求增加防抖功能 ＞
    159
  • 8
    ＜ 每日份知识快餐：axios是什么？如何在Vue中 封装 axios ？ ＞
    126
  • 9
    axios请求成功而$.ajax却不行排错
    70
  • 10
    axios封装和配置
    79

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Ajax入门
  • Ajax 前端开发入门与实战
  • Vue.js 入门与实战
  • 零基础学前端HTML+CSS
  • Python Web 框架 Django 快速入门

    • 相关电子书

    更多
  • 蚂蚁金服高级开发工程师萧恺：IDEA 插件开发入门教程
  • 基于webpack和npm的前端组件化实践
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 基于 IntelliJ IDEA 插件部署微服务应用
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅