Java入门006~springboot+freemarker+bootstrap快速实现管理后台

简介: 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">

c3574aa61339c4802e5b5ea25b603efd.jpg


三,我们页面写好了,接下来就是网往页面里传数据了。


这里我们定义一个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后台操作数据库的。



到这里我们就实现了管理后台表格数据的展示与操作了,是不是很简单啊。

相关文章
|
9天前
|
安全 Java 数据库连接
2025 年最新 Java 学习路线图含实操指南助你高效入门 Java 编程掌握核心技能
2025年最新Java学习路线图,涵盖基础环境搭建、核心特性(如密封类、虚拟线程)、模块化开发、响应式编程、主流框架(Spring Boot 3、Spring Security 6)、数据库操作(JPA + Hibernate 6)及微服务实战,助你掌握企业级开发技能。
102 3
|
18天前
|
前端开发 Java 数据库
Java 项目实战从入门到精通 :Java Web 在线商城项目开发指南
本文介绍了一个基于Java Web的在线商城项目,涵盖技术方案与应用实例。项目采用Spring、Spring MVC和MyBatis框架,结合MySQL数据库,实现商品展示、购物车、用户注册登录等核心功能。通过Spring Boot快速搭建项目结构,使用JPA进行数据持久化,并通过Thymeleaf模板展示页面。项目结构清晰,适合Java Web初学者学习与拓展。
130 1
|
12天前
|
算法 Java 测试技术
零基础学 Java: 从语法入门到企业级项目实战的详细学习路线解析
本文为零基础学习者提供完整的Java学习路线,涵盖语法基础、面向对象编程、数据结构与算法、多线程、JVM原理、Spring框架、Spring Boot及项目实战,助你从入门到进阶,系统掌握Java编程技能,提升实战开发能力。
56 0
|
2月前
|
存储 缓存 NoSQL
java 集合入门基础理论的核心概念与实用长尾知识
本文介绍了Java集合框架的基础理论知识,包括单列集合(List、Set、Queue)和双列集合(Map)的特点及常用实现类(如ArrayList、HashSet、HashMap等)。详细讲解了集合的遍历方式(迭代器、增强for循环、Lambda表达式)和典型应用场景(如数据去重、键值存储等)。通过具体代码示例,帮助初学者理解集合框架的核心概念和实际应用,为Java编程中的数据存储与管理提供基础指导。
64 0
|
2月前
|
缓存 NoSQL Java
Java Web 从入门到精通之苍穹外卖项目实战技巧
本项目为JavaWeb综合实战案例——苍穹外卖系统,涵盖Spring Boot 3、Spring Cloud Alibaba、Vue 3等主流技术栈,涉及用户认证、订单处理、Redis缓存、分布式事务、系统监控及Docker部署等核心功能,助你掌握企业级项目开发全流程。
217 0
|
2月前
|
存储 安全 Java
Java 学习路线 35 掌握 List 集合从入门到精通的 List 集合核心知识
本文详细解析Java中List集合的原理、常用实现类(如ArrayList、LinkedList)、核心方法及遍历方式,并结合数据去重、排序等实际应用场景,帮助开发者掌握List在不同业务场景下的高效使用,提升Java编程能力。
264 0
|
2月前
|
前端开发 Java API
基于 Spring Boot 3 与 React 的 Java 学生信息管理系统从入门到精通实操指南
本项目基于Spring Boot 3与React 18构建学生信息管理系统,涵盖前后端开发、容器化部署及测试监控,提供完整实操指南与源码,助你掌握Java全栈开发技能。
103 0
|
3月前
|
并行计算 Java API
Java 入门循环结构基础知识点详解
摘要:本文介绍了Java现代循环技术的进阶应用,包括Stream API、响应式编程和模式匹配,展示了如何用Stream API替代传统循环进行声明式集合处理(如过滤、映射和并行计算),以及响应式编程在异步非阻塞场景下的优势。文章还通过电商订单处理系统的案例演示了这些技术的综合应用,并提供了性能优化建议,如合理使用并行处理和避免循环内对象创建。这些现代特性使Java代码更简洁、高效,更适合高并发和I/O密集型场景。
46 1
|
3月前
|
Oracle Java 关系型数据库
java 入门学习视频_2025 最新 java 入门零基础学习视频教程
《Java 21 入门实操指南(2025年版)》提供了Java最新特性的开发指导。首先介绍了JDK 21和IntelliJ IDEA 2025.1的环境配置,包括环境变量设置和预览功能启用。重点讲解了Java 21三大核心特性:虚拟线程简化高并发编程,Record模式优化数据解构,字符串模板提升字符串拼接可读性。最后通过图书管理系统案例,展示如何运用Record定义实体类、使用Stream API进行数据操作,以及结合字符串模板实现控制台交互。该指南完整呈现了从环境搭建到实际项目开发的Java 21全流程实
96 1
|
2月前
|
存储 安全 Java
从基础语法到实战应用的 Java 入门必备知识全解析
本文介绍了Java入门必备知识,涵盖开发环境搭建、基础语法、面向对象编程、集合框架、异常处理、多线程和IO流等内容,结合实例帮助新手快速掌握Java核心概念与应用技巧。
56 0