Springboot_CURD

最新推荐文章于 2024-01-04 17:13:43 发布

墨染_lily

最新推荐文章于 2024-01-04 17:13:43 发布

阅读量603

点赞数

分类专栏：项目练习文章标签： spring boot mybatis java

本文链接：https://blog.csdn.net/Angeliaz/article/details/127541385

版权

项目练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、框架搭建
二、前端搭建
三、课程订单模块
四、订单数据分析

一、框架搭建

1.1 技术选型

后台：Springboot mybatis mysql

前端：layui thymeleaf

layui第三方的前端框架，把css/js/html已经打包好，我们直接用

Thymeleaf类似于JSP,Freemaker模板引擎，也有自己表达式

开发工具：jdk1.8 idea git maven

打开sql控制日志

在application.properties中添加logging.level.mapper类名

#打开SQL控制台日志
logging.level.com.gyf.mapper.CourseOrderMapper=DEBUG

1.2 项目搭建

在这里插入图片描述

1.3 在application.properties中添加配置

   spring.datasource.url=jdbc:mysql://localhost:3306/crm?serverTimezone=GMT%2B8
   spring.datasource.username=root
   spring.datasource.password=123456
   spring.datasource.driver-class-name=com.mysql.jdbc.Driver
   //页面热加载
   spring.thymeleaf.cache=false
   //端口
   server.port=8888

1.4 添加mybatis依赖

  <!--mybatis依赖-->
  <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>1.1.1</version>
  </dependency>

1.5 添加一个控制器

在这里插入图片描述

二、前端搭建

2.1 下载layui资源包，放在static下

layui前端框架就是一些图片，js文件，css文件等，然后导入项目中使用即可

在这里插入图片描述

2.2 搭建一个后台主页面

第一步：把后台管理示例copy到index.html中

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">学生购课后台管理</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">控制台</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">商品管理</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其他系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">menu 11</a></dd>
                    <dd><a href="">menu 22</a></dd>
                    <dd><a href="">menu 33</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg"
                         class="layui-nav-img">
                    墨染
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="/courseorder/logout">
                    退出
                    <!--<i class="layui-icon layui-icon-more-vertical"></i>-->
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <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="/stuinfo/list" 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="javascript:;">学员分布图</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">发布计划</a></li>
                <li class="layui-nav-item"><a href="">点点滴滴</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <iframe name="content_iFrm" frameborder="no" th:border="0" class="larry-iframe"
                style="width: 100%;height: 100%;" src="/courseorder/list">
        </iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                });
            }
        });

    });
</script>

第二步：修改css,js为本地路径

在这里插入图片描述

第三步：更改登录用户信息

在这里插入图片描述

注：静态资源不重启即时生效（在项目中，修改一个html，要重启才生效）

修改配置实现：不重启也可以生效

（1）pom文件引入spring-boot-devtools

<!--静态资源不重新加载也可以生效-->
<dependency>
  <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <optional>true</optional>
</dependency>

(2)File->settings->build,execution,deplyment->compiler 选中打勾“build project automatically”

在这里插入图片描述

2.3 修改主体区域

2.3.1 添加课程订单控制器

在这里插入图片描述

效果展示：

在这里插入图片描述

2.3.2 添加学员信息控制器并实现中间内容视图的切换

在这里插入图片描述

2.4 layui的表格控件

将表格的代码粘贴到couseorder模块的list.html中，注意添加themeleaf声明，修改layui原js/css为本地路径

