10小时入门java开发03 springboot+freemarker+bootstrap快速实现管理后台

2401_85191043

于 2024-05-22 13:21:41 发布

阅读量320

点赞数 4

分类专栏：程序员文章标签： java 学习经验分享

本文链接：https://blog.csdn.net/2401_85191043/article/details/139117585

版权

程序员专栏收录该内容

14 篇文章 0 订阅

订阅专栏

所以我会用几节来教大家如何快速实现管理后台。

本节知识点

springboot
freemarker
bootstrap
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.w

[video(video-8PGqMbZO-1716354551447)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=1804892953)(image-https://img-blog.csdnimg.cn/img_convert/d03a705143646f4f3f6ea879d59b2788.png)(title-必看视频！获取2024年最新Java开发全套学习资料 备注Java)]

eb.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;




# 更多：Java进阶核心知识集

包含：JVM，JAVA集合，网络，JAVA多线程并发，JAVA基础，Spring原理，微服务，Zookeeper，Kafka，RabbitMQ，Hbase，MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存等等

![image](https://img-blog.csdnimg.cn/img_convert/7040b0a0c010d94f5c8937ad4a139261.webp?x-oss-process=image/format,png)

# 高效学习视频

import java.util.List;

import java.util.Map;




# 更多：Java进阶核心知识集

包含：JVM，JAVA集合，网络，JAVA多线程并发，JAVA基础，Spring原理，微服务，Zookeeper，Kafka，RabbitMQ，Hbase，MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存等等

[外链图片转存中...(img-mmq7a50t-1716355279857)]

# 高效学习视频