uniapp管理后台编写,基于uniadmin和vue3实现uniapp小程序的管理后台

news2024/12/28 3:07:09

一,创建uniAdmin项目

打开开发者工具Hbuilder,然后点击左上角的文件,点新建,点项目。如下图。

选择uniadmin,编写项目名,然后使用vue3

记得选用阿里云服务器,因为最便宜

点击创建,等待项目创建

二,关联云服务空间并部署项目

2-1,新建云服务空间

项目创建好以后,会自动弹起下图所示的弹窗

这里用来关联我们的服务空间。我们这里建议大家点击新建,去开通新的服务空间。

新建我们使用阿里云的服务,因为是最便宜的,基本上够我们使用了。

支付后等待创建,创建大改10分钟左右。创建好以后如红色框里,就是我们新建的服务空间。

2-2,关联云服务空间

我们上面创建好以后,回到项目,点击一下刷新,然后选中我们新建的云服务空间

再点击下一步,全部勾选,然后点击开始部署

弹出的提示框也是点击替换

然后就是等待安装一些依赖

可以看到我们项目所需的一些东西,都是自动的帮我们安装


安装依赖可能比较慢,我们耐心等待即可。初始化完成如下

三,运行uniAdmin项目

3-1,运行项目

点击最上面工具栏的运行,然后运行到浏览器,选择自己电脑上的浏览器即可。

然后等待项目编译

编译完成后,会自动在浏览器里为我们打开uniadmin,如果没有自动打开,就点击箭头所示的Local,就是本地测试网址。

打开后如下

3-2,注册管理员账号

官方给的提示是:进入创建管理员页面(仅允许注册一次管理员账号)
首次使用,可以通过登录页面底部链接创建一个超级管理员(仅允许创建一次),该接口会判断系统里如果有 admin 角色的用户,就不再允许添加新的超级管理员。

所以注册的时候,一定要记好自己的账号和密码,建议大家和石头哥保持一致。 账号密码都用admin123

注册成功后就可以登录admin了

登录后的页面如下

接下来我们就可以去修改uniadmin的代码来实现我们自己个性化的管理后台了

3-3,项目目录结构

我们先来大致的熟悉下项目目录,不用死记硬背。我们后面只看我们用到的地方就行。 没有用到的可以不用管。

项目目录结构

┌── uniCloud                            # 云端文件
│   │── cloudfunctions                  # 云函数相关文件
│   └── database                        # 数据库相关文件
├── common
│   │── admin-icons.css                 # admin-icons 图标样式
│   │── theme.scss                      # 换肤功能样式
│   │── uni.css                         # 公共样式
│   └── uni-icons.css                   # icon样式
├── components                          # 自定义组件
├── i18n                                # 国际化语言包目录
├── js_sdk                              # js sdk目录
├── pages                               # 页面
│   │── demo                            # demo相关的页面
│   │── error                           # 404页面
│   │── index                           # 首页
│   │── system                          # 系统管理
│   │   │── app                         # 应用管理
│   │   │── menu                        # 菜单管理
│   │   │── permission                  # 权限管理
│   │   │── role                        # 角色管理
│   │   │── safety                      # 安全审计
│   │   │── tag                         # 标签管理
│   │   └── user                        # 用户管理
│   └── uni-stat                        # uni统计
│       │── channel                     # 渠道(app)
│       │   │── channel.vue             # 页面(下同)
│       │   └── fieldsMap.js            # 字段配置(下同)
│       │── device                      # 设备统计
│       │   │── activity                # 渠道/场景分析
│       │   │   │── activity.vue
│       │   │   └── fieldsMap.js
│       │   │── comparison              # 平台对比
│       │   │   │── comparison.vue
│       │   │   └── fieldsMap.js
│       │   │── overview                # 今日概览
│       │   │   │── overview.vue
│       │   │   └── fieldsMap.js
│       │   │── retention               # 留存
│       │   │   │── retention.vue
│       │   │   └── fieldsMap.js
│       │   │── stickiness              # 粘性
│       │   │   │── stickiness.vue
│       │   │   └── fieldsMap.js
│       │   └── trend                   # 趋势分析
│       │       │── trend.vue
│       │       └── fieldsMap.js
│       │── error                       # 错误分析
│       │   │── error.vue
│       │   └── fieldsMap.js
│       │── page-content                # 内容统计
│       │   │── page-content.vue
│       │   └── fieldsMap.js
│       │── event                       # 事件分析
│       │   │── event.vue
│       │   └── fieldsMap.js
│       │── page-ent                    # 入口页
│       │   │── page-ent.vue
│       │   └── fieldsMap.js
│       │── page-res                    # 受访页
│       │   │── page-res.vue
│       │   └── fieldsMap.js
│       │── page-rule                   # 页面规则
│       │   └── page-rule.vue
│       │── pay-order                   # 支付统计
│       │   │── funnel                  # 支付/漏斗分析
│       │   │   │── funnel.vue
│       │   │   └── fieldsMap.js
│       │   │── list                    # 支付/订单明细
│       │   │   │── list.vue
│       │   │── overview                # 支付/订单概况
│       │   │   │── overview.vue
│       │   │   └── fieldsMap.js
│       │   └── ranking                 # 支付/用户价值排行
│       │       └── ranking.vue
│       │── scene                       # 场景值(小程序)
│       │   │── scene.vue
│       │   └── fieldsMap.js
│       └── user                        # 用户统计
│           │── activity                # 渠道/场景分析
│           │   │── activity.vue
│           │   └── fieldsMap.js
│           │── comparison              # 平台对比
│           │   │── comparison.vue
│           │   └── fieldsMap.js
│           │── overview                # 今日概览
│           │   │── overview.vue
│           │   └── fieldsMap.js
│           │── retention               # 留存
│           │   │── retention.vue
│           │   └── fieldsMap.js
│           │── stickiness              # 粘性
│           │   │── stickiness.vue
│           │   └── fieldsMap.js
│           └── trend                   # 趋势分析
│               │── trend.vue
│               └── fieldsMap.js
├── static
├── store                               # vuex
├── uni_modules                         # uni_modules 插件目录
├── windows
│   │── component                       # 项目中使用的组件
│   │── leftWindow.vue                  # 左侧窗口(菜单栏)
│   └── topWindow.vue                   # 顶部窗口(导航栏)
├── admin.config.js                     # 系统配置(配置导航,菜单等)
├── App.vue
├── changelog.md                        # 更新日志
├── main.js
├── mainfest.json
├── package.json
├── pages.json                          # 页面配置
├── postcss.config.js                   # postcss 配置(浏览器兼容性)
├── uni.scss
└── vue.config.js                       # vue配置文件