<form class="layui-form" action="" id="searchForm">
    <div class="layui-form-item" id="search">
        <div class="layui-inline" style="margin-left: -25px">
            <label class="layui-form-label">WeChat号</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_no" id="wechat_no" autocomplete="off" class="layui-input"
                       placeholder="请输入Wechat号">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -25px">
            <label class="layui-form-label">WeChat备注</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_mark" id="wechat_mark" autocomplete="off" class="layui-input"
                       placeholder="请输入Wechat备注">
            </div>
        </div>

        <div class="layui-inline" style="margin-left: -25px">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-inline">
                <input type="text" name="qq_no" id="qq_no" autocomplete="off" class="layui-input" placeholder="请输入QQ号">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" onclick="doSearch();" class="layui-btn layui-btn-sm">Search</button>
            <button type="reset" class="layui-btn layui-btn-sm">Reset</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>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var $, table;
    layui.use('table', function () {
        table = layui.table;
        $ = layui.jquery;
        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: 'wechat_mark', title: '微信备注', width: 120}
                    , {field: 'wechat_no', title: '微信ID', width: 120}
                    , {field: 'qq_no', title: 'QQ号', width: 120}
                    , {field: 'course_name', title: '购买课程', width: 120}
                    , {field: 'course_price', title: '价格', width: 120}
                    , {field: 'order_date', title: '订单日期', width: 120}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ]
            , page: true
            , limit: 7
            , limits: [7, 8, 9, 10]
            , 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':
                    //layer.msg('弹出添加页面');
                    parent.layer.open({
                        type: 2,//2跳转到页面
                        offset: 'auto',
                        title: '添加课程订单',
                        content: '/courseorder/add',
                        area: ['1000px', '600px'],
                        btn: '关闭全部',
                        btnAlign: 'c',
                        yes: function () {
                            parent.layer.closeAll();
                        }
                    });
                    break;
            }
            ;
        });


        //监听行双击事件
        table.on('rowDouble(test)', function (obj) {
            //obj 同上
            console.log(obj);
            var orderId = obj.data.order_id;
            console.log(orderId);

            parent.layer.open({
                type: 2,//2跳转到页面
                offset: 'auto',
                title: '课程订单详情',
                content: '/courseorder/detail?order_id=' + orderId,
                area: ['1000px', '500px'],
                btn: '关闭全部',
                btnAlign: 'c',
                yes: function () {
                    parent.layer.closeAll();
                }
            });
        });

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var orderId = obj.data.order_id; //获得order_id
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令,jqery.get
                    $.get("/courseorder/delete", {order_id: orderId}, function (respData) {
                        console.log(respData);
                        //console.log(resp);
                        if (respData.success == 1) {
                            layer.msg("删除成功");
                        } else {
                            layer.msg("删除失败" + resp.message);
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                //弹出编辑页面
                parent.layer.open({
                    type: 2,//2跳转到页面
                    offset: 'auto',
                    title: '【修改】课程订单',
                    content: '/courseorder/edit?order_id=' + orderId,
                    area: ['1000px', '600px'],
                    btn: '关闭全部',
                    btnAlign: 'c',
                    yes: function () {
                        parent.layer.closeAll();
                    }
                });
            }
        });
    });


    function doSearch() {
        //通过jquery获取参数
        var wechat_no = $("#wechat_no").val();
        var wechat_mark = $("#wechat_mark").val();
        var qq_no = $("#qq_no").val();

        //table.reaload方法,附加上搜索条件
        table.reload('orderTable', {
            where: {//附加额外的参数
                wechat_no: wechat_no,
                wechat_mark: wechat_mark,
                qq_no: qq_no
            }, page: {
                curr: 1 //重新从第 1 页开始
            }
        });

    }
</script>

三、课程订单模块

3.1 列表展示

找到返回的json数据格式。

需要研究一下layui所需要列表数据格式，与easyui一样，都需要返回json来支持。

在这里插入图片描述

3.1.1 Model 实体类

添加一个courseorder数据模型

对应t_course_order.sql文件

在这里插入图片描述

3.1.2 mapper

在这里插入图片描述

3.1.3 service

package com.fc.zsy.crm.service;

import com.fc.zsy.crm.model.CourseOrder;
import com.fc.zsy.crm.model.PageResult;

public interface ICourseOrderService {
    public PageResult<CourseOrder> findPageResult(CourseOrder condition,int page,int pageSize);
}

package com.fc.zsy.crm.service.Impl;

import com.fc.zsy.crm.mapper.CourseOrderMapper;
import com.fc.zsy.crm.model.CourseOrder;
import com.fc.zsy.crm.model.PageResult;
import com.fc.zsy.crm.service.ICourseOrderService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Service
public class ICourseOrderServiceImpl implements ICourseOrderService {

    @Autowired
    CourseOrderMapper courseOrderMapper;

