学习：uniapp全栈微信小程序vue3后台 (25)

121.创建schema初始化数据库并实现查询和修改库

新建DB Schema

wallpaper-system-config.schema

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": true,
		"create": false,
		"update": false,
		"delete": false
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		},
		"brand": {
			"bsonType": "string",
			"description": "品牌名称",
			"maxLength": 20
		},
		"logo": {
			"bsonType": "string",
			"description": "品牌标志"
		},
		"checkedAd": {
			"bsonType": "bool",
			"description": "是否启用广告：true展现 false不展现",
			"defaultValue": true
		},
		"rewardedVideo": {
			"bsonType": "string",
			"description": "激励视频广告id"
		},
		"cardVideo": {
			"bsonType": "string",
			"description": "卡片广告位"
		},
		"dayCoin": {
			"bsonType": "int",
			"description": "每日领币数",
			"defaultValue": 10
		},
		"adCoin": {
			"bsonType": "int",
			"description": "看广告得币数",
			"defaultValue": 30
		},
		"ruleCoin": {
			"bsonType": "string",
			"description": "硬币使用规则",
			"maxLength": 300
		},
		"hots": {
			"bsonType": "string",
			"description": "热门搜索词"
		},
		"copyright": {
			"bsonType": "string",
			"description": "版权信息",
			"maxLength": 300
		},
		"service": {
			"bsonType": "string",
			"description": "服务协议",
			"maxLength": 1000
		},
		"privacy": {
			"bsonType": "string",
			"description": "隐私政策",
			"maxLength": 1000
		},
		"updateTime": {
			"bsonType": "timestamp",
			"title": "发表时间",
			"description": "发表时间",
			"defaultValue": {
				"$env": "now"
			}
		}
	}
}

新建json文件

[{
	"brand": "壁纸",
	"checkedAd": false,
	"dayCoin": 10,
	"adCoin": 30,
}]

初始化云数据库数据

新建云对象

module.exports = {
	_before: function() { // 通用预处理器
	},
	async getConfig() {
		const dbJQL = uniCloud.databaseForJQL({
			clientInfo: this.getClientInfo()
		})
		return await dbJQL.collection("wallpaper-system-config")
			.orderBy("_id,asc")
			.limit(1)
			.get({ getOne: true });
	},
}

更新

async updateConfig(params) {
		const dbJQL = uniCloud.databaseForJQL({
			clientInfo: this.getClientInfo()
		})
		params.updateTime = Date.now();
		return await dbJQL.collection("wallpaper-system-config")
			.update(params);
	}

122.使用自定义封装的图片上传组件实现logo图片的更改

<script setup>
	import { computed, ref } from 'vue';
	import { showToast, uploadFileItem } from '../../../utils/common';
	import { cloudToHttps } from '../../../utils/tools';
	const systemCloudObj = uniCloud.importObject("admin-system");
	const btnType = ref(0); //0是编辑  1是提交
	const btnName = computed(() => btnType.value ? '提交' : '编辑');
	const formRef = ref(null);
	const formData = ref({
		logo: "",
		brand: "",
		checkedAd: false,
		rewardedVideo: "", //激励视频id
		cardVideo: "", //视频卡片广告
		dayCoin: 10, //每日领币
		adCoin: 30, //看广告获得币
		ruleCoin: "", //硬币规则说明
		hots: "", //搜索热词
		copyright: "",
		service: "",
		privacy: ""
	})
	// 获取数据
	const getData = async () => {
		let { errCode, data } = await systemCloudObj.getConfig();
		if (errCode !== 0) return showToast({ title: "查询有误" });
		formData.value = { ...formData.value, ...data, tempurl: data.logo };
		console.log(formData.value);
	}
	//是否加入广告开关
	const checkedAdChange = (e) => {
		formData.value.checkedAd = e.detail.value;
	}

	const editAndSubmit = async () => {
		if (btnType.value) {
			try {
				uni.showLoading({ mask: true });
				if (formData.value.tempurl && formData.value.tempurl != formData.value.logo) {
					let file = await uploadFileItem(formData.value.tempurl)
					formData.value.logo = cloudToHttps(file.fileID);
				}
				let { _id, tempurl, picurl, ...params } = formData.value
				let { errCode } = await systemCloudObj.updateConfig(params);
				if (errCode !== 0) return showToast({ title: "更新失败请重试" })
				showToast({ title: "更新成功" });
				console.log(res);
			} catch (err) {
				console.log(err);
				uni.hideLoading();
				showToast({ title: err })
			}
		} else {
			console.log("编辑");
		}
		btnType.value = btnType.value ? 0 : 1;
	}
	getData()

</script>

bug

123.通过vuex全局状态管理实时修改头部的logo

/admin.config.js

/store/modules/system.js

export default {
	namespaced: true,
	state: {},
	mutations: {},
	actions: {
		getSysConfig({ commit }) {
			const db = uniCloud.database()
			return db
				.collection('wallpaper-system-config')
				.orderBy("_id asc")
				.limit(1)
				.field('brand,logo')
				.get()
				.then(({ result }) => {
					const [config] = result.data
					commit("app/SET_APP_NAME", config.brand, { root: true })
					commit("app/SET_APP_LOGO", config.logo, { root: true })
				})
		}
	}
}

/store/modules/app.js

logo

124.在uniapp项目中使用pinia全局状态管理

全局引入

创建

import { defineStore } from 'pinia';
import { ref } from "vue";

export const useCounterStore = defineStore('counter', () => {
	const count = ref(200);

	function increment() {
		count.value++;
	}
	return { count, increment };
});

125.使用Pinia状态管理记录数据库中配置项替换到页面中

新建js文件

/stores/system.js

import { defineStore } from 'pinia';
import { ref } from "vue";
const dbJQL = uniCloud.databaseForJQL()

export const useSystemStore = defineStore('system', () => {
	const config = ref({
		dayCoin: 10,
		adCoin: 30,
		checkedAd: false
	})
	const getSysConfig = async () => {
		let { data = {} } = await dbJQL.collection("wallpaper-system-config")
			.orderBy("_id asc")
			.limit(1)
			.field(
				"adCoin,brand,checkedAd,dayCoin,cardVideo,copyright,hots,logo,rewardedVideo,ruleCoin")
			.get({ getOne: true });
		config.value = { ...config.value, ...data }
		console.log(config.value);
	}
	return { config, getSysConfig }
});

/App

<script setup>
	import { onLaunch, onShow, onHide } from "@dcloudio/uni-app"
	import { useSystemStore } from "@/stores/system.js";
	const systemStore = useSystemStore();
	onLaunch(() => {
		console.log('App Launch')
		systemStore.getSysConfig();

	})
	onShow(() => {
		console.log('App Show')
	})

	onHide(() => {
		console.log('App Hide')
	})

</script>

<style lang="scss">
	@import "common/style/common-style.scss"

</style>

/pages/user/user

其他