第一个前后端分离项目

文章目录

第一个前后端分离项目
- 前端
- - 虚拟学生数据
- 后端
- - - [spring boot 实现查表业务返回list 集合](#spring boot 实现查表业务返回list 集合)
- 中间件
- - 安装
  - Axios引用错误
  - ，错误（根据区域找）
  - [承接spring boot数据](#承接spring boot数据)
  - [未导入 axios 报错](#未导入 axios 报错)
  - 跨域问题
  - [检查后端跨域配置（这是关键） 🔐](#检查后端跨域配置（这是关键） 🔐)
  - 成功拿到后端数据
  - - 关键点解释：
第一个前后端分离项目代码汇总
- 前端
- 数据库
- 后端
- 中间件axios
- 测试

第一个前后端分离项目

前端

虚拟学生数据

骨架

自行创建 vue 程序并导入 idea中

配置路由

配置到导航体中

虚拟学生数据

后端

spring boot + vue

建库建表

直接使用之前的表

spring boot 实现查表业务返回list 集合

中间件

在基于Spring Boot和Vue的前后端分离项目中，Axios是两者之间沟通的桥梁。你可以把它想象成一个负责送信和回信的信使，专门在前端和后端之间传递数据。

下面我从核心作用 和具体用法两个方面，帮你全面理解它。

🎯 Axios在项目中的核心作用

在前后端分离的架构中，Axios扮演着至关重要的角色，主要体现在以下几个方面：

作用	解释	类比
HTTP通信	Axios是基于Promise的HTTP客户端，负责在Vue前端发起Ajax请求（如GET、POST），与Spring Boot后端的RESTful API进行数据交互-2 -5 -7。	前端要数据或提交表单时，Axios负责把请求送到后端。
异步数据获取与更新	在Vue组件中，通常在生命周期钩子（如`created`）里用Axios获取数据，然后更新视图，实现页面的局部刷新，无需重载整个页面-1 -5 -9。	用户打开页面时，Axios默默取回数据，页面自动渲染；用户提交表单时，Axios把数据送出去，再根据结果更新页面提示。
统一管理接口	可以通过创建Axios实例、设置请求/响应拦截器等方式，集中管理所有API请求，统一处理诸如添加认证Token、全局错误提示、格式化响应数据等逻辑-3 -9。	为信使（Axios）制定统一的送信规则，比如所有信件都要贴上一张统一的标签（Token），如果收到坏消息（错误状态码）就统一拉响警报。

安装

Axios引用错误

使用报错：

这个错误是因为在 src/plugins/axios.js 文件中尝试使用 Vue.use() 来安装 Axios，但这是 Vue 2 的写法 ，而你的项目是 Vue 3，Vue 3 不再使用 Vue.use() 来注册 Axios。

错误原因分析

错误信息 Cannot read properties of undefined (reading 'use') 表明代码中有一个 Vue.use() 调用，但 Vue 这个变量是 undefined。这是因为：

你的项目是 Vue 3（之前你选择了 3.x）

src/plugins/axios.js 文件中使用了 Vue 2 的写法，类似于：

javascript

复制下载

javascript 复制代码

import Vue from 'vue'
import axios from 'axios'

Vue.use({  // 这行报错，Vue 3 中没有 Vue.use()
  install: function(Vue) {
    Vue.prototype.$axios = axios
  }
})

解决方案

方案一：修改 axios.js 文件（推荐）

打开 src/plugins/axios.js 文件，将其内容修改为 Vue 3 的写法：

javascript

复制下载

javascript 复制代码

// src/plugins/axios.js
import axios from 'axios'

// 配置 axios 默认值
axios.defaults.baseURL = 'http://localhost:8080'  // 改为你的后端地址
axios.defaults.timeout = 10000

// 添加请求拦截器（可选）
axios.interceptors.request.use(
  config => {
    // 从 localStorage 获取 token 并添加到请求头
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 添加响应拦截器（可选）
axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    // 统一处理错误，比如 401 未授权
    if (error.response && error.response.status === 401) {
      console.log('未授权，请重新登录')
      // 可以在这里跳转到登录页
    }
    return Promise.reject(error)
  }
)

export default axios

方案二：在 main.js 中正确挂载 Axios

打开 src/main.js 文件，修改为 Vue 3 的正确挂载方式：

javascript

复制下载

javascript 复制代码

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from './plugins/axios'  // 引入刚才配置好的 axios

const app = createApp(App)

// Vue 3 中挂载全局属性的正确方式
app.config.globalProperties.$axios = axios

app.use(store)
app.use(router)
app.mount('#app')

修改完成后，在任意组件中测试是否正常：

vue

复制下载

javascript 复制代码

<template>
  <div>
    <h1>测试 Axios</h1>
    <button @click="testAxios">点击测试</button>
  </div>
</template>

<script>
export default {
  methods: {
    testAxios() {
      // 通过 this.$axios 访问
      this.$axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(res => {
          console.log('请求成功:', res.data)
          alert('请求成功，请查看控制台')
        })
        .catch(err => {
          console.error('请求失败:', err)
          alert('请求失败: ' + err.message)
        })
    }
  }
}
</script>

总结

问题	原因	解决方案
`Cannot read properties of undefined (reading 'use')`	在 Vue 3 项目中使用了 Vue 2 的 `Vue.use()` 语法	修改 axios 配置文件，使用 Vue 3 的 `app.config.globalProperties` 挂载

按照上面的任一方案修改后，重启项目应该就能正常工作了。如果你不确定具体是哪个文件导致的错误，可以先尝试方案三，这是最简单直接的解决方法。

，错误（根据区域找）

承接spring boot数据

接受后端的集合数据

未导入 axios 报错

解决

javascript 复制代码

<template>
  <div>
    <h1>{{studentTitle}}</h1>
    <table>
      <tr>
        <td>姓名</td>
        <td>学号</td>
        <td>专业</td>
      </tr>
<!--  v-for  类似于  foreach  去遍历数组    -->
      <tr v-for="item in studentInfo">
        <td>{{item.name}}</td>
        <td>{{item.stuid}}</td>
        <td>{{item.major}}</td>
<!--        <td></td>-->
      </tr>
    </table>
  </div>
</template>
<script>
//  导入对应的插件 axios
import axios from 'axios'
export default {
  name: "StudentView",
  data(){
    return{
      studentTitle:'学生列表',
      studentInfo:[
        {
          name:'yanyu1',
          stuid:'1001',
          major:'软件技术'
        },
        {
          name:'yanyu2',
          stuid:'1002',
          major:'软件技术'
        },
        {
          name:'yanyu3',
          stuid:'1003',
          major:'计算机应用技术'
        },
        {
          name:'yanyu4',
          stuid:'1004',
          major:'软件技术'
        }
      ]
    }
  },
  created() {
    // alert(67897)
      //       后端的链接
    axios.get('http://localhost:8081/student/findAll').then(function (resp){
        //  resp 后端数据
      console.log(resp)
    })
  }
}
</script>

<style scoped>

</style>

跨域问题

在后端处理

检查后端跨域配置（这是关键） 🔐

如果你确认后端已启动且地址正确，那问题很可能出在跨域配置上。打开 Spring Boot 项目，创建一个配置类：

java

复制下载

java 复制代码

package com.example.demo.config;  // 改成你自己的包名

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 所有接口
                .allowedOriginPatterns("*")  // 允许所有来源（开发用）
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")  // 允许的请求方式
                .allowedHeaders("*")  // 允许的请求头
                .allowCredentials(true)  // 允许携带凭证
                .maxAge(3600);  // 预检请求缓存时间
    }
}

配置后重启后端，让新配置生效。

成功拿到后端数据

模板部分 (<template>)

html

复制下载

运行

javascript 复制代码

<template>
  <div>
    <h1>{{studentTitle}}</h1>
    <table>
      <tr>
        <td>姓名</td>
        <td>学号</td>
        <td>专业</td>
      </tr>
      <!--  v-for  类似于  foreach  去遍历数组    -->
      <tr v-for="item in students">
        <td>{{item.name}}</td>
        <td>{{item.stuid}}</td>
        <td>{{item.major}}</td>
<!--        <td></td>-->
      </tr>
    </table>
  </div>
</template>

代码	作用
<h1>{``{studentTitle}}</h1>	显示标题「学生列表」，数据来自 `data` 中的 `studentTitle`
`<table>`	创建一个表格
第一行 `<tr>`	表格的标题行，显示「姓名、学号、专业」三个列名
`v-for="item in students"`	Vue 的列表渲染指令，遍历 `students` 数组，为每个元素生成一行 `<tr>`
{``{item.name}} 等	显示当前遍历到的学生对象的 `name`、`stuid`、`major` 属性
注释掉的 `<td>`	预留的列，目前没用

渲染效果：会生成一个表格，第一行是列名，下面每一行对应一个学生。

脚本部分 (<script>)

导入和导出

javascript

复制下载

javascript 复制代码

import axios from 'axios'

export default {
  name: "StudentView",
  // ...
}

import axios from 'axios'：引入 Axios，用来发 HTTP 请求（解决了你之前 axios is not defined 的问题）
export default { name: "StudentView" }：导出组件，并命名为 "StudentView"

data() 函数

javascript

复制下载

javascript 复制代码

data(){
  return{
    studentTitle:'学生列表',
    students:[  // 初始为空数组，等待后端数据填充
      // 注释掉的是测试用的假数据
    ]
  }
}

studentTitle：页面标题，硬编码为「学生列表」
students：核心数据，初始为空数组。稍后会被后端返回的真实数据替换
注释掉的部分是之前测试用的假数据，现在用后端数据代替

created() 生命周期钩子

javascript

复制下载

javascript 复制代码

created() {
  // 保存 this 引用，解决回调函数中 this 指向问题
  const _this = this
  
  // 发送 GET 请求到后端
  axios.get('http://localhost:8081/student/findAll').then(function (resp){
    // 把后端返回的数据赋值给 students
    _this.students = resp.data
  })
}

关键点解释：

① created() 是什么？

Vue 组件的生命周期钩子
在组件实例创建完成后自动调用
此时组件已经初始化，但还没渲染到页面上
适合在这里发请求获取初始数据

② const _this = this 为什么要这样写？

javascript

复制下载

javascript 复制代码

// 如果不保存 this，在回调函数里 this 就变了
created() {
  // 这里的 this 指向 Vue 组件实例 ✅
  
  axios.get(...).then(function (resp) {
    // 这里的 this 指向的是 undefined（严格模式）或 window ❌
    // 所以 this.students 会报错
  })
}

解决方案：

方法一（你用的） ：在外面把 this 保存到 _this，回调里用 _this