通过npm安装axios：使用npm命令安装axios，可以通过如下命令进行操作：

npm install axios

配置vue项目：安装完成后，需要在项目中引用axios。可以通过以下方式在src/main.js文件中进行引用：

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

在config/index.js文件中找到proxyTable选项，并进行跨域设置：

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

其中：

• target：指定请求的目标地址
• changeOrigin：设置为true时，会将HTTP请求头中的Host字段设置为目标地址
• pathRewrite：用于路径重写，确保请求正确转发

打开对话框：通过点击“增加”按钮调用addGoods方法

addGoods() {
  this.isAddGoods = true
  this.addForm = {
    name: '',
    price: '',
    inventory: '',
    remark: ''
  }
}

发送数据到后台：在对话框中，点击“确定”按钮调用sumbitAddGoods方法。以下是方法的具体实现：

submitAddGoods() {
  this.shopGoods = this.shopGoods || []
  if (!this.addForm.name.trim()) {
    alert('商品名称不能为空')
    return
  }
  if (!this.addForm.price.trim()) {
    alert('商品价格不能为空')
    return
  }
  if (!this.addForm.inventory.trim()) {
    alert('商品库存不能为空')
    return
  }
  if (!this.addForm.remark.trim()) {
    alert('商品描述不能为空')
    return
  }
  var addGoods = new URLSearchParams()
  addGoods.append('name', this.addForm.name)
  addGoods.append('price', this.addForm.price)
  addGoods.append('inventory', this.addForm.inventory)
  addGoods.append('remark', this.addForm.remark)
  axios.post('/test/sendShop', addGoods)
    .then((response) => {
      console.log('新增结果:', response)
      if (response.data.code === 0) {
        alert('新增商品成功')
        this.shopGoods.push({
          id: response.data.data.id,
          name: response.data.data.name,
          price: response.data.data.price,
          inventory: response.data.data.inventory,
          remark: response.data.data.remark
        })
      } else {
        alert('新增商品失败。原因：' + response.data.message)
      }
    })
    .catch((error) => {
      console.log('错误原因：', error)
    })
  this.isAddGoods = false
}

处理错误：通过try-catch语句处理可能出现的错误，确保应用在网络请求中始终具有良好的错健性。

URLSearchParams：这是一个用于处理URL查询字符串的交互界面。通过tAppend方法可以添加键值对，与jQuery的$.ajax类似。

数据类型：axios的默认请求类型是application/json，而URLSearchParams会将数据转换为application/x-www-form-urlencoded格式。通过正确设置请求头或使用URLSearchParams可以实现与后台服务器的数据交互。

状态管理：在处理异步操作时，通过设置this.isAddGoods = true可以实时反馈对话框的状态变化，提升用户体验。