LayUI结合SSM框架

1.项目结构：

1.1配置文件

mybatis.xml:

这里主要是开启打印和开启缓存

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>

    <settings>
<!--        //打印日志 STDOUT_LOGGING为输出SQL语句到控制台-->
        <setting name="logImpl" value="STDOUT_LOGGING"/>

<!--        Mybatis开启使用二级缓存-->
        <setting name="cacheEnabled" value="true"/>
    </settings>
</configuration>

spring-mvc.xml:

因为spring-mvc主要管的就是controller层，所以controller的扫包也在这里扫

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
  http://www.springframework.org/schema/beans/spring-beans.xsd
  http://www.springframework.org/schema/context
  http://www.springframework.org/schema/context/spring-context.xsd
  http://www.springframework.org/schema/mvc
  http://www.springframework.org/schema/mvc/spring-mvc.xsd">



  <!--    扫描controller包-->
  <context:component-scan base-package="com.hz.controller" />

  <!--    开启springMVC注解-->
  <mvc:annotation-driven/>

  <!--    主要用来将静态资源的请求交给 Servlet 容器的默认 servlet 进行处理，而不是由 Spring MVC 的控制器处理。-->
  <mvc:default-servlet-handler/>

  <!-- 配置静态资源路径 ，这句的意思就是，把静态资源中/static/都映射为/static/**-->
  <!--    <mvc:resources mapping="/static/**" location="/static/" />-->

  <!--    这句的意思就是把静态资源中/static/和/pages/都映射成/-->
  <mvc:resources mapping="/**" location="/static/,/pages/" />

  <!--    controller返回视图名称解析为实际路径，比如/index就会被解析为/pages/index.html-->
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/pages/"/>
    <property name="suffix" value=".html"/>
  </bean>


</beans>

spring-mabatis.xml:

这里主要是spring和mybatis结合的一个配置文件

数据库连接池

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xsi:schemaLocation="http://www.springframework.org/schema/beans
  http://www.springframework.org/schema/beans/spring-beans.xsd
  http://www.springframework.org/schema/context
  http://www.springframework.org/schema/context/spring-context.xsd">

  <context:property-placeholder location="classpath:jdbc.properties"/>

  <!-- 数据库c3p0连接池 -->
  <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
    <property name="driverClass" value="${driver}"/>
    <property name="jdbcUrl" value="${url}"/>
    <property name="user" value="${uname}"/>
    <property name="password" value="${password}"/>
  </bean>

  
  <!-- MyBatis 与 Spring 集成时使用的 SqlSessionFactory-->
  <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    <!-- 注入数据库连接池 -->
    <property name="dataSource" ref="dataSource"/>
    <!-- 扫描pojo包 使用别名 -->
    <property name="typeAliasesPackage" value="com.hz.pojo"/>
    <!-- 扫描sql配置文件:mapper需要的xml文件 -->
    <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    <!--读取mybatis主配置文件-->
    <property name="configLocation" value="classpath:mybatis.xml"/>
  </bean>

  

  <!-- 配置扫描Dao接口包，动态实现Dao接口，注入到spring容器中 -->
  <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <!-- 注入sqlSessionFactory -->
    <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    <!-- 给出需要扫描Dao接口包 -->
    <!--        改成mapper-->
    <property name="basePackage" value="com.hz.mapper"/>
  </bean>

  <!-- 扫描service包下所有使用注解的类型 -->
  <context:component-scan base-package="com.hz.service"/>
</beans>

jdbc.properties:

driver=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/javaweb_test?useSSL=true&allowPublicKeyRetrieval=true&serverTimezone=UTC
uname=root
password=root

log4j.properties:

log4j.rootLogger=info,Console,R
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
#log4j.appender.Console.layout.ConversionPattern=%d [%t] %-5p %c ï¿½C %m%n
log4j.appender.Console.layout.ConversionPattern=%d{yy-MM-dd HH:mm:ss} %5p %c{1}:%L ï¿½C %m%n
log4j.appender.R=org.apache.log4j.DailyRollingFileAppender
log4j.appender.R.File=D:/logs/mybatis01.log
log4j.appender.R.layout=org.apache.log4j.PatternLayout
log4j.appender.R.layout.ConversionPattern=%d{yyyy.MM.dd HH:mm:ss} %5p %c{1}(%L):? %m%n
log4j.logger.org.apache=info, R
log4j.logger.org.apache.catalina.core.ContainerBase.[Catalina].[localhost]=DEBUG, R
log4j.logger.org.apache.catalina.core=info, R
log4j.logger.org.apache.catalina.session=info, R

pom.xml:

  <properties>
    <spring.version>5.2.10.RELEASE</spring.version>
  </properties>
  <dependencies>
    <!-- spring框架包 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-oxm</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-expression</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-orm</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>


<!--    <dependency>-->
<!--      <groupId>javax.servlet</groupId>-->
<!--      <artifactId>servlet-api</artifactId>-->
<!--      <version>2.5</version>-->
<!--      <scope>provided</scope>-->
<!--    </dependency>-->

    <dependency>
      <groupId>org.aspectj</groupId>
      <artifactId>aspectjweaver</artifactId>
      <version>1.9.5</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.6</version>
    </dependency>
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.33</version>
    </dependency>


    <dependency>
      <!--
          Spring与Mybatis整合的jar包
          这个jar包mybatis在前面，是Mybatis提供的
      -->
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.3</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.34</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.13.1</version>
      <scope>test</scope>
    </dependency>
    <!--        servlet-api-->

        <dependency>
          <groupId>javax.servlet</groupId>
          <artifactId>servlet-api</artifactId>
          <version>2.5</version>
        </dependency>

    <dependency>
      <groupId>com.mchange</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.10.0</version>
    </dependency>

    <!--JSON依赖-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.17.2</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.17.0</version>
    </dependency>


<!--    JSTL包-->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>


  </dependencies>

web.xml:

<web-app>

  <display-name>Archetype Created Web Application</display-name>


  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>




  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>



  <servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
          <!-- 配置springMVC需要加载的配置文件-->
  <init-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring-*.xml</param-value>
  </init-param>
  <!--容器在应用启动时就加载初始化这个servlet-->
  <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<!-- 匹配所有请求 -->
<url-pattern>/</url-pattern>
</servlet-mapping>


  <welcome-file-list>
    <welcome-file>/page/login-1.html</welcome-file>
  </welcome-file-list>


</web-app>

ResultJSON.java

package com.hz.util;

/**
 * @Author: wzy
 * @Date: 2024/11/13 11:03
 * @Description: 返回结果类
 */
