Vue实现数据从前端到后台的传递

前后端的数据传递的几种方式，其中由于是有公司开放的框架所以你们有的方法不一定适用。

• 第一种

deleteHandle(id) {
		var ids = id ? [id] :
			this.dataListSelections.map(item => {
				return item.id;
					});
		this.$confirm(`确定${id ? "删除" : "批量删除"}?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
		.then(() => {
				this.$axios.post("/pc/modeldefecrectificationnotice/delete", ids)
					.then(data => {
							this.$message({
								message: "操作成功",
								type: "success",
								duration: 1500,
								onClose: () => {
									this.getDataList();
								}
							});
						});
				}).catch(() => {});
			},

这是相比较来说的比较麻烦的一个实现删除功能，在真正的开发过程中其实很多的东西都是逻辑删除，在数据库中定义一个状态的字段，然后通过改变状态值然后实现逻辑上的删除，主要操作的数据都是表的关系中的主表的内容。然后就是真实的删除就是在数据库中直接删除，这种一般的操作的数据都是过程表或者是子表中的内容。
还有如果是要实现删除之类的危险功能，不管是实现逻辑删除还是物理删除都需要完成一个弹窗，因为有可能是用户误点了这个功能，然后在按钮的颜色上也需要注意和别的按钮的颜色区分开。

@PostMapping("delete")
    @ApiOperation("删除")
    @LogOperation("删除")
        public Result delete(@RequestBody String[] ids) {
        //效验数据
        AssertUtils.isArrayEmpty(ids, "id");
       modelDefecRectificationNoticeService.delete(ids);
       return new Result();
    }

这就是对应的后端的代码，其实在这里地话主要是考虑一个问题，就是你在调用别的类的时候会出现的问题，别人已经写好的封装的类种方法，如果方法是在mapper的时候那基本上可以通过名字能够确定，但是如果是使用别人的写的service层的方法你就要多注意了，我就是出现了这个问题，还有就是我这边使用的mybatis-plus，然后都是service封装好的方法，可以很快的实现增删改差功能在使用上也可以大大的简化我们的操作。

• 第二种就是就普通的实现前端和后端实现传值

getDataList0(init) {
				let data = {
					taskId: this.dataForm.taskId,
					regulatoryUnitId: this.dataForm.regulatoryUnitId,
					operateUnitId: this.dataForm.operateUnitId,
					pileStart: this.dataForm.pileStart,
					pileEnd: this.dataForm.pileEnd,
					signPersonId: this.dataForm.signPersonId,
					page: this.page1,
					limit: this.limit1,
				};
				console.log(data)
				this.$axios.post('/pc/modeldefecrectificationnotice/list0', data).then(res => {
					this.testList0 = res.records;
					this.total1 = Number(res.total);
				}).catch((error) => {})
			},

这就是我实现条件查询的一个方法，我们将对方输入的条件查询的值，按照键值对的形式形成一个map实现到后端的传值，然后在传值的时候是需要带上分页的两个数据，一个是页数，一个页的大小。

@PostMapping("list0")
    @ApiOperation("列表")
    public Result> list0(@RequestBody Map params) {
        params.put("state", "0");
        IPage

其实这里还是有一些问题的，就是controller 的参数的注解问题

• @RequestBody这是变成Jason的形式进行传递

• @RequestParam("file")这是传进来一个叫做file的参数的意思

• 第三种就是使用公司已经写好的插件方式进行访问后端

async dataFormSubmit(num) {
				let valid = await this.$refs.dataForm.validate().catch(() => {
					return util.$message.showInfo2('校验错误')
				})
				if (!valid) return
				this.param.append('defectId', this.dataForm.id);
				this.param.append('feedbackPersonId', this.dataForm.feedbackPersonId);
				this.param.append('feedbackDate', this.dataForm.feedbackDate);
				this.param.append('feedbackContent', this.dataForm.feedbackContent);
				this.param.append('time', this.time);
				for(var i=0;i {

				})
				this.dialogFormVisible = false;
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$emit("refreshDataList", false);
				})
			},

然后呢，自这Vue里面我是引入了同一个文件夹中的

	import * as api from './api'
	import util from '@/libs/util'

然后在我们公司写好的api.js文件中

import request from '@/plugin/axios'
import util from '@/libs/util'
import qs from 'qs'

在这里去引用写好的方法，只是输入传输的url还有需要传递的参数，传输的方式，还有传输的数据

export function upload(data) {
  return request({
    url: '/pc/modeldefecrectificationfeedback/save',
    method: 'post',
    data
  })
}

export function download(id) {
  let params = qs.stringify({
    'token': util.cookies.get('token'),
    'id': id,
  })
  let url = '/pc/modeldefecrectificationfeedbackfile/download'
  window.location.href = `${window.SITE_CONFIG['apiURL']}${url}?${params}`
}

在这里就是实现一个上传和下载的方法。