1.目录结构

vue+vue-resource post请求_html



2.learnVue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learnVue</title>
</head>
<body>
    <div id="app">
        <div>输入的值：{{ name }}</div>
        <div><input v-model="name"></div>
        <div><button v-on:click="submitInfo">提交</button></div>
        <div>返回的值：{{ result }}</div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
    <script src="js/learnVue.js"></script>
</body>
</html>


3.learnVue.js

var app = new Vue({
    el: '#app',
    data: {
        name:'xu',
        result:'',
        apiUrl: 'http://127.0.0.1:8889/POST/submitInfo'
    },
    methods: {
        submitInfo: function () {
            var vm = this;
            var data = {};
            var name = vm.name;
            data.name = name;
            data = JSON.stringify(data);
            vm.$http.post(vm.apiUrl, data)
                .then((response) => {
                    vm.result = response.body;
                });
        }
    }
})


4.learnVue.js(nodejs)

exports.learnVue = (function () {
  var learnVue = {
      submitInfo: function (app) {
          app.post('/POST/submitInfo', function (req, res) {
              console.log('name:' + req.body.name);
              res.send(req.body.name);
          });
      }
  };
  return learnVue;
}());


5.运行结果

vue+vue-resource post请求_html_02