为您推荐:
精华内容
最热下载
问答
  • 5星
    14.59MB weixin_45750628 2021-03-26 21:38:32
  • 5星
    7.16MB weixin_45750628 2021-03-27 16:34:14
  • 5星
    14.4MB qq_37740841 2021-08-07 21:45:39
  • 5星
    15KB weixin_42759190 2021-05-08 14:09:29
  • 5星
    1.18MB weixin_40228600 2021-05-23 17:39:25
  • 5星
    4.39MB qq_42980417 2021-01-21 11:33:23
  • 5星
    660.34MB qq_38204881 2021-09-03 16:08:16
  • 5星
    3.98MB haohao123nana 2020-11-12 11:45:33
  • 5星
    1.75MB weixin_40228600 2021-04-06 08:09:53
  • 5星
    19.23MB qq_29777207 2020-12-08 20:23:01
  • 19KB u012081441 2020-04-04 21:43:13
  • springboot+layui后台管理项目 (需要的小伙伴,评论留下邮箱!) 1.技术栈 springboot mybatis mysql layui 2.界面展示 主界面 登录界面 用户管理界面 动态查询 退出 密码修改 3.主要前台代码 <1>主界面 ...

    springboot+layui后台管理项目

    (需要的小伙伴,评论留下邮箱!)

    1.技术栈

    • springboot
    • mybatis
    • mysql
    • layui
    • echarts

    2.界面展示(初始版)
    主界面

    在这里插入图片描述
    登录界面

    在这里插入图片描述

    用户管理界面

    在这里插入图片描述
    动态查询

    在这里插入图片描述
    退出

    在这里插入图片描述
    密码修改

    在这里插入图片描述
    3.界面展示(功能增强版)
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    4.主要前台代码

    <1>主界面

    <!DOCTYPE html>
    <html>
    <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" href="layui/css/layui.css"  media="all">
      <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
        <style>
    
            body{
                background-repeat:no-repeat;
                background-size:100% 100%;
                background-attachment: fixed;
                background-image: url("img/index.gif");
            }
            img{
                width: 100%;
                height: 100%;
            }
            .layui-carousel{
                border: 1px solid #0C0C0C;
                margin:0 auto;
                margin-top: 50px;
            }
            .layui-btn-container{
               margin-top: 50px;
            }
    
    
        </style>
    </head>
    <body>
    <!--轮播图-->
    <div  class="layui-carousel" id="test">
      <div carousel-item="">
        <div><img src="img/1.jpg"></div>
        <div><img src="img/2.jpg"></div>
        <div><img src="img/3.jpg"></div>
        <div><img src="img/4.jpg"></div>
      </div>
    </div>
    <!--登录按钮-->
    
    <div class="layui-btn-container" align="center">
        <!--
    
        1、异常表现:我在jsp文件中有一个表单,里面有一个保存事件按钮。保存
    
        onclick的js函数里我是用ajax提交的数据,用于局部刷新页面。
    
        2、问题原因:在Internet Explorer 的默认类型是 “button”,而其他浏览器中(包括 W3C
        规范)的默认值是 “submit”。
    
        所以导致了表单重复提交。出现“java.io.IOException: 你的主机中的软件中止了一个已建立的连接”异常。
    
        3、问题解决:把代码 改为保存,为按钮定义Type属性为button。
    -->
        <button type="button" class="layui-btn layui-btn-normal " id="btn">
            <a href="login.html" type="button">登录系统</a>
        </button>
    </div>
    <script src="layui/layui.js"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
        layui.use(['carousel'], function() {
            var carousel = layui.carousel;
            //图片轮播
            carousel.render({
                elem: '#test'
                , width: '1100px'
                , height: '500px'
                , interval: 1800
            });
    
        });
    </script>
    </body>
    </html>
    

    <2>登录界面

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <script src="layui/jquery.min.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
        <link rel="stylesheet" href="css/adminLogin.css">
    </head>
    <body>
    <div class="wrap">
        <img src="img/index.gif" class="imgStyle">
        <div class="loginForm">
            <form>
                <div class="logoHead">
                    <h2 style="margin-top:10px;margin-left: 50px">后台管理系统</h2>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>用户名:</label>
                    </div>
                    <div class="usernameDiv">
                        <i class="layui-icon layui-icon-username adminIcon"></i>
                        <input id="username" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" autocomplete="off">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>密码:</label>
                    </div>
                    <div class="passwordDiv">
                        <i class="layui-icon layui-icon-password adminIcon"></i>
                        <input id="password" class="layui-input adminInput" type="password" name="password" placeholder="输入密码" autocomplete="off">
                    </div>
                </div>
                <div class="usernameWrapDiv">
                    <div class="usernameLabel">
                        <label>验证码:</label>
                    </div>
                    <div class="cardDiv">
                        <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                    </div>
                    <div class="codeDiv">
                        <input id="loginCode" class="layui-input codeInput"  type="button">
                    </div>
                </div>
                <div class="submitDiv">
    
                        <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录">
               </div>
            </form>
        </div>
    </div>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script>
        var layer;
        layui.use(['layer'],function () {
            layer = layui.layer;
        })
        $(function () {
            // 页面初始化生成验证码
            window.onload = createCode('#loginCode');
            // 验证码切换
            $('#loginCode').click(function () {
                createCode('#loginCode');
            });
            // 登录事件
            $('#loginBtn').click(function () {
                login();
            });
    
        });
        // 生成验证码
        function createCode(codeID) {
            var code = "";
            // 验证码长度
            var codeLength = 4;
            // 验证码dom元素
            var checkCode = $(codeID);
            // 验证码随机数
            var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                'S','T','U','V','W','X','Y','Z'];
            for (var i = 0;i < codeLength; i++){
                // 随机数索引
                var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            // 将生成的随机验证码赋值
            checkCode.val(code);
        }
        // 校验验证码、用户名、密码
        function validateCode(inputID,codeID) {
            var inputCode = $(inputID).val().toUpperCase();
            var cardCode = $(codeID).val();
            var loginUsername = $('#username').val();
            var loginPassword = $('#password').val();
            if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                layer.alert("用户名不能为空");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                layer.alert("密码不能为空");
                return false;
            }
            if (inputCode.length<=0){
                layer.alert("验证码不能为空");
                return false;
            }
            if (inputCode != cardCode){
                layer.alert("请输入正确验证码");
                return false;
            }
            return true;
        }
        // 登录流程
        function login() {
            if (!validateCode('#loginCard','#loginCode')){
                //阻断提示
                layui.alert("输入不合法")
            }else {
                var username = $('#username').val();
                var password = $('#password').val();
                $.ajax({
                    type:"post",
                    url:"/checkLogin",
                    data: {
                        "username": username,
                        "password": password
                    },
                    success: function (result) {
                        if (result=='success'){
                            layer.alert("登录成功",{icon: 1},function () {
                                window.location.href = "admin.html?"+$("#username").val()+"";
    
                            });
                        }else{
                            alert(result);
    
                        }
                    },
    
                });
            }
    
        }
    </script>
    
    </body>
    
    </html>
    
    
    

    <3>用户管理界面

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>后台系统</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">后台管理</div>
            <!-- 头部区域(可配合layui已有的水平导航) -->
            <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">
                    <p id="admin-name" style="fron-size:13px;front-family:Arial;color:yellow"></p>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="img/ico.jpg" class="layui-nav-img">
                    </a>
                    <dl class="layui-nav-child">
                        <a href="modpwd.html" type="button">修改密码</a>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <i id="logout" class="layui-icon">&#xe682;</i>
                </li>
            </ul>
        </div>
    
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
                <ul class="layui-nav layui-nav-tree">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="./table.html">用户管理</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="table1.html">列表一</a>
                            </dd>
                            <dd>
                                <a href="table2.html">列表二</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="demo1.html">云市场</a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="./demo2.html">发布商品</a>
                    </li>
                </ul>
    
            </div>
        </div>
    
        <div class="layui-body">
            <!-- 内容主体区域 -->
            <iframe id="iframeMain" src="" style="width: 100%"; height="100%";></iframe>
        </div>
    
    </div>
    <script src="layui/jquery.min.js"></script>
    <script src="layui/layui.all.js"></script>
    <script src="layui/layui_exts/excel.js"></script>
    
    <script>
        layui.use(['layer'],function() {
            var layer = layui.layer;
    
            $(document).ready(function () {
                $("li>a").click(function (e) {
                    e.preventDefault();
                    $("#iframeMain").attr("src", $(this).attr("href"));
                });
                $("dd>a").click(function (e) {
                    e.preventDefault();
                    $("#iframeMain").attr("src", $(this).attr("href"));
                });
                $('#logout').click(function () {
                    layer.confirm("确认退出?",{icon: 1},function () {
                        window.location.href = "login.html";
                    });
                })
    
            });
            //获取管理员信息
            $(document).ready(function () {
                var url = location.href;
                var num = url.indexOf("?");
                var str = decodeURI(url.substr(num + 1));//解码,不然汉字会乱码
                $("#admin-name").html(str);
            });
        });
    </script>
    
    </body>
    
    </html>
    

    代码有点多,需要的小伙伴回复评论,留下邮箱!

    展开全文
    lz970704 2020-12-03 15:14:51
  • 42.84MB qq_34247759 2018-11-23 15:30:30
  • 适合新手学习,springboot+layui简单增删改查整合的blog,对layui使用不太熟悉,如有不对希望指出,本人已经辛苦整理了好几篇学习文章,如果有用请点个赞。 ** 1.效果展示 1.1.效果展示 1.2.两张关联表的增删改查 ...

    跟着狂神大神学完一半,临时抽出时间,来整理一篇 。适合新手学习,springboot+layui简单增删改查整合的blog,对layui使用不太熟悉,如有不对希望指出,本人已经辛苦整理了好几篇学习文章,如果有用请点个赞。

    1.效果展示

    1.1.效果展示
    在这里插入图片描述
    1.2.两张关联表的增删改查

    在这里插入图片描述

    在这里插入图片描述

    2.源码链接

    码云链接
    如果有大佬继续在分支上更新,就更好了。
    有实体数据字典说明,数据库sql在配置文件那里。

    3.难点

    难点就只有两个:1.layui与thymeleaf结合,2.springmvc的扩展。其他都是重复代码。

    4.注意点

    4.1 本人开发使用的后台是eclipse,前台是vscode,maven虽然加入了热部署,但是在开发时,修改了前端的页面一定要在后端修改一下,让热部署生效后再去验证前端效,不然前端会不刷新,因为前端使用了thymeleaf,后台一定要重新加载一下。idea不知道有没有这个问题。
    4.2 把这个练习部署本地时,记得修改yaml的数据源配置。

    展开全文
    blnmdv 2021-11-13 15:15:28
  • 29.91MB u012081441 2020-04-07 10:01:13
  • 本文学习章节:IT技能-Java基础-05案例-SpringBoot+Mybatis-plus+Layui实现模块增删改查 本文学习内容: 模块的增删改查 本文视频地址:待更新 1 概述 通过Java基础的学习,我们进行一个实战项目:实现一个用户模块...

    简介:术道并行,从零打造个人知识体系,图文视频同步更新。
    本文学习章节:IT技能-Java基础-05案例-SpringBoot+Mybatis-plus+Layui实现模块增删改查
    本文学习内容: 模块的增删改查
    本文视频地址:待更新

    1 概述

    通过Java基础的学习,我们进行一个实战项目:实现一个用户模块的增删改查。

    2 技术选型

    后台框架:SpringBoot 2.4.3
    数据库:H2内置数据库
    ORM:Mybatis-Plus 参考文档:https://mp.baomidou.com/guide/
    前端:Layui 2.5.7 参考文档:https://www.layui.com/doc/
    开发工具:IDEA2020.3

    3 开发步骤

    3.1 SpringBoot框架搭建

    使用idea在线方式直接搭建。

    • 步骤一:新建工程
      File --> New -->Projet
      在这里插入图片描述

    • 步骤二:选择在线搭建
      左侧选择Spring Initializr,右边选择 Default,点击 Next
      在这里插入图片描述

    • 步骤三:初始化设置
      初始化设置,如图
      在这里插入图片描述

    • 步骤四:选择依赖的jar包
      Developer Tools --> Lombok;Web–>Spring Web;SQL–>H2 Database

    在这里插入图片描述

    在这里插入图片描述

    • 步骤五:设置项目名和项目路径
      在这里插入图片描述

    • 步骤六:检查是否工程是否正常
      在这里插入图片描述

    3.2 工程目录结构

    我们按照标准工程,创建目录如下:
    在这里插入图片描述

    3.3 Mybatis-plus、H2使用

    按照如下结构创建或修改文件:
    在这里插入图片描述

    修改pom.xml文件

    <?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
        <modelVersion>4.0.0</modelVersion>
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>2.4.3</version>
            <relativePath/> <!-- lookup parent from repository -->
        </parent>
        <groupId>com.aiowang</groupId>
        <artifactId>demo</artifactId>
        <version>0.0.1-SNAPSHOT</version>
        <name>sml</name>
        <description>springboot+mybatis-plus+Layui</description>
        <properties>
            <java.version>1.8</java.version>
        </properties>
        <dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>com.baomidou</groupId>
                <artifactId>mybatis-plus-boot-starter</artifactId>
                <version>3.4.2</version>
            </dependency>
    
            <dependency>
                <groupId>com.h2database</groupId>
                <artifactId>h2</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
                <optional>true</optional>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>junit</groupId>
                <artifactId>junit</artifactId>
                <version>4.10</version>
                <scope>test</scope>
            </dependency>
        </dependencies>
    
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <configuration>
                        <excludes>
                            <exclude>
                                <groupId>org.projectlombok</groupId>
                                <artifactId>lombok</artifactId>
                            </exclude>
                        </excludes>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    
    </project>
    

    修改配置文件:

    # DataSource Config
    spring:
      datasource:
        driver-class-name: org.h2.Driver
        schema: classpath:db/schema-h2.sql
        data: classpath:db/data-h2.sql
        url: jdbc:h2:./data/test
        username: root
        password: 123456
        initialization-mode: always
      h2:
        console:
          path: /h2-console
          enabled: true
    

    新增数据库初始脚本
    data-h2.sql:

    DELETE FROM user;
    
    INSERT INTO user (id, name, age, email) VALUES
    (1, 'Jone', 18, 'test1@baomidou.com'),
    (2, 'Jack', 20, 'test2@baomidou.com'),
    (3, 'Tom', 28, 'test3@baomidou.com'),
    (4, 'Sandy', 21, 'test4@baomidou.com'),
    (5, 'Billie', 24, 'test5@baomidou.com');
    

    schema-h2.sql:

    DROP TABLE IF EXISTS user;
    
    CREATE TABLE user
    (
        id VARCHAR(32) NOT NULL COMMENT '主键ID',
        name VARCHAR(30) NULL DEFAULT NULL COMMENT '姓名',
        age INT(11) NULL DEFAULT NULL COMMENT '年龄',
        email VARCHAR(50) NULL DEFAULT NULL COMMENT '邮箱',
        PRIMARY KEY (id)
    );
    

    控制层controller:

    package com.aiowang.sml.controller;
    
    import com.aiowang.sml.domain.User;
    import com.aiowang.sml.service.UserService;
    
    import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
    import com.baomidou.mybatisplus.core.metadata.IPage;
    
    import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.util.StringUtils;
    import org.springframework.web.bind.annotation.*;
    
    
    import java.util.ArrayList;
    import java.util.Arrays;
    import java.util.List;
    import java.util.UUID;
    
    /**
     * @author aiowang
     * @description:
     * @date 2021/3/11 22:04
     */
    @RestController
    @RequestMapping("/user")
    public class UserController {
    
        @Autowired
        private UserService userService;
    
    
        /**
         * 新增
         *
         * @param user 对象
         * @return 返回
         */
        @PostMapping(value = "")
        public Boolean add(@RequestBody User user) {
    
            try {
                user.setId(UUID.randomUUID().toString().replaceAll("-",""));
                userService.save(user);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }
    
        /**
         * 根据id删除
         *
         * @param id 实体id
         * @return 成功标识
         */
        @DeleteMapping(value = "/{id}")
        public Boolean delete(@PathVariable("id") String id) {
            try {
                userService.removeById(id);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }
    
        @DeleteMapping(value = "")
        public Boolean delete(@RequestBody User[] users) {
            try {
                List<String> ids = new ArrayList<>();
                Arrays.stream(users).forEach(s->{
                    ids.add(s.getId());
                });
                userService.removeByIds(ids);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }
    
        /**
         * 更新
         *
         * @param user 对象
         * @return 成功标识
         */
        @PutMapping(value = "")
        public Boolean edit( @RequestBody User user) {
            try {
                userService.updateById(user);
                return true;
            } catch (Exception e) {
                e.printStackTrace();
                return false;
            }
        }
    
        /**
         * 根据id查询
         *
         * @param id 实体id
         * @return 成功标识
         */
        @GetMapping(value = "/{id}")
        public User key(@PathVariable("id") String id) {
            try {
                return userService.getById(id);
            } catch (Exception e) {
                e.printStackTrace();
                return null;
            }
        }
    
    
        /**
         * 分页查询
         *
         * @return ResponseVO-分页实体
         */
        @GetMapping(value = "")
        public IPage<User> page(Integer offset,Integer limit,String name) {
            Page<User> page = new Page<>(offset,limit);
            QueryWrapper<User> queryWrapper = new QueryWrapper<>();
            queryWrapper.like(name!=null, "name", name);
            return userService.page(page,queryWrapper);
    
        }
    }
    
    

    实体层domain:

    package com.aiowang.sml.domain;
    
    import lombok.Data;
    
    /**
     * @author aiowang
     * @description:
     * @date 2021/3/10 22:38
     */
    @Data
    public class User {
        private static final long serialVersionUID = 1L;
        private String id;
        private String name;
        private Integer age;
        private String email;
    }
    
    

    mapper层:

    package com.aiowang.sml.mapper;
    
    import com.aiowang.sml.domain.User;
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    
    /**
     * @author aiowang
     * @description:
     * @date 2021/3/10 22:38
     */
    public interface UserMapper extends BaseMapper<User> {
    
    }
    

    service层

    package com.aiowang.sml.service;
    
    import com.aiowang.sml.domain.User;
    import com.baomidou.mybatisplus.extension.service.IService;
    
    /**
     * @author aiowang
     * @description:
     * @date 2021/3/11 21:56
     */
    public interface UserService extends IService<User> {
    }
    

    service实现层

    package com.aiowang.sml.service.impl;
    
    import com.aiowang.sml.domain.User;
    import com.aiowang.sml.mapper.UserMapper;
    import com.aiowang.sml.service.UserService;
    import com.baomidou.mybatisplus.core.conditions.Wrapper;
    import com.baomidou.mybatisplus.core.mapper.BaseMapper;
    import com.baomidou.mybatisplus.extension.service.IService;
    import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
    import org.springframework.stereotype.Service;
    
    import java.util.Collection;
    import java.util.Map;
    import java.util.function.Function;
    
    /**
     * @author aiowang
     * @description:
     * @date 2021/3/11 21:56
     */
    @Service
    public  class  UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    
    }
    

    config:

    package com.aiowang.sml.config;
    
    import com.baomidou.mybatisplus.annotation.DbType;
    import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
    import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    /**
     * @author aiowang
     * @description:
     * @date 2021/3/11 22:28
     */
    @Configuration
    @MapperScan("com.aiowang.sml.mapper")
    public class MybatisPlusConfig {
    
        @Bean
        public MybatisPlusInterceptor mybatisPlusInterceptor() {
            MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
            interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.H2));
            return interceptor;
        }
    
    }
    

    修改启动类SmlApplication

    package com.aiowang.sml;
    
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication
    @MapperScan("com.aiowang.sml.mapper")
    public class SmlApplication {
    
        public static void main(String[] args) {
            SpringApplication.run(SmlApplication.class, args);
        }
    
    }
    
    

    此时,后台业务代码已开发完毕,可以使用postman进行接口测试了。

    3.4 前端Layuiadmin前端实现

    我们使用layuiadmin,需要实现下载好layuiadmin。我们以其中的user页面修改
    在这里插入图片描述

    我们修改的就是这3个文件,其中userform-add.html是新增的。
    list.html

    
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layuiAdmin 网站用户</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
      <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    </head>
    <body>
    
      <div class="layui-fluid">
        <div class="layui-card">
          <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
    
              <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                  <input type="text" id="name" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
              </div>
    
              <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>
          
          <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
              <button class="layui-btn layuiadmin-btn-useradmin" data-type="batchdel">删除</button>
              <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加</button>
            </div>
            
            <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
            <script type="text/html" id="imgTpl"> 
              <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
            </script> 
            <script type="text/html" id="table-useradmin-webuser">
              <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
          </div>
        </div>
      </div>
    
      <script src="../../../layuiadmin/layui/layui.js"></script>  
      <script>
        var json;
      layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use(['index', 'table'], function(){
        var $ = layui.$
        ,form = layui.form
        ,table = layui.table;
    
        //表格初始化
        table.render({
          elem: "#LAY-user-manage"
          , method: 'get'
          , request: {
            pageName: 'offset' //页码的参数名称,默认:page
            , limitName: 'limit' //每页数据量的参数名,默认:limit
          }
          , url: '/user'
          //, contentType: 'application/json'
          , where: {
              'name': $('#name').val()
          }
          , cols: [[
            {type: "checkbox", fixed: "left"}
            , {field: 'id', width: '15%', title: '编号'}
            , {field: 'name', width: '15%', title: '姓名'}
            , {field: 'age', width: '15%', title: '年龄'}
            , {field: 'email', title: '邮箱'}
            , {
              title: "操作",
              width: 150,
              align: "center",
              fixed: "right",
              toolbar: "#table-useradmin-webuser"
            }
          ]]
          , parseData: function (res) { //res 即为原始返回的数据
                   console.log(res)
            return {
              "code": 0, //解析接口状态
             // "msg": res.msg, //解析提示文本
              "count": res.total, //解析数据长度
              "data": res.records //解析数据列表
            };
          }
          , even: true
          , page: !0
          , limit: 30
          , height: "full-220"
          , text: "对不起,加载出现异常!"
        });
    
    
        table.on('tool(LAY-user-manage)', function (obj) {
          let data = obj.data;
          if (obj.event === 'edit') {
            json = JSON.stringify(data);
            layer.open({
              type: 2,
              title: "编辑用户",
              content: "../../../views/user/user/userform.html",
              maxmin: !0,
              area: ["500px", "450px"],
              btn: ["确定", "取消"],
              yes: function (e, t) {
                var l = window["layui-layer-iframe" + e], r = "LAY-user-front-submit",
                        n = t.find("iframe").contents().find("#" + r);
                l.layui.form.on("submit(" + r + ")", function (t) {
                  t.field;
    
                  $.ajax({
                    type: 'PUT',
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    url: '/user',
                    data: JSON.stringify(t.field),
                    success: function(data){
                      if (data) {
                        layer.msg('编辑成功');
    
                      } else {
                        layer.msg('编辑失败');
                      }
                      table.reload('LAY-user-manage');
                      layer.close(e)
                    },
                    error: function(msg){
                      alert("提交失败!");
                    }
                  });
    
    
                }), n.trigger("click")
              },
              success: function (e, t) {
              }
            })
          } else if (obj.event === 'del') {
            layer.confirm('确定删除选中数据?', function (index) {
              $.ajax({
                url:  "/user/" + data.id,
                type: "DELETE",
               // contentType: 'application/json',
                success: function (data) {
                  if (data) {
                    layer.msg('删除成功');
                  } else {
                    layer.msg('删除失败');
                  }
                  table.reload('LAY-user-manage'); //数据刷新
                  layer.close(index) //关闭弹层
                }
              });
            });
          }
        });
    
        //监听搜索
        form.on('submit(LAY-user-front-search)', function(data){
          var field = data.field;
          
          //执行重载
          table.reload('LAY-user-manage', {
            where: field
          });
        });
    
        //事件
        var active = {
          batchdel: function(){
            var checkStatus = table.checkStatus('LAY-user-manage')
            ,checkData = checkStatus.data; //得到选中的数据
    
            if(checkData.length === 0){
              return layer.msg('请选择数据');
            }
    
            layer.confirm('确定删除吗?', function(index) {
    
              //执行 Ajax 后重载
              /*
              admin.req({
                url: 'xxx'
                //,……
              });
              */
              $.ajax({
                url:  "/user",
                type: "DELETE",
                data: JSON.stringify(checkData),
                contentType: 'application/json',
                success: function (data) {
                  if (data) {
                    layer.msg('删除成功');
                  } else {
                    layer.msg('删除失败');
                  }
                  table.reload('LAY-user-manage'); //数据刷新
                  layer.close(index) //关闭弹层
                }
              });
            });
          }
          ,add: function(){
            layer.open({
              type: 2
              ,title: '添加用户'
              ,content: 'userform-add.html'
              ,maxmin: true
              ,area: ['500px', '450px']
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                var iframeWindow = window['layui-layer-iframe'+ index]
                ,submitID = 'LAY-user-front-submit'
                ,submit = layero.find('iframe').contents().find('#'+ submitID);
    
                //监听提交
                iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                  var field = data.field; //获取提交的字段
                  
                  //提交 Ajax 成功后,静态更新表格中的数据
                  //$.ajax({});
    
                  $.ajax({
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/json;charset=utf-8",
                    url: '/user',
                    data: JSON.stringify(field),
                    success: function(data){
                      if (data) {
                        layer.msg('编辑成功');
    
                      } else {
                        layer.msg('编辑失败');
                      }
                      table.reload('LAY-user-manage'); //数据刷新
                      layer.close(index) //关闭弹层
                    },
                    error: function(msg){
                      alert("提交失败!");
                    }
                  });
                });  
                
                submit.trigger('click');
              }
            }); 
          }
        };
        
        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
      });
      </script>
    </body>
    </html>
    

    usrform.html

    
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layuiAdmin 网站用户 iframe 框</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    </head>
    <body>
    
      <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="hidden" name="id">
            <input type="text" name="name" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-inline">
            <input type="text" name="age"  placeholder="请输入年龄" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-form-item layui-hide">
          <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>
      </div>
    
      <script src="../../../layuiadmin/layui/layui.js"></script>  
      <script>
      layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use(['index', 'form'], function(){
        var $ = layui.$
        ,form = layui.form;
    
        $(function () {
          //从父层获取值,json是父层的全局js变量。eval是将该string类型的json串变为标准的json串
          var parent_json = eval('('+parent.json+')');
          console.log(parent_json);
          //给表单赋值
          form.val("layuiadmin-form-useradmin", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "id": parent_json.id
            ,"name": parent_json.name // "name": "value"
            ,"age": parent_json.age
            ,"email":  parent_json.email
          });
        });
    
    
    
      })
      </script>
    </body>
    </html>
    

    usrform-add.html

    
    
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>layuiAdmin 网站用户 iframe 框</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
      <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    </head>
    <body>
    
      <div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin" style="padding: 20px 0 0 0;">
        <div class="layui-form-item">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">年龄</label>
          <div class="layui-input-inline">
            <input type="text" name="age"  placeholder="请输入年龄" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-form-item layui-hide">
          <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
        </div>
      </div>
    
      <script src="../../../layuiadmin/layui/layui.js"></script>  
      <script>
      layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
      }).extend({
        index: 'lib/index' //主入口模块
      }).use(['index', 'form'], function(){
        var $ = layui.$
        ,form = layui.form;
    
    
      })
      </script>
    </body>
    </html>
    

    3.5 运行测试

    对SmlApplication右键,如图运行即可。
    在这里插入图片描述

    访问默认端口:http://127.0.0.1:8080/views/userlist.html
    在这里插入图片描述

    正常测试新增,修改,删除,批量删除均无问题

    4 总结

    一个模块的增删改查什么简单,这也是入门的基础。
    mybatis-plus为我们做了基础操作的封装,省去了我们写增删改查基础代码,大大提高了效率。
    layuiadmin十分适合管理类系统开发,拥有众多组件。

    5 源码获取

    https://gitee.com/aiowang/sml.git

    展开全文
    aiowang 2021-03-14 21:15:26
  • 导入Layui框架相关css js font 1.配置.properties文件 #thymeleaf 配置 spring.mvc.view.suffix=.html spring.thymeleaf.mode=HTML5 spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.prefix=classpath:/ spring....

    总结构图

    导入Layui框架相关css js font

    1.配置.properties文件

    #thymeleaf 配置
    spring.mvc.view.suffix=.html
    spring.thymeleaf.mode=HTML5
    spring.thymeleaf.encoding=UTF-8
    #spring.thymeleaf.prefix=classpath:/
    spring.resources.static-locations=classpath:/templates/
    #spring.thymeleaf.servlet.content-type=text/html
    #缓存设置为false, 这样修改之后马上生效,便于调试
    spring.thymeleaf.cache=false
    #DB Configuration:
    spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
    spring.datasource.url=jdbc:mysql://47.105.135.34:3306/tianchen?serverTimezone=GMT%2B8
    spring.datasource.username=tianchen
    spring.datasource.password=futianzhuang
    server.port=8080
    spring.servlet.multipart.max-file-size=1GB
    #多个文件
    spring.servlet.multipart.max-request-size=2GB
    #mybatis专用
    #spring集成Mybatis环境
    #pojo别名扫描包
    mybatis.type-aliases-package=com.tianchen.entity
    #加载Mybatis映射文件
    mybatis.mapper-locations=classpath:mapper/*.xml
    #spring.mvc.static-path-pattern=/static/**
    

    2.新建mapper文件夹 创建InforMapper.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <!--//dao层-->
    <mapper namespace="com.tianchen.dao.InforMapper">
        <select id="query" resultType="com.tianchen.entity.Infor">
            select * from infor
        </select>
        <insert id="add" parameterType="com.tianchen.entity.Infor">
            insert into infor value (#{id},#{country},#{cumulative},#{cure},#{death})
        </insert>
        <delete id="delete" parameterType="com.tianchen.entity.Infor">
            delete from infor where id = #{id}
        </delete>
        <update id="edit" parameterType="com.tianchen.entity.Infor">
            update infor
            <trim prefix="set" suffixOverrides=",">
                <if test="country!=null">country=#{country},</if>
                <if test="cumulative!=null">cumulative=#{cumulative},</if>
                <if test="cure!=null">cure=#{cure},</if>
                <if test="death!=null">death=#{death},</if>
    
            </trim>
            WHERE id = #{id}
        </update>
    </mapper>
    

    3.创建Infor实体类

    package com.tianchen.entity;
    
    public class Infor {
        private int id;
        private String country;
        private String cumulative;
        private String cure;
        private String death;
    
        public Infor(int id, String country, String cumulative, String cure, String death) {
            this.id = id;
            this.country = country;
            this.cumulative = cumulative;
            this.cure = cure;
            this.death = death;
        }
    
        public Infor() {
        }
    
        public int getId() {
            return id;
        }
    
        public void setId(int id) {
            this.id = id;
        }
    
        public String getCountry() {
            return country;
        }
    
        public void setCountry(String country) {
            this.country = country;
        }
    
        public String getCumulative() {
            return cumulative;
        }
    
        public void setCumulative(String cumulative) {
            this.cumulative = cumulative;
        }
    
        public String getCure() {
            return cure;
        }
    
        public void setCure(String cure) {
            this.cure = cure;
        }
    
        public String getDeath() {
            return death;
        }
    
        public void setDeath(String death) {
            this.death = death;
        }
    
        @Override
        public String toString() {
            return "Infor{" +
                    "id=" + id +
                    ", country='" + country + '\'' +
                    ", cumulative='" + cumulative + '\'' +
                    ", cure='" + cure + '\'' +
                    ", death='" + death + '\'' +
                    '}';
        }
    }
    
    

    4.创建InforController

    package com.tianchen.controller;
    
    import com.github.pagehelper.PageHelper;
    import com.github.pagehelper.PageInfo;
    import com.tianchen.entity.Infor;
    import com.tianchen.service.InforService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.support.PagedListHolder;
    import org.springframework.transaction.annotation.Transactional;
    import org.springframework.web.bind.annotation.*;
    
    import javax.servlet.http.HttpSession;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @RestController
    
    public class InforController {
        @Autowired(required = false)
        private InforService inforService;
    
        //查询信息
        @RequestMapping(value = "/query")
        public Map query(HttpSession session, @RequestParam(required = false, defaultValue = "1") int page,
                         @RequestParam(required = false) int limit) {
    
            //定义页数和条数
            PageHelper.startPage(page, limit);
            List<Infor> list = inforService.query();
            //将数据传给rolePageInfo
            PageInfo<Infor> rolePageInfo = new PageInfo<>(list);
            //转换格式
            Map map = new HashMap<String, Object>();
    
            //状态码如果成功返回0
            map.put("code", "0");
            //错误代码
            map.put("msg", "");
            //总数量(分页)
            map.put("count", rolePageInfo.getTotal());
            //返回实体对象集合
            map.put("data", rolePageInfo.getList());
            
            return map;
    
        }
    
        //添加信息
        @RequestMapping(value = "/add", method = RequestMethod.POST)
        @Transactional
        public String add(@ModelAttribute("Infor") Infor infor) {
            inforService.add(infor);
            return "ok";
        }
    
        //删除信息
        @RequestMapping(value = "/delete")
        public String delete(@ModelAttribute("Infor") Infor infor) {
            int id = infor.getId();
            inforService.delete(id);
            return "ok";
        }
    
        //修改信息
        @RequestMapping(value = "/edit")
    
        public String edit(@ModelAttribute("Infor") Infor infor) {
    //        System.out.println(infor);
            inforService.edit(infor);
            return "ok";
    
    
        }
    }
    
    

    5.创建InforService

    package com.tianchen.service;
    
    import com.tianchen.dao.InforMapper;
    import com.tianchen.dao.InforMapper;
    import com.tianchen.entity.Infor;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class InforService {
        @Autowired(required = false)
        InforMapper inforMapper;
    
        public List<Infor> query() {
            return inforMapper.query();
        }
    
        public int add(Infor infor) {
            return inforMapper.add(infor);
        }
    
        public int delete(int id) {
            return inforMapper.delete(id);
        }
    
        public int edit(Infor infor) {
            return inforMapper.edit(infor);
        }
    }
    
    

    6.创建InforMapper接口

    package com.tianchen.dao;
    
    import com.tianchen.entity.Infor;
    
    import java.util.List;
    
    public interface InforMapper {
    
        List<Infor> query();
    
        int add(Infor infor);
    
        int delete(int id);
    
        int edit(Infor infor);
    }
    
    
    相关html如下

    add.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>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">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>
    <body>
    <blockquote class="layui-elem-quote layui-text">
        <h2>添加信息</h2>
    </blockquote>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">国家</label>
            <div class="layui-input-block">
                <input type="text" name="country" lay-verify="Country" autocomplete="off" placeholder="请输入国家名称"
                       class="layui-input" id="country">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">累计确诊</label>
            <div class="layui-input-block">
                <input type="text" name="cumulative" lay-verify="cumulative" autocomplete="off" placeholder="请输入累计确诊"
                       class="layui-input" id="cumulative">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">治愈</label>
            <div class="layui-input-block">
                <input type="text" name="cure" lay-verify="cure" autocomplete="off" placeholder="请输入治愈人数"
                       class="layui-input" id="cure">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">死亡</label>
            <div class="layui-input-block">
                <input type="text" name="death" lay-verify="death" autocomplete="off" placeholder="请输入死亡人数"
                       class="layui-input" id="death">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;
    
            //自定义验证规则
            form.verify({
                country: function (value) {
                    if (value.length < 2) {
                        return '国家名称至少2个字符啊';
                    }
                },
                cumulative: function (value) {
                    if (value.length < 1) {
                        return '累计确诊至少得1个字符啊';
                    }
                },
                cure: function (value) {
                    if (value.length < 1) {
                        return '累计确诊至少得1个字符啊';
                    }
                }
    
                // ,pass: [
                //     /^[\S]{6,12}$/
                //     ,'密码必须6到12位,且不能出现空格'
                // ]
                // ,content: function(value){
                //     layedit.sync(editIndex);
                // }
            });
            //监听提交
            form.on('submit(add)', function (data) {
                //获取文本框的值
                var country = $("#country").val();
                var cumulative = $("#cumulative").val();
                var cure = $("#cure").val();
                var death = $("#death").val();
                $.ajax({
                    type: 'post',
                    url: '/add',
                    async: true,
                    datype: "json",
                    data: {
                        country: country,
                        cumulative: cumulative,
                        cure: cure,
                        death: death,
                    },
                    success: function (data) {
                        layer.alert('增加成功', {icon: 6, title: '提示', time: 1500})
                        setTimeout(function () {
                            window.parent.location.reload();
                            // window.location.href="index.html";
                        }, 1500);
                    },
                    error: function () {
                        layer.alert('请求失败,系统错误', {icon: 7, title: '提示', time: 1000})
                    }
    
                });
                return false;
            });
        });
    </script>
    </body>
    </html>
    

    edit.html 修改页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>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">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>
    <body>
    <blockquote class="layui-elem-quote layui-text">
        <h2>修改信息</h2>
    </blockquote>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">编号</label>
            <div class="layui-input-block">
                <input type="text" name="id" lay-verify="id" autocomplete="off" class="layui-input" id="id" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">国家</label>
            <div class="layui-input-block">
                <input type="text" name="country" lay-verify="country" autocomplete="off" placeholder="请输入国家名称"
                       class="layui-input" id="country">
            </div>
        </div>
    
        <div class="layui-form-item">
            <label class="layui-form-label">累计确诊</label>
            <div class="layui-input-block">
                <input type="text" name="cumulative" lay-verify="cumulative" autocomplete="off" placeholder="请输入累计确诊"
                       class="layui-input" id="cumulative">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">治愈</label>
            <div class="layui-input-block">
                <input type="text" name="cure" lay-verify="cure" autocomplete="off" placeholder="请输入治愈人数"
                       class="layui-input" id="cure">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">死亡</label>
            <div class="layui-input-block">
                <input type="text" name="death" lay-verify="death" autocomplete="off" placeholder="请输入死亡人数"
                       class="layui-input" id="death">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="edit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
    
        layui.use(['form', 'layer', 'jquery'], function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;
            var parent_json = eval('(' + parent.json + ')');
    
            $("input[name='id']").val(parent_json.id);
            $("input[name='country']").val(parent_json.country);
            $("input[name='cumulative']").val(parent_json.cumulative);
            $("input[name='cure']").val(parent_json.cure);
            $("input[name='death']").val(parent_json.death);
    
            form.render();//刷新
            //自定义验证规则
            form.verify({
                country: function (value) {
                    if (value.length < 2) {
                        return '国家名称至少2个字符啊';
                    }
                },
                cumulative: function (value) {
                    if (value.length < 1) {
                        return '累计确诊至少得1个字符啊';
                    }
                },
                cure: function (value) {
                    if (value.length < 1) {
                        return '累计确诊至少得1个字符啊';
                    }
                }
    
                // ,pass: [
                //     /^[\S]{6,12}$/
                //     ,'密码必须6到12位,且不能出现空格'
                // ]
                // ,content: function(value){
                //     layedit.sync(editIndex);
                // }
            });
            //监听提交
            form.on('submit(edit)', function (data) {
                //获取文本框的值
                var id = $("#id").val();
                var country = $("#country").val();
                var cumulative = $("#cumulative").val();
                var cure = $("#cure").val();
                var death = $("#death").val();
                $.ajax({
                    type: 'post',
                    url: '/edit',
                    async: true,
                    datype: "json",
                    data: {
                        id: id,
                        country: country,
                        cumulative: cumulative,
                        cure: cure,
                        death: death,
                    },
                    success: function (data) {
                        layer.alert('修改成功', {icon: 6, title: '提示', time: 1500})
                        setTimeout(function () {
                            window.parent.location.reload();
                            // window.location.href="index.html";
                        }, 1500);
                    },
                    error: function () {
                        layer.alert('请求失败,系统错误', {icon: 7, title: '提示', time: 1000})
                    }
    
                });
                return false;
            });
        });
    </script>
    </body>
    </html>
    

    index.html 预览页面

    <!DOCTYPE html>
    <html>
    <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">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
    </head>
    <body>
    
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button title="批量删除" class="layui-btn layui-btn-danger" lay-event="delbatch"><i class="layui-icon"></i>批量删除
            </button>
            <button title="添加" class="layui-btn" id="add"><i class="layui-icon"></i>添加</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <!-- 删除一栏,编辑和删除 -->
        <button title="编辑" class="layui-btn layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>
        </button>
        <button title="删除" class="layui-btn-danger layui-btn layui-btn-xs" lay-event="del"><i
                class="layui-icon">&#xe640;</i></button>
    </script>
    
    
    <script>
        layui.use('table', function () {
            var table = layui.table;
    
            table.render({
    
                elem: '#test'
                , url: '/query'
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , method: 'post' //传输格式
                , limits: [10, 15, 20, 30]
                , limit: 10
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
                , cols: [[
                    {type: 'checkbox'}
                    , {field: 'id', title: 'ID', sort: true, align: 'center'}
                    , {field: 'country', title: '国家名称', align: 'center', edit: 'text'}
                    , {field: 'cumulative', title: '累计确诊', sort: true, align: 'center'}
                    , {field: 'cure', title: '治愈', align: 'center'}
                    , {field: 'death', title: '死亡', align: 'center'} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
                    , {
                        field: 'level', title: '操作', align: 'center',
                        toolbar: '#barDemo' //添加头导航栏
                    }
                ]],
                page: true
            });
    
            //点击添加按钮弹窗
            $("#add").click(function () {
                layui.use('layer', function () {
                    layer.open({
                        title: '添加信息',
                        type: 2,
                        content: 'add.html',
                        area: ['800px', '500px'],
                        maxmin: true
                    })
                })
            })
    
            //判断修改和删除操作
            table.on('tool(test)', function (obj) {
                //获取行的值
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm("确定删除该信息吗?", function (index) {
                        var id = data.id;
                        $.ajax({
                            type: 'post',
                            url: '/delete',
                            async: true,
                            datype: "json",
                            data: {
                                id: id,
                            },
                            success: function (data) {
                                layer.alert('删除成功', {icon: 6, title: '提示', time: 1500})
                                setTimeout(function () {
                                    window.parent.location.reload();
                                    // window.location.href="index.html";
                                }, 1500);
                            },
                            error: function () {
                                layer.alert('请求失败,系统错误', {icon: 7, title: '提示', time: 1000})
                            }
                        })
                    })
                } else if (obj.event === 'edit') {
                    json = JSON.stringify(data);
                    layui.use('layer', function () {
                        layer.open({
                            title: '修改信息',
                            type: 2,
                            content: 'edit.html',
                            area: ['800px', '500px'],
                            maxmin: true
                        })
                    })
                    
                }
            })
            /
    
        });
    </script>
    
    </body>
    </html>
    

    效果图如下:
    浏览页面
    添加页面
    修改页面

    盗版必究,望大佬提意见。
    展开全文
    qq_35349167 2020-09-23 10:52:56
  • IndexMan 2019-12-24 01:43:23
  • 3星
    657KB lin_qiu_feng 2018-11-29 14:34:37
  • weixin_43440301 2018-11-14 08:34:53
  • qq_41656640 2018-08-09 16:38:14
  • 3星
    99.84MB qq_34250793 2019-05-07 14:10:09
  • 46.19MB sunyanxu6 2020-10-24 11:18:04
  • Redamancy_Ti 2021-10-06 18:37:06
  • mu_wind 2019-07-27 18:10:03
  • zhouzhiwengang 2020-08-11 01:33:47
  • qq_41066838 2020-01-16 17:16:27
  • weixin_44175058 2021-04-08 15:52:32
  • 919KB u012329294 2020-04-10 15:04:37
  • weixin_51966461 2021-11-26 15:24:26
  • weixin_42340366 2019-08-07 10:55:58
  • SGLP521 2021-12-22 18:46:17
  • weixin_44173864 2019-05-07 18:00:06
  • qq_42881421 2019-12-24 23:21:39
  • weixin_30396699 2019-02-24 22:51:00
  • kkkkkkws 2020-07-02 16:07:24

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 774
精华内容 309
关键字:

springbootlayui增删改查

spring 订阅