SSM整合Springboot(二)利用easyUI

目录

案例效果如下:

分页模块:

添加模块:

修改模块:

删除模块:

一、新建war项目

二、补全项目结构文件夹(如下图)

三、添加maven相关依赖

三、库表设计

四、创建实体类、Dao层接口、mybatis的映射文件

五、mybatis配置文件(空壳)

六、springboot的yml文件

七、springboot的主启动类

其他补充:

一、前端展示:

二、springboot日志logback的配置


案例效果如下:

分页模块:

添加模块:

修改模块:

删除模块:


一、新建war项目

二、补全项目结构文件夹(如下图)

三、添加maven相关依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.henu.ssm.springboot</groupId>
    <artifactId>SSMspringboot01</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>
    <!--springboot父项目(统一当前spring整合版本)-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.0.RELEASE</version>
    </parent>
    <dependencies>
        <!--导入web启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--mybatis启动器-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.2.2</version>
        </dependency>

        <!-- pagehelper启动器 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.3</version>
        </dependency>
        <!--mysql驱动-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.25</version>
        </dependency>
        <!-- 阿里数据源 -->

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.3</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-tomcat</artifactId>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>org.apache.tomcat.embed</groupId>
            <artifactId>tomcat-embed-jasper</artifactId>
        </dependency>
        <!-- 热部署 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <!-- optional=true,依赖不会往下传递,如果有项目依赖本项目,并且想要使用devtools,需要重新引入 -->
            <optional>true</optional>
            <scope>true</scope>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <fork>true</fork><!-- 如果没有该配置,热部署的devtools不生效 -->
                </configuration>
            </plugin>
            <!-- 自定义配置spring Boot使用的JDK版本 -->
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

三、库表设计

四、创建实体类、Dao层接口、mybatis的映射文件

可通过反向工程的方法利用generato,自动生成实体类,dao层接口和mapper映射文件

详情请查看

共对五个表进行了反向工程,但具体只使用了seller_info表

效果如下:

实体类:

接口:

mapper映射文件:

五、mybatis配置文件(空壳)

<?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>

</configuration>

六、springboot的yml文件

application.yml

##切换环境
spring:
  profiles:
    active: dev   #加载application-dev.yml文件
  mvc:
    view:
      prefix: /
      suffix: .jsp

application-dev.yml

##服务器配置
server:
  port: 9090
  servlet:
    path: /sell

##logback
logging:
  config: classpath:logback.xml

##spring mvc
spring:
  resources:  #静态资源
    static-locations:
    - classpath:/META-INF/resources/
    - classpath:/resources/
    - classpath:/static/
    - classpath:/public/
    - classpath:/img/
    - classpath:/js/
  datasource:
    name: druid
    type: com.alibaba.druid.pool.DruidDataSource
    url: jdbc:mysql://localhost:3306/sell
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
    mvc:
      view:
        prefix: /
        suffix: .jsp

#整合mybatis
mybatis:
  mapper-locations: classpath:mybatis/mapper/*Mapper.xml
  config-location: classpath:mybatis/mybatisConfig.xml
  type-aliases-package: com.henu.ssm.bean

#pagehelper
pagehelper:
  helperDialect: mysql
  reasonable: true
  supportMethodsArguments: true



七、springboot的主启动类

package com.henu.ssm;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.Banner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author shkstart
 * @create 2019-09-26 13:37
 */
@SpringBootApplication
//扫描dao层接口
@MapperScan("com.henu.ssm.dao")
public class SellAplication {
    public static void main(String[] args) {
        SpringApplication application = new SpringApplication(SellAplication.class);
        //关闭banner
        application.setBannerMode(Banner.Mode.OFF);
        application.run(args);
    }
}

其他补充:

一、前端展示:

使用了Easy UI仅用了一个页面即可实现前端的添加、更新、删除操作

