【uniapp】使用admin模板，搭建uniCloud后端管理系统

周国波

已于 2025-02-28 22:31:49 修改

阅读量1.5k

点赞数 29

分类专栏： uniapp 文章标签： uni-app

于 2025-02-26 18:39:47 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45386955/article/details/145874233

版权

uniapp 专栏收录该内容

4 篇文章

订阅专栏

使用admin模板，搭建uniCloud后端管理系统
可用作各种管理系统的开发！

快速目录

1.搭建管理系统
1.1 创建项目
1.2 关联服务空间

2.创建管理页面
2.1 新增页面
2.2 编译查看
2.3 添加数据
2.4 查看数据
2.5 完善管理页面

3.前端请求数据
3.1 新建项目
3.2 新建页面
3.3 更改权限

🔋：效果图(包含增删改查) 在这里插入图片描述

【uniapp】使用admin模板，搭建uniCloud后端

1.搭建管理系统

1.1 创建项目

①.点击文件、新建、项目。
在这里插入图片描述
②.设置项目名称和位置，并选择“uni-admin”和“VUE版本2”，点击创建。

1.2 关联服务空间

①.选中uniCloud文件夹，右键文件夹，在弹出的菜单中选择“关联云服务空间或项目”，然后选择自己的服务空间即可。

如果没有服务空间，新建一个“支付宝云”服务空间就行
（因为使用空间相对大一点）。

在这里插入图片描述

至此，后台管理系统的搭建就完成了。
你可以运行项目，设置管理员账号之后，就可以顺利的访问项目了！

注：这里可能会提示失败，是因为没有配置浏览器位置。
点击设置按钮（快捷键：Ctrl+，）,点击“运行配置”，在右侧窗口设置浏览器的安装路径即可。

2.创建管理页面

2.1 新增页面

①.展开uniCloud目录，点击database，然后右键新建DB Schema，点击确定即可。
在这里插入图片描述
②.系统自动打开json文件，这时需要根据你的需求添加字段，比如我的《首页链接页面》：“properties”里面的“name”和“url”就是用于首页链接的两个参数，“链接名称”和“链接地址”，所以你需要什么就添加什么。

官方Schema的文档编写教程: https://doc.dcloud.net.cn/uniCloud/schema.html#segment

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
	"bsonType": "object",
	"required": [],
	"permission": {
		"read": false,
		"create": false,
		"update": false,
		"delete": false
	},
	"properties": {
		"_id": {
			"description": "ID，系统自动生成"
		},
		"name": {
			"bsonType": "string",
			"title": "链接标题",
			"description": "链接标题",
			"label": "链接标题",
			"trim": "both"
		},
		"url": {
			"bsonType": "string",
			"title": "链接地址",
			"description": "链接地址",
			"label": "链接地址",
			"trim": "right"
		}
	}
}

③.自动生成列表、增加和修改页面代码
选中刚刚新建的schema.json，然后右键选择“schema2code”，选择uniCloud admin 页面，然后点击确定即可。
在这里插入图片描述
④.此处可以编辑页面标题，然后点击“注册”按钮。

⑤.点击“合并”即可。

⑥.系统会自动在home_url下生成三个文件，list、add和edit三个文件。

2.2 编译查看

①.运行到浏览器：运行 => 运行到浏览器 => Chrome/Edge

浏览器输入：http://localhost:8080/admin/#/pages/home_url/list

在这里插入图片描述

未找到集合[home url]对应的schema
注：如果出现以下情况，是因为Schema新建在本地的，需要手动上传到云端并创建数据库。

②.找到database里面的home_url，然后右键选择“上传DB Schema”，在弹出窗口中点击“是”。
在这里插入图片描述

2.3 添加数据

①.进到页面：http://localhost:8080/admin/#/pages/home_url/list
点击“添加”按钮，跳转到“home_url/add”添加页面。
在这里插入图片描述
②.在此输入超链接的标题和地址，点击“提交”即可完成数据的添加。

2.4 查看数据

①.进到页面：http://localhost:8080/admin/#/pages/home_url/list
在这里插入图片描述
②.进到unicloud后台查看数据是否一致

⑤.至此，后端管理系统的搭建就完成了！！！

参考链接：sziitjin博主
https://blog.youkuaiyun.com/sziitjin/article/details/131147467?spm=1001.2014.3001.5506

2.5 完善管理页面

网址记不住，需要一直输入？？？
在这里插入图片描述
①.登录管理后台，点击“系统设置”、“新增一级菜单”

②.依次输入相关数据，“页面URL”是填写页面地址，“序号”是代表菜单的前后

③.提交刷新就可以看到菜单了，但是它的位置不太对，我需要移到“工作管理”页面。
在这里插入图片描述
④.点击“系统设置”，下滑到底，找到“工作管理”的标识“tool”

⑤.点击“超链接管理”的蓝色修改按钮，把“tool”输入进去
⑥.刷新就完成了

后续就可以直接点击左侧菜单进行访问了！

3.前端请求数据

3.1 新建项目

①.文件右键、新建项目就好了
在这里插入图片描述
②.选择默认模板，点击创建

3.2 新建页面

①.主要代码：
template 部分

<navigator class="" v-for="item in url_list">
	<uni-link :href="item.url" :text="item.name"></uni-link>
</navigator>

script 部分

const db = uniCloud.database();

get_url() {
	db.collection('wc_url').get()
		.then(e => {
			console.log('搜索结果:', e.result.data);
			this.url_list = e.result.data
		})
		.catch((err) => {
			console.error('数据库操作失败:', err);
			// 在这里处理错误，例如打印错误信息或给用户提示
		});
},