vue小知识

1.后台的接口是这样的

@PostMapping("/disclosure")
public ApiResult<Boolean> disclosureReceviceVul(@RequestParam("id") String id) {
    boolean flag = receviceVulService.disclosureReceviceVul(id);
    return ApiResult.result(flag);
}

2.前台接口js文件传递的接口

export function disclosureGeneral(param) {
  return request({
    url: '/api/receviceGeneralVul/disclosure',
    method: 'post',
    data: param
  })
}

3.vue调用接口，要import接口进页面

handleDisclosure(id) {
	const params = new FormData()
	params.append('id', id)
	disclosureGeneral(params).then(response => {
		if (response.success) {
	        this.msgSuccess('成功')
	    }
	})
}

4.整个form中的参数全部append到params中去

const formData = this.form
const params = new FormData()
Object.keys(formData).forEach((key) => {
  params.append(key, formData[key])
})

二、vue前端实现定时器轮询

轮询之后在其他页面进行销毁 只在本界面执行

// 实现定时器轮询 只在本界面执行这个定时器
const timer = setInterval(() => {
  console.log(1)
}, 1000)
this.$once('hook:beforeDestroy', () => {
  clearInterval(timer)
})

三、判断是否为空Object

if (Object.keys(res.data).length === 0) {
	// 业务逻辑
}

四、实现文本复制

1.下载vue-clipboard2

npm install vue-clipboard2 --save

2.在main.js中添加

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

3.实现复制

<el-button type="primary" @click="copyCode">Copy code</el-button>

copyCode() {
  this.$copyText(this.text).then(
    res => {
      this.msgSuccess('Copy successfully. You can paste it directly')
    },
    err => {
      this.msgError('Copy failed')
    })
}

4.将div滚动条拉到最底部

scrollToBottom() {
  this.$nextTick(() => {
    let container = this.$el.querySelector("#centerContent");
    container.scrollTop = container.scrollHeight;
  });
}

五、数组操作

# 数组末尾添加
push()
# 数组末尾取出
pop()           
# 数组开头取出
shift()          
# 数组开头添加
unshift()      
# 删除并插入
splice()        
# 排序
sort()           
# 数组顺序颠倒
reverse()