uniapp常用

这篇博客介绍了如何在Vue中实现组件内部的数据请求和全局API的封装。通过`mounted`生命周期钩子调用`getData`方法,从后台获取数据并显示。同时展示了在`main.js`中引入`api.js`和`operate.js`,统一管理请求接口,提高代码复用性和组织性。

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

 子组件请求数据:

		// 存数据
		data() {
			return {
				data: [],
				showBool:false
			}
		},
		// 类似声明周期 可以触发函数
		mounted(){
			this.getData()
		},
		// 写函数
		methods:{
			// 请求数据
			getData(){
				this.$api.zyl_getTaoh().then((res)=>{
					this.data = res.data;
					this.showBool = true;
				}).catch((res)=>{
					console.log(res)
				})
			},
		}

封装请求数据: 

main.js同一级创建common文件夹:文件夹里创建两个js文件:

api.js  设置对后台操作的函数

import Request from '@/utils/requset.js'
let request = new Request().http

//全局定义请求头
export default {
	// 请求样式
	// 获取
	getMsg: function(data) {
		return request({
			url: "/api/sp", //请求头
			method: "GET", //请求方式
			data: data, //请求数据
		})
	},
	// 删除
	delMsg: function(data) {
		return request({
			url: `/api/delschool/${data.id}`,
			method: 'DELETE',
			data: data,
		})
	},
	// 添加
	addMsg: function(data) {
		return request({
			url: '/api/addschool',
			method: 'POST',
			data: data,
		})
	},
	// 更新
	upMsg: function(data) {
		return request({
			url: `/api/xgschool/${data.id}`,
			method: 'PUT',
			data: data,
		})
	},
	// 查找
	searchMsg: function(data) {
		return request({
			url: `/api/school/${data.id}`,
			method: 'GET',
			data: data,
		})
	}
}

operate.js 设置接口路径:

export default {
    //接口
    api: "http://127.0.0.1:7001",
}

main.js引入全局

import api from '@/common/api.js'
Vue.prototype.$api = api

页面调用:

methods:{
			// 请求数据
			getData(){
				this.$api.getMsg().then((res)=>{
					this.data = res.data;
					this.showBool = true;
				}).catch((res)=>{
					console.log(res)
				})
			},
		},

### UniApp 常用事件列表及使用方法 #### 1. 页面生命周期事件 页面生命周期事件用于监听页面的状态变化,这些状态包括加载、显示、隐藏以及卸载。 - `onLoad`:当页面加载时触发。此函数可以接收上个页面传递的数据作为参数[^1]。 ```javascript export default { onLoad(option) { console.log('Page loaded with options:', option); } } ``` - `onShow`:每次打开页面都会触发该事件,在页面初始化完成后调用。 ```javascript export default { onShow() { console.log('Page shown'); } } ``` - `onHide`:当前页面被切换到后台或将要关闭时触发。 ```javascript export default { onHide() { console.log('Page hidden or closing'); } } ``` - `onUnload`:页面销毁时触发,通常用来清理定时器或取消网络请求等操作。 ```javascript export default { onUnload() { clearInterval(this.timerId); this.abortRequest(); } } ``` #### 2. 组件交互事件 组件之间的通信主要依赖于父级向子级传参和子级通过自定义事件通知父级的方式实现。 - `$emit(eventName[, arg])`:子组件可以通过这个方法来触发一个名为 eventName 的事件给父组件,并可选地附带额外的信息作为参数传递过去。 ```html <template> <child-component @custom-event="handleCustomEvent"></child-component> </template> <script> methods: { handleCustomEvent(dataFromChild) { console.log(`Received data from child component: ${dataFromChild}`); } } </script> ``` #### 3. 用户界面交互事件 这类事件主要用于处理用户的点击、触摸以及其他形式的人机互动行为。 - `@tap/@click`:绑定单击事件处理器,适用于按钮或其他需要响应触控动作的元素[^2]。 ```html <button @tap="onClick">Click Me!</button> <script> methods: { onClick(event) { console.log('Button clicked!'); } } </script> ``` - `@longpress`:长按某个区域超过一定时间后触发相应逻辑。 ```html <div @longpress="onLongPress"> Long press here... </div> <script> methods: { onLongPress(event) { console.log('Element long pressed.'); } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值