3-4,登录管理后台

我们登录后如下

上图的页面,其实就是我们常用的管理后台的窗体, 窗体分为三个部分,topWindow 顶部窗口(导航栏),leftwindow 左侧窗口(菜单栏),右侧的内容主窗体。这就是我们的经典布局。


我们在正式写代码前,可以先做一些简单的修改

3-5,修改项目图标

可以看到我们的项目图标是默认的,我们可以去修改下我们的图标

顶部导航的图标是在admin.config.js文件进行配置

我们可以在static里上传我们自己的图标,如qcl.png

然后在admin.config.js替换我们的图标

然后点击保存,就可以看到后台同步的替换为我们的图标了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1664787.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AI跟踪报道第41期-新加坡内哥谈技术-本周AI新闻:本周Al新闻: 准备好了吗?事情即将変得瘋狂

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

在Spring Boot应用安装SSL证书

目录 前提条件 步骤一:下载SSL证书 步骤二:在Spring Boot安装SSL证书 步骤三:验证SSL证书是否安装成功 前提条件 已通过数字证书管理服务控制台签发证书SSL证书绑定的域名已完成DNS解析,即您的域名与主机IP地址相互映射已在W…

ASP.NET学生信息管理系统

摘 要 本文介绍了在ASP.net环境下采用“自上而下地总体规划,自下而上地应用开发”的策略开发一个管理信息系统的过程。通过分析某一学校学生管理的不足,创建了一套行之有效的计算机管理学生的方案。文章介绍了学生管理信息系统的系统分析部分&#xff0c…

【C++ | 函数】默认参数、哑元参数、函数重载、内联函数

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰:2024-05-04 1…

Linux —— 信号(4)

Linux —— 信号(4) 信号的处理用户态和内核态 信号的捕捉sigaction sa_mask字段volatileSIGCHLD信号 我们今天接着来看信号: 信号的处理 信号的处理简单一句话就是在内核态处理的。 用户态和内核态 用户态和内核态是操作系统和计组中的概…

MySQL系列之索引

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄 🌹简历模板、学习资料、面试题库、技术互助 🌹文末获取联系方式 📝 往期热门专栏回顾 专栏…

【声呐仿真】学习记录2-运行ROV(带camera、sonar、dvl等传感器)例程

