Vue js 2 & Axios Post 请求 - 表单

Question

我正在尝试使用 axios post 我的表单，但我无法使用 expressjs

将数据发送到我的后端

这就是我正在做的事情：

<template>
 <form class="" method="post" @submit.prevent="postNow">
 <input type="text" name="" value="" v-model="name">
 <button type="submit" name="button">Submit</button>
 </form>
</template>

export default {
  name: 'formPost',
  data() {
    return {
      name: '',
      show: false,
    };
  },
  methods: {
   postNow() {
  axios.post('http://localhost:3030/api/new/post', {
    headers: {
      'Content-type': 'application/x-www-form-urlencoded',
    },
    body: this.name,
   });
  },
  components: {
    Headers,
    Footers,
  },
};

后端文件：

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
router.post('/new/post', (req, res) => {
  res.json(console.log("this is working" + ' ' + req.body.name));
});

我收到的错误是：

this is working undefined

Answer 1

Axios post 格式：

axios.post(url[, data[, config]])

您的要求应该是：

axios.post('http://localhost:3030/api/new/post', 
    this.name, // the data to post
    { headers: {
      'Content-type': 'application/x-www-form-urlencoded',
      }
    }).then(response => ....);

Fiddle: https://jsfiddle.net/wostex/jsrr4v1k/3/

Answer 2

<template>
  <div id="content">  
  <h1>...</h1>  
    <div>
      <label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName"  />
    </div>
    <div>
      <label>Desciription</label> : <input type="text" id="txt2" v-model="model.descrption" />
    </div>
       
    <div>
      <button type="button" v-on:click="saveClick">Save</button>
    </div>
  </div>
  <hr />
  <hr />
  <h1>...</h1>
  <table border="1" style="margin:auto">
    <thead>
      <tr>
        <th style="width: 100px">ID</th>
        <th style="width: 100px">Product Name</th>
        <th style="width: 100px">Desciription</th>       
        <th style="width: 100px"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in model.list" v-bind:key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.productName }}</td>
        <td>{{ item.descrption }}</td>      
        <td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from "axios";

export default {
  name: "Product",
  data: function () {
    return {
      model: {
        productName: "",
        descrption: "",
        
      },
      list: [],
    };
  },
  methods: {
    saveClick() {      
      axios
        .post("http://example.com", this.model)
        .then((resp) => {
          this.getList();
          alert("success" + resp.data.id);
        });
    },
    getList() {
      axios.get("http://example.com").then((resp) => {
        this.model.list = resp.data;        
      });
    },
    deleteClick(id) {
      axios.delete("http://example.com" + id).then(() => {
         this.getList();
         alert("success");  
      });
    }
  },  
  mounted: function () {
    this.getList();
  },
};
</script>

Vue js 2 & Axios Post 请求 - 表单

Vue js 2 & Axios Post Request - Form

javascript

node.js

express

vue.js

axios