【Vue】面经基础版-首页请求渲染

步骤分析

1.安装axios

2.看接口文档，确认请求方式，请求地址，请求参数

3.created中发送请求，获取数据，存储到data中

4.页面动态渲染

代码实现

1.安装axios

yarn add axios npm i axios

2.接口文档

请求地址: http://mock.boxuegu.com/mock/3083/articles
请求方式: get

3.created中发送请求，获取数据，存储到data中

 data() {
    return {
      articelList: [],
    }
  },
  async created() {
    const {  data: { result: { rows } }} = await axios.get('http://mock.boxuegu.com/mock/3083/articles')
    this.articelList = rows
  },

4.页面动态渲染

@\views\Article.vue

  
    
      
        
        
          
{{ item.stem }}
          
{{ item.creatorName }} | {{ item.createdAt }}
        
      
      
        {{item.content}}
      
      点赞 {{item.likeCount}} | 浏览 {{item.views}}