2-2.vue+axios+element-ui实现修改操作

Vue与Axios结合进行后台交互

这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020
在之前的博客中只是模拟了一些数据，并没有与后台进行交互。这次是将axios与vue结合进行后台交互。

安装axios的环境

1.在使用axios与后台进行交互时，需要进行一些配置。

• 利用npm命令安装axios环境

npm install axios

安装成功之后可以在/package.json文件中查看到axios的相关依赖。

• 在/src/main.js文件中配置axios

import Axios from 'axios'
Vue.prototype.$axios = Axios
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';

2.在准备好axios的安装环境之后，先在<template>标签中写好需要的模板。这里用到了element-ui组件库中的button按钮组件,form表单组件以及dialog对话框组件。

<el-dialog :visible.sync="centerDialogVisible">
	<el-form :model="editForm">
		<el-form-item label="商品编号">
			<el-input v-model="editForm.id" :disabled="true"></el-input>
		</el-form-item>
		<el-form-item label="商品名称">
			<el-input v-model="editForm.name"></el-input>
		</el-form-item>
		<el-form-item label="商品价格/元">
			<el-input v-model="editForm.price" type="number"></el-input>
		</el-form-item>
		<el-form-item label="商品库存/件">
			<el-input v-model="editForm.inventory" type="number"></el-input>
		</el-form-item>
		<el-form-item label="商品描述">
			<el-input v-model="editForm.remark" type="textarea"></el-input>
		</el-form-item>
	</el-form>
	<div>
		<el-button @click="closeDialog()">取消</el-button>
		<el-button type="primary" @click="sumbitEditRow()">确定</el-button>
	</div>
</el-dialog>

注明：

• visible：是否显示Dialog对话框，支持.sync修饰符，是Boolean类型数据，默认值是false(不显示)；
• centerDialogVisible：是用来判断对话框是否显示，初始值为false；
• :model：绑定表单数据，这里绑定的是editForm对象数组；

3.因为访问的服务器不是本地服务器，所以需要在vue中进行跨域配置，不然无法访问到接口的数据。在/config/index.js文件中进行相关配置，找到proxyTable选项进行跨域配置。

proxyTable: {
   
	 "/api":{
   
            target: 'http://www.xxxxx.com',
            changeOrigin: true,
            pathRewrite: {
   
                '^/api': '/'
       }
}

注明：

• target是请求源地址；
• changeOrigin设置为true时，发送请求头中host会设置成target，设置是否跨域；
• pathRewrite是路径重写。

4.现在写一下修改数据的modifyData方法，若用户点击表格某一行中的修改按钮，将会弹出一个修改数据的对话框，是否显示对话框是通过参数centerDialogVisible进行设置的，初始值为false。

modifyData(index, row) {
   
		this.centerDialogVisible = true
		this.editForm = Object.assign({
   }, row);//重置对象
		_index = index;
		console.log("index的值："+index)
		console.log("_index的值："+_index)
		console.log("row的值是：", row)//代表选择的这一行的数据
},

注明：

• modifyData()方法需要传递两个参数，一个是修改数据的行索引值index，一个是修改行的对象row。
• _index：是定义的一个全局变量，当保存的时候自动获取修改的那一行的索引，从而将修改后的数据更新到表格中。
• Object.assign({},row)是重置editform对象的数据，将row的数据复制到editForm对象中，实现的是浅拷贝。

5.因为这里是需要与后台进行交互的，我们需要将修改的内容传给后台服务器并进行数据的更新。保存修改数据的方法：sumbitEditRow()方法。

• 之前当用户修改好某些数据后，点击对话的确定按钮，即可完成数据的刷新。这个操作是没有与后台进行任何交互的，只是模拟了这个过程。

sumbitEditRow() {
       //没有将修改后的数据反馈给后台服务器
	var editData = _index;
	console.log("editData的值"+	this.editForm)
	this.tableData[editData].name = this.editForm.name;
	this.tableData[editData].date = this.editForm.date;