【ids】改造白名单功能

川长思鸟来 2023-10-03 21:21 12阅读 0赞

### Plan ###

*  优化白名单功能，增加修改数据模块，使可以通过前端CRUD单个服务名。

**难点：**

*  要考虑设计问题：整条服务名列表是一个字符串，单条服务名以”;"间隔，如**com.ids;com.systemui;** 现在需要实现点击“修改按钮”，能对单条服务名进行增删改。讨论过后可以两种实现方案，一种是仿造微信白名单功能，一种是用列表来展示出整条服务名列表中的每一个服务名。
 *  要考虑用户乱输入数据情况，比如输入多个“;;;”输入中文“；”,忘记输入“;"，加了很多空格等的情况
 *  不能在数据库新建表，因为导师说会造成数据冗余。
 *  要实现点击“修改数据”出现的弹窗实现全覆盖页面，给用户感觉是新打开了一个页面，但其实是一个弹窗。

**效果**：  
优化前：  
![在这里插入图片描述][f01b1049e33f47749e5221d6b333c63f.png]  
优化后：  
第一种：1.仿造微信白名单实现效果如下，这种导师说用户改动自由度太高，容易造成数据错误，所以不行  
![在这里插入图片描述][819e5a0f7d224fb1afe217234c49f588.png]

最终采用第二种：列表来实现，效果如下：  
![在这里插入图片描述][c3ea549735b444a0820808d0e29eac04.png]

点击"修改数据"后弹出如下：  
![在这里插入图片描述][d346c45c2955468da82f9c4a70a10e27.png]

新增功能：  
![在这里插入图片描述][2e0dd734251b4e77bc3d08df5796fbe1.png]  
编辑功能：  
![在这里插入图片描述][ef7d9fb1605849a9afb6e00f528f2ecc.png]  
用户可在此弹出框对单个服务名进行增删改，操作完后可点击“提交”按钮，就实现了修改服务名列表数据，同时版本号会＋1。

点击“关闭”会提示如下：  
![在这里插入图片描述][8bec48abf6224bac95213542aadfcbb1.png]

### Do ###

第一步：增加"修改数据"按钮，和对应弹出框

<template>
      <div class="execution">
        <basic-container>
          <el-row :gutter="10">
            <el-col :span="this.clickObj ? 0 : 24">
              <el-button type="primary" @click="handleAdd">新增</el-button>
              <avue-crud
                ref="crud"
                :page.sync="page"
                :data="tableData"
                :table-loading="tableLoading"
                :option="tableOption"
                v-model="form"
                @on-load="getPage"
                @refresh-change="refreshChange"
                @row-update="handleUpdate"
                @row-save="handleSave"
                @row-del="handleDel"
                @sort-change="sortChange"
                @search-change="searchChange"
              >
                <template slot="menu" slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-view"
                    size="small"
                    plain
                    @click="handleItem(scope.row, scope.index)"
                    >修改数据
                  </el-button>
                </template>
              </avue-crud>
              
              <el-dialog
                :title="dialog.title"
                :visible.sync="dialog.open"
                width="1000px"
                append-to-body
                row-key="id"
              >
                <template>
                  <div>
                    <span style="margin-left: 10px">服务名称列表</span>
                  </div>
                  <el-input
                    required="true"
                    v-model="dialog.serviceNameList"
                    :rows="3"
                    type="textarea"
                    placeholder="请输入服务名称列表"
                  />
                  <div>
                    <span style="margin-left: 10px">车厂名称</span>
                  </div>
                  <el-select
                    placeholder="请选择车厂"
                    v-model="dialog.vehicleFactoryName"
                  >
                    <el-option
                      required="true"
                      v-for="item in dialog.options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </template>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="handleSave">确 定</el-button>
                  <el-button @click="dialog.open = false">取 消</el-button>
                </div>
              </el-dialog>
            </el-col>
            <el-col :span="24" v-if="this.clickObj">
              <el-card class="box-card">
                <el-header>
                  <h3 style="float: left">
                    <i class="el-icon-document-copy"></i>
                    服务名列表{
       { this.clickObj.type }}
                  </h3>
                  <el-row style="float: right">
                    <el-button type="success" @click="handleUpdate">提交</el-button>
                    <el-button type="danger" @click="handleItem()">关闭</el-button>
                  </el-row>
                </el-header>
                <avue-crud
                  ref="crud"
                  :page.sync="page2"
                  :data="tableData2"
                  :table-loading="tableLoading"
                  :option="tableOption2"
                  :before-open="beforeOpen2"
                  v-model="form2"
                  @on-load="getPage2"
                  @refresh-change="refreshChange2"
                  @row-update="handleUpdate2"
                  @row-save="handleSave2"
                  @row-del="handleDel2"
                  @sort-change="sortChange2"
                  @search-change="searchChange2"
                >
                </avue-crud>
              </el-card>
            </el-col>
          </el-row>
        </basic-container>
      </div>
    </template>