public class ResultJSON<T> {
    private Integer code;
    private String msg;
    private T data;
    public ResultJSON(Integer code, String msg, T data) {
        this.code = code;
        this.msg = msg;
        this.data = data;

    }

    public static ResultJSON successOrError(int num) {
        return num>0?new ResultJSON(200,"操作成功",num):new ResultJSON(400,"操作失败",num);

    }


    public static ResultJSON error(String msg){
        return new ResultJSON(400,msg,null);
    }
    public static ResultJSON success(String msg){
        return new ResultJSON(200,msg,null);
    }

    public static <T> ResultJSON success(T data){
        return new ResultJSON(200,"操作成功",data);
    }
    public static ResultJSON success(){
        return new ResultJSON(200,"操作成功",null);
    }
    public static ResultJSON success(Integer code,String msg){
        return new ResultJSON(code,msg,null);
    }
    public static ResultJSON error(){
        return new ResultJSON(400,"操作失败",null);
    }
    public static ResultJSON error(Integer code,String msg){
        return new ResultJSON(code,msg,null);
    }





    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }
}

ResultLayui.java

package com.hz.util;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class ResultLayui {

    private Integer code;
    private String msg;
    private  Integer count;
    private Object data;

    public static ResultLayui success(Integer count,Object data){

        return new ResultLayui(0,"请求成功",count,data);
    }
}

2.layUI：

把layUI的东西放到static文件夹

然后在pages里面放上需要的页面

2.1layUI模板

D:\AAAhz鸿卓\7.框架资料\LayUI\LayUI项目

框架：

在 api/init.json中来更改左导航栏

2.1.1：table.html

表格初始化：

这种表格初始化在render那一块，在cols里面填上对应的pojo中的字段就行
api/table.json是表格的初始化数据，所以我们就知道了，返回表格数据的格式：所以返回表格数据需要使用ResultLayui来帮助我们返回结果集

"code": 0,

"msg": "",

"count": 1000,

"data":

我们使用ajax时经常传递的是data.field，这是表单的内容，如果需要id的话，需要在表单中hidden一个id的input框
多选框：创建数组然后，将id通过循环push到数组中，在请求中携带这个数组，没错post也能够通过？拼数据

// 需要先创建一个数组
var ids = new Array();

$.each(data,function (){
ids.push(this.id);
});

// 使用 $.post() 发送 POST 请求{ ids: JSON.stringify(ids) }
$.post('/provider/deleteAll?ids='+ids.toString(), function(res) {
if(res.code==200){
table.reload('currentTableId');
}
},'json');
编辑用户：先把id携带着发送到另一个html

