我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Vue使用ajax(axios)请求后台数据的方法教程

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Vue使用ajax(axios)请求后台数据的方法教程

前言:

页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它。

vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:使用说明 · Axios 中文说明 · 看云               

Axios安装

前台部分

1、npm安装

npm i axios -S     //有淘宝镜像的用    cnpm i axios -S

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

import axios from "axios";      //引入axios
Vue.prototype.$axios = axios;   //axios跟很多第三方模块不同的一点是它不能直接使用use方法,而是用这种方法
 
//配合文章第4步解释
axios.defaults.baseURL = 'http://127.0.0.1:3001'; //默认接口地址  //自己本地服务器测试  调用接口地址127.0.0.1本地服务器  3001是端口

3、 在methods里用this.$axios来调用它(注意:这里用的是get请求):

Get请求

data() {
    return {
      icon_arr:[],//刚开始为空,在create或mounted里面调用icon接口
},
created() {
    //this.icon();//个人比较喜欢用mounted调用接口
},
mounted() {
    this.icon();
},
methods:{
    icon() {
      this.$axios
        .get("http://127.0.0.1:3001/index/icon", {    //127.0.0.1是本地服务器     3001是端口号
        //.get("/api接口/函数名", {
          params: {
              //传到后台的数据参数
              //id:this.$route.query.id,     //当前页面地址栏中url参数名为id的参数值
              num:this.$route.query.id,      //多个数据像这样用
              one:this.$route.query.one
          },
        })
        // 在后台查询信息 返回res结果
        .then((res) => {
          // 查询失败
          //后台成功code==200,其他值报错
          if (res.data.code != 200) {
            // 提示信息
            return this.$toast({    // toast是vant组件(要安装和引入才能提示)
              message: "获取icon图片失败",
              icon: "fail",
            });
          }
          // console.log(res.data.results);   //  打印后台传给前台的数据
          // 查询成功,把结果赋给icon_arr
          this.icon_arr = res.data.results;
        }).catch((error)=>{
          //报错
      	});
    },
}

4、没有优化默认接口之前,一步一步写接口很麻烦。如下

http://127.0.0.1:3001/index/icon

this.$axios
        .get("http://127.0.0.1:3001/index/icon", {    //127.0.0.1是本地服务器     3001是端口号
          params: {
              
          },
        })
        // 在后台查询信息 返回res结果
        .then((res) => {
     
        }).catch((error)=>{
          //报错
      	});

我们可以通过在main.js添加这行代码: (接口地址:端口号)

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

之后我们就可以简单的写成

this.$axios
        .get("/index/icon", {
          params: {
              
          },
        })
        // 在后台查询信息 返回res结果
        .then((res) => {
     
        }).catch((error)=>{
          //报错
      	});

连接后台部分(node)

node_api文件目录

node_api

-database文件夹————数据库

–db.js—————————-连接数据库池

-node_modules文件夹—-node模块

-routers文件夹—————路由

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

-app.js—————————运行

-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',         //本地服务器
    user: 'root',             //数据库用户名
    password: '123456', //数据库密码
    database: 'hao'          //数据库名
});
 
//数据库池
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));
            //每次查询都会 回调
            callback(err, results);
            //只是释放链接,在缓冲池了,没有被销毁
            connection.release();
            if(err) throw err;
 
        });
 
    });
}
 
exports.query = query;

routers路由,里面的js是接口名,js里面的是函数名

index.js

const express = require('express')    //引入express框架
const db = require('../database/db')  //引入数据库
const router = express.Router()       //引入路由
 
router.get('/icon', (req, res, next) => {
    //  前台用get请求,就用query来接收参数
    let table_name = req.query.table_name;
    let sql = `select * from ${table_name}`;//mysql语句
    db.query(sql, [], (err, results) => {
        if (err) {
            //报错
            console.log(err);
        }
        res.send({
            //成功返回给前台results数据结果
            code: 200,
            results: results,
        })
    })
})
 
module.exports = router

app.js

let express = require('express')   //引入express
let app = express()
 
let indexRouter = require('./routers/index')
 
//设置跨域访问
app.all("*", function (req, res, next) {
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})
 
app.use(express.json())
app.use(express.urlencoded({ extended: false }))
 
app.use('/index', indexRouter)
 
app.listen(3001,console.log('success'))   //3001是端口号   打印,成功时显示success

输入命令行 node app.js 来启动

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

总结

到此这篇关于Vue使用ajax(axios)请求后台数据的文章就介绍到这了,更多相关Vue请求后台数据内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Vue使用ajax(axios)请求后台数据的方法教程

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue使用ajax(axios)请求后台数据的方法教程

在vue中经常会用到数据请求,下面这篇文章主要给大家介绍了关于Vue使用ajax(axios)请求后台数据的方法教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-13

Jquery使用原生AJAX方法请求数据

本文详细讲解了Jquery使用AJAX方法请求数据,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-02-22

Jquery怎么使用AJAX方法请求数据

本篇内容主要讲解“Jquery怎么使用AJAX方法请求数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Jquery怎么使用AJAX方法请求数据”吧!一、AJAX请求1、jQuery.ajax(
2023-06-30

Jquery怎么使用原生AJAX方法请求数据

这篇文章主要介绍“Jquery怎么使用原生AJAX方法请求数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Jquery怎么使用原生AJAX方法请求数据”文章能帮助大家解决问题。1.原生ajax1.
2023-07-05

使用Ajax异步请求怎么对后台数据进行动态分页

本篇文章为大家展示了使用Ajax异步请求怎么对后台数据进行动态分页,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分
2023-06-08

Vue使用axios进行get请求拼接参数的2种方式详解

axios中post请求都是要求携带参数进行请求,这篇文章主要给大家介绍了关于Vue使用axios进行get请求拼接参数的2种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-05

使用Discuz!后台备份和恢复Discuz!站点数据库的方法教程

备份和恢复Discuz!站点数据库的方法有很多,每种方法都思路都会不同。Discuz!为方便用户备份和恢复数据库,已在后台内置了此功能,易于站长操作。今天在这分享一下Discuz! x2.5论坛后台数据库的备份和恢复方法,以及备份数据库和恢
2022-06-12

vue项目使用node连接数据库的方法(前后端分离)

这篇文章主要介绍了vue项目使用node连接数据库(前后端分离),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-12-22

编程热搜

目录