vue前端和nodejs后端交互

Vue前端和Node.js后端可以通过HTTP请求进行交互。

1. 前端使用Axios、Fetch等工具向后端发送HTTP请求，常见的有GET、POST、PUT、DELETE等请求方式。

2. 后端使用Express、Koa等框架监听HTTP请求，根据请求的URL和请求方法进行路由匹配，处理请求并返回响应。

3. 前端通过Promise等方式处理后端返回的数据，进行页面渲染或其他操作。

4. 可以使用JSON格式的数据进行交互，也可以使用二进制数据等其他格式。

示例代码：

前端：

import axios from 'axios'

// 发送GET请求
axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

// 发送POST请求
axios.post('/api/users', {
  username: '张三',
  age: 20
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

后端：

const express = require('express')
const app = express()

// 处理GET请求
app.get('/api/users', (req, res) => {
  const users = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
  ]
  res.json(users)
})

// 处理POST请求
app.post('/api/users', (req, res) => {
  console.log(req.body) // { username: '张三', age: 20 }
  res.json({ success: true })
})

app.listen(3000, () => {
  console.log('Server is running on port 3000...')
})