Vue體驗(前后端互動)-有解無憂

記錄：263

體驗XMLHttpRequest、jquery、Promise、fetch、axios的異步方式呼叫后端介面，

本例環境：

后端：node.js、express，

前端：Vue.js、HTML、CSS、jQuery、axios，

方式：分別使用XMLHttpRequest、jquery、Promise、fetch、axios的異步方式呼叫后端介面，

Ajax：Asynchronous Javascript And XML(異步JavaScript和XML)，在網頁中利用 XMLHttpRequest物件和服務器進行資料互動的方式，

本例目錄結構：

vue_demo02\server目錄：存放后端相關代碼，

vue_demo02\front目錄：存放前端相關代碼

名詞：

express：web application framework for node.是一個簡潔而靈活的node.js Web應用框架, 提供一系列強大特性幫助你創建各種Web應用

Nodemon：Nodemon is a utility, that will monitor for any changes in your source and automatically restart your server.一款非常實用的工具，用來監控 node.js 源代碼的任何變化和自動重啟服務器，

DOM：檔案物件模型(Document Object Model)，

1.體驗基于node.js搭建簡單服務器

vue_demo02\server目錄中，

index.js：服務入口檔案，使用nodemon命令啟動即可；

vue_demo02\server\node_modules目錄：存放安裝依賴模塊；

vue_demo02\server\public目錄：存放靜態檔案，

1.1初始化vue_demo02/server

使用VS Code編輯器打開vue_demo02

1.1.1 點擊選單Terminal->New Terminal開一個命令列Terminal視窗

1.1.2 進入vue_demo02\server目錄

1.1.3 安裝express模塊

執行指令：npm install express

1.1.3 安裝nodemon模塊

執行指令：npm install -g nodemon

1.2在vue_demo02/server/index.js初始化服務器

代碼如下：

//1.匯入模塊
const express = require('express');
const app = express();
//2.配置服務器
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  res.header('Content-Type', 'application/json;charset=utf-8')
  next();
});
//3.發布服務
app.get('/getInfo',(req,res)=>{
  console.log('接收到瀏覽器請求.');
  var girInfo='身高:160;體重:100;罩杯:C';
  res.send(girInfo);
});
app.get('/getGirlInfo', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangHz',
    height: '161',
    weight: '51',
    cup: 'B'
  };
  if (req.query.name != 'ZhangHz') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});

app.post('/getGirlInfoPost', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangBj',
    height: '162',
    weight: '52',
    cup: 'C'
  };
  if (req.body.name != 'ZhangBj') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});
//4.啟動服務器
app.listen(8082, () => {
  console.log('express服務器啟動成功.');
  console.log('監聽埠: 8082')
});

1.3在控制臺啟動服務器

打開cmd.exe控制臺進入vue_demo02\server目錄

執行指令：nodemon index.js

啟動日志：

1.4在瀏覽器發起請求

請求地址：http://127.0.0.1:8082/getInfo

1.4.1服務器端日志

接收到瀏覽器請求

1.4.2瀏覽器回傳值

瀏覽器回傳請求資訊：

2.體驗XMLHttpRequest

XMLHttpRequest物件提供了對 HTTP 協議的完全的訪問，包括做出POST和HEAD請求以及GET請求，可以同步或異步地回傳Web服務器的回應，能夠以文本或者一個 DOM 檔案的形式回傳內容，

主流js的前后端互動框架均封裝了的XMLHttpRequest物件，

在jQuery.js中：

jQuery.ajaxSettings.xhr = function() {
	try {
		return new window.XMLHttpRequest();
	} catch ( e ) {}
};

在axios.js中

var request = new XMLHttpRequest();

2.1HTML標簽

