vue使用axios前后端传值取值

首先后端提供接口

//查询所有数据
exports.select = (req, res) => {
  const sqlStr = 'select * from my_db_01.ev_articles'
  db.query(sqlStr, (err, result) => {
    //查询数据失败
    if (err) return console.log(err.message);
    //查询数据成功，如果执行select语句，返回数组
    res.send({
      result
    })
    console.log(result);
  })
}


router.get('/select', user_handler.select)

前端使用VUE接收数据

先在return里定义dataList接收数据

        created() {
            const that = this;
            axios.get('http://127.0.0.1:3007/api/select')
                .then(function (value) {
                    that.dataList = value.data.result;
                    console.log(that.dataList);
                })
                .catch(function (reason) {
                    console.log(reason);
                });
        },

整体数据：

<template lang="">
    <div class="detail">
        <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper" style="position: relative;">
            <swiper-slide v-for="(item,index) in imgList" :key="index" style="text-align: center;margin-top: 1.5rem;">
                <img style="margin:1rem;" class="images" :src="item.img" /><br>
                <a href="" style="font-size: 20px;text-align: center;">{{item.text}}</a><br>
                <a href="">{{dataList}}</a>
                <el-link icon="el-icon-star-off" :underline="false" style="font-size: 1rem;margin-top:.5rem;">收藏：4
                </el-link>
                <el-link icon="el-icon-chat-dot-round" style="margin-left: 10px;font-size:1rem;margin-top:.5rem;"
                    :underline="false">留言：2
                </el-link>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev">
                <el-button size="mini" type="primary" icon="el-icon-arrow-left">上一页</el-button>
            </div>
            <div class="swiper-button-next" slot="button-next">
                <el-button size="mini" type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </div>
        </swiper>
    </div>
</template>
<script>
    import { swiper, swiperSlide } from "vue-awesome-swiper";
    import "swiper/dist/css/swiper.css";
    import bus from '../assets/eventBus.js';
    const axios = require('axios');
    // var dataList="";
    export default {
        name: "Buy",
        components: { swiper, swiperSlide },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            },
        },
        data() {
            return {
                dataList: [],
                imgList: [{ img: require('../assets/img/8G内存条2个.jpg'), text: "8G内存条2个" },
                { img: require('../assets/img/电瓶车.jpg'), text: "电瓶车" },
                { img: require('../assets/img/高数书.jpg'), text: "高数书" },
                { img: require('../assets/img/键盘.jpg'), text: "键盘" },
                { img: require('../assets/img/圣罗兰小金条12号色.jpg'), text: "圣罗兰小金条12号色" },
                { img: require('../assets/img/星巴克圣诞杯子.jpg'), text: "星巴克圣诞杯子" },
                { img: require('../assets/img/自行车.jpg'), text: "自行车" },
                { img: require('../assets/img/iphone7P.jpg'), text: "iphone7P" },
                ],
                //swiper
                swiperOption: {
                    loop: false,  // 是否循环轮播
                    autoplay: false,  // 是否可以自动轮播
                    slidesPerView: 4,  // 可视区域内可展示多少个块
                    slidesPerGroup: 4, //一次翻页多少块
                    spaceBetween: 30,  // 块之间间隔距离
                    initialSlide: 0,  // 默认初始显示块
                    freeMode: false,
                    // 显示分页
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        renderBullet: function (index, className) {
                            return '<span class="' + className + '">' + (index + 1) + '</span>';
                        },
                    },
                    // 设置点击箭头
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                },
            };
        },
        created() {
            const that = this;
            axios.get('http://127.0.0.1:3007/api/select')
                .then(function (value) {
                    that.dataList = value.data.result;
                    console.log(that.dataList);
                })
                .catch(function (reason) {
                    console.log(reason);
                });
        },
    }
</script>

<style>
    .swiper-pagination-bullet {
        width: 1rem;
        height: 1rem;
        font-size: .7rem;
    }

    .swiper-pagination-bullet-active {
        width: 1.2rem;
        height: 1.2rem;
        font-size: .9rem;
    }

    .swiper-button-next {
        width: 0px;
        height: 0px;
        top: 31rem;
        left: 40rem;
    }

    .swiper-button-prev {
        width: 0px;
        height: 0px;
        top: 31rem;
        left: 32rem;
    }

    .images {
        height: 20rem;
        width: 16rem;
        text-align: center;
        margin: 0 auto;
    }

    .el-row {
        width: 100%;
        height: 100%;
    }

    .el-col {
        height: 16rem;
        width: 12rem;
        margin: .5%;
    }
</style>