【从0开始搭建壁纸小程序】- 管理后台开发

前言

一个相对完整的项目需要有用户端-展示内容、以及管理后台-管理网站数据等。之前分享了用户端的开发流程，本次分享管理后台的完整开发流程。项目代码我会放在文章结尾处。

开始开发

根据对页面的分析，我们至少需要分类管理和壁纸管理两个功能，才能正常的运行该项目。

• 首先我们打开hbuilderx新建一个后台管理项目

在模板中选择uni-admin，启用uniCloud，选择阿里云

• 管理服务空间 关联服务空间的时候选择和用户端相同的服务空间，这样就可以管理数据了

• 同步database 右键database目录，选择上传所有DB Schema

我们可以通过下载所有db，将用户端的表同步到后台项目

• 同步云函数

右键cloudfunctions，上传所有云函数

• 运行项目

运行成功后会展示下面的登录页面，由于我们还没有注册管理员用户，所以需要我们先注册一个管理员账号

根据提示注册管理员

注册成功后就可以登录后台了，我们可以看到uni-admin模板已经包含了完整的用户-角色-权限功能

到这里我们就成功的创建并运行了后台管理系统，下面我们开始开发分类管理和壁纸管理

• 使用schema2code快速开发crud功能

右键database/category.schema.json，选择schema2code

选择uniCloud admin页面

合并

点击和合并后会自动生成分类管理相关的页面文件

以及配置好page.json

接下来我们需要在后台通过系统管理下的菜单管理功能将页面配置到左侧菜单中

首先新增一个一级菜单 - 壁纸管理，用来放置壁纸列表管理和壁纸分类管理

点击子菜单，添加分类管理

保存后就可以在在菜单中打开页面，根据实际需求对list.vue、edit.vue和add.vue简单修改就完成了分类管理

list.vue

<template>
  <view>
    <view class="uni-header">
      <view class="uni-group">
        <view class="uni-title"></view>
        <view class="uni-sub-title"></view>
      </view>
      <view class="uni-group">
        <input class="uni-search" type="text" v-model="query" @confirm="search" placeholder="请输入搜索内容" />
        <button class="uni-button" type="default" size="mini" @click="search">搜索</button>
        <button class="uni-button" type="default" size="mini" @click="navigateTo('./add')">新增</button>
        <button class="uni-button" type="default" size="mini" :disabled="!selectedIndexs.length" @click="delTable">批量删除</button>
        <download-excel class="hide-on-phone" :fields="exportExcel.fields" :data="exportExcelData" :type="exportExcel.type" :name="exportExcel.filename">
          <button class="uni-button" type="primary" size="mini">导出 Excel</button>
        </download-excel>
      </view>
    </view>
    <view class="uni-container">
      <unicloud-db ref="udb" :collection="collectionList" field="icon,name,desc,status,sort" :where="where" page-data="replace"
        :orderby="orderby" :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
        v-slot:default="{data,pagination,loading,error,options}" :options="options" loadtime="manual" @load="onqueryload">
        <uni-table ref="table" :loading="loading" :emptyText="error.message || '没有更多数据'" border stripe type="selection" @selection-change="selectionChange">
          <uni-tr>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'icon')" sortable @sort-change="sortChange($event, 'icon')">icon</uni-th>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'name')" sortable @sort-change="sortChange($event, 'name')">name</uni-th>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'desc')" sortable @sort-change="sortChange($event, 'desc')">desc</uni-th>
            <uni-th align="center" filter-type="range" @filter-change="filterChange($event, 'status')" sortable @sort-change="sortChange($event, 'status')">status</uni-th>
            <uni-th align="center" filter-type="range" @filter-change="filterChange($event, 'sort')" sortable @sort-change="sortChange($event, 'sort')">sort</uni-th>
            <uni-th align="center">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item,index) in data" :key="index">
            <uni-td align="center">
							<image :src="item.icon" mode="aspectFill" style="height: 60px;width: 60px;"></image>
						</uni-td>
            <uni-td align="center">{{item.name}}</uni-td>
            <uni-td align="center">{{item.desc}}</uni-td>
            <uni-td align="center">{{item.status}}</uni-td>
            <uni-td align="center">{{item.sort}}</uni-td>
            <uni-td align="center">
              <view class="uni-group">
                <button @click="navigateTo('./edit?id='+item._id, false)" class="uni-button" size="mini" type="primary">修改</button>
                <button @click="confirmDelete(item._id)" class="uni-button" size="mini" type="warn">删除</button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="uni-pagination-box">
          <uni-pagination show-icon :page-size="pagination.size" v-model="pagination.current" :total="pagination.count" @change="onPageChanged" />
        </view>
      </unicloud-db>
    </view>
  </view>
</template>

<script>
  import { enumConverter, filterToWhere } from '../../js_sdk/validator/category.js';

  const db = uniCloud.database()
  // 表查询配置
  const dbOrderBy = '' // 排序字段
  const dbSearchFields = [] // 模糊搜索字段，支持模糊搜索的字段列表。联表查询格式: 主表字段名.副表字段名，例如用户表关联角色表 role.role_name
  // 分页配置
  const pageSize = 20
  const pageCurrent = 1

  const orderByMapping = {
    "ascending": "asc",
    "descending": "desc"
  }

  export default {
    data() {
      return {
        collectionList: "category",
        query: '',
        where: '',
        orderby: dbOrderBy,
        orderByFieldName: "",
        selectedIndexs: [],
        options: {
          pageSize,
          pageCurrent,
          filterData: {},
          ...enumConverter
        },
        imageStyles: {
          width: 64,
          height: 64
        },
        exportExcel: {
          "filename": "category.xls",
          "type": "xls",
          "fields": {
            "icon": "icon",
            "name": "name",
            "desc": "desc",
            "status": "status",
            "sort": "sort"
          }
        },
        exportExcelData: []
      }
    },
    onLoad() {
      this._filter = {}
    },
    onReady() {
      this.$refs.udb.loadData()
    },
    methods: {
      onqueryload(data) {
        this.exportExcelData = data
      },
      getWhere() {
        const query = this.query.trim()
        if (!query) {
          return ''
        }
        const queryRe = new RegExp(query, 'i')
        return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ')
      },
      search() {
        const newWhere = this.getWhere()
        this.where = newWhere
        this.$nextTick(() => {
          this.loadData()
        })
      },
      loadData(clear = true) {
        this.$refs.udb.loadData({
          clear
        })
      },
      onPageChanged(e) {
        this.selectedIndexs.length = 0
        this.$refs.table.clearSelection()
        this.$refs.udb.loadData({
          current: e.current
        })
      },
      navigateTo(url, clear) {
        // clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
        uni.navigateTo({
          url,
          events: {
            refreshData: () => {
              this.loadData(clear)
            }
          }
        })
      },
      // 多选处理
      selectedItems() {
        var dataList = this.$refs.udb.dataList
        return this.selectedIndexs.map(i => dataList[i]._id)
      },
      // 批量删除
      delTable() {
        this.$refs.udb.remove(this.selectedItems(), {
          success:(res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      // 多选
      selectionChange(e) {
        this.selectedIndexs = e.detail.index
      },
      confirmDelete(id) {
        this.$refs.udb.remove(id, {
          success:(res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      sortChange(e, name) {
        this.orderByFieldName = name;
        if (e.order) {
          this.orderby = name + ' ' + orderByMapping[e.order]
        } else {
          this.orderby = ''
        }
        this.$refs.table.clearSelection()
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      },
      filterChange(e, name) {
        this._filter[name] = {
          type: e.filterType,
          value: e.filter
        }
        let newWhere = filterToWhere(this._filter, db.command)
        if (Object.keys(newWhere).length) {
          this.where = newWhere
        } else {
          this.where = ''
        }
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      }
    }
  }
</script>

<style>
</style>

add.vue

<template>
	<view class="uni-container">
		<uni-forms ref="form" :model="formData" validateTrigger="bind">
			<uni-forms-item name="icon" label="图标">
				<uni-file-picker v-model="imageData.icon" :image-styles="{'width' : '200rpx'}" return-type="object"
					file-mediatype="image" limit="1" mode="grid" @success="(res) => iconUrlSuccess(res,'icon')"
					@delete="(res) => iconUrlDelete(res,'icon')">
				</uni-file-picker>
			</uni-forms-item>
			<uni-forms-item name="name" label="名称">
				<uni-easyinput placeholder="名称" v-model="formData.name"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="desc" label="描述">
				<uni-easyinput placeholder="描述" v-model="formData.desc"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="status" label="状态">
				<uni-easyinput placeholder="状态 0-停用 1-可用" type="number" v-model="formData.status"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="sort" label="排序">
				<uni-easyinput placeholder="排序" type="number" v-model="formData.sort"></uni-easyinput>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
				<navigator open-type="navigateBack" style="margin-left: 15px;">
					<button class="uni-button" style="width: 100px;">返回</button>
				</navigator>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		validator
	} from '../../js_sdk/validator/category.js';

	const db = uniCloud.database();
	const dbCmd = db.command;
	const dbCollectionName = 'category';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.includes(key)) {
				result[key] = validator[key]
			}
		}
		return result
	}



	export default {
		data() {
			let formData = {
				"icon": "",
				"name": "",
				"desc": "",
				"status": 1,
				"sort": 1
			}
			return {
				imageData: {
					icon: []
				},
				formData,
				formOptions: {},
				rules: {
					...getValidator(Object.keys(formData))
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			iconUrlSuccess(res,key) {
				this.formData[key] = res.tempFilePaths[0]
			},
			iconUrlDelete(res,key) {
				this.formData[key] = ''
			},

			/**
			 * 验证表单并提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				})
				this.$refs.form.validate().then((res) => {
					return this.submitForm(res)
				}).catch(() => {}).finally(() => {
					uni.hideLoading()
				})
			},

			/**
			 * 提交表单
			 */
			submitForm(value) {
				// 使用 clientDB 提交数据
				return db.collection(dbCollectionName).add(value).then((res) => {
					uni.showToast({
						title: '新增成功'
					})
					this.getOpenerEventChannel().emit('refreshData')
					setTimeout(() => uni.navigateBack(), 500)
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				})
			}
		}
	}
</script>

• 使用相同的方法创建壁纸列表管理

结语

这样简单的壁纸小程序就完成了，通过这个小项目可以了解uni-app、uniCloud的开发形式。

源码地址：ext.dcloud.net.cn/plugin?id=1…