本篇是继我的另一篇博客Vue+SpringBoot+数据库整体开发流程 1-CSDN博客
目录
四、前端开发
简单开发
(1)直接修改项目的App.vue文件中的route-link,
(2)新建这个FeedbackView.vue文件,
这段Vue.js代码的目的是在点击按钮时,发送一个HTTP GET请求,从后端获取数据并展示在页面上。
详细分析:
-
模板部分 (
<template>
)- 有一个展示
tableData
数据的<p>
标签:<p>展示{{tableData}}</p>
,这里使用了Vue的双花括号语法来显示响应式数据tableData
。 - 有一个按钮
<el-button>
,它的点击事件绑定了fetchFeedback
方法。当用户点击该按钮时,触发数据请求。
- 有一个展示
-
脚本部分 (
<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
块会捕捉错误,并将错误输出到控制台。
- 这是一个异步函数,负责发送GET请求从
-
注释部分
- 注释掉的
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应用程序,提高前端开发的效率和质量。
启动项目
vscode终端执行运行命令,启动前端项目,没有cd切换到当前目录的记得切换,
npm run serve
(5)后端解决cors跨域问题,在对应的FeedbackController上添加@CrossOrigin注解,
然后,也启动后端项目,
五、前后端联通
浏览器访问该网址,后面加上router路由里面设置的制定路径
可以看到页面上有一个展示 tableData
数据的区域和一个按钮。
点击按钮,会触发点击事件,fetchFeedback
方法发送HTTP请求从 /feedback/1
路径获取数据,获取的数据赋值给 tableData
,并在页面上显示。
访问成功,这样就完成了前后端联调。
这只是个简单样例,只是实现了基础的前后端数据交互功能。主要目的是了解整体开发流程。