springboot+mybatisplus+layui+restful实现弹出层异步提交表单-阿里云开发者社区

springboot+mybatisplus+layui+restful实现弹出层异步提交表单

2022-11-09 192

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： springboot+mybatisplus+layui+restful实现弹出层异步提交表单

1.News.java

@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("sys_news")
@ToString
public class News implements Serializable {
    private static final long serialVersionUID=1L;
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;
    private String title;
    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private Date newstime;
    private String content;
}

2.NewsVo.java

@Data
@EqualsAndHashCode(callSuper = false)
public class NewsVo extends News {
    private Integer page=1;
    private Integer limit=10;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date startDate;
    @DateTimeFormat(pattern = "yyyy-MM-dd")
    private Date endDate;
}

3.ResultObj.java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultObj {
  //添加或者失败的提示消息
  private Integer code;
    private String msg;
}

4.NewsService.java

public interface NewsService extends IService<News> {
}

5.NewsServiceImpl.java

@Service
@Transactional
public class NewsServiceImpl extends ServiceImpl<NewsMapper, News> implements NewsService {
}

6.NewsMapper.java

@Mapper
public interface NewsMapper extends BaseMapper<News> {
}

7.NewsController.java

@RestController
@RequestMapping("news")
public class NewsController {
    @Autowired
    private NewsService newsService;
  /**
     * 添加新闻 addNews
     */
    @RequestMapping("addNews")
    public ResultObj addNews(NewsVo newsVo){
        boolean save = newsService.save(newsVo);
        if (save = true){
            return new ResultObj(200,"添加成功！");
        }else {
            return new ResultObj(-1,"添加失败！");
        }
    }
}

8.页面

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<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">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" />
  <link rel="stylesheet" th:href="@{/resources/css/public.css}" media="all" />
</head>
<body class="childrenBody">
  <!--表单开始-->
  <form class="layui-form" id="searchFrm" method="post" action="">
    <!--搜索框-->
    <div class="layui-inline">
      <label class="layui-form-label">按开始日期</label>
      <div class="layui-input-inline">
        <input type="text" name="startDate" id="startDate"  placeholder="yyyy-MM-dd"  class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">按结束日期</label>
      <div class="layui-input-inline">
        <input type="text" name="endDate" id="endDate"  placeholder="yyyy-MM-dd"  class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">单选下拉框</label>
        <div class="layui-input-inline">
          <select name="typeid" id="search_typeid">
            <option value="1">请选择</option>
          </select>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        <button type="button" id="doAdd" class="layui-btn layui-btn-primary">添加</button>
      </div>
    </div>
  </form>
  <!--表格容器-->
  <table id="demo" lay-filter="test"></table>
  <!--表格容器结束-->
  <!--添加新闻数据的弹出层开始-->
  <div id="addNewsDiv" style="display: none;">
    <form id="dataFrm" method="post" class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
          <input type="text" name="title"  placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">按结束日期</label>
          <div class="layui-input-inline">
            <input type="text" name="endDate" id="newstime"  placeholder="yyyy-MM-dd"  class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">内容文本域</label>
        <div class="layui-input-block">
          <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button  class="layui-btn" lay-submit lay-filter="doSubmit">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <!--添加数据的弹出层结束-->
  <script type="text/javascript" th:src="@{/resources/layui/layui.js}"></script>
  <script type="text/javascript">
    //加载layui
    layui.use(['form','element','layer','laydate','jquery','table'],function(){
      var laydate = layui.laydate;
      var form = layui.form, $ = layui.jquery;
      var table = layui.table;
      //第一个实例
      var tableIns = table.render({
        elem: '#demo'
        ,height: 312
        ,url: '/news/listNews' //数据接口
        ,page: true //开启分页
        ,cols: [ [ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'title', title: '用户名', width:80}
          ,{field: 'content', title: '性别', width:80, sort: true}
        ] ]
      });
      //绑定时间选择器
      laydate.render({
        elem:'#newstime',
        type:'datetime'
      });
      //获取到 初始化下拉查询列表
      $.get("/type/loadAllType",function (objs) {
        var types = objs.data;
        var search_typeid = $("#search_typeid");
        $.each(types,function (index,item) {
          //追加数据
          search_typeid.append("<potion value="+item.id+">"+item.name+"</potion>");
        });
        //重新渲染
        form.render("select");
      });
      //模糊查询
      form.on("submit(doSearch)",function (data) {
        //ajax方式发送数据
        $.post("/news/listNews",data.field,function () {
          tableIns.reload({
            url:'/news/listNews',
            where:data.field
          });
        return false;
        });
        //添加弹出层
        var mainIndex;
        $("#doAdd").on("click",function () {
          mainIndex = layer.open({
            type:1,
            content:$("#addNewsDiv"),
            area:['500px','600px']
            //弹出层加载成功之后success:function(获取div追加数据){}
          })
        });
        //监控提交弹出层的按钮
        form.on("submit(doSubmit)",function (data) {
          //发送数据
          $.post("/news/addNews",data.field,function (res) {
            layer.msg(res.msg); //弹出来看看结果
            if(res.code==200){ //添加成功，询问是否关闭
              layer.confirm('是否要关闭？',{
                btn: ['继续','取消']
              },function () {
                $("#dataFrm")[0].reset();
              },function () {//关闭弹窗
                layer.close(mainIndex);
              });
            }
            //无论成功还是失败，父页面 要刷新
            tableIns.reload();
          });
          return false;
        });
      });
    });
  </script>
</body>
</html>

springboot+mybatisplus+layui+restful实现弹出层异步提交表单

1.News.java

2.NewsVo.java

3.ResultObj.java

4.NewsService.java

5.NewsServiceImpl.java

6.NewsMapper.java

7.NewsController.java

8.页面

热门文章

最新文章

相关课程

相关电子书

相关实验场景