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

最新推荐文章于 2024-08-12 15:45:48 发布

2401_85819318

最新推荐文章于 2024-08-12 15:45:48 发布

阅读量135

点赞数 8

文章标签： java spring boot bootstrap

本文链接：https://blog.csdn.net/2401_85819318/article/details/140952540

版权

二，在项目的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>
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>

2401_85819318

关注

8
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
10小时入门java开发03 springboot+freemarker+bootstrap快速实现管理后台

这里我们先模拟4条数据，然后把数据传到我们的list.ftl页面，正常数据都应该是从数据库里取的，后面会做讲解。这里需要讲下，我们引入bootstrap有两种方式，大家学习阶段推荐用第一种方式。这就是用freemarker模版的好处。可以直接在页面里使用我们的java数据。我们freemarker使用的是 .ftl结尾的模版文件。这里我们定义一个DemoController如下。list.ftl完整代码如下。
复制链接

扫一扫