Java入门006~springboot+freemarker+bootstrap快速实现管理后台
时间:2022-07-28
本文章向大家介绍Java入门006~springboot+freemarker+bootstrap快速实现管理后台,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们做后台开发时,难免会要开发管理后台。如下面这样的管理后台,我们完全可以不用h5同学,自己快速开发管理web后台的。
所以接下来我会用几节来教大家如何快速实现管理后台。
本节知识点
- springboot2.2.2
- freemarker
- bootstrap4
- maven
老规矩,先看效果图
所以本节就来教大家如何快速实现管理后台表格数据的展示与操作。
这节课是建立在你已经会创建springboot项目的基础上,如果你还不知道怎么创建一个springboot项目请移步到这里:https://edu.csdn.net/course/detail/23443
好了,下面就来讲解,如何使用springboot+freemarker+bootstrap快速实现管理后台表格数据的展示。
一,首先要在你的pom.xml 加入freemarker仓库
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
二,在项目的templates目录下创建demo目录,然后创建list.ftl文件
我们freemarker使用的是 .ftl结尾的模版文件
list.ftl完整代码如下
<html>
<head>
<meta charset="utf-8">
<title>freemarker+bootstrap学习</title>
<#--本地引入-->
<#--<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap
.min.css">
</head>
<body>
<div class="container-fluid">
<div class="table-responsive">
<table id="dataGrid" class="table table-striped table-bordered">
<thead>
<tr>
<th width="50"><input type="checkbox" class="checkall"></th>
<th>标题</th>
<th>姓名</th>
<th>微信</th>
<th width="50">操作</th>
</tr>
</thead>
<tbody>
<#list demoList as row>
<tr>
<td>
<input type="checkbox" name="id" value="${row.id}">
</td>
<td>${row.title}</td>
<td>${row.name}</td>
<td>${row.wechat}</td>
<td>
<button class="btn btn-xs btn-primary"
onclick="deleteRow(${row.id})">删除
</button>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
function deleteRow(rowId) {
console.log("点击了删除", rowId);
}
</script>
</body>
</html>
这里需要讲下,我们引入bootstrap有两种方式,大家学习阶段推荐用第一种方式。
- 1,直接引入网上资源(推荐)
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap
.min.css">
- 2,把bootstrap下载到本地,然后再引入本地
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
三,我们页面写好了,接下来就是网往页面里传数据了。
这里我们定义一个DemoController如下
package com.qcl.demo.controller;
import com.qcl.demo.bean.Demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
* Created by qcl on 2019-04-29
* 微信:2501902696
* desc:freemarker学习
*/
@RestController
public class DemoController {
@GetMapping("/demoList")
public ModelAndView list(Map<String, Object> map) {
List<Demo> demoList = new ArrayList<>(4);
demoList.add(new Demo(1, "标题1", "编程小石头1", "2501902696"));
demoList.add(new Demo(2, "标题2", "编程小石头2", "2501902696"));
demoList.add(new Demo(3, "标题3", "编程小石头3", "2501902696"));
demoList.add(new Demo(4, "标题4", "编程小石头4", "2501902696"));
map.put("demoList", demoList);
return new ModelAndView("demo/list", map);
}
}
这里我们先模拟4条数据,然后把数据传到我们的list.ftl页面,正常数据都应该是从数据库里取的,后面会做讲解。 这就是用freemarker模版的好处。可以直接在页面里使用我们的java数据。
<table id="dataGrid" class="table table-striped table-bordered">
<thead>
<tr>
<th width="50"><input type="checkbox" class="checkall"></th>
<th>标题</th>
<th>姓名</th>
<th>微信</th>
<th width="50">操作</th>
</tr>
</thead>
<tbody>
<#list demoList as row>
<tr>
<td>
<input type="checkbox" name="id" value="${row.id}">
</td>
<td>${row.title}</td>
<td>${row.name}</td>
<td>${row.wechat}</td>
<td>
<button class="btn btn-xs btn-primary"
onclick="deleteRow(${row.id})">删除
</button>
</td>
</tr>
</#list>
</tbody>
</table>
这样我们运行项目,然后进入web后台,就可以看到了,我们这里点击删除时,是可以拿到每行的id的,这样我们就可以根据id删除具体数据,然后再重新刷新下页面就可以了。后面会给大家讲解通过web后台操作数据库的。
到这里我们就实现了管理后台表格数据的展示与操作了,是不是很简单啊。
我会把10小时实战入门java系列课程录制成视频,如果你看文章不能很好的理解,可以去看下视频:https://edu.csdn.net/course/detail/23443
下一节我们讲解分页功能。
编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 1024程序员节 | 我在腾讯自研数据库,我为技术代言
- jasmine spyOn的单步调试
- codeforces 1363C(优先队列)
- 系统与应用异常定位诊断
- SQL优化终于干掉了“distinct”
- SAP Spartacus delivery mode页面Cannot find control with的错误消息
- codeforces 1349A(数学)
- 阔别两年,webpack 5 正式发布了!
- SAP Spartacus delivery mode continue button enable与否的逻辑
- codeforces 1342C(前缀和)
- leetcode-寻找两个正序数组的中位数
- Shell脚本常用命令一览
- 深入学习 React 合成事件
- 关于fixture.debugElement.query(By.css)这个方法的一个疑问
- codeforces 1334C(前缀和)