微服务增删改查

概述

文档说明在我们的微服务后端+Element PLus + Uni-app前后端分离架构中，增删改成方法的具体实现，方便技术人员开展工作，Element Plus 和 uniapp 都是基于vue前段技术，所以使用方式基本相似，只是方法命名有所变动。

新增功能

新增方法我们在 Element Plus 通常是以handleAdd命名，在uni-app中通常是以 xxx_add 方法命名，下面我们详细的描述下，新增功能的实现。

vue 触发方法

javascript

import {
  // ...
  addDoc
} from '@/api/goods/admin/doc'

...

/** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.loading = true
      addDoc().then((response) => {
        this.loading = false
        console.log('addDoc', response)
        //add  返回数据
        this.docCategoryIdOptions = response.data.data.docCategoryTree
        this.docLabelIdOptions = response.data.data.docLabels
        this.open = true
        this.title = this.message['common_add'] + this.message['Doc']
      })
    },

Java添加响应方法

java

/**
 * 添加
 */
@SysLog("添加")
@ApiOperation(value = "添加", notes = "添加")
@ApiOperationSupport(order = 2)
@GetMapping("/add")
public ResponseEntity add() {
    Map<String, Object> data = new HashMap<>(2);
    data.put("docCategoryTree", docCategoryService.findTree());
    data.put("docLabels", docLabelService.findAll());
    return R.ok(data);
}

vue 提交方法

javascript

import {
  saveDoc,
	// ...
} from '@/api/goods/admin/doc'

/** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          var params = {}
          params.doc = this.form
          params.docLabelIds = this.checkedTags
          if (this.form.id != null) {
            
            // ...
            
          } else { 
            //保存提交
            saveDoc(params).then((response) => {
              this.loading = false
              this.msgSuccess(
                this.message['common_add'] + this.message['common_success']
              )
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

Java保存响应方法

java

/**
 * 保存
 */
@SysLog("保存")
@ApiOperation(value = "保存", notes = "保存")
@ApiOperationSupport(order = 2)
@PostMapping("/save")
public ResponseEntity save(@RequestBody Map params) {
    Doc doc = (Doc) CommonUtils.feignObjectChangeClass(params,"doc",new Doc());
    ArrayList<String> arrayList=(ArrayList<String>)params.get("docLabelIds");
    String[] docLabelIds = arrayList.toArray(new String[arrayList.size()]);
    doc.setDocLabels(new HashSet<>(docLabelService.findList(docLabelIds)));
    doc.setHits(0L);
    docService.save(doc);
    return R.OK;
}

参数说明：

params 为需要传入到后台的更新参数，使用Map封装了文档信息，文档标签等供后台保存的参数。

修改功能

修改方法Element Plus 中使用handleUpdate命名，uni-app中我们通常是以xxx_edit方法命名，下面我们详细的描述下，修改数据是如何进行的。

vue 触发方法

javascript

import {
// ...
  editDoc,
} from '@/api/goods/admin/doc'

/** 修改按钮操作 */
handleUpdate(row) {
  this.reset()
  this.loading = true
  const id = row.id || this.ids
  editDoc(id).then((response) => {
    this.loading = false
    this.setRules()
    console.log('editDoc', response)
    this.form = response.data.data.data
    this.docCategoryIdOptions = response.data.data.docCategoryTree
    this.docLabelIdOptions = response.data.data.docLabels
    const docLabels = response.data.data.data.docLabels
    this.checkedTags = []
    docLabels.forEach((item) => {
      const id = item.id
      this.checkedTags.push(id)
    })
    this.open = true
    this.title = this.message['common_edit'] + this.message['Doc']
  })
},

Java编辑响应方法

java

/**
 * 编辑
 */
@SysLog("编辑")
@ApiOperation(value = "编辑", notes = "编辑")
@ApiOperationSupport(order = 2)
@GetMapping("/edit")
public ResponseEntity edit(String id) {
    Map<String, Object> data = new HashMap<>(2);
    data.put("docCategoryTree", docCategoryService.findTree());
    data.put("docLabels", docLabelService.findAll());
    data.put("data", docService.find(id));
    return R.ok(data);
}

参数说明：

