把function放进table标签_实学：Java开发自己的博客系统-第三十四篇（标签管理页面）...

最新推荐文章于 2023-07-17 22:28:03 发布

weixin_39606244

最新推荐文章于 2023-07-17 22:28:03 发布

阅读量146

点赞数

文章标签：把function放进table标签

有了标签数据，就开始制作标签页面功能吧。设想中，大体也是表格，列出标签的信息。

新建模板文件

工程中，templates下新建模板文件，全名editTag.ftl。里面内容如下：

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标签管理</title>
    <!-- JQuery   -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper   -->
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.4/umd/popper.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- Font Awesome -->
    <script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/solid.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/fontawesome.js"></script>

    <link href="css/style.css" rel="stylesheet">
    <link href="3rdParty/datatable/datatables.min.css" rel="stylesheet">
</head>

<body>
<div class="wrapper">
    <!-- Sidebar -->
    <#include "./sidebar.ftl">

    <!-- Content -->
    <div id="content">
        <#include "./sidebartoggle.ftl">

        <section style="padding: 5px">
            <div class="card card-primary">
                <div class="card-header">
                    <h4>标签管理</h4>
                </div>
                <div class="card-body">

                    <table id="tag-table-container" class="table table-bordered table-striped table-hover mt-2">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>创建时间</th>
                        </tr>
                        </thead>
                        <tbody id="tag-table-body">
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                </div>
                <div class="card-footer">

                </div>
            </div>
        </section>
    </div>
</div>
</body>

<script src="3rdParty/sweetalert2/sweetalert2.all.min.js"></script>
<script src="3rdParty/datatable/datatables.min.js"></script>
<script src="javascript/sidebartoggle.js"></script>
<script src="javascript/toast.js"></script>
<script src="javascript/netutil.js"></script>

</html>

要展示出这个页面，需要添置一个后台的Controller。

TagController

工程中，Controller文件夹下，新建java类文件，全名TagController。这种控制器我们已经写过3个了，所以现在应该轻车熟路，我喜欢的做法是拷贝个原来差不多的，直接改改就出来了。

package DefaultMain.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class TagController {
    @GetMapping("/tag")
    public String tag(HttpServletRequest request, ModelMap modelMap) {
        return "editTag";
    }
}

嗯，这个控制器只要发现浏览器有/tag路径请求，就会去找我们刚写的那个模板文件做页面，提交给访问的浏览器。所以来改一下原来的sidebar模板。

sidebar.ftl修改

找到sidebar.ftl，找一下“标签”两个字，把它的<a>元素的href改成需要的：

<a href="/tag">标签</a>

好了，可以运行。点击侧边栏的标签后，我们能看到如下页面（图一）：

图一：标签管理页面

表格中没有任何数据，所以我们可以想一下，数据应该什么时候问服务器要？

在页面元素都准备好以后要吧。所以我们来写这块代码。

tag.js

工程的javascript目录下，新建js文件，全名tag.js。里面写入下面代码：

function fetchTagList() {
    netPostJson(document.location.origin + '/api/gettaglist',
        {},

        function(data) {
            if(data && data.length) {
                var parent = $('#tag-table-body');
                for (var i = 0; i < data.length; ++i) {
                    var c = data[i];
                    var s = '<tr><td>' + c.id + '</td><td>' + c.name + '</td><td>' + c.createTime + '</td></tr>';
                    parent.append(s);
                }
            }
        },

        function(xhr) {
            Toast.fire({
                type: 'error',
                title: "Ajax 发生错误: " + xhr.responseText
            });
        });
}

$(document).ready(function() {
    fetchTagList();
});

还是用了document.ready的方式，这是等待其他元素都准备好以后再做事情。这里唯一做的事情就是向服务器发起了取tag列表的请求（目前该请求还未实现，后面马上有）。在取得数据后，动态的在页面中显示这些数据。

有了这个js文件，不要忘记在相应的模板文件中把这个js导入，这里是editTag.ftl导入这个文件，最后editTag.ftl全部内容：

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>标签管理</title>
    <!-- JQuery   -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper   -->
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.4/umd/popper.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- Font Awesome -->
    <script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/solid.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/fontawesome.js"></script>

    <link href="css/style.css" rel="stylesheet">
    <link href="3rdParty/datatable/datatables.min.css" rel="stylesheet">
</head>

<body>
<div class="wrapper">
    <!-- Sidebar -->
    <#include "./sidebar.ftl">

    <!-- Content -->
    <div id="content">
        <#include "./sidebartoggle.ftl">

        <section style="padding: 5px">
            <div class="card card-primary">
                <div class="card-header">
                    <h4>标签管理</h4>
                </div>
                <div class="card-body">

                    <table id="tag-table-container" class="table table-bordered table-striped table-hover mt-2">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                            <th>创建时间</th>
                        </tr>
                        </thead>
                        <tbody id="tag-table-body">
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                </div>
                <div class="card-footer">

                </div>
            </div>
        </section>
    </div>
</div>
</body>

<script src="3rdParty/sweetalert2/sweetalert2.all.min.js"></script>
<script src="3rdParty/datatable/datatables.min.js"></script>
<script src="javascript/sidebartoggle.js"></script>
<script src="javascript/toast.js"></script>
<script src="javascript/netutil.js"></script>
<script src="javascript/tag.js"></script>

</html>

跟最上面的刚创建的时候相比，多了</html>上面的一行而已。

这样前端的工作就完成了。没有后端的配合，测试无法进行。所以我们继续。

TagApi

首先需要一个Api服务，所以在工程API文件夹下面，新建一个java类文件，全名TagApi.java，里面放上这些：

package DefaultMain.API;

import DefaultMain.Model.Tag;
import DefaultMain.Service.TagService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.support.ServletUriComponentsBuilder;

import java.net.URI;
import java.util.Collection;

@RestController
public class TagApi {
    @Autowired
    TagService tagService;

    @PostMapping("/api/gettaglist")
    public ResponseEntity<?> getTagList() {
        URI uri  = ServletUriComponentsBuilder.fromCurrentRequest().build().toUri();

        Collection<Tag> tagList = tagService.read();

        return ResponseEntity.created(uri).body(tagList);
    }
}

没有啥特殊的，基本也套路化了。不过这里面涉及的read方法，原来我们还没有实现。所以还需要改原来的代码。

TagService

找到TagServiceImpl.java，我们只要把read方法整体改成如下：

    @Override
    public Collection<Tag> read() {
        return tagRepository.findAll();
    }

好了，可以运行起来测试。数据展示如图二：

图二：标签数据展示

休息~

weixin_39606244

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