当前位置：首页 > news >正文

11.vue网页开启自动提交springboot后台查询-首页显示数据库表

news 2025/5/17 5:48:15

vue3实现与springboot交互【开启首页显示数据库表】

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是node.js和vue的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

文章目录

vue3实现与springboot交互【开启首页显示数据库表】
前言
一、后台springboot
二、前端vue
- 简化版本html
- element-ui版本html
总结

本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识

本小节的内容是：
vue篇章之： 11.vue3实现与springboot交互【完成登陆及页面跳转】

每一个文章小节都会把标题说的很清楚。前后关联看，可以快速实现：前后分离。本质上，额外文章链接和文章自己标题内容关系不大。

附01：前面小节文章已经实现springboot的创建，springboot关联前端数据swagger和springboot通过mybatisplus操作数据库：
【2025年】基于电脑的jdk1.8通过idea创建springboot2.x版本(非常简洁快速)
【上榜文章，一文搞定】现在springboot是3.x以上版本，jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot
文章里面也有为什么只能是jdk17起和地址指定为阿里云报错的解决办法

附02：前面小节已经安装好node.js和分享了一些vue语法，及RESTful风格及安装配置swagger使用，和：
如何启动vue项目和vue语法组件化不同标签应对的作用说明
通过工具生成的vue案例(工具生成vue项目工程结构，里面有一个欢迎界面网页)为切入点，逐步逐步修改分享讲解，完成vue项目如何启动。及自行编写一些标签和样式来替换默认的内容，帮助理解包括里面的标签，js代码，样式如何配合的

附03：这个文章是 Axios 详细语法和实现步骤，其实整个系列干脆快速，很多上榜的
vue实现与后台springboot传递数据【传值/取值 Axios 】
在这里插入图片描述
实现Axios的案例解决方案(代码实例),代码已经直接解决了跨域，当然也标注了注释。

我为啥放链接。因为本文章的内容本质上是把前面很多的内容串起来了

本文章标题：首页显示数据库表
本文章标题：首页显示数据库表
本文章标题：首页显示数据库表

为了让每一个文章简洁快速，文章本身仅仅分享文章主题的内容。其他的内容拆分了。
但是：如果您需要前面的内容，可以查看前面的文章，本系列：快速实现前后分离，从0开始分享的。任何的前端后端语法+步骤都有~

前言

完成前端 vue.js工程结构准备
前端能启动vue项目(vue项目的工程结构及vue语法分享在前面章节)。当前已经分享完毕的进度：vue项目里面网页写Axios取后台的值和发送数据到后台。已完成实现点击不同链接显示不同页面内容，vue-router路由配置，把Axios和router路由整合起来，登陆验证成功跳转到其他页面(登陆逻辑实现就是序号10)
本小节：完成首页数据表显示

完成后台 springboot工程结构准备
包括springboot项目（dao、service、controller、pojo实体类）。controller类里面的方法能拿实现不同提交方式(get post put delete) 去调用service/dao。 dao通过mybatisPlus操作mysql数据库(前面章节有分享)

一、后台springboot

@RestController
@CrossOrigin //这个是解决跨域的问题 额外有一篇：同源策略 简单提交 非简单提交 //详细处理不同的跨域 文章有，此处仅快速处理   跨域详细分享和处理在序号9(最后面)
public class UserController {
@GetMapping("/findAll")public List<User> findAll(){List<User> list = userDao.selectList(null); //这里使用的mybatisPlus，它有一个参数可以拼接sql语句。//拼接sql，如需查阅，详细文章序号4(最后面)return list;}
}

//@TableName("数据库表名")   //如果您表名和实体类名不一致，告诉mybatisPlus。这个类对应某某表
public class User {@TableIdprivate int uid; //告诉mybatisPlus。这个是主键private String uname;private String upwd;private int uage;
...get set  构造函数  略

@Mapper
public interface UserDao extends BaseMapper<User> {  //使用的mybatisPlus//BaseMapper这里类里面  自动有很多很多 不同逻辑的增删改查的功能  //子类继承了父类，子类直接拥有父类的一些方法  我们不写基本的//这个案例不用写复杂的 ，如果我们自己写，内容在序号4里面
}

后台service 略
为了简化文章，我直接在controller调用了dao

数据库：
在这里插入图片描述

二、前端vue

简化版本html


标签是原生的html标签
需要 循环那个标签，就用vue的功能v-for item表示每次循环的元素<template><div><table border="1"><thead><tr><th>id</th><th>name</th><th>age</th></tr></thead><tbody><tr v-for="item in data" :key="item.id"><td>{{ item.uid }}</td><td>{{ item.uname }}</td><td>{{ item.uage }}</td></tr></tbody></table></div>
</template><script>
import axios from "axios";export default {name: "welcome",data() {return {data: [] // 用于存储从后台获取的数据  此处仅仅声明，没有赋值，在axios里面赋值}},created() { //created  当组件创建的时候，就自动执行的方法，vue自带的函数。前面有分享声明周期axios.get('http://localhost:8081/findAll') .then(response => {this.data = response.data; })}
}
</script>

启动，查看：
在这里插入图片描述

element-ui版本html

分享element-ui的用法和配合list变量

<template><div><el-table :data="list" border style="width: 100%"><el-table-column type="index" align="center" width="60" label="序号" /> <!-- 自动的序号，不是数据库表的内容 --><el-table-column prop="uid" align="center"  width="100" label="id" />  <!-- prop取实体类的属性 --><el-table-column prop="uname" align="center" width="60" label="名称" /> <!-- label表格标签 --><el-table-column prop="uage" align="center" width="60" label="年龄" />  <!-- align=居中 --></el-table></div>
</template><script>
import axios from "axios";export default {name: 'welcome', //和刚才一模一样，就是标签不一样data() {return {list: [] // 初始化为空数组，稍后填充数据};},created() {this.fetchTableData(); // 组件创建时获取数据},methods: {fetchTableData() {axios.get('http://localhost:8081/findAll').then(response => {this.list = response.data; })}}
}
</script><style>我这里没写样式，样式可以去调整  表格它自己也可以居中
</style>