学习笔记之小工程（做封装）

最新推荐文章于 2020-11-20 15:49:20 发布

Glace.♥

最新推荐文章于 2020-11-20 15:49:20 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/LULU_lulu666/article/details/101031577

版权

这篇学习笔记探讨了在实际项目中进行代码封装的需求，通过案例展示了如何将原代码结构化，包括`index.html`、`index_js.html`和`indexController.class`的组织。进一步介绍了`school.html`、`getSchoolData.html`以及`indexController.class`在封装过程中的作用，旨在提升代码的复用性和可维护性。

摘要由CSDN通过智能技术生成

需求，做封装

原代码

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="common/include"/>
    <title>主页</title>
   <th:block th:replace="common/link"/>
</head>
<body>
<table id="ArbetTable"></table>
<th:block th:replace="/js/index_js"/>
</body>
</html>

index_js.html

<script>
    $(function () {
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
    });
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#ArbetTable').bootstrapTable({
                url: '/getData',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [
                    {
                        field: 'id',
                        title: 'ID'
                    }, {
                        field: 'seq',
                        title: '排名'
                    }, {
                        field: 'score',
                        title: '分数'
                    },
                    {
                        field: 'name',
                        title: '姓名'
                    }, {
                        field: 'level',
                        title: '等级'
                    }, {
                        field: 'remark',
                        title: '备注'
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        formatter: operateFormatter //自定义方法，添加操作按钮
                    },
                ],
                rowStyle: function (row, index) {
                    var classesArr = ['success', 'info'];
                    var strclass = "";
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[0];
                    } else {//奇数行
                        strclass = classesArr[1];
                    }
                    return { classes: strclass };
                },//隔行变色
            });

        };


        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset:params.offset
            };
            return temp;
        };
        return oTableInit;
    };


    function operateFormatter(value, row, index) {//赋予的参数
        return [
            '<a class="btn active disabled" href="#">编辑</a>',
            '<a class="btn active" href="#">档案</a>',
            '<a class="btn btn-default" href="#">记录</a>',
            '<a class="btn active" href="#">准入</a>'
        ].join('');
    }
</script>

indexController.class

package com.neimin.test.controller;

import com.neimin.test.common.BootstrapTable;
import com.neimin.test.model.School;

import com.neimin.test.service.SchoolService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
public class IndexController {
    @Autowired
    private SchoolService schoolService;

    @RequestMapping("/getData")
    @ResponseBody
    public BootstrapTable getData() {
        List<School> schoolData = schoolService.getSchoolData();
    return new  BootstrapTable(25,schoolData);
    }
    @RequestMapping("/index")
    public String getIndex(){
    return "index";
    }
}

代码：

school.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:replace="common/link"/>
    <th:block th:replace="common/include"/>
    <meta charset="UTF-8">
    <title>学校</title>
</head>
<body>
    <table id="ArbetTable"></table>
    <th:block th:replace="js/getSchoolData"/>
</body>
</html>

getSchoolData.html

<script type="text/javascript">
     var School = function () {
         return{
             init:function () {
                 $('#ArbetTable').bootstrapTable({
                     url: '/getSchData',         //请求后台的URL（*）
                     method: 'get',                      //请求方式（*）
                     toolbar: '#toolbar',                //工具按钮用哪个容器
                     striped: true,                      //是否显示行间隔色
                     cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                     pagination: true,                   //是否显示分页（*）
                     sortable: false,                     //是否启用排序
                     sortOrder: "asc",                   //排序方式
                     /**
                      * 修改：School.queryParams
                      */
                     queryParams: School.queryParams,//传递参数（*）
                     sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                     pageNumber: 1,                       //初始化加载第一页，默认第一页
                     pageSize: 10,                       //每页的记录行数（*）
                     pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                     search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                     contentType: "application/x-www-form-urlencoded",
                     strictSearch: true,
                     showColumns: true,                  //是否显示所有的列
                     showRefresh: true,                  //是否显示刷新按钮
                     minimumCountColumns: 2,             //最少允许的列数
                     clickToSelect: true,                //是否启用点击选中行
                     height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                     uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                     showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                     cardView: false,                    //是否显示详细视图
                     detailView: false,                   //是否显示父子表
                     columns: [
                         {
                             field: 'id',
                             title: 'ID'
                         }, {
                             field: 'seq',
                             title: '排名'
                         }, {
                             field: 'score',
                             title: '分数'
                         },
                         {
                             field: 'name',
                             title: '姓名'
                         }, {
                             field: 'level',
                             title: '等级'
                         }, {
                             field: 'remark',
                             title: '备注'
                         },
                         {
                             field: 'operate',
                             title: '操作',
                             /**
                              * 修改：School.operateFormatter
                              */
                             formatter: School.operateFormatter //自定义方法，添加操作按钮
                         },
                     ],
                     rowStyle: function (row, index) {
                         var classesArr = ['success', 'info'];
                         var strclass = "";
                         if (index % 2 === 0) {//偶数行
                             strclass = classesArr[0];
                         } else {//奇数行
                             strclass = classesArr[1];
                         }
                         return { classes: strclass };
                     },//隔行变色
                 });
             },

             /**
              * 修改：记得把operateFormatter规范为一个函数
              */

             operateFormatter:function (value, row, index) {//赋予的参数
             return [
                 '<a class="btn active disabled" href="#">编辑</a>',
                 '<a class="btn active" href="#">档案</a>',
                 '<a class="btn btn-default" href="#">记录</a>',
                 '<a class="btn active" href="#">准入</a>'
             ].join('');
         },
             /**
              * 修改：记得添加param参数
              * @param params
              */
             queryParams:function (params) {
                 var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                     limit: params.limit,   //页面大小
                     offset: params.offset
                 }
             }
         }
     }();
     $(document).ready(function () {
         School.init();
     })
</script>

indexController.class

package com.neimin.test.controller;

import com.neimin.test.common.BootstrapTable;
import com.neimin.test.model.School;

import com.neimin.test.service.SchoolService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


import java.util.List;

@Controller
public class IndexController {
    @Autowired
    private SchoolService schoolService;


    @RequestMapping("/getSchData")
    @ResponseBody
    public BootstrapTable getSchData() {
        List<School> schoolData = schoolService.getSchoolData();
        return new BootstrapTable(15, schoolData);
    }

    @RequestMapping("/school")
    public String getSchoolData() {
        return "school";
    }

}

Glace.♥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记之小工程（做封装）

需求，做封装原代码index.html<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <th:block th:replace="common/include"/> <title>主页</title> &lt...
复制链接

扫一扫