id 需要传入到后台的唯一标识，主键字段。

vue 提交方法

javascript

import {
  // ...
  updateDoc,
} from '@/api/goods/admin/doc'

/** 提交按钮 */
  submitForm() {
    this.$refs['form'].validate((valid) => {
      if (valid) {
        this.loading = true
        var params = {}
        params.doc = this.form
        params.docLabelIds = this.checkedTags
        if (this.form.id != null) { 
          //更新提交
          updateDoc(params).then((response) => {
            this.loading = false
            this.msgSuccess(
              this.message['common_edit'] + this.message['common_success']
            )
            this.open = false
            this.getList()
          })
        } else {
          
        // ...
          
        }
      }
    })
  },

Java更新响应方法

java

/**
	 * 更新
	 */
	@SysLog("更新")
	@ApiOperation(value = "更新", notes = "更新")
	@ApiOperationSupport(order = 2)
	@PutMapping("/update")
	public ResponseEntity update(@RequestBody Map params) {
		Doc doc = (Doc) CommonUtils.feignObjectChangeClass(params,"doc",new Doc());
		ArrayList<String> arrayList=(ArrayList<String>)params.get("docLabelIds");
		String[] docLabelIds = arrayList.toArray(new String[arrayList.size()]);
		doc.setDocLabels(new HashSet<>(docLabelService.findList(docLabelIds)));
		docService.update(doc, "hits");
		return R.OK;
	}

参数说明：

params 为需要传入到后台的更新参数，使用Map封装了文档信息，文档标签等供后台更新的参数。

删除功能

删除功能我们并不陌生，在大多数的数据列表中，都会有数据删除的出现，顾名思义就是在有此功能的页面我们可以删除数据，点击删除弹出提醒对话框，确认后提交删除事件，删除后弹出成功提醒。具体实现如下：

vue 触发及提交方法

javascript

import {  
  delDoc,
  // ...
} from '@/api/goods/admin/doc'

  /** 删除按钮操作 */
handleDelete(row) {
  const ids = row.id || this.ids
  this.$confirm(
    this.message['common_confirmDeletion'] +
    this.message['Doc'] +
    this.message['common_data'] +
    '?',
    this.message['common_warning'],
    {
      confirmButtonText: this.message['common_ok'],
      cancelButtonText: this.message['common_cancel'],
      type: 'warning',
    }
  ).then(function () {
      return delDoc(ids)
    }).then(() => {
      this.getList()
      this.msgSuccess(
        this.message['common_delete'] + this.message['common_success']
      )
    }).catch(() => { })
},

Java删除响应方法

java

/**
 * 删除
 */
@SysLog("删除")
@ApiOperation(value = "删除", notes = "删除")
@ApiOperationSupport(order = 2)
@DeleteMapping("/delete")
public ResponseEntity delete(String[] ids) {
    docService.delete(ids);
    return R.OK;
}

参数说明：

ids 需要传入到后台的Id 数组

查询功能

查看数据在我们项目研发中也是非常多见的，因此，我们在这里介绍下查询功能前后端基本方法。
vue 查询方法

javascript

import {
  listDoc,
 // ...
} from '@/api/goods/admin/doc'

/** 查询文章列表 */
getList() {
  this.loading = true
  listDoc(this.queryParams).then((response) => {
    this.loading = false;
    console.log('listDoc', response);
    this.docList = response.data.data.content;
    this.total = response.data.data.total;
  })
},

Java查询响应方法

java

/**
 * 列表
 */
@SysLog("列表")
@ApiOperation(value = "列表", notes = "列表")
@ApiOperationSupport(order = 2)
@GetMapping("/list")
public ResponseEntity list(Pageable pageable, String title) {
    Doc doc=new Doc();
    if(StringUtils.isNotEmpty(title)){
        doc.setTitle(title);
    }
    return R.ok(docService.findPageByEntity(pageable,doc));
}

参数说明：

pageable 需要传入到后台的分页信息
title 需要出入到后台的文档标题参数

微服务增删改查 ​

概述 ​

新增功能 ​

修改功能 ​

删除功能 ​

查询功能 ​

微服务增删改查

概述

新增功能

修改功能

删除功能

查询功能