加模板样式

最新推荐文章于 2023-08-10 15:38:02 发布

lijinchao1234

最新推荐文章于 2023-08-10 15:38:02 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/weixin_45135790/article/details/101011516

版权

LoginController

package com.zpark.neimin.first.controller;

import com.zpark.neimin.first.common.BaseResult;
import com.zpark.neimin.first.common.BootstrapTable;
import com.zpark.neimin.first.model.School;
import com.zpark.neimin.first.model.User;
import com.zpark.neimin.first.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.Map;

@Controller
public class LoginController {
    @Autowired
    private UserService userService;

    @RequestMapping("/")
    public String Login(){
        return "login";
    }

    @RequestMapping("/login.json")
    @ResponseBody
    public BaseResult recieveDate(@RequestBody Map<String, Object> loginData) {
//        Map<String, Object> map = new HashMap<>();
//        String loginName = loginData.get("loginName").toString();
//        System.out.println(".......controller");
//        return map;

        BaseResult baseResult = new BaseResult();
        String loginName = loginData.get("loginName").toString();
        String loginPwd = loginData.get("loginPwd").toString();
        if (loginName != null) {

            User user = userService.selByName(loginName);
            System.out.println("....from mysql....." + user);
            if(user.getPassWord().equals(loginPwd)) {
                baseResult.setSuccess(true);
            } else {
                baseResult.setSuccess(false);
            }
        }
        return baseResult;
    }

    @RequestMapping(value = "/index.html")
    public String test() {
        System.out.println("......index");
        return "index";
    }
    @RequestMapping("/table.html")
    public String table(){return "table";}




    @RequestMapping("/getData")
    @ResponseBody
//    测试假数据
    public BootstrapTable getData(){
         ArrayList<School> list = new ArrayList<>();
        for(int i = 0; i<30; i++){
            School school = new School();
            school.setId(i);
            school.setName("lucas");
            school.setSex("男");
            list.add(school);
        }
        int total = 30;
        return new BootstrapTable(total,list);
    }
}

School

package com.zpark.neimin.first.model;

public class School {
    private int id;
    private String name;
    private String sex;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

login_js.html

<script type="text/javascript">
    var Login=function(){
        return {
            init: function(){
                Login.initSubmit()
            },
            initSubmit: function() {
                var defaultParam = {
                    formId: "newForm"
                }
                //param全局变量 里面有newform
                var param = $.extend({}, defaultParam);
             alert("......" + defaultParam.formId)
                //点击登陆之后进行的操作
                $('#' + defaultParam.formId).submit(function () {

                    Login.getLoginData(defaultParam)
                });
            },

            /**
             * 在form中获取数据
             * curParam 形参
             */
            getLoginData: function (curParam) {

                    // var info = $('form').serializeArray();
                    // //info:两个object
                    //
                    // var d = {};
                    // //循环
                    // $.each(info, function () {
                    //     d[this.name] = this.value;//this代表当前循环的object 第一次是[username:dd]
                    // })
                    var info =$('#'+ curParam.formId).serializeObject()
                    alert('........info' + JSON.stringify(info));
                    //将提取的出来的数据发送给后台loginController
                    Login.sendDataToController(info);

            },
            /**
             * 用Ajax
             * 将数据（param）发送到Controller
             * @param param: 需要提交的数据
             */

            sendDataToController: function (param) {
                //alert('..........sendDataToController');
                $.ajax({
                    url:"/login.json",
                    contentType: "application/json;charset=UTF-8",
                    type: "post",
                    data: JSON.stringify(param),
                    //回调函数目的就是得到反馈，自己定义别人来反馈
                    success: function (resp) {
                         if (resp.success){
                          alert(".....提交成功" + resp.toString());
                             location.href="/table.html"
                         }
                         else {
                             alert("提交失败")
                         }

                    }
                });
            }
        }
    }();
    //页面加载完成后执行
    $(document).ready(function () {
        Login.init();
    });


    /**
     * 封装从this中取数据功能
     * this：代表调用此方法的那个标签（newForm）
     */
    $.fn.serializeObject=function () {
        var o = {};//放数据用的

        /**
         * serializeArray()方法通过序列化表单值来创建对象数组。返回josn数据结构数据，是一种josn对象
         */
        var a=this.serializeArray();
        $.each(a,function () {
            if (o[this.name]){
                if (!o[this.name].push){
                    o[this.name]=this.value;
                }
                o[this.name].push(this.value || '')
            }else {
                o[this.name]=(this.value || '')
            }

        });
        return o;
    }
</script>

table.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>

<body>
<table id ="ArbetTable"></table>
    <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: 'name',
                            title: '名字'
                        }, {
                            field: 'sex',
                            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>

</body>
</html>