蓝桥杯知乎首页数据动态化

最新推荐文章于 2025-06-01 19:18:23 发布

迪丽热巴326

最新推荐文章于 2025-06-01 19:18:23 发布

阅读量170

点赞数

分类专栏：蓝桥杯文章标签： vue.js 前端蓝桥杯

本文链接：https://blog.youkuaiyun.com/weixin_59379323/article/details/129326997

版权

蓝桥杯专栏收录该内容

3 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用axios请求知乎首页文章列表数据，并将其绑定到List.vue组件。通过在main.js中引入axios，然后在List.vue中调用接口获取数据并进行渲染，确保页面布局和效果图一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景介绍

数据动态化是前端开发中必备的基础技能，本次试题将实现知乎首页数据的动态化。

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的知乎首页基础代码：

wget https://labfile.oss.aliyuncs.com/courses/4450/exam09.zip && unzip exam09.zip && mv exam09/* ./ && rm -rf exam09*

下载完成之后，你可以看到目录结构如下：

├── public
│   ├── static
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── assets
│   ├── components
│        ├── Header.vue
│        ├── List.vue
│        ├── Recommend.vue
│   ├── router
│   ├── views
│        ├── Home.vue
│   ├── App.vue
│   ├── main.js
└── package-lock.json
└── package.json
└── README.md

其中：

components/List.vue 是本次挑战需补充知乎文章列表组件。
public/images 是知乎文章列表所用到的图片文件。

接下来，通过 npm run serve 启动项目

当提示项目启动成功后，点击【Web 服务】，即可在浏览器中进行预览。页面运行效果如下图所示。

考试需求

通过 axios 请求知乎首页文章列表数据并绑定到 List.vue 组件。

API	接口地址
文章列表	`public/static/data/list.json`

接口响应示例

首页布局样式与效果图保持一致。

解决方法：

首先思考vue 如何引用axios，其次是vue如何实现接口的渲染

1，在配置文件main.js 引用axios;代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//这是你需要插入的引用的axios这一个内置函数
import axios from 'axios'
Vue.prototype.$axios=axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    router,
    render: function(h) { return h(App) }
}).$mount('#app')

2.在list.vue调用并且渲染改数据注循环遍历改数据

<template>
  <div class="list" >
    <div v-for="(item,index) in dateList" :key='index'
      class="list-item"
    >
      <img
        class='list-pic'
   :src='item.imgUrl'
      />
      <div class="list-info">
        <p class='title'>{{item.title}}</p>
        <p class='desc'>{{item.desc}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateList:[]
    };

  },
  created(){
    this.getList();
    
  },
  methods:{
    //接口方法
    getList(){
      console.log(111)
      this.$axios.get('./static/data/list.json').then(res=>{
        this.dateList=res.data.data.listInfo;
        console.log(this.dateList)
      })
    }
  }

};
</script>

<style scoped>
.list-item {
  padding: 20px 0;
  overflow: hidden;
  border-bottom: 1px solid #dcdcdc;
}
.list-pic {
  float: right;
  width: 125px;
  height: 100px;
  display: block;
  border-radius: 4px;
}
.list-info {
  width: 500px;
  float: left;
}
.title {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.desc {
  line-height: 22px;
  font-size: 13px;
  color: #999;
}
</style>

希望能对你有帮助哦~