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

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

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是端口

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)=>{
          //报错
      	});
    },
}

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

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

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

//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
....

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;

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

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