【springboot+vue项目（八）】VUE 与后端数据交互的3种方式

已于 2024-02-14 21:49:51 修改
阅读量4.9k 收藏 41
点赞数 4
分类专栏： 【springboot+vue项目】 文章标签： spring boot vue.js 后端
于 2023-07-21 11:09:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shanglin1122/article/details/131844159
版权

一、准备工作

（一）代理跨域

//vue.config.js 
const { defineConfig } = require('@vue/cli-service')
module.exports = {
  //  关闭eslint
    lintOnSave: false,
    // 代理跨域
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:8989',
          pathRewrite: { '^/api': '' }
        }
      }
    }
  }

（二）安装axios

npm install axios

 二、在组件内直接通过axios发请求（不常用）

<template>
  <div class="table-container">
    <el-table :data="uploadLogList" border style="width: 100%" header-align="center">
      <el-table-column type="index" label="序号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="filename" label="文件名" width="350" align="center">
        <template slot-scope="scope">
          {{ scope.row.filename }}
        </template>
      </el-table-column>
      <el-table-column prop="filepath" label="文件路径" width="480" align="center">
        <template slot-scope="scope">
          {{ scope.row.filepath }}
        </template>
      </el-table-column>
      <el-table-column prop="uploadtime" label="上传时间" width="450" align="center">
        <template slot-scope="scope">
          {{ scope.row.uploadtime }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="文件状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploadLogList: [], // 初始化为空数组
    };
  },
  created() {
    this.fetchData(); // 在created钩子函数中调用fetchData方法
  },
  methods: {
    fetchData() {
      axios.get('/dev-upload/uploadFiles/listAll')
        .then(response => {
          if (response.data.code === 200) { // 检查返回的状态码
            this.uploadLogList = response.data.data;
          } else {
            console.error('请求失败:', response.data.msg);
          }
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.table-container {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 50px;
}

.el-table th {
  text-align: center;
}
</style>

        Vue组件的script部分定义了一个名为fetchData的方法，使用axios发送GET请求来获取服务器上的数据。

        该方法在组件创建时调用，通过将数据存储在uploadLogList数组中来更新组件的状态。

代码执行的流程如下：

  1. 首先，在组件创建时，created钩子函数被调用。

  2. 在created钩子函数中，调用了fetchData方法来获取数据。

  3. fetchData方法使用axios发送GET请求，请求服务器上的'/dev-upload/uploadFiles/listAll'资源。

  4. 如果请求成功，服务器将返回一个状态码和数据。在这个组件中，检查状态码是否为200。

  5. 如果状态码为200，则将数据存储在uploadLogList数组中。这将自动更新组件的状态，并重新渲染组件以显示这些数据。

  6. 如果状态码不为200，则在控制台中输出错误信息。

  7. 如果请求失败，则将错误信息打印到控制台中。

  8. 组件完成渲染，此时表格应该显示从服务器获取的数据。

总的来说，该组件通过fetchData方法获取数据，使用axios发送GET请求来请求服务器上的数据。如果请求成功，则将数据存储在uploadLogList数组中，如果请求失败，则在控制台中输出错误信息。在组件创建时和每次请求数据时都会调用fetchData方法，以确保在组件渲染之前已获取到数据。

二、通过API全局封装（常用，大小项目都可）

 （一）axios的二次封装

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,  // 接口的基础路径
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送前做一些处理
    if (store.getters.token) {
      // 如果有token就在请求头中加上token
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做一些处理，这里只返回响应数据中的data部分
    const res = response.data

    // 如果自定义的响应码不是20000，就判断为错误
    if (res.code !== 20000 && res.code !== 200) {
      // 在页面上显示错误信息
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // 重新登录
        MessageBox.confirm('您已经登出，您可以取消以留在此页面，或重新登录', '确认登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      // 返回一个被拒绝的Promise对象，用来表示错误
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      // 如果没有错误，就返回响应数据中的data部分
      return res
    }
  },
  error => {
    // 对响应错误做些什么
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

（二）API接口统一管理 

// api/upload.js
// 当前这个模块：api进行统一管理
import request from '@/api/request/request-upload'

// 上传文件
//普通函数形式 export default { methods: { listAllInfo() { axios.get('/uploadlogs/listAll').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); } } }

export const uploadFiles = (formData) => request({
  url: '/uploadExcel',
  method: 'post',
  data: formData,
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

// 获取上传文件日志接口
export const reqListAllInfo = () =>request({
  url:'/uploadFiles/listAll',
  method: 'get'
});

（三）接口对外统一暴露

// /api/index.js
// 将模块的接口函数统一引入
import * as table from './table';
import * as upload from './upload';
import * as user from './user';


// 统一对外暴露
export default {
    table,
    upload,
    user
}

（四） 全局封装API

// main.js 全局封装API

import API from '@/api';

Vue.prototype.$API= API;

（五）组件调用

<template>
  <div  class="table-container">
    <el-table :data="uploadLogList" border style="width: 100%" header-align="center">
      <el-table-column type="index" label="序号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="filename" label="文件名" width="350" align="center">
      </el-table-column>
      <el-table-column prop="filepath" label="文件路径" width="480" align="center">
      </el-table-column>
      <el-table-column prop="uploadtime" label="上传时间" width="450" align="center">
      </el-table-column>
      <el-table-column prop="status" label="文件状态" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: '',
    data () {
      return {
        uploadLogList: [], // 初始化为空数组
      }
    },
    computed: {},// 计算属性
    mounted() {
      // 获取列表数据方法
      this.getPageList(); 
    },// dom元素创建之后执行
    methods: {
      async getPageList(){
        let result = await this.$API.upload.reqListAllInfo();
        if (result.code == 200) {
        this.uploadLogList = result.data;
      }
   }

    },// 定义方法的地方
  }
</script>

<style scoped>
.table-container {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 50px;
}

.el-table th {
  text-align: center;
}
</style>

        Vue组件的script定义了一个名为getPageList的异步方法，使用$API.upload.reqListAllInfo方法来获取服务器上的数据。

        该方法在组件挂载后调用，通过将数据存储在uploadLogList数组中来更新组件的状态。

代码执行的流程如下：

        1、首先，在组件挂载后，mounted钩子函数被调用。

        2、在mounted钩子函数中，调用了getPageList方法来获取数据。

        3、getPageList方法使用await关键字等待$API.upload.reqListAllInfo方法返回的结果。        

       4、$API.upload.reqListAllInfo方法将发送一个GET请求，请求服务器上的数据。

       5、 如果请求成功，服务器将返回一个状态码和数据。在这个组件中，检查状态码是否为200。

       6、如果状态码为200，则将数据存储在uploadLogList数组中。这将自动更新组件的状态，并重新渲染组件以显示这些数据。

        7、如果状态码不为200，则在控制台中输出错误信息。

        8、如果请求失败，则将错误信息打印到控制台中。

        9、组件完成渲染，此时表格应该显示从服务器获取的数据。

        总的来说，该组件通过getPageList方法获取数据，使用$API.upload.reqListAllInfo方法 来请求服务器上的数据。如果请求成功，则将数据存储在uploadLogList数组中，如果 请求失败，则在控制台中输出错误信息。在组件挂载后调用getPageList方法，以确保在组件渲染之前已获取到数据。

三、通过VUEX状态管理（适合大型项目）

开发代码的顺序：（小白一眼懂）

     组件UploadLog.vue-->store/uploadfile.js-->store/index.js -->api/upload.js

（一）axios的二次封装（和上述一致）

（二）API接口统一管理 （和上述一致）

（三）在项目中安装 Vuex

npm install vuex

（四）main.js引入总仓库并注册仓库

//引入总仓库并注册 
import store from './store'

new Vue({
  // 注册仓库：组件实例的身上会多一个属性$store属性
  store, 
  render: h => h(App)
}).$mount('#app')

（五）引入Vuex和小仓库

        在src下store文件夹index.js 中引入Vuex和小仓库（在src下store文件夹下新建use文件夹-index.js 用来存储user的状态数据）

//index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 引入小仓库
import user from './uploadfile'


// 对外暴露Store类的一个实例

export default new Vuex.Store ({
    // 实现Vuex仓库模块式开发存储数据
    modules:{
       uploadfile,    
    }
 
});

（六）新建模块小仓库

//uploadfile.js

import { reqListAllInfo } from '@/api/upload';

const state = {
  uploadLogList: [],
};

const mutations = {
  SET_UPLOAD_LOG_LIST(state, uploadLogList) {
    state.uploadLogList = uploadLogList;
  },
};

const actions = {
  async fetchUploadLogList({ commit }) {
    try {
      const result = await reqListAllInfo();
      if (result.code === 200) {
        commit("SET_UPLOAD_LOG_LIST", result.data);
      } else {
        throw new Error('fail');
      }
    } catch (error) {
      console.error(error);
    }
  },
};

const getters = {};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};

 （七）组件调用

//UploadLog.vue
<template>
  <div  class="table-container">
    <el-table :data="uploadLogList" border style="width: 100%" header-align="center">
      <el-table-column type="index" label="序号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="filename" label="文件名" width="350" align="center">
      </el-table-column>
      <el-table-column prop="filepath" label="文件路径" width="480" align="center">
      </el-table-column>
      <el-table-column prop="uploadtime" label="上传时间" width="450" align="center">
      </el-table-column>
      <el-table-column prop="status" label="文件状态" align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    // 另一种写法 ...mapState({  uploadLogList: (state) => state.uploadfile.uploadLogList })
    ...mapState('uploadfile', ['uploadLogList'])
  },
  mounted() {
    this.$store.dispatch('uploadfile/fetchUploadLogList');
  }
};
</script>

<style scoped>
.table-container {
  margin-left: 100px;
  margin-right: 100px;
  margin-top: 50px;
}

.el-table th {
  text-align: center;
}
</style>

幸福巡礼
关注
  • 4
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Idea+springboot+vue 前后端交互实现
m0_67393413的博客
09-11 5360
通过前面的工程建立，我们分别实现了springboot对后台数据库的数据访问，vue实现基本的页面展示。关于springboot和vue，下面谈谈我自己的理解（刚刚接触，可能有不太正确的认识），一开始不太了解这些目录结构和功能实现，springboot和vue交互的实现完全没头绪。在以下目录中，基本实现了我们以什么方式去访问我们的数据库并得到我们的需要的数据。
SpringBoot+Vue毕业设计系统答辩PPT.pptx
09-08
SpringBoot+Vue毕业设计系统是一个结合了现代前端技术和后端框架的项目，主要用于管理计算机专业学生的毕业设计流程。SpringBoot是Java领域的轻量级框架，它简化了Spring应用程序的创建和配置，使得开发更加高效。...
基于SpringBoot+Vue实现前后端交互功能（详解Vue框架机制）
a910247的博客
03-26 1万+
Vue框架知多少？Vue.js（通常简称为Vue）是一种流行的JavaScript前端框架，用于构建交互式的用户界面和单页面应用（SPA）。Vue由尤雨溪（Evan You）于2014年创建，并于同年正式发布。它的设计目标是通过尽可能简单的API提供高效的响应式数据绑定和组件化的视图组织方式。
Springboot+Vue前后端联调和数据交互
weixin_63566741的博客
08-13 2617
现在将后台管理页面（前端）和后台服务服务端进行集成，之前都是通过MockJS拦截前端请求随机生成数据来模拟服务器的数据响应的。当服务端接口开发完成后，前端就可以通过连接服务端程序指定的端口，然后向指定功能接口发送请求。
Vue发起请求后端数据
最新发布
qq_57319760的博客
05-27 1292
在Vue中使用请求工具发起请求
实现vue项目和springboot项目前后端数据交互
qq_634380940的博客
10-21 6413
vue 与 springboot 的数据交互
Springboot+Vue实现简单的前端后分离数据交互
热门推荐
Young_深情不及里子的博客
09-02 5万+
学习前后端分离的同学看过来，一篇文章带你了解一下当前一个简单前后端分离的后台系统的数据交互实现过程，告别传统JSP，模板引擎式的系统开发。
07-SpringBoot (七) --- SpringBoot+Vue 实现前后端数据交互
qq_54103767的博客
04-10 4733
​  前面刚学完，我们已经基本掌握了更加方便的数据库操作，那么我们也就该做一个web项目练练手了，按理来说，我们该学习学习thymeleafthymeleaf是Spring boot推荐使用的模版引擎。但是，现在更加流行的是 SpringBoot+Vue 形式的前后端分离项目！而前后端分离必然少不了数据交互，那么我们今天就试一试吧！
vue怎么连接后端，获取后端的数据
weixin_58148116的博客
12-14 8241
vue获取后端的数据的方法
SpringBoot+Vue3在线办公系统教学及资料
06-26
3. **前端开发**：搭建Vue3项目，利用 vite 或者 webpack 进行构建，编写组件，实现与后端接口的交互。 4. **用户认证与授权**：集成Spring Security，设计登录注册功能，实现基于角色的权限控制。 5. **页面设计**...
影视评论系统Springboot+Vue（前后端分离）
06-16
在本项目中，前端Vue.js负责用户界面和用户体验，后端Springboot负责数据处理和业务逻辑。 1. API设计：前后端通过统一的RESTful API进行通信，定义清晰的接口规范，如GET/POST请求，JSON数据格式等。 2. CORS跨域...
springboot+vue开发的项目管理系统源码.zip
03-14
总结，本项目管理系统集成了SpringBoot的强大后端能力与Vue.js的高效前端渲染，为项目开发提供了良好的基础架构。通过深入了解并实践该项目的源码，开发者可以提升对SpringBoot和Vue.js的理解，进一步提升自己的开发...
SpringBoot+Vue工作流程管理系统答辩PPT.pptx
09-08
在本项目中，SpringBoot用于后端服务的开发，提供数据访问、安全控制、自动配置等功能。 2. **Vue.js框架**：Vue.js是一种轻量级的前端JavaScript框架，用于构建用户界面。Vue的特点包括组件化、虚拟DOM、响应式...
Vue Springboot前后端交互
m0_61530270的博客
06-20 1240
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue项目中config目录下的index.js文件中设置跨域。3、建立实体类、maper.xml、controller等层。二、后端的代码实现（整合Springboot）某个请求的响应包含以下信息。三、Vue前端代码实现。2、vue配置跨域跳转。四、前后端分离跨域问题。一、Axios的使用。
115.【SpringBoot(IDEA)+Vue(Vscode)前后端交互】
qq_69683957的博客
05-14 1万+
在SpringBoot+Vue的整合项目中我们使用的编译软件分别有: Vscode来编写Vue脚手架和IDEA来编写SpringBoot。vue脚手架是3.0以上的。
SpringBoot3 + Vue3 由浅入深的交互 基础交互教学
制定持续可量化的目标，不断坚持。
02-15 2157
想要实现登录功能，那么在页面输入的username（用户名）和password（密码）信息要传递到后端，这样后端才能调用数据库进行验证该用户信息是否存在。我们常常需要获取单个参数进行查询或者校验，例如，我们想通过获取id来查询信息，或者获取某一类的名字来查询该类的内容，这时候就需要传递单个参数信息了。为了方便演示，我直接在App.vue（Vue.js 项目的入口文件）中输出后端传递的字符串。点击Hello按钮时，打印后端返回的字符串"Hello World!可以看到后端接收到页面输入的登录信息了。
vue+springboot前后端分离交互（快速上手）
lj20020302的博客
03-15 3364
vue+springboot的快速开始入门操作，我是跟着视频一步一步来的，然后看完之后尝试着总结一个，希望可以帮助到正在迷茫的同行们。有什么问题可以私信我，大家共同进步！
Springboot 和 VUE 前后端分离的数据交互
请赐教
09-26 1751
需求描述：点击VUE页面上的一个点，传回d[3]值代表图片序号，向后端发送请求，后端接收序号，找到对应图片后转换成流，再把流以图片形式传回给VUE。 VUE中的点击事件： .on("click", d => { this.getImg("/getImg",d[3]).then(res =>{ console.log(res); this.stateSrc = window.URL.createObj
sprinboot+vue前后端分离项目前后端如何交互联系
weixin_52237616的博客
05-18 2411
Spring Boot和Vue前后端分离项目的前后端交互一般是通过RESTful API实现的。具体来说，后端开发人员可以使用Spring Boot框架提供的RESTful API功能来暴露接口，前端开发人员则可以使用Vue.js框架中的Axios库等工具发送HTTP请求调用这些接口。通过以上方式，后端和前端可以实现数据交互和通信，实现了前后端分离的目标。是一个变量，代表要查询的用户ID。接口发送GET请求，其中。表示向后端应用程序的。
springboot和vue数据交互
03-17
Spring Boot 是一个用来构建单独运行的、生产级的 Spring 应用程序的框架。Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。 在 Spring Boot 和 Vue.js 中进行数据交互，可以使用 axios 库在 Vue.js 中进行 HTTP 请求，与 Spring Boot 中的 RESTful API 进行交互。Spring Boot 可以使用注解来映射 HTTP 请求，并使用 Jackson 库将 Java 对象转换为 JSON 格式。 在 Spring Boot 中定义 RESTful API 时可以通过 @RestController 注解来指定控制器的作用，并通过 @RequestMapping 来映射 URL。 Vue.js 中可以使用 axios 库来发送请求，并使用 JavaScript 对象来处理响应。 可以在 Vue.js 中通过axios 来调用SpringBoot中定义的接口 ，完成前后端数据交互。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值