Vue组件中的数据获取与列表渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/MDCG99/article/details/132584110

文章描述了一个使用Vue开发的前端项目，展示如何通过API请求获取数据并在列表组件中显示，包括学历、姓名和年纪等信息。

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

list.vue

<view class="box" v-for="item in good" :key="item.id">
<text class="twos">学历</text>
<text class="koko">{{item.xueli}}</text>
<text class="abab">姓名</text>
<text class="one">{{item.name}}</text>
<text class="abab">年纪</text>
<text class="one">{{item.age}}</text>
</view>

<script>
	const $api = require('../../util/api').API   //导入util文件夹的api文件
   data() {
		return {
			good: [],
			}
		},
   onLoad(options) {
		this.id = options.id
		this.list()
		},
  
methods: {

   list() {
     let data = {
     webid: this.id
     }
	 $api.getList(data).then((res) => {
	 this.good = res.data.data
	 }).catch((err) => {
	 console.log(err);
	})
}
}

</script>


util文件夹中创建api.js封装文件

const GET = 'GET';
const POST = 'POST';
const baseURL = 'https://hqc.zzgoodqc.cn'; //配置的域名
function request(method, url, data) {
	return new Promise(function(resolve, reject) {
		let header = {
			'content-type': 'application/json',
		};
		wx.request({
			url: baseURL + url,
			method: method,
			data: method === POST ? JSON.stringify(data) : data,
			header: header,
			success(res) {
				//请求成功
				//判断code是否为0表示成功
				if (res.data.code == 0) {
					resolve(res.data);
				} else {
					//其他错误
					reject(res.data);
				}
			},
			fail(err) {
				//请求失败
				reject(err)
			}
		})
	})
}
//接口可以集合到一块，集中管理
const API = {
	getList: (data) => request(POST, `/index.php/index/User/getWxStudentList`, data),
};
module.exports = {
	API: API
}

uniapp封装