Vue使用ajax(axios)請(qǐng)求后臺(tái)數(shù)據(jù)的方法教程

更新時(shí)間：2022年11月02日 10:46:31 作者：豪先生5

在vue中經(jīng)常會(huì)用到數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于Vue使用ajax(axios)請(qǐng)求后臺(tái)數(shù)據(jù)的方法教程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：

頁(yè)面上那些數(shù)據(jù)，絕大部分都不是靜態(tài)的數(shù)據(jù)，而是通過(guò)調(diào)用后臺(tái)接口把數(shù)據(jù)渲染到頁(yè)面上的效果。ajax可以幫助我們更好的去實(shí)現(xiàn)這一點(diǎn)，下面是詳解在vue中如何使用它。

vue本身它是不支持直接發(fā)送ajax請(qǐng)求的，需要用到axios（一個(gè)基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中）這是Axios文檔的介紹，詳細(xì)可查看：使用說(shuō)明 · Axios 中文說(shuō)明 · 看云

Axios安裝

前臺(tái)部分

1、npm安裝

npm i axios -S     //有淘寶鏡像的用    cnpm i axios -S

2、在vue中的main.js里引入

import axios from "axios";      //引入axios
Vue.prototype.$axios = axios;   //axios跟很多第三方模塊不同的一點(diǎn)是它不能直接使用use方法，而是用這種方法
 
//配合文章第4步解釋
axios.defaults.baseURL = 'http://127.0.0.1:3001'; //默認(rèn)接口地址  //自己本地服務(wù)器測(cè)試  調(diào)用接口地址127.0.0.1本地服務(wù)器  3001是端口

3、在methods里用this.$axios來(lái)調(diào)用它(注意：這里用的是get請(qǐng)求)：

Get請(qǐng)求