【声呐仿真】学习记录2-运行ROV(带camera、sonar、dvl等传感器)例程 前言第一阶段-学习Gazebo第二阶段-学习URDF、xacro第三阶段-寻找例程跑一个rexrov示例程序1.uuvsimulator quick_start2.能键盘控制的示例程序(失败)3.能键盘控…

[初阶数据结构】单链表

前言 📚作者简介:爱编程的小马,正在学习C/C,Linux及MySQL。 📚本文收录于初阶数据结构系列,本专栏主要是针对时间、空间复杂度,顺序表和链表、栈和队列、二叉树以及各类排序算法,持…

【Python系列】字节串与字典字节串

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【高校科研前沿】北师大陈晋教授团队在遥感顶刊发表最新成果:ClearSCD模型:在高空间分辨率遥感影像中综合利用语义和变化关系进行语义变化检测

01文章简介 论文名称:The ClearSCD model: Comprehensively leveraging semantics and change relationships for semantic change detection in high spatial resolution remote sensing imagery(ClearSCD模型:在高空间分辨率遥感影像中综合…

Nextcloud私有云盘-重新定义云存储体验

Nextcloud私有云盘-重新定义云存储体验 1. 什么是Nextcloud ​ Nextcloud是一个开源的云存储和协作平台,旨在为个人用户、企业和团队提供安全、隐私保护的数据存储和共享解决方案。它允许您在不同设备之间同步、共享文件,提供了强大的协作工具和应用生…

VSCode:设置顶部文件标签页滚动条的宽度

使用VSCode打开多个文件后,顶部的文件标签可以通过滚动条进行滚动,但是缺点是该滚动条太窄了,不好选择。 可以通过如下方法修改改滚动条的宽度: 1.点击设置 2.选择工作台->编辑管理->Title Scrollbar Sizing->Large 3.可…

MSP430环境搭建

1.下载ccs编译器 注意:安装路径和工作路径不能出现中文! 没有说明的步骤就点next即可! 1.1下载适合自己电脑的压缩包。 下载好压缩包后解压,点击有图标进行安装。 1.2创建一个文件夹用于安装编译器位置 选择安装地址&#xff0…

FFmpeg常用API与示例(四)——过滤器实战

1.filter 在多媒体处理中,filter 的意思是被编码到输出文件之前用来修改输入文件内容的一个软件工具。如:视频翻转,旋转,缩放等。 语法:[input_link_label1]… filter_nameparameters [output_link_label1]… 1、视…

Mybatis操作数据库的两种方式:原生API

mybatis操作数据的两种方式:原生api和mapper代理对象 1.mybatis的api提供的方法 insert() 增加 delete() 删除 update() 更新 selectOne() 返回一个数据 selectList() 返回多个数据,结果类型为List selectMap() 返回多个数据&…

YOLOv5-7.0改进(四)添加EMA注意力机制

前言 关于网络中注意力机制的改进有很多种,本篇内容从EMA注意力机制开始! 往期回顾 YOLOv5-7.0改进(一)MobileNetv3替换主干网络 YOLOv5-7.0改进(二)BiFPN替换Neck网络 YOLOv5-7.0改进(三&…

net 7部署到Linux并开启https

1.修改代码设置后台服务运行 安装nuget包 Install-Package Microsoft.Extensions.Hosting.WindowsServices Install-Package Microsoft.Extensions.Hosting.Systemd在Program代码中设置服务后台运行 var builder WebApplication.CreateBuilder(args);if (System.OperatingS…

x6.js bug记录-流程图json数据导入进来之后拖拽节点,节点直接飞走了

添加josn数据进来之后虽然能正常渲染,但是只要一拖拽,则节点就直接飞走了,看不到了。 找了一下午的问题,最后发现。保存的json坐标位置是字符串类型,而这边的位置必须是数字类型。如下: {position: { x: &…

词令蚂蚁新村今日答案:微信小程序怎么查看蚂蚁新村今天问题的正确答案?

微信小程序怎么查看蚂蚁新村今天问题的正确答案? 1、打开微信,点击搜索框; 2、打开搜索页面,选择小程序搜索; 3、在搜索框,输入词令搜索点击进入词令微信小程序; 4、打开词令微信小程序关键词口…

基于Matplotlib的模型性能可视化工作

一、项目简介 本项目是科技考古墓葬识别工作的中间过程,因为需要大量复用所以另起一章好了。 主要涉及到数据读取、数据可视化和少量的数据处理过程。 二、相关知识 PandasMatplotlib 三、实验过程 1. 数据探索性分析 1.1 准备工作–导入模块 import pandas…