<div id="app">
<div class="grid">
  <div><strong>體驗前后端互動-XMLHttpRequest</strong></div>
  <div class="titlePad" style="color: blue;">1.XMLHttpRequest的GET請求</div>
  <div class="buttonPad"><button @click='getGirlInfo'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfo.name}}</td>
                  <td>{{girlInfo.height}}</td>
                  <td>{{girlInfo.weight }}</td>
                  <td>{{girlInfo.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>

  <div class="titlePad" style="color: blue;">2.XMLHttpRequest的POST請求</div>
  <div class="buttonPad"><button @click='getGirlInfoPost'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfoPost.name}}</td>
                  <td>{{girlInfoPost.height}}</td>
                  <td>{{girlInfoPost.weight }}</td>
                  <td>{{girlInfoPost.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>
</div>
</div>

2.2css代碼

<style type="text/css">
.grid {
    margin: auto;
    width: 520px;
    text-align: center;
}

.grid table {
    border-top: 1px solid #f7b62a;
    width: 100%;
    border-collapse: collapse;
}

.grid th,
td {
    padding: 10;
    border: 1px solid #f7b62a;
    height: 35px;
    line-height: 35px;
}

.grid th {
    background-color: #f7b62a;
}

.titlePad {
    margin-top: 5px;
    margin-bottom: 5px;
}

.buttonPad {
    margin-bottom: 5px;
}
</style>

2.3js代碼

//異步GET請求
function getGirlInfoByGet(vueThisObj) {
    var vueThis = vueThisObj;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://127.0.0.1:8082/getGirlInfo?name=ZhangHz");
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            vueThis.girlInfo = JSON.parse(xhr.responseText);
        } else {
        }
    };
}
//異步POST請求
function getGirlInfoByPost(vueThisObj) {
    var vueThis = vueThisObj;
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://127.0.0.1:8082/getGirlInfoPost");
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
    xhr.send("name=ZhangBj&height=162");
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            vueThis.girlInfoPost = JSON.parse(xhr.responseText);
        } else {
        }
    };
}

2.4對應Vue代碼

var vm = new Vue({
    el: '#app',
    data: {
        girlInfo: {},
        girlInfoPost: {},
    },
    methods: {
        getGirlInfo: function () {
            getGirlInfoByGet(this);
        },
        getGirlInfoPost: function () {
            getGirlInfoByPost(this);
        }
    }
});

注意:

在Vue的vm實體的getGirlInfo函式中，將this物件傳入給getGirlInfoByGet，作用是給getGirlInfoByGet的onreadystatechange對應回呼函式使用，

原因：onreadystatechange對應回呼函式的this是指向getGirlInfoByGet而不是指向Vue的vm實體，

2.5后端代碼

app.get('/getGirlInfo', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangHz',
    height: '161',
    weight: '51',
    cup: 'B'
  };
  if (req.query.name != 'ZhangHz') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});
app.post('/getGirlInfoPost', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangBj',
    height: '162',
    weight: '52',
    cup: 'C'
  };
  if (req.body.name != 'ZhangBj') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});

2.6效果

運行效果如下：

3.體驗jquery的ajax

jquery的ajax執行AJAX(異步 HTTP)請求，

3.1HTML標簽

<div id="app">
<div class="grid">
  <div><strong>體驗前后端互動-jquery的ajax</strong></div>
  <div class="titlePad" style="color: blue;">1. jquery的ajax的GET請求</div>
  <div class="buttonPad"><button @click='getGirlInfo'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfo.name}}</td>
                  <td>{{girlInfo.height}}</td>
                  <td>{{girlInfo.weight }}</td>
                  <td>{{girlInfo.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>

  <div class="titlePad" style="color: blue;">2.jquery的ajax的POST請求</div>
  <div class="buttonPad"><button @click='getGirlInfoPost'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfoPost.name}}</td>
                  <td>{{girlInfoPost.height}}</td>
                  <td>{{girlInfoPost.weight }}</td>
                  <td>{{girlInfoPost.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>
</div>
</div>

3.2css代碼

<style type="text/css">
.grid {
    margin: auto;
    width: 520px;
    text-align: center;
}

.grid table {
    border-top: 1px solid #f7b62a;
    width: 100%;
    border-collapse: collapse;
}

.grid th,
td {
    padding: 10;
    border: 1px solid #f7b62a;
    height: 35px;
    line-height: 35px;
}

.grid th {
    background-color: #f7b62a;
}

.titlePad {
    margin-top: 5px;
    margin-bottom: 5px;
}

.buttonPad {
    margin-bottom: 5px;
}
</style>

3.3js代碼

//異步GET請求
function getGirlInfoByGet(vueThisObj) {
    var vueThis = vueThisObj;
    $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:8082/getGirlInfo',
        data: {
            name: 'ZhangHz'
        },
        success: function (result) {
            vueThis.girlInfo = result;
        }
    });
}
//異步POST請求
function getGirlInfoByPost(vueThisObj) {
    var vueThis = vueThisObj;
    $.ajax({
        type: 'POST',
        url: 'http://127.0.0.1:8082/getGirlInfoPost',
        data: {
            name: 'ZhangBj',
            height: 162
        },
        success: function (result) {
            vueThis.girlInfoPost = result;
        }
    });
}