seller.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div align="center">
    <h2>卖家信息维护</h2>

    <table id="dg" title="卖家信息" class="easyui-datagrid" style="width:680px;height:450px"
           url="selectSeller"
           toolbar="#toolbar" pagination="true"
           rownumbers="true" fitColumns="true" singleSelect="true">
        <thead>
        <tr>
            <!--设置表格显示的列,要求列明与json中的属性名相同-->
            <th field="id" width="60">商家编号</th>
            <th field="username" width="50">商家名称</th>
            <th field="password" width="50">商家密码</th>
            <th field="openid" width="50">微信编号</th>
            <th field="createTime" width="120">创建时间</th>
            <th field="updateTime" width="120">更新时间</th>
        </tr>
        </thead>
    </table>
    <!--工具栏-->
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新增商家</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑商家</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">删除商家</a>
    </div>

    <div id="dlg" class="easyui-dialog" style="width:400px" data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'">
        <form id="fm" method="post" novalidate style="margin:0;padding:20px 50px">
            <h3>User Information</h3>

            <div style="margin-bottom:10px">
                <input name="username" class="easyui-textbox" required="true" label="username:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="password" class="easyui-textbox" required="true" label="password:" style="width:100%">
            </div>
            <div style="margin-bottom:10px">
                <input name="openid" class="easyui-textbox" required="true"  label="openid:" style="width:100%">
            </div>

        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    Copyright © 2010-2019 yanliming
</div>
<script type="text/javascript">
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('center').dialog('setTitle','添加卖家信息');
        $('#fm').form('clear');
        url = 'insertSeller';
    }
    function editUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('center').dialog('setTitle','Edit User');
            $('#fm').form('load',row);
            url = 'updateSeller?id='+row.id;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                var result = eval('('+result+')');
                if (result.errorMsg){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#dg').datagrid('reload');    // reload the user data
                }
            }
        });
    }
    function destroyUser(){
        var row = $('#dg').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','您确认要删除此卖家信息吗?',function(r){
                if (r){
                    $.post('delSeller',{id:row.id},function(result){
                        if (result.success){
                            $('#dg').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>

</body>
</html>


二、springboot日志logback的配置

在resources目录下的logback.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <!-- %m输出的信息,%p日志级别,%t线程名,%d日期,%c类的全名,%i索引【从数字0开始递增】-->
    <!-- appender是configuration的子节点,是负责写日志的组件。 -->
    <!-- ConsoleAppender:把日志输出到控制台 -->
    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
            <pattern>%d %p (%file:%line\)- %m%n</pattern>
            <!-- 控制台也要使用UTF-8,不要使用GBK,否则会中文乱码 -->
            <charset>UTF-8</charset>
        </encoder>
    </appender>
    <!-- RollingFileAppender:滚动记录文件,先将日志记录到指定文件,当符合某个条件时,将日志记录到其他文件 -->
    <!-- 以下的大概意思是:1.先按日期存日志,日期变了,将前一天的日志文件名重命名为XXX%日期%索引,新的日志仍然是demo.log
     demo.log ->2018-09-24.0.log  2018-09-24.1.log
     demo.log
     -->
    <!-- 2.如果日期没有发生变化,但是当前日志的文件大小超过1KB时,对当前日志进行分割 重命名 -->
    <appender name="demolog"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <File>log/demo.log</File>
        <!-- rollingPolicy:当发生滚动时,决定 RollingFileAppender 的行为,涉及文件移动和重命名。 -->
        <!-- TimeBasedRollingPolicy: 最常用的滚动策略,它根据时间来制定滚动策略,既负责滚动也负责出发滚动 -->
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <!-- 活动文件的名字会根据fileNamePattern的值,每隔一段时间改变一次 -->
            <!-- 文件名:log/demo.2018-12-05.0.log -->
            <fileNamePattern>log/demo.%d.%i.log</fileNamePattern>
            <!-- 每产生一个日志文件,该日志文件的保存期限为30天 -->
            <maxHistory>30</maxHistory>
            <timeBasedFileNamingAndTriggeringPolicy
                    class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <!-- maxFileSize:这是活动文件的大小,默认值是10MB,测试时可改成1KB看效果 -->
                <maxFileSize>1KB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
        </rollingPolicy>
        <encoder>
            <!-- pattern节点,用来设置日志的输入格式 -->
            <pattern>
                %d %p (%file:%line\)- %m%n
            </pattern>
            <!-- 记录日志的编码:此处设置字符集 - -->
            <charset>UTF-8</charset>
        </encoder>
    </appender>
    <!-- 控制台输出日志级别 -->
    <root level="info">
        <appender-ref ref="STDOUT"/>
    </root>
    <!-- 指定项目中某个包,当有日志操作行为时的日志记录级别 -->
    <!-- com.alibaba为根包,也就是只要是发生在这个根包下面的所有日志操作行为的权限都是DEBUG -->
    <!-- 级别依次为【从高到低】:FATAL > ERROR > WARN > INFO > DEBUG > TRACE -->

    <!--dao-->
    <logger name="com.henu.ssm.dao" level="info">
        <appender-ref ref="demolog"/>
    </logger>
</configuration>

 


版权声明:本文为qq_41808387原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。