Vue+SpringBoot+数据库整体开发流程 2

本篇是继我的另一篇博客Vue+SpringBoot+数据库整体开发流程 1-CSDN博客

目录

四、前端开发

简单开发

启动项目

五、前后端联通

---

四、前端开发

简单开发

（1）直接修改项目的App.vue文件中的route-link，

（2）新建这个FeedbackView.vue文件，

这段Vue.js代码的目的是在点击按钮时，发送一个HTTP GET请求，从后端获取数据并展示在页面上。

详细分析：

1. 模板部分 (<template>)

   • 有一个展示 tableData 数据的 <p> 标签：<p>展示{{tableData}}</p>，这里使用了Vue的双花括号语法来显示响应式数据 tableData。
   • 有一个按钮 <el-button>，它的点击事件绑定了 fetchFeedback 方法。当用户点击该按钮时，触发数据请求。

2. 脚本部分 (<script setup>)

   • ref定义响应式变量：
     • 使用 ref() 定义了 tableData 变量。tableData 是一个响应式对象，可以在模板中自动更新显示。初始化为一个空数组 []。
   • 导入请求工具：
     • 通过 import request from '@/utils/request'; 导入了自定义的 request 模块，可能是基于 axios 或类似工具封装的请求工具。
   • fetchFeedback 方法：
     • 这是一个异步函数，负责发送GET请求从/feedback/1路径获取数据，并将返回的数据赋值给 tableData。
     • 请求使用了 await 关键字，这意味着它是一个异步操作。在请求返回之前，代码会暂停执行，直到收到响应。
     • 成功请求后，response.data 会被赋值给 tableData.value，通过Vue的响应式机制，这会更新页面中绑定的 tableData。
     • 如果请求失败，catch 块会捕捉错误，并将错误输出到控制台。

3. 注释部分

   • 注释掉的 onMounted() 钩子表明作者可能曾计划在组件挂载时自动调用 fetchFeedback 方法获取数据，但在这段代码中，只有在按钮点击时才会触发数据获取。

<template>
  <div>
    <p>展示{{tableData}}</p>
    <el-button type="primary" plain @click="fetchFeedback">点击</el-button>
  </div>
</template>
<script setup>
// 2.导入request请求：因为request没有放入全局文件main.js里面，这个想要使用必须自己导入
import request from '@/utils/request';
import { ref } from 'vue'

const tableData = ref([]); // 使用 ref 来定义响应式变量

// 定义一个请求数据的方法
const fetchFeedback = async () => {
  try {
    const response = await request.get('/feedback/1'); // 发送请求
    tableData.value = response.data; // 赋值到 ref 响应式数据
    console.log(response.data); // 输出数据
  } catch (error) {
    console.error('Error fetching feedback data:', error);
  }
};
//
// // 使用 onMounted 钩子，在组件挂载时执行
// onMounted(() => {
//   fetchFeedback(); // 调用获取数据的方法
// });

</script>

（3）在router的index.js文件里面去定义要访问的vue页面的路径，

• path：定义的是网页8080后面跟着的访问路径，可以自定义
• name：用来标识这个页面用的，删除也没有影响
• component：对应新建的vue页面

此处只是简单开发了一下，当然可以使用一些好看的UI组件。

Element UI是一个基于Vue.js的组件库，提供了一套丰富、美观、易用的UI组件，包括表单、弹窗、导航、布局、数据展示等各种常用组件。Element UI旨在帮助开发者快速构建高质量的Web应用程序，使得前端开发更加高效和便捷。

Element UI的特点：

• 丰富的组件库：Element UI提供了大量的UI组件，覆盖了常用的各种组件需求，包括表单、按钮、菜单、对话框、表格、分页、图片等。
• 简洁美观的设计：Element UI的设计风格简洁、现代、美观，使得应用程序的界面更加美观、易用和专业。
• 易于使用：Element UI的组件易于使用，文档详细，提供了示例和在线演示，使得开发者可以更快地上手和使用。
• 可定制性：Element UI的组件支持自定义主题和样式，可以根据应用程序的需要自定义风格和样式。
• 国际化支持：Element UI支持多种语言，包括中文、英文、日文、韩文等，方便全球化应用程序的开发。

总的来说，Element UI是一个非常优秀的Vue.js组件库，可以帮助开发者快速构建高质量的Web应用程序，提高前端开发的效率和质量。

地址：Element - The world's most popular Vue UI framework

启动项目

vscode终端执行运行命令，启动前端项目，没有cd切换到当前目录的记得切换，

npm run serve

（5）后端解决cors跨域问题，在对应的FeedbackController上添加@CrossOrigin注解，

然后，也启动后端项目，

五、前后端联通

浏览器访问该网址，后面加上router路由里面设置的制定路径

可以看到页面上有一个展示 tableData 数据的区域和一个按钮。

点击按钮，会触发点击事件，fetchFeedback 方法发送HTTP请求从 /feedback/1 路径获取数据，获取的数据赋值给 tableData，并在页面上显示。

访问成功，这样就完成了前后端联调。

这只是个简单样例，只是实现了基础的前后端数据交互功能。主要目的是了解整体开发流程。