其中： 实现点击“修改数据”出现的弹窗实现全覆盖页面，给用户感觉是新打开了一个页面，但其实是一个弹窗。  
\*\*答案：\*\*通过定义一个clickObj，并给弹出的avue添加:before-open="beforeOpen2"具体如下：  
![在这里插入图片描述][03affd6f72664ebd860a1490db73e5a1.png]  
![在这里插入图片描述][26903ffadcfe42679a35eb9ba95479bf.png]  
beforeOpen2方法：

beforeOpen2(done) {
        
          this.$set(this.form2, "id", this.clickObj.id);
          this.$set(this.form2, "type", this.clickObj.type);
          done();
        },

第二步：添加table

export const tableOption = {
        
        dialogDrag: true,
        border: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        align: 'center',
        menuType: 'text',
        searchShow: false,
        excelBtn: false,
        printBtn: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: false,
        column: [
            {
        
                type: 'textarea',
                label: '服务名列表',
                prop: 'serviceNameList',
                search: false,
                slot: true,
                width: 500,
                headerslot: true,              
            },
            {
        
                label: '版本',
                prop: 'version',
                search: false,
                slot: true,
                headerslot: true,
            },
    
            {
        
                label: '车厂',
                prop: 'vehicleFactoryName',
                search: false,
                slot: true,
                headerslot: true,
                type: 'select',
                dicData: [{
        
                    label: '一',
                    value: 'w'
                }, {
        
                    label: '上',
                    value: 's'
                }]
            },
            {
        
                label: '创建时间',
                prop: 'createTime',
                display: false,
                rules: [
                    {
        
                        required: true,
                        message: '请输入创建时间',
                        trigger: 'blur'
                    },
                ],
                format: 'yyyy-MM-dd HH:mm:ss',
                valueFormat: 'yyyy-MM-dd HH:mm:ss',
            }
        ]
    }
    export const tableOption2 = {
        
        dialogDrag: true,
        border: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        align: 'center',
        menuType: 'text',
        searchShow: false,
        excelBtn: false,
        printBtn: false,
        addBtn: true,
        editBtn: true,
        delBtn: true,
        viewBtn: false,
        selection: false,
        menu: true,
        columnBtn: false,
        refreshBtn:false,
        searchBtn:false,
        addTitle:"新增单个服务名",
        column: [
            {
        
                type: 'input',
                label: '服务名列表',
                prop: 'serviceNameModifyList',
                slot: true,
                headerslot: true,              
            }
        ]
    }

第三步：前后端交互js

