Springboot+mybatis-plus+jqGrid应用

1、Service类内容:

package com.xibei.api.kalf.service;

import com.xibei.api.kalf.entities.Order;
import com.xibei.api.kalf.mapper.OrderMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

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

@Service
public class OrderService {

    @Autowired
    private OrderMapper orderMapper;

    public List Get_Orderlist()
    {
       List<Order> list = new ArrayList<>();

        list = orderMapper.selectList(null);
        return list;
    }
}

2、Controller类内容

package com.xibei.api.kalf.controller;

import com.xibei.api.kalf.entities.Order;
import com.xibei.api.kalf.service.OrderService;
import org.mybatis.spring.annotation.MapperScan;
import org.omg.CORBA.PUBLIC_MEMBER;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;


import java.util.List;


@Controller
@MapperScan(basePackages = "com.xibei.api.kalf")
@ComponentScan(basePackages = "com.xibei.api.kalf")
public class OrderController {

    @Autowired
    private OrderService orderService;

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String show_order_html()
    {
        return "orderlist";
    }
     //此部分内容对应Ajax中jqGrid获取数据的请求;
    @RequestMapping(value = "/order_list",method = RequestMethod.GET)
    @ResponseBody
    public Object show_orderList()
    {
        List<Order> list = orderService.Get_Orderlist();
        System.out.println(list);
        return list;
    }
}

