【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
    评论
专栏目录
SpringBoot+vue项目实战（一）
m0_67402774的博客
06-12 8766
Node.js 官方网站下载：https://nodejs.org/en/ 2.选择操作系统对应的包 下载完成，安装包如下： 傻瓜式安装，直接下一步即可 安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号： 3.配置npm在安装全局模块时的路径和缓存cache的路径 因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:Users用户名App
SpringBoot+Vue毕业设计系统答辩PPT.pptx
09-08
SpringBoot+Vue毕业设计系统是一个结合了现代前端技术和后端框架的项目，主要用于管理计算机专业学生的毕业设计流程。SpringBoot是Java领域的轻量级框架，它简化了Spring应用程序的创建和配置，使得开发更加高效。...
Springboot+Vue前后端联调和数据交互
weixin_63566741的博客
08-13 2670
现在将后台管理页面（前端）和后台服务服务端进行集成，之前都是通过MockJS拦截前端请求随机生成数据来模拟服务器的数据响应的。当服务端接口开发完成后，前端就可以通过连接服务端程序指定的端口，然后向指定功能接口发送请求。
基于SpringBoot+Vue实现前后端交互功能（详解Vue框架机制）
热门推荐
a910247的博客
03-26 1万+
Vue框架知多少？Vue.js（通常简称为Vue）是一种流行的JavaScript前端框架，用于构建交互式的用户界面和单页面应用（SPA）。Vue由尤雨溪（Evan You）于2014年创建，并于同年正式发布。它的设计目标是通过尽可能简单的API提供高效的响应式数据绑定和组件化的视图组织方式。
vue连接后端（springboot）流程 自用 可能表达不清楚
weixin_52029825的博客
05-31 410
这样写的好处是复用性高 不需要每次进行接口的书写 并且可以因为是接口单独定义 可以在分布式场景下很好的使用。调用的是login.js中的login方法 传入form表单的参数 参数在上边的data中有定义。创建serverconfig.js 在里边设置好baseurl的接口并暴露。在api中设置函数 函数属性是url 发送接受的method类型 以及参数。1.在api中定义函数 写好后端方法路径 、method、传递的参数。2.表单中写好触发事件后在事件中调用函数。在表单中写函数 调用api中定义的函数。
vue3 与后端通信
zt_9773的博客
07-13 1679
前面vue简书篇已经搭建好了脚手架，这里就忽略，直接进入主题，由于要通信，简单写了个登录界面。这里的通信仅仅是代码开发时期的通信，不涉及到部署之后。
springboot+vue商城项目实战-springboot后端搭建
qq_22593423的博客
07-30 416
首先，在IntelliJ IDEA中创建一个新的Spring Boot项目，请按照以下步骤进行操作：打开IntelliJ IDEA并选择（新建项目）选项。在左侧面板中选择（Spring初始化程序）。在右侧面板中，选择项目的位置和项目名称。在（类型）下拉菜单中选择Maven。在（语言）下拉菜单中选择Java。在（组）和（构件）字段中输入项目的组ID和构件ID。在（版本）字段中选择您想要使用的Spring Boot版本。在（设置）下，选择您的Java JDK版本。在。
从 0 开始实现一个 SpringBoot + Vue 项目
ProgramNovice的博客
12-17 8887
从 0 开始实现一个 SpringBoot + Vue 项目
基于springboot+mybatis+vue的项目实战之（后端+前后端联调）
wyhwust的博客
05-08 891
1、项目准备：创建数据库（之前已经创建则忽略），以及数据库连接2、建立项目结构文件夹3、编写pojo文件4、编写mapper文件，并测试sql语句是否正确5、编写service文件6、编写controller文件7、测试后端程序是否正确8、前后端联调。
Springboot+Vue项目后端基本分包目录结构
qq_66498950的博客
08-28 1020
按技术类型分离：将所有与数据库操作相关的代码放在一个包中，将所有与 RESTful API 相关的代码放在另一个包中，将所有与 WebSocket 相关的代码放在另一个包中，以此类推。​ 代码分包一直以来都是程序员的一个必备技能，代码分包是指将代码按照一定的逻辑或功能进行分组，放置在不同的包中，从而组织好代码的层次结构。按层分离：将所有的实体类放在一个包中，将所有的 DAO（数据访问对象）接口和实现类放在另一个包中，将所有的服务接口和实现类放在另一个包中，以此类推。
解决Springboot+VUE项目部署出现的跨域问题
cheng5055251的博客
08-04 1851
自己写了一个项目，写好了，发现不会部署，然后到处查资料，最终终于部署好自己写的系统，系统为前后端分离项目。需要分别部署在同一个服务器docker中，配置不同得端口隐射，部署得过程中主要是跨域问题，导致在前端部署得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、响应式...
1.Spring Boot 简介(Spring MVC+Mybatis-plus)
m0_61086522的博客
07-23 941
SpringBoot是Spring的子工程(或是spring的脚手架),快速搭建spring项目,自动配置了Spring 应用程序和第三方库（spring+mybaties+web（servlet）+ reids+ 消息中间件）,而且使用很少xml配文件，提高开发效率。一款基于mvc模式、请求驱动、轻量级web框架（封装了Servlet）给予MVC模式请求驱动轻量级web框架封装了Servlet程序。
{Spring Boot 原理篇} Spring Boot自动装配原理
最新发布
yyd686874的博客
07-24 1323
1，Spring Boot 应用启动，@SpringBootApplication标注的类就是启动类，它去实现配置类中的Bean的自动装配 2，而@SpringBootApplicatiozn注解中包含了三个注解：@SpringBootConfiguration @EnableAutoConfiguration @ComponentScan @SpringBootConfiguration 这个注解包含了@Configuration，@Configuration里面又包含了一个@Component
Spring boot 2.0 升级到 3.3.1 的相关问题 （六）
飞一站的博客
07-24 679
解决Spring boot 2.0 升级到3.3.1 版本的`BeanPostProcessor`警告问题。
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、付费专栏及课程。

余额充值