springboot-thymeleaf添加一个表格和video

一、利用thymeleaf标签，将后台的数据填充到表格中，并实现一个简单的点击事务，点击页面会弹出提醒框。

二、利用video标签，播放video。

springboot新建的类必然要放在和启动类统一个包的目次下，因为springboot主动扫描的是启动类地点的包；若是不放在启动类地点的包下，将导致Controller、service等类扫描不到。

东西/原料

• thymeleaf
• video、table

方式/步调

1. 1

   在static目次下建立js和images目次，建立hello.js,找一个图片定名3.jpg。先看一眼项目标目次布局，如下图，

   
2. 2

   起首编写User类，有三个属性：姓名、性别、phone。

   
3. 3

   编写Controller，机关四个user，存储到List中，并将数据返回到前台。

   
4. 4

   编写hello.js，和Hello.html文件,代码如下

   
5. 5

   启动项目，拜候/sjn/hello，点击屏幕会呈现提醒框，多次点击会呈现分歧的提醒信息

   
6. 6

   添加视频：起首在static下建立一个video目次，把要播放的video放进去

   
7. 7

   除了播放video，还实现了放年夜和缩小video的功能，先来在js文件中添加播放、放年夜和缩小video的方式。

   
8. 8

   点窜Hello.html文件,增添三个按钮，和一个video标签，设置属性，让video展示节制图标，并轮回播放。

   在Hello.html文件的下方的<script>中，获取video，并播放video，如许可以使得页面加载的时辰主动播放。

   
9. 9

   打开浏览器，拜候/sjn/hello,可以看到video主动播放了，可以点击 暂停/播放 按钮暂停或者播放vide，也可以放年夜或者缩小video；当鼠标放在video上方时，会展示出video标签自带的节制面板，节制面板中有进度条、声调子节、全屏和下载功能。