用来接收其他html传过来的userID，那种通过get方法传过来的

  // 获得id
    // 获取查询字符串（？后面的部分）
    var queryString = window.location.search;

    // 解析字符串
    var urlParams = new URLSearchParams(queryString);
    // 获取id的值
    var idValue = urlParams.get('userID');
    alert(idValue);

<!DOCTYPE html>
<html>
<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" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

<!--        <fieldset class="table-search-fieldset">-->
<!--            <legend>搜索信息</legend>-->
<!--            <div style="margin: 10px 10px 10px 10px">-->
<!--                <form class="layui-form layui-form-pane" action="">-->
<!--                    <div class="layui-form-item">-->

<!--                        <div class="layui-inline">-->
<!--                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </form>-->
<!--            </div>-->
<!--        </fieldset>-->

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除
                </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
<!--            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">查看详情</a>-->
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="editaddress">修改收货地址</a>
<!--            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="editaddress">修改收货地址</a>-->
        </script>

    </div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table','laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;



        protable=table.render({
            elem: '#currentTableId',
            url: '/buyuser/findBuyUserWithAddress',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[

                {type: "checkbox", width: 50},
                {field: 'userID', width: 80, title: '用户ID'},
                {field: 'userName', width: 180, title: '姓名'},
                // {field: 'gender', width: 180, title: '性别'},
                {
                    field: 'gender',
                    width: 180,
                    title: '性别',
                    templet: function(d) {
                        return d.gender === 1 ? '男' : '女'; // 判断性别字段
                    }
                },
                // {
                //     title: '地址ID',
                //     width: 200,
                //     templet: function(d) {
                //         return d.userAddress ? d.userAddress.addressID : ''; // 解析嵌套的地址ID
                //     }},
                // ,
                // {
                //     title: '地址',
                //     width: 100,
                //     templet: function(d) {
                //         return d.userAddress ? d.userAddress.address : ''; // 解析嵌套的地址ID
                //     }},

                {title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}

            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'line'
        });
        // console.log(protable.field);

        //日期
        laydate.render({
            elem: '#beginDate'
        });
        //日期
        laydate.render({
            elem: '#endDate'
        });

        parent.parentTable(protable);
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            // var result = JSON.stringify(data.field);
            // layer.alert(result, {
            //     title: '最终的搜索信息'
            // });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: data.field
            }, 'data');

            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
 //批量添加
            if (obj.event === 'add') {  // 监听添加操作
                var index = parent.layer.open({
                    title: '添加供应商',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['50%', '60%'],
                    content: '/edit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
  //批量删除
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                var ids = new Array();
                $.each(data,function (){
                    ids.push(this.id);
                });
                // 使用 $.post() 发送 POST 请求{ ids: JSON.stringify(ids) }
                $.post('/buyuser/deleteBuyUser?id='+ids.toString(), function(res) {
                    if(res.code==200){
                                table.reload('currentTableId');
                             }
                },'json');

            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

// 修改


        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index =parent.layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['60%', '60%'],
                    // content: '/edit.html?id=1'
                    content: '/edit.html?id='+data.userID
                    // content: '/edit.html?userID='+data.userID

                });
                // alert(data.userID);
                // console.log('data.userID'+data.userID);



                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                // 单一删除
                parent.layer.confirm('真的删除行么', function () {

                    $.post("/buyuser/deleteBuyUser",{id:data.userID},function (res){
                        if (res.code==200){
                            obj.del();
                            parent.layer.closeAll();
                        }

                    },'json');


                });

            }else    if (obj.event === 'editaddress') {

//修改收货地址
                var index =parent.layer.open({
                    title: '查看收货地址',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['60%', '60%'],
                    // content: '/edit.html?id=1'
                    content: '/addresstable.html?userID='+data.userID


                });

                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });

    });

</script>

</body>
</html>

2.1.2刷新并且关闭：

因为当有一个选择，这种都应该是全局的在index中的，不能只在table页面中，不然点击其他的就会使这个失效

因为在js中兄弟元素不能互相调用，只有父子可以

编辑页面虽然是在table页面中打开的，但是是使用parent.open,也就是说index才是编辑页面真正的爸爸

在刷新的时候我们需要刷新的是table表格，但是它俩是兄弟刷新不了，所以要借助parent(index)的tab，这里的tab就是table页面，就可以刷新了

在关闭的时候直接通过父级关闭就行了

3.项目注意点：

1.要细心，不要在三层中来回穿梭，先看有哪些方法要用，先把那些方法都在xml中写上，先写接口

2.管好输入输出就好，像管道一样

3.在写sql语句的时候要注意，可以每一条都在数据库中测试一下。