10小時入門java開發03 springboot+freemarker+bootstrap快速實現管理後臺

時間 2019-11-21

標籤小時入門 java 開發 springboot+freemarker+bootstrap springboot freemarker bootstrap 快速實現管理後臺欄目 Java 简体版

原文原文鏈接

咱們作後臺開發時，不免會要開發管理後臺。以下面這樣的管理後臺，咱們徹底能夠不用h5同窗，本身快速開發管理web後臺的。javascript

因此我會用幾節來教你們如何快速實現管理後臺。

本節知識點

springboot
freemarker
bootstrap
maven

老規矩，先看效果圖

因此本節就來教你們如何快速實現管理後臺表格數據的展現與操做。css

這節課是創建在你已經會建立springboot項目的基礎上，若是你還不知道怎麼建立一個springboot項目請異步到這裏：edu.csdn.net/course/deta…html

好了，下面就來說解，如何使用springboot+freemarker+bootstrap快速實現管理後臺表格數據的展現。java

一，首先要在你的pom.xml 加入freemarker倉庫

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
複製代碼

二，在項目的templates目錄下建立demo目錄，而後建立list.ftl文件

咱們freemarker使用的是 .ftl結尾的模版文件 web

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有兩種方式，你們學習階段推薦用第一種方式。spring

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>
複製代碼