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

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

2024-06-24 12
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
关键词：
交互axios
IDEA Vue
vue axios
axios vue
ssmp axios
多多!
目录
相关文章
南城余
|
3天前
|
XML 前端开发 JavaScript
Vue3数据交互axios
Vue3数据交互axios
南城余
10 0
米诺斯
|
4天前
|
JavaScript
IDEA打开vue项目并运行
IDEA打开vue项目并运行
米诺斯
12 1
米诺斯
|
4天前
|
JavaScript
vue对axios封装
vue对axios封装
米诺斯
12 2
米诺斯
|
4天前
|
JavaScript 前端开发 Java
vue使用axios与springboot通讯
vue使用axios与springboot通讯
米诺斯
11 0
多多!
|
4天前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
多多!
10 1
什么时候能躺平
|
1月前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
什么时候能躺平
25 0
阿珊和她的猫
|
1月前
|
资源调度 前端开发 JavaScript
用 Axios 提升前端异步请求的效率
用 Axios 提升前端异步请求的效率
阿珊和她的猫
20 0
技术宅小温
|
1月前
|
JSON JavaScript 前端开发
＜ 每日份知识快餐：axios是什么？如何在Vue中 封装 axios ？ ＞
本文介绍了前端开发中常用的HTTP客户端库Axios，它基于Promise，支持浏览器和Node.js，特点是功能强大、支持Promise API和并发请求，并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性，不仅讲解了基本的安装、导入和使用方法，还阐述了为何选择Axios，包括其丰富的配置选项和良好的浏览器支持。此外，文章探讨了封装Axios的必要性，以减少重复代码和提高代码维护性，并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装，开发者可以更高效地管理和使用Axios，适应不同项目需求。
技术宅小温
67 0
米诺斯
|
17小时前
|
监控 IDE Java
探索 IntelliJ IDEA 中 Spring Boot 运行配置选项及其作用
探索 IntelliJ IDEA 中 Spring Boot 运行配置选项及其作用
米诺斯
4 0
米诺斯
|
2天前
|
Linux 开发工具 Windows
在WSL2中安装IntelliJ IDEA开发工具
在WSL2中安装IntelliJ IDEA开发工具
米诺斯
17 2

热门文章

最新文章

  • 1
    前端axios传参总结
  • 2
    Axios发送post请求下载文件
  • 3
    vue-axios 发送请求，cookie带不上
  • 4
    JavaScript HTTP客户端库axios介绍
  • 5
    axios设置content-type
  • 6
    Vue3-TypeScript-接口-async-axios用法
  • 7
    axios的二次封装
  • 8
    SSM(Vue3+ElementPlus+Axios+SSM前后端分离)【三】
  • 9
    axios.post请求出错：Request header field content-type is not allowed by Access-Control-Allow-Headers in……
  • 10
    前端-vue基础84-接口调用axios
  • 1
    idea编码GBK的不可映射字符Maven修改编码格式的多种方式
    73
  • 2
    idea配置go依赖下载
    62
  • 3
    记IDEA Git版本回退并push到远程操作
    56
  • 4
    在idea每次按住鼠标左键的时候光标成插入了
    20
  • 5
    有关电脑中idea编译报错问题java: No implementation was created for AdminUserConverter due to having a problem in
    147
  • 6
    nacos常见问题之IDEA启动raft报错如何解决
    39
  • 7
    GitHub和Gitee的基本使用和在IDEA中的集成
    37
  • 8
    Maven【5】在IDEA环境中配置和使用Maven
    120
  • 9
    idea打war包时，JDK版本的问题解决方式
    30
  • 10
    idea打war的问题
    20

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • 零基础学前端HTML+CSS
  • Vue.js 入门与实战
  • 前端开发框架Bootstrap使用教程
  • Vue.js完全自学手册图文教程
  • Ajax入门

    • 相关电子书

    更多
  • 蚂蚁金服高级开发工程师萧恺：IDEA 插件开发入门教程
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 基于 IntelliJ IDEA 插件部署微服务应用
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）