3.4對應Vue代碼

var vm = new Vue({
    el: '#app',
    data: {
        girlInfo: {},
        girlInfoPost: {},
    },
    methods: {
        getGirlInfo: function () {
            getGirlInfoByGet(this);
        },
        getGirlInfoPost: function () {
            getGirlInfoByPost(this);
        }
    }
});

3.5后端代碼

app.get('/getGirlInfo', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangHz',
    height: '161',
    weight: '51',
    cup: 'B'
  };
  if (req.query.name != 'ZhangHz') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});
app.post('/getGirlInfoPost', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangBj',
    height: '162',
    weight: '52',
    cup: 'C'
  };
  if (req.body.name != 'ZhangBj') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});

3.6效果

運行效果如下：

4.體驗Promise

Promise 物件用于表示一個異步操作的最終完成 (或失敗)及其結果值，

4.1HTML標簽

<div id="app">
<div class="grid">
  <div><strong>體驗前后端互動-Promise</strong></div>
  <div class="titlePad" style="color: blue;">1. Promise的GET請求</div>
  <div class="buttonPad"><button @click='getGirlInfo'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfo.name}}</td>
                  <td>{{girlInfo.height}}</td>
                  <td>{{girlInfo.weight }}</td>
                  <td>{{girlInfo.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>

  <div class="titlePad" style="color: blue;">2.Promise的POST請求</div>
  <div class="buttonPad"><button @click='getGirlInfoPost'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfoPost.name}}</td>
                  <td>{{girlInfoPost.height}}</td>
                  <td>{{girlInfoPost.weight }}</td>
                  <td>{{girlInfoPost.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>
</div>
</div>

4.2css代碼

<style type="text/css">
.grid {
    margin: auto;
    width: 520px;
    text-align: center;
}

.grid table {
    border-top: 1px solid #f7b62a;
    width: 100%;
    border-collapse: collapse;
}

.grid th,
td {
    padding: 10;
    border: 1px solid #f7b62a;
    height: 35px;
    line-height: 35px;
}

.grid th {
    background-color: #f7b62a;
}

.titlePad {
    margin-top: 5px;
    margin-bottom: 5px;
}

.buttonPad {
    margin-bottom: 5px;
}
</style>

4.3js代碼

//異步GET請求
function getGirlInfoByGet() {
    var promise = new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://127.0.0.1:8082/getGirlInfo?name=ZhangHz");
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(xhr.responseText);
            } else {
            }
        };
    });
    return promise;
}
//異步POST請求
function getGirlInfoByPost() {
    var promise = new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "http://127.0.0.1:8082/getGirlInfoPost");
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
        xhr.send("name=ZhangBj&height=162");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                resolve(xhr.responseText);
            } else {

            }
        };
    });
    return promise;
}

4.4對應Vue代碼

var vm = new Vue({
    el: '#app',
    data: {
        girlInfo: {},
        girlInfoPost: {},
    },
    methods: {
        getGirlInfo: function () {
            var vueThis = this;
            getGirlInfoByGet().then(function (data) {
                vueThis.girlInfo = JSON.parse(data);
            }, function (info) {
                console.log("服務例外.");
            });
        },
        getGirlInfoPost: function () {
            var vueThis = this;
            getGirlInfoByPost().then(function (data) {
                vueThis.girlInfoPost = JSON.parse(data);
            }, function (info) {
                console.log("服務例外.");
            });
        }
    }
});

4.5后端代碼

app.get('/getGirlInfo', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangHz',
    height: '161',
    weight: '51',
    cup: 'B'
  };
  if (req.query.name != 'ZhangHz') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});
