SpringBoot+SweeAlert实现alert提示与前后端数据交互

Dear 丶 2023-10-18 19:25 602阅读 0赞

## 场景 ##

### 效果 ###

点击某条记录，点击禁用按钮，会提示确定。

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

点击确认后，后将当前记录的id传递到后台，后台将其状态改变，从而实现前后端交互。

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

## 实现 ##

SweetAlert2官方文档：

[https://sweetalert2.github.io/][https_sweetalert2.github.io]

将相关资源进行下载

![Image 1][]![20190605140502179.jpg][]

![Image 1][]![20190605140506331.jpg][]

如果没法下载资源可以从这里下载：

[https://download.csdn.net/download/badao\_liumang\_qizhi/11226925][https_download.csdn.net_download_badao_liumang_qizhi_11226925]

### html页面代码 ###

在页面中引入上面所需的资源文件以及jquery之外

### js代码 ###

//禁用操作
    function orgClose() {
        Swal.fire({
            title: '确定禁用吗?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#23c6c8',
            cancelButtonColor: '#d33',
            cancelButtonText:'取消',
            confirmButtonText: '确定'
        }).then((result) => {
            if (result.value) {
            var ref = $('#org_tree').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) {
                swal({
                    type: 'error',
                    title: '错误提示',
                    text: '请选择一个架构！'
                })
                return false;
            }
            sel = sel[0];
            var url = '/sysEnterpriseOrg/doOrgClose.do';
            var data = {"id":sel};
            $.post(url,data).done(function (res) {
                if(res.status){
                    initJsTree();
                    Swal.fire(
                        '禁用成功!',
                        res.data,
                        'success'
                    )
                }else{
                    Swal.fire(
                        '异常提示',
                        '执行禁用操作失败',
                        'error'
                    )
                }
            }).fail(function (err) {
                Swal.fire(
                    '异常提示',
                    '数据禁用失败',
                    'error'
                )
            });
        }
    })
    }

其中：

Swal.fire({
            title: '确定禁用吗?',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#23c6c8',
            cancelButtonColor: '#d33',
            cancelButtonText:'取消',
            confirmButtonText: '确定'
        })

是sweetalert2的alert框的语法。

然后.then后面的内容是点击确认按钮之后执行的操作。

swal({
                    type: 'error',
                    title: '错误提示',
                    text: '请选择一个架构！'
                })

是sweetalert的使用语法，如果要使用的话也要引入相关的资源。

sweetalert官网：

[https://sweetalert.bootcss.com/docs/][https_sweetalert.bootcss.com_docs]

然后

var ref = $('#org_tree').jstree(true),
     sel = ref.get_selected();

此部分是获取选中记录的id属性值，这段获取要结合自己的具体业务来实现。

之后

$.post(url,data).done(function (res) {

以下的部分是发送post请求与后台，传递的数据通过：

var data = {"id":sel};

来封装。

然后根据后台响应的状态进行相应的提示。

.done(function (res) {
                if(res.status){

### 后台代码 ###

@Description("禁用")
        @RequestMapping(value = "/doOrgClose.do")
        @ResponseBody
        public Json OrgClose(String id){
            try {
                ResultDTO resultDTO = this.mSysEnterpriseOrgService.doOrgClose(id);
                return Json.getInst().success(resultDTO.getData());
            } catch (Exception e) {
                return Json.getInst().fail();
            }
        }

后台直接通过方法参数接受穿过来的id值。

其中Json是封装的返回数据类

package com.ws.sys.vo;
    
    import lombok.Data;
    
    import java.io.Serializable;
    
    @Data
    public class Json implements Serializable {
        //默认未失败状态
        private static Json instance;
        private String msg = "接口访问失败";
        private String title = "失败提示";
        private boolean status = false;
        private int code = 300;
        private Object data = null;
    
        public synchronized static Json getInst() {
            if(instance==null){
                instance = new Json();
            }
            return instance;
        }
    
        public Json() {
            super();
        }
    
        public Json success(Object data){
            this.title = "成功提示";
            this.msg = "接口访问成功";
            this.status = true;
            this.code = 200;
            this.data = data;
            return this;
        }
    
        public Json success(){
            this.title = "成功提示";
            this.msg = "接口访问成功";
            this.status = true;
            this.code = 200;
            this.data = null;
            return this;
        }
    
        public Json fail(Object data){
            this.title = "失败提示";
            this.msg = "接口访问失败";
            this.status = false;
            this.code = 300;
            this.data = data;
            return this;
        }
    
        public Json fail(){
            this.title = "失败提示";
            this.msg = "接口访问失败";
            this.status = false;
            this.code = 300;
            this.data = null;
            return this;
        }
    }

ResultDto是封装的查询结果类：

package com.ws.sys.dto;
    
    
    import lombok.Data;
    
    import java.io.Serializable;
    
    @Data
    public class ResultDTO implements Serializable{
    
        //默认未失败状态
        private static ResultDTO instance;
        private String msg = "数据返回失败";
        private boolean status = false;
        private Object data = null;
    
        public synchronized static ResultDTO getInst() {
            if(instance==null){
                instance = new ResultDTO();
            }
            return instance;
        }
    
        public ResultDTO() {
            super();
        }
    
        public ResultDTO success(Object data){
            this.msg = "数据返回成功";
            this.status = true;
            this.data = data;
            return this;
        }
    
        public ResultDTO success(){
            this.msg = "数据返回成功";
            this.status = true;
            this.data = null;
            return this;
        }
    
        public ResultDTO fail(Object data){
            this.msg = "数据返回失败";
            this.status = false;
            this.data = data;
            return this;
        }
    
        public ResultDTO fail(){
            this.msg = "数据返回失败";
            this.status = false;
            this.data = null;
            return this;
        }
    
    }

具体serviceImpl实现代码

@Override
        public ResultDTO doOrgClose(String id) {
            SysEnterpriseOrg sysEnterpriseOrg = baseMapper.selectById(id);
            sysEnterpriseOrg.setOpened(0);
            boolean flag = this.updateById(sysEnterpriseOrg);
            return flag?ResultDTO.getInst().success():ResultDTO.getInst().fail();
        }

### 效果 ###

![Image 1][]![20190605140701698.gif][]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190605140453115.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190605140457133.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_sweetalert2.github.io]: https://sweetalert2.github.io/
[20190605140502179.jpg]: https://img-blog.csdnimg.cn/20190605140502179.jpg
[20190605140506331.jpg]: https://img-blog.csdnimg.cn/20190605140506331.jpg
[https_download.csdn.net_download_badao_liumang_qizhi_11226925]: https://download.csdn.net/download/badao_liumang_qizhi/11226925
[https_sweetalert.bootcss.com_docs]: https://sweetalert.bootcss.com/docs/
[20190605140701698.gif]: https://img-blog.csdnimg.cn/20190605140701698.gif