页内信息:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="home">

 <body>
 <div  layout:fragment="content">
           <!-- 正文内容 -->
            <div class="row  border-bottom white-bg page-heading">
                <div class="col-lg-6" align="left">
                    <button id="addBtn" type="button" class="btn btn-w-m btn-primary">增加</button>
                    <button type="button" class="btn btn-w-m btn-info" id="editBtn" >编辑</button>
                    <button type="button" class="btn btn-w-m btn-danger" id="delBtn">删除</button>
                </div>
                <div align="right">
                    <label type="lable" >日期:  &nbsp;</label>
                    <input type="text"  name="start" placeholder="起始日期" id="start-picker" readonly value="">
                    <span>--</span>
                    <input type="text"  name="end" placeholder="结束日期" id="end-picker" readonly value="">
                    <button type="button" class="btn btn-w-m btn-success" id="btnQuery" οnclick="">查询</button>
                </div>
            </div>
            <div class="fh-breadcrumb">
                <div class="full-height">
                    <div class="full-height-scroll white-bg ">
                        <div class="element-detail-box">
                            <div class="ibox-content">
                                <div class="jqGrid_wrapper">
                                    <table id="table_list_2">
                                    </table>
                                    <div id="pager_list_2"></div><!--分页位置-->
                                    <input type="hidden" id="hi_id" value="" />
                                    <table>
                                        <tr><td><a href="/orderlist/1/">首页</a></td><td>&nbsp;&nbsp;</td>
                                            <td><a href="/orderlist/#">上一页</a></td><td>&nbsp;&nbsp;</td>
                                            <td><a href="/orderlist/#">下一页</a></td><td>&nbsp;&nbsp;</td>
                                            <td><a href="/orderlist/#">未页</a></td>
                                            <td>&nbsp;&nbsp;</td><td>第【&nbsp;/&nbsp;】页</td>
                                        </tr></table>
                                    <input type="hidden" id="hi_page" value="" />
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

 <div id="div_script" layout:fragment="script">
     <script th:src="@{js/jquery-2.1.1.js}"></script>
     <script th:src="@{js/bootstrap.min.js}"></script>
     <script th:src="@{js/plugins/metisMenu/jquery.metisMenu.js}"></script>
     <script th:src="@{js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

     <!-- Custom and plugin javascript -->
     <script th:src="@{js/inspinia.js}"></script>
     <script th:src="@{js/plugins/pace/pace.min.js}"></script>

     <!-- Peity -->
     <script th:src="@{ js/plugins/peity/jquery.peity.min.js}"></script>
     <script th:src="@{js/plugins/chosen/chosen.jquery.js}"></script>
     <!--日期控件-->
     <script th:src="@{js/plugins/datapicker/bootstrap-datepicker.js}"></script>
     <script th:src="@{js/plugins/datapicker/bootstrap-datepicker.min.js}" type="text/javascript"></script>
     <script th:src="@{js/plugins/datapicker/bootstrap-datepicker.zh-CN.min.js}" type="text/javascript"></script>
     <script th:src="@{js/DateCtrl.js}" type="text/javascript"></script>
     <script th:src="@{js/plugins/jqGrid/grid.locale-en.js}"></script>
     <script th:src="@{js/plugins/jqGrid/jquery.jqGrid.min.js}"></script>
     <!-- 影响日期控件显示
     <script th:src="@{js/plugins/jquery-ui/jquery-ui.min.js}"></script>
     -->
     <script>
         $(document).ready(function () {
             $("#table_list_2").jqGrid({
                 url : "http://localhost:8080/order_list",
                 datatype : "json",
                 height:"auto",
                 autowidth: true,
                 shrinkToFit: true,
                 rowNum: 10,
                 sortable:true,
                 sortname:'orderDoc',
                 rowList: [10, 20, 30],
                 colNames:['序号','订单号','原料名称', '预订数量','补货数量','订货数量','单位','订货日期','发货日期','门店'],

                 colModel:[
                     {name:'orderId',index:'orderId', editable: false,width:30, sorttype:"int",search:true},
                     {name:'orderDoc',index:'orderDoc', editable: true,width:40, editrules:{required:true},search:true},
                     {name:'name',index:'name', editable: true, width:80,search:true,editrules:{required:true}},
                     {name:'reserveNum',index:'reserveNum', editable: true, width:40 },
                     {name:'futuresNum',index:'futuresNum', editable: true, width:40 },
                     {name:'confirmNum',index:'confirmNum', editable: true, width:40 },
                     {name:'unit',index:'unit', editable: true, width:30,search:true },
                     {name:'orderDate',index:'orderDate', editable: true, width:40,search:true },
                     {name:'shipDate',index:'shipDate', editable: true, width:40 },
                     {name:'store',index:'store', editable: true, width:30 }
                 ],
                 pager: "#pager_list_2",
                 viewrecords: true,
                 pgbuttons:true,
                 loadonce: true,
                 add: true,
                 edit: true,
                 addtext: 'Add',
                 edittext: 'Edit',
                 hidegrid: false,
                 multiselect:true,
                 editurl:"#"
             });

             // Setup buttons
             $("#table_list_2").jqGrid('navGrid', '#pager_list_2',
                 {edit: false, add: false, del: false, search: false},
                 {height: 150, reloadAfterSubmit: true}
             );

             // Add responsive to jqGrid
             $(window).bind('resize', function () {
                 var width = $('.jqGrid_wrapper').width();

                 $('#table_list_2').setGridWidth(width);
             });

             $("#editBtn").click(function(){
                 var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');

                 if( gr != null ) jQuery("#table_list_2").jqGrid('editGridRow',gr,{height:450,
                     onclickSubmit : function(params, posdata) {
                         return {"orderId":$('#table_list_2').jqGrid('getCell', gr, 'orderId')};
                     },
                     closeAfterEdit : true,
                     reloadAfterSubmit:true,
                     afterComplete:function(data,postdata){
                         location.reload()
                     }
                 });
                 else alert("请选择一条数据");
                 var rowData = jQuery("#table_list_2").jqGrid('getRowData',gr);
                 //alert(rowData.special_specialtype);

             });
             $("#addBtn").click(function(){
                 jQuery("#table_list_2").jqGrid('editGridRow',"new",{height:350,closeAfterAdd : true,reloadAfterSubmit:true,
                     afterComplete:function(data,postdata){
                         location.reload()
                     }});

             });
             $("#delBtn").click(function(){
                 var gr = jQuery("#table_list_2").jqGrid('getGridParam','selrow');
                 //alert(gr);
                 if( gr != null ) jQuery("#table_list_2").jqGrid('delGridRow',gr,{height:120,
                         reloadAfterSubmit:true,

                         onclickSubmit : function(params, posdata) {
                             return {"orderId":$('#table_list_2').jqGrid('getCell', gr, 'orderId')};
                         },
                         afterComplete:function(data,postdata){
                             location.reload()
                         }
                     }
                 );
                 else alert("请选择一条数据!");
             });
             $("#searBtn").click(function(){
                 jQuery("#table_list_2").jqGrid('searchGrid',
                     {sopt:['cn','bw','eq','ne','lt','gt','ew']}
                 );
             });
         });

         function change(id) {
             alert(id);
         }

     </script>

     <script type="text/javascript">
         $(document).ready(function () {
             var url = window.location.pathname;
             if(url != "/" && url != "/index/"){
                 $("li").removeClass("active");
                 $("[href*='" + url + "']").parent().parent().parent().addClass("active");
                 $("[href*='" + url + "']").parent().parent().addClass("in");
                 $("[href*='" + url + "']").parent().addClass("active");
                 //alert(url);
             }

             window.Modal = function () {
                 var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
                 var alr = $("#ycf-alert");
                 var ahtml = alr.html();
                 //alert(ahtml);

                 /* html 复原不在 _init() 里面做了,重复调用时会有问题,直接在 _alert/_confirm 里面做 */
                 var _alert = function (options) {
                     alr.html(ahtml);  // 复原
                     alr.find('.ok').removeClass('btn-success').addClass('btn-primary');
                     alr.find('.cancel').hide();
                     _dialog(options);

                     return {
                         on: function (callback) {
                             if (callback && callback instanceof Function) {
                                 alr.find('.ok').click(function () { callback(true) });
                             }
                         }
                     };
                 };

                 var _confirm = function (options) {
                     alr.html(ahtml); // 复原
                     alr.find('.ok').removeClass('btn-primary').addClass('btn-success');
                     alr.find('.cancel').show();
                     _dialog(options);

                     return {
                         on: function (callback) {
                             if (callback && callback instanceof Function) {
                                 alr.find('.ok').click(function () { callback(true) });
                                 alr.find('.cancel').click(function () { callback(false) });
                             }
                         }
                     };
                 };

                 var _dialog = function (options) {
                     var ops = {
                         msg: "提示内容",
                         title: "操作提示",
                         btnok: "确定",
                         btncl: "取消"
                     };

                     $.extend(ops, options);

                     console.log(alr);

                     var html = alr.html().replace(reg, function (node, key) {
                         return {
                             Title: ops.title,
                             Message: ops.msg,
                             BtnOk: ops.btnok,
                             BtnCancel: ops.btncl
                         }[key];
                     });

                     alr.html(html);
                     alr.modal({
                         width: 500,
                         backdrop: 'static'
                     });
                 }

                 return {
                     alert: _alert,
                     confirm: _confirm
                 }

             }();

         })

     </script>
 </div>
