SpringBoot+VUE实现数据表格的实战


Posted in Java/Android onAugust 02, 2021

前言

还记得第一次做项目时,因为不会将数据库表中的数据渲染到前端而头疼,最后还是靠layui提供的数据表格API实现了前端数据表格的渲染。一直到现在做了很多SpringBoot项目、SSM项目之后,现在返回头来看这个曾经这个让我备受折磨的问题,脑海中下意识就会想到很多种解决的方法,比如导入前端的数据表格、通过JavaScript渲染数据表格、通过VUE来渲染数据表格…本文将使用VUE+SpringBoot+MybatisPlus,以前后端分离的形式来实现数据表格在前端的渲染,在此做下记录,便于以后进行回顾。

使用的开发工具:

  • 前端:HBuilderX
  • 后端:IntelliJ IDEA

本次要进行渲染的数据库内容如下:

SpringBoot+VUE实现数据表格的实战

提示:以下是本篇文章正文内容,下面案例可供参考

一、前端准备

1. 基础界面

在前端先将页面写好,在这里我按照数据库表格中的字段顺序依次填写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>showDataList</title>
	</head>
	<body>
		<div id="app" align="center">
			<table border="1" width="48%" style="text-align: center;">
				<tr>
					<td colspan="5">
						<h1>用户列表</h1>
					</td>
				</tr>
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
				</tr>
			</table>
		</div>
	</body>
</html>

显示效果:

SpringBoot+VUE实现数据表格的实战

2. 导入JS文件

在这里我导入了VUE和Axios的JS文件,在HTML的<head>标签中引入相应的JS文件 (axios起的作用和Ajax是相同的,使用axios是因为在做项目的过程中axios相较于Ajax来说很好的解决了回调地狱的问题)

<script src="static/js/vue.js"></script>
<script src="static/js/axios.js"></script>

导入了JS文件后,准备<script>标签用来准备VUE对象和axios进行数据传输
<script>标签中的代码如下:

<script>
		// 设定axios的请求前缀
		axios.defaults.baseURL = "http://localhost:8090"

		// 指定VUE的渲染区域
		const app = new Vue({
			el: "#app",
			data: {

			},
			methods: {

			}
		})
	</script>

代码解释:

axios.defaults.baseURL = "http://localhost:8090"

在前后端分离的项目中,前端每一次向后端传输数据时都要指定HTTP协议以及端口号,这行代码定义了请求前缀之后axios传输数据时都默认加上了双引号中的内容

const app = new Vue({...})

这段代码中指定了VUE要渲染的区域,el对应内容是id为app的div图层,data为指定数据的区域methods为定义方法的区域

二、后端准备

新建SpringBoot项目并配置MybatisPlus,配置MybatisPlus的过程就不在此赘述

1. 创建实体类

在后端pojo包下新建User实体类,实体类中的属性要与数据库中的字段对应一致

@Data
@Accessors(chain = true)
@TableName("demo_user")
public class User implements Serializable {
    @TableId(type = IdType.AUTO)
    private Integer id;
    // 如果属性与字段同名(包括驼峰规则)注解可以省略
    private String name; 
    private Integer age;
    private String sex;
}

代码解释:

  • @Data为lombok插件提供的注解,自动为属性提供了get/set/toString等方法
  • @Accessors(chain = true)也是lombok插件提供的注解,开启链式编程
  • @TableName("demo_user")为MybatisPlus提供的注解,用于指定该实体类对应数据中的哪张表
  • @TableId(type = IdType.AUTO)用来指定实体类中的哪个属性作为表中的主键,并且主键自增实现了
  • Serializable接口的作用是将该实体类序列化,将实体类序列化的目的是为了保证数据在传输的过程中不会出错

2. Controller层

在创建好实体类后,开始写Controller层的代码

@RestController
@CrossOrigin
@RequestMapping("/table")
public class TableController {
    @Autowired
    private UserService userService;
	
	@GetMapping("/getAllUser")
    public List<User> getAllUser() {
        List<User> userList = userService.selectAll();
        return userList;
    }
}

代码解释:

  • 在Controller层中添加@CrossOrigin注解的作用是支持跨域
  • @RestController相当于@Controller@ResponseBody两个注解的结合,将后端的数据以JSON串的格式返回到前端

3. Service层

①. UserService接口

public interface UserService {
    /**
     * 查询数据库对应表中所有的数据
     *
     * @return 集合对象
     */
    List<User> selectAll();
}

②. UserServiceImpl实现类

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    /**
     * 查询数据库中所有的集合
     *
     * @return 集合对象
     */
    @Override
    public List<User> selectAll() {
        List<User> userList = userMapper.selectList(null);
        return userList;
    }
}

在MybatisPlus中,selectList方法的参数为空时会查询当前表中的所有数据

4. Mapper层

①. UserMapper接口

public interface UserMapper extends BaseMapper<User> {

}

②. UserMapper.xml文件

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="cn.shijimo.mapper.UserMapper">
    
</mapper>

在MybatisPlus中SQL语句可以自动生成

三、前后端整合

完成前端和后端的基本配置之后,接下来进行前后端分离项目的整合,在进行整合时先对实现过程进行分析
1. 当用户点击显示表格按钮时就应该发起Ajax请求获取userList数据
2. 将UserList中的数据在页面中展现(页面中的数据必须在data中定义
3. 将请求的结果赋值给data属性
4. 利用v-for指令实现数据的遍历

<script>代码块中VUE的代码进行编辑:
因为后端的返回值是一个集合,所以首先在data数据域中定义userList数组对象用来接收从后端传来的集合,接着在methods方法区域中定义一个方法getUserList,该方法中要进行axios向后端发起请求,并将返回的数据存储到数组对象中。在HTML的<table>标签中添加一个按钮组件,为按钮绑定getUserList方法。

添加完按钮组件之后,在<table>标签中也添加<tr>标签,使用VUE中的v-for指令来对userList集合进行遍历,依次取出并进行渲染。

<script>
	// 设定axios的请求前缀
	axios.defaults.baseURL = "http://localhost:8090"

	// 指定VUE的渲染区域
	const app = new Vue({
		el: "#app",
		data: {
			// 定义集合来存储数据, 此时数据为null
			userList: []
		},
		methods: {
			// 1. 定义getUserList方法 获取后台服务器数据
			async getUserList() {
				// 新增操作请求的类型: post	接收时需要使用JSON方式处理
				let {
					data: result
				} = await axios.get("/table/getAllUser")
				// Ajax调用之后, 将请求结果赋值给data属性
				this.userList = result
			}
		}
	})
</script>
<table border="1" width="48%" style="text-align: center;">
	<tr>
		<td colspan="5">
			<h1>用户列表</h1>
		</td>
	</tr>
	<tr>
		<td colspan="5" style="text-align: left;">
			<button type="button" @click="getUserList">显示表格</button>
		</td>
	</tr>
	<tr>
		<td>编号</td>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr v-for="user in userList">
		<td v-text="user.id"></td>
		<td v-text="user.name"></td>
		<td v-text="user.sex"></td>
		<td v-text="user.age"></td>
	</tr>
</table>

代码解释:
在这里使用v-text指令不使用插值表达式(即{{}})的原因是因为如果传输的数据很多的话,在没有显示完之前页面上会显示{{XXX}},不利于浏览器的安全。
至此前后端整合完毕。

四、运行结果

SpringBoot+VUE实现数据表格的实战

SpringBoot+VUE实现数据表格的实战

SpringBoot+VUE实现数据表格的实战

表中的内容就全部显示在了前端,最后再用bootstrap进行修饰美化

SpringBoot+VUE实现数据表格的实战

总结

以上就是使用SpringBoot + VUE + Mybatis实现了数据表格的渲染,更多相关SpringBoot+VUE数据表格内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Java/Android 相关文章推荐
springboot中一些比较常用的注解总结
Jun 11 Java/Android
解决tk mapper 通用mapper的bug问题
Jun 16 Java/Android
深入理解java.lang.String类的不可变性
Jun 27 Java/Android
java固定大小队列的几种实现方式详解
Jul 15 Java/Android
SpringBoot+VUE实现数据表格的实战
Aug 02 Java/Android
JVM钩子函数的使用场景详解
Aug 23 Java/Android
Android基于Fresco实现圆角和圆形图片
Apr 01 Java/Android
SpringBoot整合Minio文件存储
Apr 03 Java/Android
Java详细解析==和equals的区别
Apr 07 Java/Android
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
Apr 08 Java/Android
Spring 使用注解开发
May 20 Java/Android
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
Jul 15 Java/Android
springboot 启动如何排除某些bean的注入
Aug 02 #Java/Android
idea 在springboot中使用lombok插件的方法
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
Jul 26 #Java/Android
Sleuth+logback 设置traceid 及自定义信息方式
Jul 26 #Java/Android
Java日常练习题,每天进步一点点(38)
Jul 26 #Java/Android
dubbo集成zipkin获取Traceid的实现
Jul 26 #Java/Android
dubbo服务整合zipkin详解
You might like
ThinkPHP中的三大自动简介
2014/08/22 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python操作csv文件实例详解
2017/07/31 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
python输入多行字符串的方法总结
2019/07/02 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
社区反邪教工作方案
2014/06/16 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
岳麓书院导游词
2015/02/03 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers