当前位置：首页 > news >正文

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

news 2025/9/22 7:05:59

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: "", //激励视频idcardVideo: "", //视频卡片广告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.valuelet { 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.datacommit("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