1200字范文 > springBoot加layui和mybatis后台管理系统增删改查分页登录注销修改密码功能

springBoot加layui和mybatis后台管理系统增删改查分页登录注销修改密码功能

时间：2023-10-22 05:31:11

超市订单管理系统

1 登录页面

1.1 登录

点击提交按钮提交form表单使用post请求把（String name, String password）数据传到后台loginController

路径/user/login

<!DOCTYPE html><html xmlns:th=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="/study/js/jquery/2.0.0/jquery.min.js"></script><link href="/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"><script src="/study/js/bootstrap/3.3.6/bootstrap.min.js"></script></head><style>div.simpleLogo{padding: 32px 0px;}img.loginBackgroundImg{display: block;margin: 0px auto;width: 1440px;height: 670px;}div.loginSmallDiv{background-color: white;position: absolute;right: 80px;top: 180px;width: 350px;height: 400px;padding: 60px 25px 80px 25px;}div.login_acount_text{color: #3C3C3C;font-size: 16px;font-weight: bold;}div.loginInput{border: 1px solid #CBCBCB;margin: 20px 0px;}div.loginInput span.loginInputIcon{margin: 0px;background-color: #CBCBCB;width: 40px;height: 40px;display:inline-block;}span.loginInputIcon span.glyphicon{font-size: 22px;position: relative;left: 9px;top: 9px;color: #606060;}div.loginInput input{display: inline-block;border: 0px solid transparent;width: 244px;height: 30px;position: relative;left: 6px;top: 6px;}body{font-size: 12px;font-family: Arial;}a{color:#999;}a:hover{text-decoration:none;color: #C40000;}button.redButton{color: white;background-color: #C40000;font-size: 14px;font-weight: bold;}</style><body><h3 class="glyphicon glyphicon-home" style="color: burlywood">超市后台管理系统</h3><form method="post" action="/user/login"><div id="loginDiv"><img th:src="@{/img/acc.jpg}" class="loginBackgroundImg" id="loginBackgroundImg"><div class="loginSmallDiv" id="loginSmallDiv"><div><h4><span th:text="${flag}" style="color: red"></span></h4></div><div class="login_acount_text">账户登录</div><div class="loginInput "><span class="loginInputIcon "><span class=" glyphicon glyphicon-user"></span></span><input type="text" placeholder="手机/会员名/邮箱" required name="name" id="name"></div><div class="loginInput "><span class="loginInputIcon "><span class=" glyphicon glyphicon-lock"></span></span><input type="password" placeholder="密码" required name="password" id="password"></div><div><a href="#nowhere" class="notImplementLink">忘记登录密码</a><a class="pull-right" href="/register.html" >免费注册</a></div><div style="margin-top:20px"><button type="submit" class="btn btn-block redButton">登录</button></div></div></div></form></body></html>

1.2 后台控制跳转页面

接受前台form使用post传递过来的name, password，使用RequestMapping 和PostMapping接收映射的路径，

使用Mode 模型转发视图，和session存储用户信息，

利用三层架构，controller—>service—>dao 把参数name和password传递给mapper层，我使用的是mybatis,利用接口映射xml 写sql语句select * from user where name = #{name} and password =#{password} 查出来是否在数据库中存在这个封装的user对象，在controller 判断查出来的数值是否为空，如果为空，使用model从后台封装数据到页面（model是用来从后台封装数据到页面的）model.addAttribute(“flag”,“用户名或者密码错误”); 提示用户名或者密码错误返回前端页面并在前端页面用thymeleaf的 f l a g 取出 m o d e l 封装的数据 < s p a n t h : t e x t = " {flag}取出model封装的数据<span th:text=" flag取出model封装的数据<spanth:text="{flag}" style=“color: red”> 如果成功的话，会在session存储用户user的全部信息，并返回index后台主页面

l[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3NViHPMi-1617883332231)(/Users/xingfuhao/Library/Application Support/typora-user-images/image-0408135138814.png)]

String name, String password, HttpSession session, Model model

