纵有疾风起
人生不言弃

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

我们做后台开发时,难免会要开发管理后台。如下面这样的管理后台,我们完全可以不用h5同学,自己快速开发管理web后台的。

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

本节知识点

  • springboot2.2.2
  • freemarker
  • bootstrap4
  • maven

老规矩,先看效果图

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

所以本节就来教大家如何快速实现管理后台表格数据的展示与操作。

这节课是建立在你已经会创建springboot项目的基础上,如果你还不知道怎么创建一个springboot项目请异步到这里:https://edu.csdn.net/course/detail/23443

好了,下面就来讲解,如何使用springboot+freemarker+bootstrap快速实现管理后台表格数据的展示。

一,首先要在你的pom.xml 加入freemarker仓库

Java入门009~springboot+freemarker+bootstrap快速实现管理后台插图(1)
        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-freemarker</artifactId>        </dependency>

二,在项目的templates目录下创建demo目录,然后创建list.ftl文件

我们freemarker使用的是 .ftl结尾的模版文件

Java入门009~springboot+freemarker+bootstrap快速实现管理后台插图(2)

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%20%20%20%20.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%20%20%20%20.min.css">
  • 2,把bootstrap下载到本地,然后再引入本地
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
Java入门009~springboot+freemarker+bootstrap快速实现管理后台插图(3)

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

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

Java入门009~springboot+freemarker+bootstrap快速实现管理后台插图(4)

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

我会把10小时实战入门java系列课程录制成视频,如果你看文章不能很好的理解,可以去看下视频:https://edu.csdn.net/course/detail/23443

有任何关于编程的问题都可以加我微信2501902696(备注编程开发)

编程小石头,码农一枚,非著名全栈开发人员。分享自己的一些经验,学习心得,希望后来人少走弯路,少填坑。

文章转载于:https://www.jianshu.com/p/f58c48ba9119

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » Java入门009~springboot+freemarker+bootstrap快速实现管理后台

分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活