    /**
     *
     * @param condition
     * @param page
     * @param pageSize
     * @return
     */
    @Override
    public PageResult<CourseOrder> findPageResult(CourseOrder condition, int page, int pageSize) {
        PageResult<CourseOrder> pageResult = new PageResult<>();
        //定义一个map参数
        Map<String, Object> params = new HashMap<>();
    //获取总记录数
        int totalCount = courseOrderMapper.findCountByMap(params);
        pageResult.setCount(totalCount);
        //获取查询的数据
        List<CourseOrder> list = courseOrderMapper.findListByMap(params);
        pageResult.setData(list);
        return pageResult;
    }
}

3.1.4 在启动类上配置扫描

@ComponentScan(basePackages = {"com.fc.zsy.crm"})
@MapperScan(basePackages = {"com.fc.zsy.crm.mapper"})

3.1.5 实现控制器返回json

在这里插入图片描述

注：当访问listJson时会有以下报错：

lnvalid bound statement (not found):
com.fc.zsy.crm.mapper.CourseOrderMapper.findLCiybtByMap

解决方法

1.在pom文件中添加

  <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                </includes>
            </resource>
        </resources>

2.在数据库的url添加时区

?serverTimezone=GMT%2B8

3.1.6 更改list.html的url

在这里插入图片描述

3.2 分页实现

前面列表展示，返回json数据时，我们是返回表中的所有数据，并未实现分页。实际上当layui访问listJson接口时，会传递几个参数，可以直接实现分页。

3.2.1 修改控制器的listJson接口

在这里插入图片描述

3.2.2 改service

在这里插入图片描述

3.2.3 改mapper

在这里插入图片描述

3.2.4 效果

在这里插入图片描述

3.3 课程订单添加

3.3.1 在courseorder中添加add.html页面

参考layui中表单样式。select和date需要添加如下js

<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form;
        var layer=layui.layer;
        var laydate=layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
        });
    }
   );           
</script>

add.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<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="form1">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">WeChat号</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_no" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">WeChat备注</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_mark" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-inline">
                <input type="tel" name="qq_no" 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="tel" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">购买课程</label>
            <div class="layui-input-inline">
                <select name="course_name" lay-search="">
                    <option value="">直接选择或搜索选择</option>
                    <option value="2018-Java全套课程">2019-Java全套课程</option>
                    <option value="2019-Swing从入门到实战">2020-Swing从入门到实战</option>
                    <option value="2019-SpringBoot后台CRM项目">2021-SpringBoot后台CRM项目</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">购买价格</label>
            <div class="layui-input-inline">
                <input type="text" name="course_price" 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="order_date" id="order_date" lay-verify="date" placeholder="yyyy-MM-dd"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" onclick="doSave();" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var $, layer;
    layui.use(['form', 'laydate'], function () {
        var laydate = layui.laydate;
        //给$进行赋值
        $ = layui.jquery;
        layer = layui.layer;
        //日期
        laydate.render({
            elem: '#order_date'
        });
    })


    function doSave() {
        //alert("xxx");
        //发送post请求
        //  语法：$.post(url,data,callback,type);
        //   url(必须):发送请求的地址，String类型
        //   data(可选):发送给后台的数据，以key/value形式{a:value1,b:value2}，即json格式
        //  callback(可选):请求成功后的回调函数。因此，在后台的处理中，需要给JSONObject put一个是否成功的值，见下面例子。
        //   type(可选):即第二个参数data的数据类型。如果有data传递给后台，则需要加上该类型。
        //定义拿到的表单数据
        var requestData = $("#form1").serialize();

        $.post("/courseorder/save", requestData, function (responseData) {
            console.log(responseData);
            if (responseData.success == 1) {
                layer.alert("添加成功", {
                    yes: function () {
                        parent.layer.closeAll();
                    }
                });
            } else {

            }
        });
    }
</script>


</body>
</html>

3.3.2 控制器添加add方法

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

3.3.3 监听主页添加按钮显示add.html页面

在这里插入图片描述

补充：parent.layer.open

1父页面也需要引入layui.js

2layui.use([‘table’,‘layer’],function(){

var table=layui.table;

var layer=layui.layer;

})

3.3.4 控制器接收表单数据

添加重置和保存按钮，完成保存按钮的post请求提交

注：设置type="button"表单就不会自动提交，默认是submit

html

  <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" onclick="doSave();" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

<script>
      //全局变量
      var $, layer;
    function doSave() {
        var requestData = $("#form1").serialize();
        $.post("/courseorder/save", requestData, function (responseData) {
            console.log(responseData);
            if (responseData.success == 1) {
                layer.alert("添加成功", {
                    yes: function () {
                        parent.layer.closeAll();
                    }
                });
            } else {

            }
        });
    }
</script>

controller

/**
 * 添加表单提交按钮
 * @return
 */
public CURDResult save(){
    CURDResult result = new CURDResult();
    return result;
}

CURDResult实体类

package com.fc.zsy.crm.model;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
//添加时表单提交按钮
public class CURDResult {
    private int success=1;
    private String msg="";
}

service

//添加表单提交按钮
void save(CourseOrder order);

/**
 * 添加表单提交按钮
 * @param order
 */
@Override
public void save(CourseOrder order) {
      courseOrderMapper.insert(order);
}

mapper

 //添加表单提交按钮
void insert(CourseOrder order);

<insert id="insert" parameterType="courseOrder">
    insert into t_course_order
    (uuid, order_id, wechat_no, wechat_mark, qq_no, tel, course_name, course_price, order_date, update_datetime, remark, name)
    values (UUID(),UUID(),#{wechat_no},#{wechat_mark},#{qq_no},#{tel},#{course_name},#{course_price},#{order_date},
            CURRENT_TIMESTAMP(),#{remark},#{name});
</insert>

3.4 课程订单查看

实现双击查看详情

双击事件监听，查看文档

在这里插入图片描述

controller

/**
 * 双击事件监听，查看详情
 * @param model
 * @param order_id
 * @return
 */
@RequestMapping("detail")
public String detail(Model model,String order_id){
    CourseOrder courseOrder = orderService.findByOrderId(order_id);
    model.addAttribute("order",courseOrder);
    return "courseorder/detail";
}

service

//双击事件查看详情
CourseOrder findByOrderId(String order_id);

/**
 * 双击监听事件，查看详情
 * @param order_id
 * @return
 */
@Override
public CourseOrder findByOrderId(String order_id) {
    return courseOrderMapper.findByOrderId(order_id);
}

mapper

//双击事件监听
CourseOrder findByOrderId(String order_id);

<select id="findByOrderId" parameterType="String" resultType="courseOrder">
    select * from t_course_order where order_id=#{order_id};
</select>

detail.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<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="form1">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" th:value="${order.name}" readonly="readonly" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">WeChat号</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_no" th:value="${order.wechat_no}" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">WeChat备注</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_mark" th:value="${order.wechat_mark}" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-inline">
                <input type="tel" name="qq_no" th:value="${order.qq_no}" 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="tel" th:value="${order.tel}" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">购买课程</label>
            <div class="layui-input-inline">
                <input type="text" name="tel" th:value="${order.course_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="course_price" th:value="${order.course_price}" 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="order_date" th:value="${order.order_date}" id="order_date" lay-verify="date"
                       placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

</form>


<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var $, layer;
    layui.use(['form', 'laydate'], function () {
        var laydate = layui.laydate;
        $ = layui.jquery;
        layer = layui.layer;
    })

</script>
</body>
</html>

3.5 课程订单删除

添加监听按钮工具事件

在这里插入图片描述

service

//根据order_id进行删除
void deleteByOrderId(String order_id);

j/**
 * 根据order_id进行删除
 * @param order_id
 */
@Override
public void deleteByOrderId(String order_id) {
    courseOrderMapper.deleteOrderId(order_id);
}

mapper

//根据order_id进行删除
void deleteOrderId(String order_id);

<delete id="deleteOrderId" parameterType="String" >
    delete  from t_course_order where order_id=#{order_id};
</delete>

controller

/**
 * 根据order_id进行删除
 * @param order_id
 * @return
 */
@RequestMapping("delete")
@ResponseBody
public CURDResult delete(String order_id){
    CURDResult curdResult = new CURDResult();
    orderService.deleteByOrderId(order_id);
    return curdResult;
}

3.6 课程订单修改

编辑页面

在这里插入图片描述

controller

/**
 *编辑订单信息
 * @param model
 * @param order_id
 * @return
 */
@RequestMapping("edit")
public String  edit(Model model,String order_id){
    CourseOrder courseOrder = orderService.findByOrderId(order_id);
    model.addAttribute("order",courseOrder);
    return "courseorder/edit";
}

更新扩展save（）实现修改

/**
 * 添加表单提交按钮
 * @return
 */
@ResponseBody
@RequestMapping("save")
public CURDResult save(CourseOrder order){
    CURDResult result = new CURDResult();
    if (StringUtils.isEmpty(order.getOrder_id())){
        orderService.update(order);
    }else {
        //实现修改
        orderService.update(order);
    }
    return result;
}

<update id="update" parameterType="courseOrder">
    update t_course_order
    set name=#{name}, wechat_no=#{wechat_no}, wechat_mark=#{wechat_mark},
        qq_no=#{qq_no},tel=#{tel}, course_name=#{course_name},
        course_price=#{course_price}, order_date=#{order_date}, remark=#{remark}
    where order_id=#{order_id}
</update>

修改分页显示条数

在这里插入图片描述

option的默认选中

在这里插入图片描述

3.7 模糊查询

list.html

<form class="layui-form" action="" id="searchForm">
    <div class="layui-form-item" id="search">
        <div class="layui-inline" style="margin-left: -25px">
            <label class="layui-form-label">WeChat号</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_no" id="wechat_no" autocomplete="off" class="layui-input"
                       placeholder="请输入Wechat号">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -25px">
            <label class="layui-form-label">WeChat备注</label>
            <div class="layui-input-inline">
                <input type="text" name="wechat_mark" id="wechat_mark" autocomplete="off" class="layui-input"
                       placeholder="请输入Wechat备注">
            </div>
        </div>

        <div class="layui-inline" style="margin-left: -25px">
            <label class="layui-form-label">QQ</label>
            <div class="layui-input-inline">
                <input type="text" name="qq_no" id="qq_no" autocomplete="off" class="layui-input" placeholder="请输入QQ号">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" onclick="doSearch();" class="layui-btn layui-btn-sm">Search</button>
            <button type="reset" class="layui-btn layui-btn-sm">Reset</button>
        </div>
    </div>
</form>

在这里插入图片描述

search按钮添加事件

在这里插入图片描述

'orderReload’是tabler.render的时候绑定的一个id

在这里插入图片描述

改控制器

在这里插入图片描述

mapper

在这里插入图片描述

四、订单数据分析

4.1 echarts概述

一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图库ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化图表。

https://echarts.apache.org/zh/index.html

4.2 实现

4.2.1 添加一个数据分析模块

在这里插入图片描述

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%">
<head>
    <meta charset="utf-8">
    <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">
    <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>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</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;

    //获取每月收入数据
    layui.use('layer', function () {
        var $ = layui.jquery;
        $.get("/dataanalysis/monthIncomes", function (respData) {
            //会把json数据转成数组
            console.log(respData);
            //声明日期和收入2个数组
            var dates = new Array();
            var incomes = new Array();
            for (var i = 0; i < respData.length; i++) {
                dates[i] = respData[i].date;
                incomes[i] = respData[i].income;
            }
            option = {
                xAxis: {
                    type: 'category',
                    data: dates
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: incomes,
                    barWidth: 20,//设置条的宽度
                    type: 'bar'
                }]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        })
    })
</script>
</body>
</html>

@Controller
@RequestMapping("dataanalysis")
public class DataAnalysisController {

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

4.2.2 获取数据替换柱状图的data

mapper

List<MonthIncome> getMonthIncomes();

<select id="getMonthIncomes" resultType="monthIncome">
    SELECT
        LEFT (order_date,7) as date,
        count(*) as total,
        SUM(convert(course_price,decimal(10,2))) as income
    from t_course_order
    GROUP BY LEFT(order_date,7);
</select>

service

List<MonthIncome> getMonthIncomes();

@Override
public List<MonthIncome> getMonthIncomes() {
    return courseOrderMapper.getMonthIncomes();
}

controller

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