Vue-cli中post请求发送Json格式数据方式

Vue-cli 是一个官方提供的 Vue.js 项目脚手架，可以快速搭建 Vue.js 项目。

在 Vue-cli 中，如果要发送 POST 请求并且数据格式为 JSON，则需要使用 axios 库来发送请求。下面是详细的攻略。

步骤

1. 安装 axios 库

在 Vue-cli 中，使用 npm 包管理器安装 axios 库非常方便，只需要在终端中执行以下命令即可：

npm install axios --save

这样就可以将 axios 安装到项目中，并且将其保存为依赖项。

1. 在 Vue 组件中使用 axios 库

在 Vue 组件中使用 axios 库需要在组件中引入 axios 库，以及在需要的地方调用 axios 库的相关方法。示例如下：

// 引入 axios 库
import axios from 'axios'

// 发送 POST 请求
axios.post('/api/data', {
  dataKey1: 'dataValue1',
  dataKey2: 'dataValue2'
})
  .then(response => {
    console.log(response)
  })
  .catch(error => {
    console.log(error)
  })

在这个例子中，我们发送了一个 POST 请求到 /api/data 的地址，并且将数据作为 JSON 格式的对象传递给了 axios.post 方法的第二个参数。在请求中，我们使用了箭头函数来处理请求成功和请求错误的回调函数，分别使用 console.log 来输出请求的响应和错误信息。

1. 服务器端解析 JSON 格式的数据

如果服务器端需要解析 JSON 格式的数据，我们可以使用 body-parser 库来实现。示例如下：

// 引入 body-parser 库
const bodyParser = require('body-parser')

// 使用 body-parser 中间件解析 JSON 格式的数据
app.use(bodyParser.json())

// 处理 POST 请求
app.post('/api/data', (req, res) => {
  // 输出请求体的内容
  console.log(req.body)

  // 发送响应
  res.send('Data received')
})

在这个例子中，我们首先引入了 body-parser 库，并且在 app.use 中使用了 body-parser.json() 中间件来解析 JSON 格式的数据。在 POST 请求的处理函数中，我们使用 console.log 输出了请求体的内容，并且发送了一个 Data received 字符串作为响应。

这样，我们就成功地发送了一个 JSON 格式的数据到服务器端，并且在服务器端也成功地解析了这个 JSON 格式的数据。