vue使用axios请求后端数据

前后端分离项目的基础:

前后端跨域访问

vite.config.js中加入

复制代码
  // 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式:
  server: {
    proxy: {
      // 假设要跨域访问的后端 API 地址以 /api 开头
      '/api': { //表示拦截以/api开头的请求路径
        target: 'http://localhost:8089/', // 后端服务的实际地址
        changeOrigin: true,           //是否开启跨域
        rewrite: (path) => path.replace(/^\/api/, ''),//把/api变成空字符串
      },
    },
  },

完整vite.config.js文件

复制代码
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  // 1.为什么要跨域
//因为浏览器的同源策略,不同站点之间访问需要跨域
//实现跨域的方式:
  server: {
    proxy: {
      // 假设要跨域访问的后端 API 地址以 /api 开头
      '/api': { //表示拦截以/api开头的请求路径
        target: 'http://localhost:8089/', // 后端服务的实际地址
        changeOrigin: true,           //是否开启跨域
        rewrite: (path) => path.replace(/^\/api/, ''),//把/api变成空字符串
      },
    },
  },
})

App.vue文件

复制代码
<template>
    <button @click="handleClick">跨域请求</button>
</template>

<script setup>
import axios from 'axios'; // 正确从 'axios' 包导入 axios  
       //将axios请求写在方法里面,通过点击事件调用方法向后端拿数据
       function  handleClick(){
           axios.get("api/Axios").then(Response=>{
               console.log(Response.data);
           })
           .catch(error=>{
               console.log('Error fetching data:',error);
           },
           )
         }
</script>

<style scoped>

</style>

Java中的servlet 服务

需要在maven的pom.xml中导入fastjson

复制代码
  <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.76</version>
    </dependency>

package Study.day08;

import com.alibaba.fastjson.JSON;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/Axios")
public class Axios extends HttpServlet{
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Student student=new Student("张三","男",23);
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/json; charset=utf-8");
        resp.getWriter().println(JSON.toJSON(student));
    }
}

后端服务访问页面:

前端成功拿到后端数据:

相关推荐
汤面不加鱼丸几秒前
flutter实践:比例对比线图实现
前端·flutter
pjx9871 分钟前
超越单体:进入微服务世界与Spring Cloud概述
java·spring cloud·微服务
天天摸鱼的java工程师2 分钟前
爆肝 30 天!从 JVM 调优到百万级 QPS,我的 Java 性能飞升全记录
java·后端
Jenlybein3 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ 面向对象篇 ]
前端·javascript·面试
专业掘金5 分钟前
0429 手打基础丸
前端
TDengine (老段)6 分钟前
TDengine 订阅不到数据问题排查
java·数据库·tdengine
还有发量的前端程序员6 分钟前
Vue3初始化完整过程和原理
前端
Jenlybein6 分钟前
进阶学习 Javascript ? 来看看这篇系统复习笔记 [ Generator 篇 ]
前端·javascript·面试
冼紫菜8 分钟前
Spring Cloud 项目中优雅地传递用户信息:基于 Gateway + ThreadLocal 的用户上下文方案
java·开发语言·spring boot·后端·spring cloud·gateway
为美好的生活献上中指9 分钟前
java每日精进 4.29【框架之自动记录日志并插入如数据库流程分析】
java·linux·数据库