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

步骤分析
1.安装axios
2.看接口文档，确认请求方式，请求所在，请求参数
3.created中发送请求，获取数据，存储到data中
4.页面动态渲染
代码实现
1.安装axios
yarn add axios  npm i axios
2.接口文档

1. 请求地址: https://mock.boxuegu.com/mock/3083/articles
2. 请求方式: get

复制代码

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

1. data() {
2.     return {
3.       articelList: [],
4.     }
5.   },
6.   async created() {
7.     const {  data: { result: { rows } }} = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
8.     this.articelList = rows
9.   },

复制代码

4.页面动态渲染
@\views\Article.vue

1. <template>
2.   <div class="article-page">
3.     <div class="article-item" v-for="item in articelList" :key="item.id">
4.       <div class="head">
5.         <img :src="item.creatorAvatar" alt="" />
6.         <div class="con">
7.           <p class="title">{{ item.stem }}</p>
8.           <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
9.         </div>
10.       </div>
11.       <div class="body">
12.         {{item.content}}
13.       </div>
14.       <div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div>
15.     </div>
16.   </div>
17. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。