app.post('/getGirlInfoPost', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangBj',
    height: '162',
    weight: '52',
    cup: 'C'
  };
  if (req.body.name != 'ZhangBj') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});

4.6效果

運行效果如下：

5.體驗fetch

Fetch API提供了一個JavaScript介面，用于訪問和操縱HTTP管道的請求和回應等，

5.1HTML標簽

<div id="app">
<div class="grid">
  <div><strong>體驗前后端互動-fetch</strong></div>
  <div class="titlePad" style="color: blue;">1.fetch的GET請求</div>
  <div class="buttonPad"><button @click='getGirlInfo'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfo.name}}</td>
                  <td>{{girlInfo.height}}</td>
                  <td>{{girlInfo.weight }}</td>
                  <td>{{girlInfo.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>

  <div class="titlePad" style="color: blue;">2.fetch的POST請求</div>
  <div class="buttonPad"><button @click='getGirlInfoPost'>點擊</button></div>
  <div>
      <table>
          <thead>
              <tr>
                  <th>姓名</th>
                  <th>身高</th>
                  <th>體重</th>
                  <th>罩杯</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>{{girlInfoPost.name}}</td>
                  <td>{{girlInfoPost.height}}</td>
                  <td>{{girlInfoPost.weight }}</td>
                  <td>{{girlInfoPost.cup }}</td>
              </tr>
          </tbody>
      </table>
  </div>
</div>
</div>

5.2css代碼

<style type="text/css">
.grid {
    margin: auto;
    width: 520px;
    text-align: center;
}

.grid table {
    border-top: 1px solid #f7b62a;
    width: 100%;
    border-collapse: collapse;
}

.grid th,
td {
    padding: 10;
    border: 1px solid #f7b62a;
    height: 35px;
    line-height: 35px;
}

.grid th {
    background-color: #f7b62a;
}

.titlePad {
    margin-top: 5px;
    margin-bottom: 5px;
}

.buttonPad {
    margin-bottom: 5px;
}
</style>

5.3js代碼

//異步GET請求
function getGirlInfoByGet(vueThisObj) {
    var vueThis = vueThisObj;
    fetch('http://127.0.0.1:8082/getGirlInfo?name=ZhangHz', {
        method: 'get'
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        vueThis.girlInfo = JSON.parse(data);
    });
}
異步POST請求
function getGirlInfoByPost(vueThisObj) {
    var vueThis = vueThisObj;
    fetch('http://127.0.0.1:8082/getGirlInfoPost', {
        method: 'POST',
        body: JSON.stringify({
            name: 'ZhangBj',
            height: '162'
        }),
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function (data) {
        return data.text();
    }).then(function (data) {
        vueThis.girlInfoPost = JSON.parse(data);
    });
}

5.4對應Vue代碼

var vm = new Vue({
    el: '#app',
    data: {
        girlInfo: {},
        girlInfoPost: {},
    },
    methods: {
        getGirlInfo: function () {
            getGirlInfoByGet(this);
        },
        getGirlInfoPost: function () {
            getGirlInfoByPost(this);
        }
    }
});

5.5后端代碼

app.get('/getGirlInfo', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangHz',
    height: '161',
    weight: '51',
    cup: 'B'
  };
  if (req.query.name != 'ZhangHz') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});
app.post('/getGirlInfoPost', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangBj',
    height: '162',
    weight: '52',
    cup: 'C'
  };
  if (req.body.name != 'ZhangBj') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});

5.6效果

運行效果如下：

6.體驗axios

axios是一個易用、簡潔且高效的http庫，

6.1HTML標簽