package com.xing.crm.web.controller;import com.xing.crm.model.User;import com.xing.crm.service.LoginService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpSession;@Controller@RequestMapping("/user")public class LoginController {@Autowiredprivate LoginService userService;@PostMapping("/login")public String login(String name, String password, HttpSession session, Model model){User user = userService.checkLogin(name, password);if(user==null){model.addAttribute("flag","用户名或者密码错误");return "login";}else {session.setAttribute("user",user);return "index";}}@GetMapping("/logout")public String logout(HttpSession session){session.invalidate();//session失效return "login";}}

2 主页面

<!DOCTYPE html><html xmlns:th=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>超市订单管理主页面</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"><script th:src="@{/layui/layui.js}" charset="utf-8"></script></head><body class="layui-layout-body"><div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">超市订单管理系统</div><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item"><a href="javascript:;" th:if="${session.user!=null}"><img th:src="@{/img/2.png}" class="layui-nav-img"><span th:text="${session.user.name}"></span></a><dl class="layui-nav-child"><dd><a href="">基本资料</a></dd><dd><a href="">安全设置</a></dd></dl></li><li class="layui-nav-item"><a href="/user/logout"}>退出</a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">基本功能</a><dl class="layui-nav-child"><dd><a href="/courseorder/list" target="content_iFrm">订单管理</a></dd><dd><a href="/userm/ulist" target="content_iFrm">用户管理</a></dd><dd><a href="/userm/ulist" target="content_iFrm">提供商管理</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">数据展示</a><dl class="layui-nav-child"><dd><a href="/dataanalysis/income" target="content_iFrm">收入报表</a></dd><dd><a href="/dataanalysis/pie" target="content_iFrm">用户分布图</a></dd></dl></li><li class="layui-nav-item"><a href="/user/logout">修改密码</a></li><li class="layui-nav-item"><a href="/user/logout">注销功能</a></li></ul></div></div><div class="layui-body"><iframe name="content_iFrm" frameborder="0" class="larry-iframe" style="width: 100%; height: 100%;"src="/courseorder/list"></iframe></div><div class="layui-footer">© - 底部固定区域</div></div><script>//JavaScript代码区域layui.use(['element','layer'], function(){var element = layui.element;});</script><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "/hm.js?d214947968792b839fd669a4decaaffc";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script></body></html>

2.1 主页面布局

在主页面用iframe框架显示从 /courseorder/list 在后台订单CourseOrderController控制层，

使用@RequestMapping("/list")，跳转到courseorder/list 页面如下所示

<iframe name="content_iFrm" frameborder="0" class="larry-iframe" style="width: 100%; height: 100%;"src="/courseorder/list"></iframe>

2.2 list展示页面

在list的页面进行数据的增删改查操作

<!DOCTYPE html><html xmlns:th=""><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"><script th:src="@{/layui/layui.js}" charset="utf-8"></script></head><body><form class="layui-form" action="" id="searchForm"><div class="layui-form-item"><br><div class="layui-inline"><label class="layui-form-label">名字</label><div class="layui-input-inline"><input type="text" name="name" id="name" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">微信号</label><div class="layui-input-inline"><input type="text" name="wecharname" id="wecharname" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">QQ</label><div class="layui-input-inline"><input type="tel" name="qqno" id="qqno" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><a onclick="doSearch()" class="layui-btn layui-btn-radius" >搜索</a><button type="reset" class="layui-btn layui-btn-radius ">重置</button></div></div></form><table class="layui-hide" id="test" lay-filter="test"></table><script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button><button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button><button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button><button class="layui-btn layui-btn-sm" lay-event="add">添加</button></div></script><script type="text/html" id="barDemo"><a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></script><script>var $ ,layer,table;layui.use(['table','form'], function(){table=layui.table;var form = layui.form;$=layui.jquery;layer=layui.layer;table.render({elem: '#test',url:'/courseorder/listJson',toolbar: '#toolbarDemo',title: '用户数据表',totalRow: true,cols: [[{type: 'checkbox', fixed: 'left'}/* ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}*/,{field:'name', title:'名字', width:120},{field:'wecharno', title:'微信备注', width:120},{field:'wecharname', title:'微信号', width:120},{field:'qqno', title:'QQ号', width:120},{field:'coursename', title:'购买课程', width:120},{field:'courseprice', title:'价格', width:120},{field:'orderdate', title:'订单日期', width:200},{field:'remark', title:'评论', width:220},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}]],page: true,limit:10,limits:[10,11,12,13],id:'orderTable'});//工具栏事件table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了：'+ data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选': '未全选')break;case 'add':parent.layer.open({type: 2,offset:'auto',title:'添加课程',content:'/courseorder/add',area:['1000px','600px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});break;};});//监听工具条table.on('tool(test)', function(obj){//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var id = obj.data.id; //获取订单IDvar layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if(layEvent === 'del'){//删除layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令$.get("/courseorder/delete",{id:id},function (respData) {// console.log(respData);if(respData.success == 1){layer.msg("删除成功");}else{layer.msg("删除失败" + resp.message);}})});} else if(layEvent === 'edit'){//编辑//do somethingparent.layer.open({type:2,//2跳转到页面offset: 'auto',title:'修改课程订单',content:'/courseorder/edit',area: ['1000px', '1000px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});}});//触发行双击事件table.on('rowDouble(test)', function(obj){var id = obj.data.id;console.log(obj)parent.layer.open({type:2,offset:'auto',title:'课程订单详情',content:'/courseorder/detail?id='+id,area:['1000px','500px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});});//工具条事件table.on('tool(test)', function(obj){//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var id = obj.data.id; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if(layEvent === 'del'){//删除layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令$.get("/courseorder/delete",{id:id},function (respData) {if (respData.success == 1){layer.msg("删除成功");}else {layer.msg("删除失败"+respData.message);}});});} else if(layEvent === 'edit'){//编辑parent.layer.open({type: 2,offset:'auto',title:'修改课程订单',content:'/courseorder/edit?id='+id,area:['1000px','600px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});}});});function doSearch() {//通过jquery获取参数的值var name=$("#name").val();var wecharname=$("#wecharname").val();var qqno=$("#qqno").val();table.reload('orderTable', {where: {name:name,wecharname:wecharname,qqno:qqno},page: {curr:1}});}</script></body></html>

2.3 add添加页面

在<lay-event=“add”>添加点击添加按钮后，在script里定义table的layui使用表格的初始化定义，

并通过layui工具栏事件，遍历点击到的add 在父级页面使用弹窗弹出来layui规定的格式，

type为2，使用content：’/courseorder/add’ 请求到后台controller层，设置展示的面积大小,area:[‘1000px’,‘600px’]

和关闭按钮后关闭全部 ,btn:‘关闭全部’，成功后使用function事件,yes:function ( parent.layer.closeAll(); }

关闭全部layer

<script>var $ ,layer,table;layui.use(['table','form'], function(){table=layui.table;

//工具栏事件table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){

case 'add':parent.layer.open({type: 2,offset:'auto',title:'添加课程',content:'/courseorder/add',area:['1000px','600px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});break;

2.3.1控制层的调用，转发视图

@RequestMapping("/add")public String add(){return "courseorder/add";}

2.3.2 添加页面和操作事件

展示添加页面，在按钮（立即提交）使用οnclick="doSave()"方法 ,使用javascript的layui的方法，

调用doSave()方法，首先用$取出form表单的id（#form1）利用ajax使其里面的属性序列化serialize()

表单的值，创建URL编码文本字符串，利用url访问后台@RequestMapping("/courseorder")的/save方法

使用后台的三层架构保存数据，@ResponseBody，利用封装的CURDResult的success和msg来判断是否

添加成功，通过三层架构来实现

@Data@AllArgsConstructor@NoArgsConstructorpublic class CURDResult {private int success=1;private String msg="";}

sql语句

<insert id="insert" parameterType="map">insert into coruseorder(uuid,id,name, wecharno, wecharname, qqno, coursename, courseprice, orderdate, remark)values (UUID(),UUID(),#{name},#{wecharno},#{wecharname},#{qqno},#{coursename},#{courseprice},CURRENT_DATE(),#{remark})</insert>

返回数据@ResponseBody,通过data,取别名requestData来接收success==1和msg为空的值，在定义function()方法

如果返回的值为一，父级页面弹出弹窗，添加成功的信息，yes后执行function方法关闭所有弹窗，并加载当前的页面，还在这个有左侧侧边栏和iframe页面中

if(responseData.success == 1){parent.layer.alert("添加成功",{yes:function () {parent.layer.closeAll();window.parent.location.reload();}});}

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

post() 方法通过 HTTP POST 请求从服务器载入数据。语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

function doSave() {var requestData = $("#form1").serialize();$.post("/courseorder/save",requestData,function (responseData) {if(responseData.success == 1){parent.layer.alert("添加成功",{yes:function () {parent.layer.closeAll();window.parent.location.reload();}});}});}

2.4 update修改页面

在index点击layui表格自带的操作修改和删除的修改按钮，

在这个class=“layui-btn layui-btn-xs” lay-event=“edit”>编辑

//工具条事件table.on('tool(test)', function(obj){//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var id = obj.data.id; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if(layEvent === 'del'){//删除layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令$.get("/courseorder/delete",{id:id},function (respData) {if (respData.success == 1){layer.msg("删除成功");}else {layer.msg("删除失败"+respData.message);}});});} else if(layEvent === 'edit'){//编辑parent.layer.open({type: 2,offset:'auto',title:'修改课程订单',content:'/courseorder/edit?id='+id,area:['1000px','600px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});}});

在script的工具条事件里面，通过获取当前的这一行的id和function(obj)的值

var id = obj.data.id; //获取订单ID

var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

和add添加类似的操作,传入从var data = checkStatus.data;获取的data和var id = obj.data.id; //获取订单ID

获取var id = obj.data.id; //获取订单ID data的id 发送ajax的get请求，传递 id 调用修改页面

else if(layEvent === 'edit'){//编辑parent.layer.open({type: 2,offset:'auto',title:'修改课程订单',content:'/courseorder/edit?id='+id,area:['1000px','600px'],btn:'关闭全部',btnAlign:'c',yes:function () {parent.layer.closeAll();}});

调用后台控制层，查出数据库的值，参数传入model用来封装后台数据，起别名传递给前台页面，前台页面通过thymeleaf的特定的th:value="${model的起的别名.相应输入框的值}"

th:value="${order.courseprice}"

@RequestMapping("/edit")public String edit(Model model,String id){CourseOrder order=orderService.findByOrderId(id);model.addAttribute("order",order);return "courseorder/edit";}

按钮提交，使用οnclick=“doSave()” dosave方法，和add添加使用 serialize（）方法，

序列化表单的值，创建URL编码文本字符串，使用ajax的get请求，save保存到数据库中，

返回requestData封装的success和msg,成功为1后，弹出窗口显示添加成功文字，成功后关闭所有弹窗，并重新加载当前页面，失败也有提示，也类似

在控制层可以共用一个控制层，以使代码更简洁，保存都是@ResponseBody保存数据，通过判断id存在且不是空来选择区分调用service的更新和保存方法

@RequestMapping("/save")@ResponseBodypublic CURDResult save(CourseOrder order){CURDResult result = new CURDResult();if(order.getId() ==null || order.getId().length()==0){orderService.save(order);}else {orderService.update(order);}return result;}

2.5 delete删除数据

点击下面这个

<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

通过监听工具条事件,获取订单id, var id = obj.data.id; //获取订单ID,获取 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）判断是否是删除操作，如果是，就向服务端发送ajax的get请求，传入后台控制层的删除路径，同时传入ID，调用function事件，响应data的别名，respData数值，

成功在前端封装的CURDResult的里面success和msg的值，吧layui的layer的msg的空值设置为删除成功

layer.msg(“删除成功”);

//监听工具条table.on('tool(test)', function(obj){//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var id = obj.data.id; //获取订单IDvar layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if(layEvent === 'del'){//删除layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令$.get("/courseorder/delete",{id:id},function (respData) {// console.log(respData);if(respData.success == 1){layer.msg("删除成功");}else{layer.msg("删除失败" + resp.message);}})})

2.6 search查询页面和分页

查询首页面

layui前端页面表格通用的格式，表格通过,url:’/userm/listJson’ 和匹配相应的字段，

field:'usercode', title:'用户编码', width:120},{field:'username', title:'名字', width:120}

开启表格的page为true，分页限制，为10页，分页下拉框为10～13，给表定义ID字段名userTable

,page: true,limit:10,limits:[10,11,12,13],id:'userTable'});

通过,url:’/userm/listJson’到后台控制层，因为只需要给前端传递json格式的数据，所以直接用 @ResponseBody

响应，传递数据，点击οnclick=“doSearch1()“搜索按钮，调用doSearch1()方法，在script中定义function doSearch1() 方法，通过jquery获取搜素参数的值，用${”#参数ID”}.val();的取出页面的要搜索的值方式，

对表格进行重新加载并把之前要刷新的表格的自己定义的ID为userTable哪里几个属性都定义名字，同时，当前页为page：{ curr :1 }

function doSearch1(){//通过jquery获取参数的值var usercode=$("#usercode").val();var username=$("#username").val();var phone=$("#phone").val();table.reload('userTable',{where: {usercode:usercode,username:username,phone:phone},page:{curr: 1}});

传递过来三个值，Userm condition, int page, int limit page 的 condition为Userm传递过来的三个数值，

@RequestMapping("/listJson")@ResponseBodypublic PageResult<Userm> listJson(Userm condition, int page, int limit){System.out.println(condition+"=============================");PageResult<Userm> result = userService.findPageResult(condition,page,limit);return result;}

用PageResult接收传过来的Userm值

@Datapublic class PageResult<T> {private int code;private String msg;private int count;private List<T> data;}

通过三层架构，在serviceimpl实现层，实现逻辑操作 ,用pageResult定义四个数值 code msg count listdata 为

list范性，接收参数，在userServiceImpl实现层设置，code，为0 ,msg为空值，之后定义一个hashMap，使用

Key values键值对

因为之前在表格设置当前为1 ,page: true

page:{curr: 1}

使用put设置三个数值，condition(在前端页面输入的那几个值)

之后用put设置分页的start数值 (page-1)*pageSize 这个意思为第一页为0-1乘10（因为在layui前端页面设置的,limit:10）这里吧limit在传递UserService接口层时改变了limit的参数名，起了另外一个名字pageSize

用put设置pageSize的值，其实就是10

之后利用orderMapper.查询传递过去的conditiontion,start,pageSize,用map接收

public int findCountByMap(Map<String,Object> map);

params.put("start",(page-1)*pageSize); //pageSize为前端页面的limit的10

@Overridepublic PageResult<Userm> findPageResult(Userm condition, int page, int pageSize) {PageResult<Userm> result = new PageResult<Userm>();result.setCode(0);result.setMsg("");HashMap<String, Object> params = new HashMap<String, Object>();params.put("condition", condition);params.put("start", (page - 1) * pageSize);params.put("pageSize", pageSize);//获取总记录数据int totalCount = userMapper.findCountByMap(params);//获取查询的数据List<Userm> list = userMapper.findListByMap(params);result.setCount(totalCount);result.setData(list);return result;}

查询出来所有的条数

<select id="findCountByMap" parameterType="map" resultType="int">select count(*) from coruseorder<include refid="searchWhere"></include></select>

同时在映射的mapper.xml 设置sql片段，判断前端传过来的三个值，是否为空，同时，在之前查询所有的条数引用

sql片段，

<sql id="searchWhere"><where><if test="condition.name!=null and condition.name !=''">name like '%${condition.name}%'</if><if test="condition.wecharname!=null and condition.wecharname !=''">and wecharname like '%${condition.wecharname}%'</if><if test="condition.qqno!=null and condition.qqno !=''">and qqno like '%${condition.qqno}%'</if></where></sql>

在pageSize设置.setCount(totalCount) 获取所有的总记录，

之后获取查询的数据，所有的条数都要显示在表格里面的

在pageSize设置为data的json数据格式之后吧所有的结果返回给前端页面

2.7 echarts图表展示数据

2.7.1 柱状图显示功能实现

在主页面点击收入报表会跳转到后台controller后台页面，

<dd><a href="/dataanalysis/income" target="content_iFrm">收入报表</a></dd>

跳转到柱状图页面

@RequestMapping("income")public String income(){return "dataanalysis/income";}

跳转到柱状图页面

<!DOCTYPE html><html xmlns:th="" style="height: 100%"><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"><script th:src="@{/layui/layui.js}" charset="utf-8"></script><script th:src="@{/echarts/echarts.min.js}" charset="utf-8"></script></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};var option = null;var $;layui.use('layer', function(){$=layui.jquery;$.get("/dataanalysis/monthIncomes",function (respData) {var dates=new Array();var income=new Array();for (let i = 0; i < respData.length; i++) {dates[i]=respData[i].date;income[i]=respData[i].income;}option = {xAxis: {type: 'category',data: dates},yAxis: {type: 'value'},series: [{data: income,/* barWidth: 30,*/type: 'bar'}]};;if (option && typeof option === "object") {myChart.setOption(option, true);}});});</script></body></html>

通过这个方法,使用 ajax的get请求，URL路径"/dataanalysis/monthIncomes，获取到后台拿到的值，

layui.use('layer', function(){$=layui.jquery;$.get("/dataanalysis/monthIncomes",function (respData) {var dates=new Array();var income=new Array();for (let i = 0; i < respData.length; i++) {dates[i]=respData[i].date;income[i]=respData[i].income;}

在控制层,返回给前台数据，要用@ResponseBody响应数据，通过list接收

@RequestMapping("monthIncomes")@ResponseBodypublic List<MonthIncome> monthIncomes(){List<MonthIncome> list=orderService.getMonthIncomes();return list;}

这个柱状图要用特定的实体类，接收控制传过来的值，在控制层里用，用list接收用List，用MonthIncome柱状图的特定的累接收，三层架构，从控制层到业务层再到持久层，都用List接收数据

@Datapublic class MonthIncome {private String date;private String total;private String income;}

sql语句查询出来的所有的数值

<select id="getMonthIncomes" resultType="MonthIncome">select left(orderdate,7) as date,count(*)as total,SUM(convert(courseprice,decimal(18,2))) as incomefrom coruseordergroup by left(orderdate,7);</select>

查询出来的三个值，和自己定义的类的那三个属性值一样返回给前端页面

之后在前端页面处理把这个date,income这些数值，用Array数值遍历出来

$.get("/dataanalysis/monthIncomes",function (respData) {var dates=new Array();var income=new Array();for (let i = 0; i < respData.length; i++) {dates[i]=respData[i].date;income[i]=respData[i].income;}