完整教程：学习：uniapp全栈微信小程序vue3后台（28）

136.创建硬币使用记录展示页面，展示硬币列表数据

/uniCloud-alipay/database/wallpaper-activity-coin.schema.json

添加ip字段

/uniCloud-alipay/cloudfunctions/admin-data-record/index.obj.js

coinRecord方法

async coinRecord({ size = 5, current = 1, dataRange = [] } = {}) {
		size = Math.min(100, size);
		let skip = (current - 1) * size;
		let wre = dataRange.length ?
			`createTime >= ${dayjs(dataRange[0]).startOf("day").valueOf()} &&
		createTime<=${dayjs(dataRange[1]).endOf("day").valueOf()}` : {};
		const dbJQL = uniCloud.databaseForJQL({
			clientInfo: this.getClientInfo()
		})
		let coinTemp = dbJQL.collection("wallpaper-activity-coin")
			.where(wre)
			.orderBy("createTime desc")
			.skip(skip)
			.limit(size)
			.getTemp();
		let userTemp = dbJQL.collection("uni-id-users")
			.field("_id,nickname")
			.getTemp();
		let res = await dbJQL.collection(coinTemp, userTemp)
			.field(`
		createTime,
		dayGet,
		total,
		ip,
		record,
		user_id.nickname as nickname
		`)
			.get({ getCount: true })
		let data = res.data.map(item => {
			return {
				...item,
				nickname: item.nickname[0]
			}
		})
		return { ...res, data };
	},

新建coin-record

按照日期选择展示范围内的数据

uni-datetime-picker 日期选择器 | uni-app官网

<script setup>
	/**
	 * 导入Vue和dayjs相关依赖
	 * ref: Vue的响应式引用API
	 * dayjs: 处理日期的库
	 */
	import { ref } from 'vue';
	import dayjs from "dayjs"
	/**
	 * 导入uniCloud云函数对象
	 * 用于与后端云函数进行数据交互
	 */
	const dataCloudObj = uniCloud.importObject("admin-data-record", { customUI: true });
	// 弹出框引用
	const popup = ref(null);
	// 列表数据
	const listData = ref([]);
	// 记录列表数据
	const recordList = ref([]);
	// 请求参数
	const params = ref({
		current: 1, // 当前页码
		total: 0, // 总记录数
		size: 20, // 每页显示数量
		dataRange: [] // 日期范围
	});
	// 默认日期范围（当前时间往前推6个月）
	const deftData = ref([
		dayjs().subtract(6, "M").startOf("day").valueOf(),
		dayjs().endOf("day").valueOf()
	]);
	/**
	 * 获取数据函数
	 * 从后端获取硬币记录数据
	 */
	const getData = async () => {
		let { errCode, data = [], count = 0 } = await dataCloudObj.coinRecord(params.value);
		listData.value = data
		params.value.total = count
	}
	/**
	 * 处理链接点击事件
	 * @param {number} index - 当前点击的记录索引
	 */
	const handleLink = (index) => {
		recordList.value = listData.value[index].record
		popup.value.open();
	}
	/**
	 * 分页改变事件处理
	 * @param {Object} e - 分页事件对象
	 */
	const pageChange = (e) => {
		params.value.current = e.current;
		getData();
	}
	/**
	 * 日期改变事件处理
	 */
	const dataChange = () => {
		getData();
	}
	getData(); // 初始加载数据
</script>

添加二级菜单

137.使用grid网格布局做响应式栅格布局

创建页面

新建二级菜单

<script setup>
import dayjs from "dayjs";
import {onMounted, ref} from "vue";
import { showToast } from "../../utils/common";
const dataDeft = ref([dayjs().subtract(6, 'M').startOf('day').valueOf(),
dayjs().endOf('day').valueOf()]);
const dataRange = ref([])
const dateChange = (e)=>{
	getData();
}
const getData = ()=>{
}
getData();
</script>

138.云对象常用的API调用方法获取客户端信息

新建数据集合Schema文件

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": true,
		"create": true,
		"update": true,
		"delete": true
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		},
		"user_id": {
			"description": "用户id",
			"bsonType": "string",
			"foreignKey": "uni-id-users._id"
		},
		"ip": {
			"description": "操作者ip地址",
			"bsonType": "string",
			"defaultValue": {
				"$env": "clientIP"
			}
		},
		"methodName": {
			"description": "调用的方法名",
			"bsonType": "string"
		},
		"params": {
			"description": "请求参数",
			"bsonType": "string"
		},
		"functionName": {
			"description": "云对象名称",
			"bsonType": "string"
		},
		"uniPlatform": {
			"description": "平台名称",
			"bsonType": "string"
		},
		"createTime": {
			"description": "产生时间",
			"bsonType": "timestamp",
			"defaultValue": {
				"$env": "now"
			}
		}
	}
}

139.获取客户端token解析checkToken用户角色信息

管理公共模块或扩展库依赖

// 解构获取客户端IP和平台信息
		let clientInfo = this.getClientInfo()
		let { clientIP, uniPlatform } = clientInfo
		const methodName = this.getMethodName()
		const params = this.getParams()
		const token = this.getUniIdToken()
		this.uniID = uniID.createInstance({ //仓
			clientInfo
		})
		let { uid = '' } = await this.uniID.checkToken(token)
		console.log(res)

140.创建云函数公用模块将使用量数据统计封装统计入库

封装方法

/uniCloud-alipay/cloudfunctions/common/custom-utils/index.js

async useRecord(that) {
		let clientInfo = that.getClientInfo()
		let { clientIP, uniPlatform } = clientInfo
		const methodName = that.getMethodName()
		const params = that.getParams()
		// const token = that.getUniIdToken()
		// let uniIDins = uniID.createInstance（ {
		// 	//创建uni-id实例，其上方法同uniID
		// 	clientInfo
		// )
		// let { uid = '' } = await uniIDins.checkToken(token)
		const dbJQL = uniCloud.databaseForJQL({
			clientInfo
		})
		dbJQL.collection("wallpaper-data-usage").add({
			ip: clientIP,
			uniPlatform,
			methodName,
			params: JSON.stringify(params),
			functionName
		})
	}

管理本云函数的扩展库/公共模块依赖

补充，名称