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

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