zoukankan      html  css  js  c++  java
  • vue+vue-resource post请求

    1.目录结构




    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.运行结果


  • 相关阅读:
    Qt Undo Framework
    pyinstaller打包shotgun有关的程序
    博客初衷
    文件隐写
    IDA使用初探-1.启动IDA
    隐写术总结
    无线网破解 跑字典 EWSA使用教程
    CTF中图片隐藏文件分离方法总结
    【转载】Pangolin4.0最新破解版-SQL注入渗透工具
    名词解释
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924951.html
Copyright © 2011-2022 走看看