精华内容
下载资源
问答
  • 前端Vue请求接口数据渲染数据(vue-sourse请求轮播图img、url数据笔记)
    2021-03-02 11:08:53

    前端Vue请求接口数据、渲染数据

    1.请求接口数据:
    
    //定义一个保存数据的数组
    data(){
        return {
            lunbotuList:[]    //保存轮播图的数组
        };
    }
    
    
    
    created(){
        this.getLunbotu();
    },
    methods:{
    
    		getLunbotu(){
    
    			this.$http.get('接口').then(result => {
    
    				console.log(result.body);
    
    		})
    
    	}
    
    }
    
    methods:{
    
    		getLunbotu(){
    
    			this.$http.get('接口').then(result => {
    
    				//console.log(result.body);
                    if(result.body.status ===0){
                        this.lunbotuList = result.body.message;
                    }else{
                        return '获取接口数据失败'
                    }
    
    		})
    
    	}
    
    }
    
    2.数据有了,渲染数据:
    
    //使用v-for来循环数组数据(lunbotuList)
    <mt-swiper :auto="4000">
        //在vue组件中,使用v-for循环的话,一定要使用key
        <mt-swiper-item v-for="item in lunbotuList" :key="item.url">
        	<img src="item.img" alt="">
        </mt-swiper-item>
    </mt-swiper>
    
    //布局
    img{
        width:100%;
        height:100%;
    }
    
    更多相关内容
  • 下面小编就为大家分享一篇vue中实现先请求数据渲染dom分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue异步axios获取的数据渲染到页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • yarn create vite vue3-template --template vue 然后下载相应的api npm i axios router 首先配置 App.vue <script setup> </script> <template> <router-view></router-view> &...

    首先新建一个项目

    yarn create vite vue3-template --template vue
    

    然后下载相应的api

    npm i axios router
    

    首先配置
    App.vue

    <script setup>
    
    </script>
    
    <template>
      <router-view></router-view>
    </template>
    
    <style>
    
    </style>
    
    

    main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    import router from './router'
    createApp(App).use(router).mount('#app')
    

    封装axios src/utils/request.js

    import axios from 'axios'
    const instance = axios.create({
        baseURL:"https://cnodejs.org/api/v1"
    })
    export default instance
    

    在src/api/topics.js 中请求

    import axios from '../utils/request';
    
    //请求列表的函数
    export const getTopics = (params) => axios("/topics",{params})
    
    //根据id获取详情
    export const getTopic = (id,params) => axios.get(`/topic/${id}`,{params})
    

    新建hooks src/componsables/useTopics.js

    import { ref,onMounted } from 'vue'
    import { getTopics } from '../api/topics'
    export default function useTopics(){
    
        /**
     * 数据渲染功能
     */
    //声明 数据
    const topics = ref([])
    
    //请求数据
    onMounted(async () => {
        const res =await getTopics()
        topics.value = res.data.data
    })
    return {
        topics
    }
    
    }
    

    新建hooks src/componsables/useTopic.js

    
    import { useRouter } from 'vue-router'
    export default function useTopics(){
      //跳转
    const router = useRouter()
    const go = (id) =>{
        router.push("/detail?id=" + id)
    }
    return {
        go
    }
    }
    

    在 src 下 新建 /views/Index.vue

    <template>
      <div>
          <ul>
              <li v-for="topic in topics" :key="topic.id" @click="go(topic.id)">
               {{topic.title}}
              </li>
          </ul>
      </div>
    </template>
    
    <script setup>
    // import { onMounted,ref} from 'vue';
    // import { getTopics } from '../api/topics'
    // import { useRouter } from 'vue-router'
    // /**
    //  * 数据渲染功能
    //  */
    // //声明 数据
    // const topics = ref([])
    
    // //请求数据
    // onMounted(async () => {
    //     const res =await getTopics()
    //     topics.value = res.data.data
    // })
    
    //数据渲染
    import useTopics from '../componsables/useTopics'
    const { topics } = useTopics();
    
    //跳转
    // const router = useRouter()
    // const go = (id) =>{
    //     router.push("/detail?id=" + id)
    // }
    
    //跳转
    import useTopic from '../componsables/useTopic'
    const { go } = useTopic();
    </script>
    
    <style>
    
    </style>
    

    在 src 下 新建 /views/Detail.vue

    <template>
       <div>
         {{topic.title}}
         
         <!-- ?表示如果后续的属性不存在了 就不获取了 -->
         {{topic.author?.loginname}}
    
         {{topic.create_at}}
       </div>
    </template>
    
    <script setup>
     import { ref, onMounted } from 'vue';
     import { useRoute } from 'vue-router';
     import { getTopic } from '../api/topics';
     
     let topic = ref({})
    
     const route = useRoute()
    
     //获取id
     const { id } = route.query
    
     //拿着id进行数据的请求
     onMounted( async () => {
         const res = await getTopic(id)
         topic.value = res.data.data
     })
    
    </script>
    
    <style>
    
    </style>
    

    在src 下 新建 router/index.js

    import { createWebHashHistory ,createRouter} from "vue-router"
    
    import Index from '../views/Index.vue'
    const routes = [
         {
             path:'/',
             component:Index
         },
         {
             path:'/detail',
             component:()=> import('../views/Detail.vue')
         },
         {
             path:"/store",
             component:()=> import('../views/Store.vue')
         }
    
    
    ]
     const router = createRouter({
        history:createWebHashHistory(),
        routes
    })
    export default router
    

    即可实现数据的渲染以及跳转功能

    展开全文
  • Vue请求接口渲染数据(利用axios)

    千次阅读 2020-07-29 16:01:18
    一、下载axios ...三、在组件中连接接口(这里以一个父组件传到子组件的过程来示例) Home.vue(父组件: export default { data (){ return{ spikeList:[],//定义一个数组用于存放接口传递过来

    一、下载axios

    npm install axios -S
    

    二、引入axios
    在main.js中

    //引入axios
    import axios from 'axios'
    Vue.prototype.axios=axios
    

    三、在组件中连接接口(这里以一个父组件传到子组件的过程来示例)
    Home.vue(父组件)中:

    export default {
    data (){
                return{
                    spikeList:[],//定义一个数组用于存放接口传递过来的数据
                }
            },
    mounted(){
                this.http();
            },
    methods:{
                http(){//这个方法名可以自定义,不一定要叫http
                	let That = this;//保存当前this,方便在下面箭头函数调用
                    this.axios.get("api/dataHome.json")//接口地址
                    .then((res)=>{       //res就是请求到的json数据
                    console.log(res);    //可以打印看看是否请求成功了
                    let data = res.data.data[0];
                    //第一个.data是进入数据
                    //第二个.data是json格式里的"data"对象
                    //如果不清楚可以console.log(res)看看结构
                    That.spikeList=data.spikeList;
                    //将取到的接口中某个数据存入数组
             					})
          			 }
    		},
    }
    

    在Home.vue的template中,绑定存放了数据的数组到需要数据的组件(也就是下面的这个Spike组件)

    <Spike :spikeList='spikeList'></Spike>
    <!--这个组件是我某个项目中的秒杀倒计时组件,Home.vue是它的父组件-->
    

    Spike.vue(子组件)中:

    export default {
            props:['spikeList'],
    }
    

    之后就可以在子组件中使用spikeList了

    <div class="spike-top">
                            <img src="@/assets/img/spike1.png" alt="">
                            <span>距离结束</span>
                            <count-down
                                    :currentTime="item.startTime"
                                    :startTime="item.startTime"
                                    :endTime="item.endTime"
                                    :dayTxt="'天'"
                                    :hourTxt="' :'"
                                    :minutesTxt="' :'"
                                    :secondsTxt="''">
                            </count-down>
                        </div>
                        <div class="spike-bottom">
                            <img :src="item.imgUrl" alt="">
                            <div class="bottom-title">
                                <p>
                                    {{item.title}}
                                </p>
                                <div class="bottom-price">
                                    <span>{{item.price}}</span>
                                    <p>剩下{{item.num}}</p>
                                </div>
                            </div>
    </div>
    

    提醒:
    vue绑定记得加上:,比如
    :src=“item.imgUrl”
    :currentTime=“item.startTime”
    如果要绑定修改样式里面的内容,格式如下:
    :style="{‘background’:‘url(’+item.imgUrl+’) no-repeat center center’ }"

    展开全文
  • 我拿一个接口来试试,像以前vue2一样尝试一下,我靠,结果没有那么顺利,简单的一个数据列表居然出不来,然后百思不得其解,找到了这篇文章,当你看完,我操,原来就就,是的就这 废话少说,直接说嘴常用的例子,

    阅读必看

    本文章是使用于 刚入门vue3版本的新手参考。虽然这个东西出来又一段时间了,但是一直没有事件去研究, 网上虽然各种文章写的都相当精辟,详解onBeforeMount, reactive, ref, toRefs 什么什么的 ,当你作为一个新手看完,似曾有点那种带懂不懂的感觉,于是你心里就会有个想法,我拿一个接口来试试,像以前vue2一样尝试一下,我靠,结果没有那么顺利,简单的一个数据列表居然出不来,然后百思不得其解,找到了这篇文章,当你看完,我操,原来就这,是的就这

    废话少说,直接说最常用的例子,
    需求,进入页面,获取一个列表,点击分页,获取对应页数据。

    自己去找一个接口,试试下面的例子 自己安装一下axios 全局挂载一下,将下面请求方法换成$axios.get 或者.post这种方式来应 ,这里懒得上抽离出去的代码了,我用的是以前项目的接口

    效果图 
    

    在这里插入图片描述

    先安装一下emenent ui plus 这个都会吧,
    修改一下main.js里面的内容

    //默认vu3 脚手架自带的
    // import { createApp } from 'vue'
    // import App from './App.vue'
    // import router from './router'
    // import store from './store'
    // createApp(App).use(store).use(router).mount('#app')
    
    
    //修改后的
    import { createApp, Vue } from 'vue';
    import ElementPlus from 'element-plus';
    import 'element-plus/dist/index.css';
    import App from './App.vue';
    import router from './router'
    import store from './store'
    
    
    const app = createApp(App)
    app.use(ElementPlus)
    app.use(router)
    app.use(store)
    app.mount('#app')
    
    
    

    别问为什么,多看几遍不同之处,你自然懂了
    直接拿Home.vue组件来说

    一下代码axios 这里 请求封装不一一说,

    Home.vue

    <template>
      <div class="hello">
        <div class="list">
          2.实现数据获取
          <ul>
            <li v-for="(item, index) in arr" :key="index">
              <div class="imgs">
                <img :src="item.cover" alt="" />
              </div>
              <div class="text">
                <p>{{ item.name }}</p>
              </div>
            </li>
          </ul>
          <div style="clear:both"></div>
           <el-pagination background layout="prev, pager, next" :total="total" @current-change="handpage"></el-pagination>
        </div>
      </div>
    </template>
    
    <script>
    import { onBeforeMount, reactive, ref, toRefs } from "vue";
    //这里将请求抽离出去 ,当然你也可以在页面中直接使用$axios这样 ,直接在main,js中全局挂载
    import { getHomeAllData } from "@/api/home";
    export default {
      name: "HelloWorld",
      props: {
        msg: String,
      },
      setup(props, { emit }) {
        let arr = ref([]);
        let page = ref(1); //当前页 
        let total = ref(0);
    
    //请求需要的参数
        const parms = reactive({
          cursor: page, 
          size: 10,
          testTypeId: 0,
          subjectId: 0,
          clazzLevel: 0,
          classType: 0,
          className: "",
        });
     
        //生命周期
        onBeforeMount(() => {
          lista();
        });
    
        const lista = () => {
        //发送请求 
          getHomeAllData(parms)
            .then((res) => {
              arr.value = res.data;   //赋值  用ref 生命的需要加value 当然你也可以用reactive 声明一个数组
              total.value = res.totalCount
            })
            .catch((error) => {
              
            });
        };
    
       //分页点击
        const handpage = (e) => {
          //改变分页
            page.value =e;
            //再次获取数据  在vu3 中取消了this这个东西, 这里直接像我们原先写传统js 中的方法直接 `方法名()`直接调用
            lista();
        }
    
    
        return {
        //所声明的变量  方法必须导出才能使用
         //数据
          arr,  parms, page, total,// ...toRefs(parms),
         //方法
         handpage,lista
         
        };
      },
    };
    </script>
    <style scoped>
    .list {
      width: 100%;
      background: rgb(228, 220, 220);
    }
    .list ul li {
      width: 300px;
      height:260px;
      list-style: none;
      float: left;
      margin: 10px 10px;
       box-shadow:inset 0 0 10px 0px rgba(0, 0, 0, 0.14);
       cursor: pointer;
    }
    .list ul li .imgs{
      width: 100%;
      height: 200px;
      overflow: hidden;
    }
    .imgs img{
      width: 100%;
      height: 100%;
      border-radius: 5px;
      transition: all 0.6s;  
    }
    
    .imgs img:hover{
         transform: scale(1.1);  
      }
    
    .text{
      width: 100%;
      height: 60px;
      font-size: 14px;
      margin: 2px 2px;
      color: #333;
      font-weight: normal;
    }
    </style>
    
    

    白嫖怪 代码都拿走了。 赞也不点一个

    **

    点赞是唯一跟新的动力

    **

    展开全文
  • 如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了 补充知识:vue各阶段数据可使用情况:...
  • vue根据接口返回 动态渲染组件的实现方法 使用了vue中的动态组件 https://cn.vuejs.org/v2/guide/components.html#%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6 父容器 <template> <template v-for="item in ...
  • diaLogKey默认是空字符串,父组件在created()里面通过接口返回diaLogKey,但是此时子组件已经渲染完毕,并没有拿到父组件接口返回的diaLogKey。通过给父组件添加一个v-if="diaLogKey"判断 diaLogKey有值时,再渲染子...
  • 2、在前端页面引入请求接口,在此之前需要对数据进行双向绑定,我是用的是v-model,我的数据是在表单<el-input>存放,简单叙述一下v-model,v-model指令用于表单<input>、<textarea>、&
  • vue 异步加载接口数据渲染echarts

    千次阅读 2021-04-08 09:56:09
    由于vue渲染组件是在挂载的时候,所以当我们使用异步方法获取数据时,会有一定的延迟。可能在页面渲染时,异步数据还未请求到,导致图表渲染不成功。 此时,比较合理的解决办法,应该是使用 async/await ...
  • /*在子组件中需要获取商品信息数据,而且父组件中也需要用到,已经在父组件中调用过请求了,拿到了数据,想将数据传递给子组件,正常在子组件标签写上代码*/ <bottomNavigation :goodsInfo="Data" :RunBuyList...
  • 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('...
  • 如果你的数据是本地(data 直接定义),那么并不会发生任何问题,因为它们是同步的。 <template> <ul v-for="(item, index) in getData()" :key="index"> <li>{{ item.name }}</li> &...
  • 需求:显示默认时间为当前时间至7天之前时间 去请求数据 实现效果: 1.安装Echarts cnpm install echarts -S 2.在vue项目使用Echarts 父组件使用子组件的代码 template区的使用 <BarChart :labelList=...
  • 但是在vue的父组件中接口还没有请求完,子组件已经渲染完成了,导致子组件的接口的传参不正确。 一、首先来看一下vue父子组件渲染顺序? 1、挂载渲染的顺序 父组件 beforeCreate 父组件 created 父组件 ...
  • 问题描述:在写页面过程有时子组件需要获取到父组件请求获得的数据后才能显示(比如:百度富文本的引用,回显数据的时候) 想了很多办法 最后看到这种比较可行,方便 <UE :defaultMsg=activityForm....
  • 1. 减少事件队列, 接口直接写到渲染数据的组件里, 不让接口数据在其它组件再传到渲染数据的组件里 2. 尽量不要使用vuex传参, 直接使用兄弟组件传参, 可以更直观的看到事件队列执行顺序 3. 判断数据渲染的条件, 要...
  • 1.在data定义一个空的数组,这个数组是用来保存从接口中接收到的数据 AroundList: [], //放搜索列表的数组 2.在页面中渲染, item.tit_con就是查询的关键字 <div class="keyWord" v-show="cover"> <...
  • 今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 项目要求实现在页面A中请求接口,点击确定键把接口中返回的数据保存到vuex渲染组件内,要求可以对组件渲染数据要可以进行操作。 如果在页面上直接用: &amp;amp;amp;lt;mycheckTip @hidden=&...
  • 第一种:是在方法里面直接调取所需要的接口,然后进行分发给需要的方法里面(我是数据都在一个接口里面的) 第二种,是在各个echarts的方法里面调用(适合一个页面少数的) 这是我自己用到的两种方法,如还有其他的...
  • 需求如下:进入页面有一个检测按钮,点击即可向后端请求数据。进入页面如果不点击检测则显示如下点击检测 如果返回的是正常的状态则显示如果返回的状态是异常 则显示目前有个BUG 就是点击检测的时候 先从变为 然后...
  • 1.methods () {getRemindNum () {this.getRemind({action: 'remind_number'}, res => {this.maintainReminds=res.data.maintainReminds||0this.measureReminds=res.data.measureReminds||0this.repairRem...
  • 背景平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下:export default {data(){return {tableTitle:[{label:'省份...
  • 主要介绍了vue+vuex+axio从后台获取数据存入vuex,组件之间共享数据,非常具有实用价值,需要的朋友可以参考下
  • 因为axios请求是异步请求,假如当你的页面在最开始渲染的时候同时发送多个axios请求,如果后端接口返回数据的时间为1秒,那么在axios请求发出后,系统会去执行vue中的其他代码,当等你axios请求接收到数据后再去获取...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,387
精华内容 14,154
关键字:

vue组件中请求接口渲染数据