data() {
    return {
      icon_arr:[],//剛開(kāi)始為空，在create或mounted里面調(diào)用icon接口
},
created() {
    //this.icon();//個(gè)人比較喜歡用mounted調(diào)用接口
},
mounted() {
    this.icon();
},
methods:{
    icon() {
      this.$axios
        .get("http://127.0.0.1:3001/index/icon", {    //127.0.0.1是本地服務(wù)器     3001是端口號(hào)
        //.get("/api接口/函數(shù)名", {
          params: {
              //傳到后臺(tái)的數(shù)據(jù)參數(shù)
              //id:this.$route.query.id,     //當(dāng)前頁(yè)面地址欄中url參數(shù)名為id的參數(shù)值
              num:this.$route.query.id,      //多個(gè)數(shù)據(jù)像這樣用
              one:this.$route.query.one
          },
        })
        // 在后臺(tái)查詢信息 返回res結(jié)果
        .then((res) => {
          // 查詢失敗
          //后臺(tái)成功code==200,其他值報(bào)錯(cuò)
          if (res.data.code != 200) {
            // 提示信息
            return this.$toast({    // toast是vant組件（要安裝和引入才能提示）
              message: "獲取icon圖片失敗",
              icon: "fail",
            });
          }
          // console.log(res.data.results);   //  打印后臺(tái)傳給前臺(tái)的數(shù)據(jù)
          // 查詢成功,把結(jié)果賦給icon_arr
          this.icon_arr = res.data.results;
        }).catch((error)=>{
          //報(bào)錯(cuò)
      	});
    },
}

4、沒(méi)有優(yōu)化默認(rèn)接口之前，一步一步寫(xiě)接口很麻煩。如下

http://127.0.0.1:3001/index/icon

this.$axios
        .get("http://127.0.0.1:3001/index/icon", {    //127.0.0.1是本地服務(wù)器     3001是端口號(hào)
          params: {
              
          },
        })
        // 在后臺(tái)查詢信息 返回res結(jié)果
        .then((res) => {
     
        }).catch((error)=>{
          //報(bào)錯(cuò)
      	});

我們可以通過(guò)在main.js添加這行代碼: (接口地址:端口號(hào))

axios.defaults.baseURL = 'http://127.0.0.1:3001';

之后我們就可以簡(jiǎn)單的寫(xiě)成

this.$axios
        .get("/index/icon", {
          params: {
              
          },
        })
        // 在后臺(tái)查詢信息 返回res結(jié)果
        .then((res) => {
     
        }).catch((error)=>{
          //報(bào)錯(cuò)
      	});

連接后臺(tái)部分（node）

node_api文件目錄

node_api

-database文件夾————數(shù)據(jù)庫(kù)

–db.js—————————-連接數(shù)據(jù)庫(kù)池

-node_modules文件夾—-node模塊

-routers文件夾—————路由

–index.js————————路由文件

-app.js—————————運(yùn)行

-package.json—————-配置文件、安裝模塊

先安裝package,json里面的配置，查看dependencies里面的安裝

基本上就是按下面的格式安裝

//npm安裝
npm i express -S
npm i mysql -S
npm i ws -S
....
 
//或者淘寶鏡像安裝
cnpm i express -S
cnpm i mysql -S
cnpm i ws -S
....

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6LGq5YWI55SfNQ==,size_14,color_FFFFFF,t_70,g_se,x_16

db.js基本模板

var mysql = require('mysql');
var pool = mysql.createPool({
    host: '0.0.0.0',         //本地服務(wù)器
    user: 'root',             //數(shù)據(jù)庫(kù)用戶名
    password: '123456', //數(shù)據(jù)庫(kù)密碼
    database: 'hao'          //數(shù)據(jù)庫(kù)名
});
 
//數(shù)據(jù)庫(kù)池
function  query(sql, values, callback) {
    // console.log("db pool");
    pool.getConnection(function (err, connection) {
        if(err) throw err;
        // console.log("get connection ");
        //Use the connection
        connection.query(sql, values,function (err, results, fields) {
            // console.log(JSON.stringify(results));
            //每次查詢都會(huì) 回調(diào)
            callback(err, results);
            //只是釋放鏈接，在緩沖池了，沒(méi)有被銷(xiāo)毀
            connection.release();
            if(err) throw err;
 
        });
 
    });
}
 
exports.query = query;

routers路由，里面的js是接口名，js里面的是函數(shù)名

index.js

const express = require('express')    //引入express框架
const db = require('../database/db')  //引入數(shù)據(jù)庫(kù)
const router = express.Router()       //引入路由
 
router.get('/icon', (req, res, next) => {
    //  前臺(tái)用get請(qǐng)求，就用query來(lái)接收參數(shù)
    let table_name = req.query.table_name;
    let sql = `select * from ${table_name}`;//mysql語(yǔ)句
    db.query(sql, [], (err, results) => {
        if (err) {
            //報(bào)錯(cuò)
            console.log(err);
        }
        res.send({
            //成功返回給前臺(tái)results數(shù)據(jù)結(jié)果
            code: 200,
            results: results,
        })
    })
})
 
module.exports = router

app.js

let express = require('express')   //引入express
let app = express()
 
let indexRouter = require('./routers/index')
 
//設(shè)置跨域訪問(wèn)
app.all("*", function (req, res, next) {
    //設(shè)置允許跨域的域名，*代表允許任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允許的header類型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允許的請(qǐng)求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //讓options嘗試請(qǐng)求快速結(jié)束
    else
        next();
})
 
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
 
app.use('/index', indexRouter)
 
app.listen(3001,console.log('success'))   //3001是端口號(hào)   打印，成功時(shí)顯示success

輸入命令行 node app.js 來(lái)啟動(dòng)

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6LGq5YWI55SfNQ==,size_20,color_FFFFFF,t_70,g_se,x_16

總結(jié)

到此這篇關(guān)于Vue使用ajax(axios)請(qǐng)求后臺(tái)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue請(qǐng)求后臺(tái)數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: