SpringBoot+VUE实现数据表格

文章目录

  • 前言
  • 一、前端准备
    • 1. 基础界面
    • 2. 导入JS文件
  • 二、后端准备
    • 1. 创建实体类
    • 2. Controller层
    • 3. Service层
      • ①. UserService接口
      • ②. UserServiceImpl实现类
    • 4. Mapper层
      • ①. UserMapper接口
      • ②. UserMapper.xml文件
  • 三、前后端整合
  • 四、运行结果
  • 总结


前言

既然我已经踏上这条道路,那么,任何东西都不应妨碍我沿着这条路走下去。

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

使用的开发工具:

  1. 前端:HBuilderX
  2. 后端:IntelliJ IDEA

本次要进行渲染的数据库内容如下:
SpringBoot+VUE实现数据表格_第1张图片


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

一、前端准备

1. 基础界面

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


<html>
	<head>
		<meta charset="utf-8">
		<title>showDataListtitle>
	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张图片

2. 导入JS文件

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

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

导入了JS文件后,准备

你可能感兴趣的:(架构师成长道路,vue,html,javascript,springboot,数据表格)