vue向后端使用post方式传值的代码,以及后端接受处理值的代码
时间: 2023-12-03 15:02:56 浏览: 90
以下是使用 Vue 向后端发送 Post 请求,以及后端使用 Node.js 和 Express 处理请求的示例代码:
Vue 组件中发送 Post 请求的代码:
```
<template>
<div>
<form @submit.prevent="submitForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" v-model="name">
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
name: ''
}
},
methods: {
submitForm() {
const payload = {
name: this.name
}
axios.post('/api/users', payload)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
上述代码中,当用户填写表单并提交时,Vue 组件会使用 axios 库发送一个 Post 请求,将用户输入的名字提交到后端的 `/api/users` 接口。
后端使用 Node.js 和 Express 处理 Post 请求的代码:
```
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.post('/api/users', (req, res) => {
const name = req.body.name
// 处理接收到的 name 值
res.send('Received ' + name)
})
app.listen(3000, () => {
console.log('Server started on port 3000')
})
```
上述代码中,我们使用了 Node.js 和 Express 实现了一个简单的服务器,当接收到来自 `/api/users` 接口的 Post 请求时,我们会在后端获取到请求的 name 值,并进行处理,最后返回一个响应。
阅读全文