</body>
<script type="text/javascript">
    //登出
    function logout(){
        Modal.confirm(
                {
                    msg: "是否继续退出?"
                }).on( function (e) {
                    if(e==true){
                        $.ajax( {
                            type : "post",
                            url : "/logout/",
                            data : {},
                            dataType:"json",
                            success : function(data) {
                                if(data.code==1){
                                    location.href='/';
                                }else{

                                }
                            },
                            error : function(data) {

                            }
                        });
                    }

                });

    }
</script>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
课程简介:历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
课程的实战源码是我在 GitHub 上开源项目 spring-boot-projects 中的其中一个项目代码,目前已有 2300 多个 star,项目截图如下: 由于项目比较受大家欢迎,因此心中就出现了将它做成教学视频的想法,也就是你现在了解的这个课程《SpringBoot入门及前后端分离项目开发》,本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发。Spring Boot 介绍、前后端分离、API 规范等内容旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力;这最后的项目实战为课程的主要部分,我会带着大家实际的开发一个前后端分离的 Spring Boot 实践项目,让大家实际操作并从无到有开发一个线上项目,并学习到一定的开发经验以及其中的开发技巧,旨在让读者具有将 Spring Boot 真正应用于项目开发的能力; 以下为实践项目的页面和功能展示,分别为:登录页面 列表页面(分页功能) 图片上传功能 富文本编辑器整合使用 实践项目的主要功能和页面就是这些,通过项目展示大家也能够感受到,在实际应用开发中的高频次功能都已经实现,稍加修改就可以运用到企业开发中,整个项目的开发模式为前后端分离的模式,即 Spring Boot 提供后端接口,前端页面通过 Ajax 异步调用接口的方式与后端服务器进行交互并将数据填充至页面中,这也是目前企业开发中比较重用的开发模式,希望大家能够了解并且能够实际的上手开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值