```javascript
    import ajaxRequest from '../ajaxRequest'
    
    export function getPage(query) {
        
        return ajaxRequest({
        
            url: '/whitelist/page',
            method: 'get',
            params: query
        })
    }
    
    export function addObj(obj) {
        
        return ajaxRequest({
        
            url: '/whitelist',
            method: 'post',
            data: obj
        })
    }
    
    export function getObj(id) {
        
        return ajaxRequest({
        
            url: '/whitelist/' + id,
            method: 'get'
        })
    }
    
    export function delObj(id) {
        
        return ajaxRequest({
        
            url: '/whitelist/' + id,
            method: 'delete'
        })
    }
    
    export function putObj(obj) {
        
        return ajaxRequest({
        
            url: '/whitelist',
            method: 'put',
            data: obj
        })
    }

第四步：添加相应方法

其中，点击提交按钮是 调用handleUpdate方法，把paramsSubmit传入后端进行修改修改服务名列表，因此后端也要修改。

**第五步：后端**

第一步：WhiteListUpdateDTO

@Data
    public class WhiteListUpdateDTO {
        
    
        private String id;
    
        /**
         * 服务名称列表
         */
        private String  serviceNameList;
    
    }

第二步：control

@ApiOperation(value = "修改白名单记录")
        @PutMapping
        public R update(@RequestBody WhiteListUpdateDTO whiteListUpdateDTO) {
        
            return R.ok(whiteListService.updateWhiteList(whiteListUpdateDTO));
        }

第三步 ：WhiteListService

public interface WhiteListService extends IService<WhiteList> {
        
        R updateWhiteList(WhiteListUpdateDTO whiteListUpdateDTO);
    }

第四步：WhiteListServiceImpl

@DubboService(version = "1.0.0")
    public class WhiteListServiceImpl extends ServiceImpl<WhiteListDao, WhiteList> implements WhiteListService {
        
    
        @Override
        public R updateWhiteList(WhiteListUpdateDTO whiteListUpdateDTO) {
        
            if (StrUtil.isBlank(whiteListUpdateDTO.getId())) {
        
                return R.failed("id值不能为空，请检查！");
            }
            WhiteList whiteList = whiteListDao.selectById(whiteListUpdateDTO.getId());
            if(ObjectUtil.isNull(whiteList)){
        
                return R.failed("id值有误，请检查！");
            }
            //校验变更
            if (ObjectUtil.equal(whiteListUpdateDTO.getServiceNameList(), whiteList.getServiceNameList())) {
        
                return R.failed("服务名称列表没有变化，请检查！");
            }
            whiteList.setServiceNameList(whiteListUpdateDTO.getServiceNameList());
            whiteList.setVersion(getNewVersionByRecord(whiteList));
            whiteListDao.updateById(whiteList);
            return R.ok();
        }
    
        /**
         * @Description: 更新版本号进行自增
         */
        private int getNewVersionByRecord(WhiteList whiteListRecord) {
        
            int newVersion;
            if (ObjectUtil.isNull(whiteListRecord)) {
        
                return 0;
            }
            newVersion = whiteListRecord.getVersion() + 1;
            return newVersion;
        }
    }

[f01b1049e33f47749e5221d6b333c63f.png]: https://img-blog.csdnimg.cn/f01b1049e33f47749e5221d6b333c63f.png
[819e5a0f7d224fb1afe217234c49f588.png]: https://img-blog.csdnimg.cn/819e5a0f7d224fb1afe217234c49f588.png
[c3ea549735b444a0820808d0e29eac04.png]: https://img-blog.csdnimg.cn/c3ea549735b444a0820808d0e29eac04.png
[d346c45c2955468da82f9c4a70a10e27.png]: https://img-blog.csdnimg.cn/d346c45c2955468da82f9c4a70a10e27.png
[2e0dd734251b4e77bc3d08df5796fbe1.png]: https://img-blog.csdnimg.cn/2e0dd734251b4e77bc3d08df5796fbe1.png
[ef7d9fb1605849a9afb6e00f528f2ecc.png]: https://img-blog.csdnimg.cn/ef7d9fb1605849a9afb6e00f528f2ecc.png
[8bec48abf6224bac95213542aadfcbb1.png]: https://img-blog.csdnimg.cn/8bec48abf6224bac95213542aadfcbb1.png
[03affd6f72664ebd860a1490db73e5a1.png]: https://img-blog.csdnimg.cn/03affd6f72664ebd860a1490db73e5a1.png
[26903ffadcfe42679a35eb9ba95479bf.png]: https://img-blog.csdnimg.cn/26903ffadcfe42679a35eb9ba95479bf.png