Vue使用ajax(axios)请求后台数据

前言：页面上那些数据，绝大部分都不是静态的数据，而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点，下面是详解在vue中如何使用它。
vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）这是Axios文档的介绍，详细可查看：使用说明 · Axios 中文说明 · 看云               
Axios安装

前台部分

1、npm安装

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

复制代码

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

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

复制代码

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

1. data() {
2.     return {
3.       icon_arr:[],//刚开始为空，在create或mounted里面调用icon接口
4. },
5. created() {
6.     //this.icon();//个人比较喜欢用mounted调用接口
7. },
8. mounted() {
9.     this.icon();
10. },
11. methods:{
12.     icon() {
13.       this.$axios
14.         .get("http://127.0.0.1:3001/index/icon", {    //127.0.0.1是本地服务器     3001是端口号
15.         //.get("/api接口/函数名", {
16.           params: {
17.               //传到后台的数据参数
18.               //id:this.$route.query.id,     //当前页面地址栏中url参数名为id的参数值
19.               num:this.$route.query.id,      //多个数据像这样用
20.               one:this.$route.query.one
21.           },
22.         })
23.         // 在后台查询信息 返回res结果
24.         .then((res) => {
25.           // 查询失败
26.           //后台成功code==200,其他值报错
27.           if (res.data.code != 200) {
28.             // 提示信息
29.             return this.$toast({    // toast是vant组件（要安装和引入才能提示）
30.               message: "获取icon图片失败",
31.               icon: "fail",
32.             });
33.           }
34.           // console.log(res.data.results);   //  打印后台传给前台的数据
35.           // 查询成功,把结果赋给icon_arr
36.           this.icon_arr = res.data.results;
37.         }).catch((error)=>{
38.           //报错
39.               });
40.     },
41. }

复制代码

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

1. http://127.0.0.1:3001/index/icon

复制代码

1. this.$axios
2.         .get("http://127.0.0.1:3001/index/icon", {    //127.0.0.1是本地服务器     3001是端口号
3.           params: {
4.               
5.           },
6.         })
7.         // 在后台查询信息 返回res结果
8.         .then((res) => {
9.          
10.          }
11.      
12.         }).catch((error)=>{
13.           //报错
14.               });

复制代码

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

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

复制代码

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

1. this.$axios
2.         .get("/index/icon", {
3.           params: {
4.               
5.           },
6.         })
7.         // 在后台查询信息 返回res结果
8.         .then((res) => {
9.          
10.          }
11.      
12.         }).catch((error)=>{
13.           //报错
14.               });

复制代码

连接后台部分（node）

node_api文件目录
node_api
-database文件夹————数据库
–db.js—————————-连接数据库池
-node_modules文件夹—-node模块
-routers文件夹—————路由
–index.js————————路由文件
-app.js—————————运行
-package.json—————-配置文件、安装模块
先安装package,json里面的配置，查看dependencies里面的安装
基本上就是按下面的格式安装

1. //npm安装
2. npm i express -S
3. npm i mysql -S
4. npm i ws -S
5. ....
7. //或者淘宝镜像安装
8. cnpm i express -S
9. cnpm i mysql -S
10. cnpm i ws -S
11. ....

复制代码

db.js基本模板

1. var mysql = require('mysql');
2. var pool = mysql.createPool({
3.     host: '0.0.0.0',         //本地服务器
4.     user: 'root',             //数据库用户名
5.     password: '123456', //数据库密码
6.     database: 'hao'          //数据库名
7. });
9. //数据库池
10. function  query(sql, values, callback) {
11.     // console.log("db pool");
12.     pool.getConnection(function (err, connection) {
13.         if(err) throw err;
14.         // console.log("get connection ");
15.         //Use the connection
16.         connection.query(sql, values,function (err, results, fields) {
17.             // console.log(JSON.stringify(results));
18.             //每次查询都会 回调
19.             callback(err, results);
20.             //只是释放链接，在缓冲池了，没有被销毁
21.             connection.release();
22.             if(err) throw err;
24.         });
26.     });
27. }
29. exports.query = query;

复制代码

routers路由，里面的js是接口名，js里面的是函数名
index.js

1. const express = require('express')    //引入express框架
2. const db = require('../database/db')  //引入数据库
3. const router = express.Router()       //引入路由
5. router.get('/icon', (req, res, next) => {
6.     //  前台用get请求，就用query来接收参数
7.     let table_name = req.query.table_name;
8.     let sql = `select * from ${table_name}`;//mysql语句
9.     db.query(sql, [], (err, results) => {
10.         if (err) {
11.             //报错
12.             console.log(err);
13.         }
14.         res.send({
15.             //成功返回给前台results数据结果
16.             code: 200,
17.             results: results,
18.         })
19.     })
21. })
23. module.exports = router

复制代码

app.js

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

复制代码

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






免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！