正文

vue体验(前后端交互)(代码片段)

zhangbeizhen18  zhangbeizhen18  2023-01-08  348

关键词：

记录：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日

vue-resource的使用，前后端数据交互(代码片段)

vue-resource的使用，前后端数据交互1：导入vue与vue-resource的js js下载： https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUgFyQ 注意如果是springBoot项目需要在配置文件中排除静态文件的拦截： post方法：newVue(el:"#app", 查看详情

前后端交互(小白教学)(代码片段)

在我们的印象中什么是前后端交互呢?我们一个后端程序员为什么要去学习前端知识?前后端交互到底是靠什么而进行关联的呢?接下来我们带着这三个问题来阅读这边文章!!!1.前后端交互所谓前后端交互,即前后端交互为前端和后端... 查看详情

初识vue——最简单的前后端交互示例(代码片段)

一、初识vue时的困惑最近想学一门前端技术防身，看到博客园中写vue的多，那就vue吧。都说vue的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue(读音/vju?/，类似于view)是一套用于构建用户界面的渐进式框架。与... 查看详情

前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element(代码片段)

Axios进行前后端交互一.修改vue存在的文件路径二.解决跨域问题三.渲染数据到前端四.完整代码jshtml教学视频：5.axios请求后台——评论功能6.解决跨域问题cors——评论功能7.前端界面显示——评论功能前言：作者：神的... 查看详情

前后端交互流程(代码片段)

1.前后端交互:前后端交互，也可以理解为数据交互。前端需要获取（GET）的数据获取上传（POST）的数据，要通过请求来完成的，前端发送请求，后端接收到请求后，便进行对数据库的操作，... 查看详情

vue之前后端交互(代码片段)

Vue之前后端交互一、前后端交互模式接口调用方式原生ajax基于jQuery的ajaxfetchaxios异步JavaScript的执行环境是「单线程」所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个... 查看详情

axios前后端交互工具学习(代码片段)

文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢？Axios前后端交互工具学习引言 Axios是一个异步请求技术，... 查看详情

axios前后端交互工具学习(代码片段)

vue前后端交互(代码片段)

异步调用异步效果:事件函数Ajax定时任务多次异步调用依赖多次调用异步,结果顺序不确定,如果需要固定顺序,必须使用嵌套Promise概述Promise是异步编程的一种解决方案,从语法上讲Promise是一个对象,从它可以获取到异步操作的消息;... 查看详情

ajax前后端交互利器详解(代码片段)

✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情

ajax前后端交互利器详解(代码片段)

一.vue+django前后端数据交互知识点(代码片段)

一. Vue+Django基础项目知识点1.vue+django跨域的问题解决https://www.cnblogs.com/lovershowtime/p/11572569.html 跨域知识点在后台解决跨域问题使用中间件作用全局cors.pyclassMiddlewareMixin(object):def__init__(self,get_response=None):self.get_response=get_resp... 查看详情

vue前后台交互，插件(代码片段)

目录Vuex插件前端存储数据汇总前后台交互方式（重点）axios插件同源策略-跨域问题前后台分离项目交互流程异步请求细节Element-ui插件jQ+Bs插件Django国际化配置总结Vuex插件Vuex插件可以完成任意组件间信息交互（移动端）了解vuex... 查看详情

前后端交互(代码片段)

前端传JSON 此JSON有上下级关系每一个有孩子节点此节点有数据"standardspeciallistid":"10339","standardcostid":"0","costcode":"(A)","costcodelevel":"1","costcodename":"开发成本","costcodeparentid":"0","haschild":"","budgetvaria 查看详情

聊聊前后端分离的接口规范(代码片段)

....前言随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高，后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而查看详情

前后端交互模式(代码片段)

一、原生Ajax1.1ajax概述Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是一种用于客户端与服务端进行数据交互的一种技术。Ajax能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。... 查看详情

vue简单快速入门(代码片段)

...用可以结合Restful，符合前后端分离开发。良好的用户体验：应用没有页面跳转，全是局部刷新，整体页面更流畅。减轻服务器端压力：由于都是局部刷新对服务器压力更小。多平台共享：无论是移动端、电脑端都可以共... 查看详情

正文

vue体验(前后端交互)(代码片段)

vue-resource的使用，前后端数据交互(代码片段)

前后端交互(小白教学)(代码片段)

初识vue——最简单的前后端交互示例(代码片段)

前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element(代码片段)

前后端交互流程(代码片段)

vue之前后端交互(代码片段)

axios前后端交互工具学习(代码片段)

axios前后端交互工具学习(代码片段)

vue前后端交互(代码片段)

ajax前后端交互利器详解(代码片段)

ajax前后端交互利器详解(代码片段)

一.vue+django前后端数据交互知识点(代码片段)

vue前后台交互，插件(代码片段)

前后端交互(代码片段)

推荐系统-task04前后端基础及交互(代码片段)

聊聊前后端分离的接口规范(代码片段)

前后端交互模式(代码片段)

vue简单快速入门(代码片段)