<div id="app">
<div class="grid">
    <div><strong>體驗前后端互動-axios</strong></div>
    <div class="titlePad" style="color: blue;">1.axios的GET請求</div>
    <div class="buttonPad"><button @click='getGirlInfo'>點擊</button></div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>身高</th>
                    <th>體重</th>
                    <th>罩杯</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{girlInfo.name}}</td>
                    <td>{{girlInfo.height}}</td>
                    <td>{{girlInfo.weight }}</td>
                    <td>{{girlInfo.cup }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="titlePad" style="color: blue;">2.axios的POST請求</div>
    <div class="buttonPad"><button @click='getGirlInfoPost'>點擊</button></div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>身高</th>
                    <th>體重</th>
                    <th>罩杯</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{girlInfoPost.name}}</td>
                    <td>{{girlInfoPost.height}}</td>
                    <td>{{girlInfoPost.weight }}</td>
                    <td>{{girlInfoPost.cup }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="titlePad" style="color: blue;">3.axios的GET請求-async和await關鍵字</div>
    <div class="buttonPad"><button @click='getGirlInfoV1'>點擊</button></div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>身高</th>
                    <th>體重</th>
                    <th>罩杯</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{girlInfoV1.name}}</td>
                    <td>{{girlInfoV1.height}}</td>
                    <td>{{girlInfoV1.weight }}</td>
                    <td>{{girlInfoV1.cup }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="titlePad" style="color: blue;">4.axios的POST請求-async和await關鍵字</div>
    <div class="buttonPad"><button @click='getGirlInfoPostV1'>點擊</button></div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>身高</th>
                    <th>體重</th>
                    <th>罩杯</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{girlInfoPostV1.name}}</td>
                    <td>{{girlInfoPostV1.height}}</td>
                    <td>{{girlInfoPostV1.weight }}</td>
                    <td>{{girlInfoPostV1.cup }}</td>
                </tr>
            </tbody>
        </table>
    </div>

</div>
</div>

6.2css代碼

<style type="text/css">
.grid {
    margin: auto;
    width: 520px;
    text-align: center;
}

.grid table {
    border-top: 1px solid #f7b62a;
    width: 100%;
    border-collapse: collapse;
}

.grid th,
td {
    padding: 10;
    border: 1px solid #f7b62a;
    height: 35px;
    line-height: 35px;
}

.grid th {
    background-color: #f7b62a;
}

.titlePad {
    margin-top: 5px;
    margin-bottom: 5px;
}

.buttonPad {
    margin-bottom: 5px;
}
</style>

6.3js代碼

//異步GET請求
function getGirlInfoByGet(vueThisObj) {
    var vueThis = vueThisObj;
    axios.get('http://127.0.0.1:8082/getGirlInfo', {
        params: {
            name: 'ZhangHz'
        }
    }).then(function (result) {
        vueThis.girlInfo = result.data;
    })
}
異步POST請求
function getGirlInfoByPost(vueThisObj) {
    var vueThis = vueThisObj;
    axios.post('http://127.0.0.1:8082/getGirlInfoPost', {
        name: 'ZhangBj',
        height: 162
    }).then(function (result) {
        vueThis.girlInfoPost = result.data;
    });
}

6.4對應Vue代碼

var vm = new Vue({
el: '#app',
data: {
    girlInfo: {},
    girlInfoPost: {},
    girlInfoV1: {},
    girlInfoPostV1: {},
},
methods: {
    getGirlInfo: function () {
        getGirlInfoByGet(this);
    },
    getGirlInfoPost: function () {
        getGirlInfoByPost(this);
    },
    getGirlInfoV1: async function () {
        axios.defaults.baseURL = 'http://127.0.0.1:8082/';
        var ret = await axios.get('getGirlInfo?name=ZhangHz');
        this.girlInfoV1 = ret.data;
    },
    getGirlInfoPostV1: async function () {
        axios.defaults.baseURL = 'http://127.0.0.1:8082/';
        var ret = await axios.post('getGirlInfoPost', {
            name: 'ZhangBj',
            height: 162
        });
        this.girlInfoPostV1 = ret.data;
    }
}
});

6.5后端代碼

app.get('/getGirlInfo', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangHz',
    height: '161',
    weight: '51',
    cup: 'B'
  };
  if (req.query.name != 'ZhangHz') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});
app.post('/getGirlInfoPost', (req, res) => {

  var girlInfo = {
    id: 1,
    name: 'ZhangBj',
    height: '162',
    weight: '52',
    cup: 'C'
  };
  if (req.body.name != 'ZhangBj') {
    girlInfo='請核對后,再查詢.';
  };
  res.send(girlInfo);
});

6.6效果

運行效果如下：

以上，感謝，

2021年9月28日

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304341.html

標籤：其他

上一篇：vuex五大核心知識點思路圖以及actions和mutations和state的關系圖

下一篇：canvas學習（html5）畫畫