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

一,创建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.mzph.cn/pingmian/10313.shtml

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

相关文章

Codeforces Round 605 (Div. 3) A~D

本人水平不高,开这个专栏主要是督促自己补题,有些题对目前的我来说还比较难,还补不动,等以后能力上来了再补。。。 原题链接:Dashboard - Codeforces Round 605 (Div. 3) - Codeforces 目录 A. Three Friends B. Sn…

Linux端口状态含义(未完

前言 在面试或者企业实战中常见的命令 那就是查询端口命令是哪个 1. 前沿知识 查询端口命令:lsof -i 查询端口的状态:netstat 命令参数说明-tTCP端口-uUDP端口-p进程表示符和程序名称-n显示IP 常用的netstat结合grep进行精准查询 添加链接描述 添…

C# 快速把List<string>集合转换成一个字符串

在C#中&#xff0c;要将List<string>类型的集合转换成一个单一的字符串&#xff0c;其中各元素由特定的分隔符连接&#xff0c;通常推荐使用String.Join()方法。 简单的示例&#xff1a; 使用for循环 代码如下&#xff1a; using System; using System.Collections.G…

【Linux:lesson1】的基本指令

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f697;打开Xshell&#xff0c;登陆root…

初识java--javaSE(3)--方法,递归,数组,

文章目录 一 方法的使用1.1 什么是方法&#xff1f;main方法注意事项 1.2 方法的调用嵌套调用在方法调用时形参与实参的关系&#xff1a; 1.3 方法的重载方法重载的意义&#xff1f;总结方法重载&#xff1a;方法签名&#xff1a; 二 递归什么是递归&#xff1f;递归的精髓&…

蛋糕店做配送小程序的作用是什么

蛋糕烘焙除了生日需要&#xff0c;对喜吃之人来说往往复购率较高&#xff0c;除线下实体店经营外&#xff0c;更多的商家选择线上多种方式获客转化、持续提高生意营收&#xff0c;而除了进驻第三方平台外&#xff0c;构建品牌私域自营店铺也同样重要。 运用【雨科】平台搭建蛋…

ABAP跨client的RFC调用

1、SM59配置连接 2、创建需要调用的函数&#xff0c;ZGET_TM_LIST&#xff0c;开启远程启用模块 3、新建调用程序 DATA:L_MSG TYPE C,LSH(30) TYPE C. DATA:IT_ZSTM_LIST TYPE STANDARD TABLE OF ZSTM_LIST WITH HEADER LINE.CALL FUNCTION ZGET_TM_LIST DESTINATION ZTEST_R…

C# 判断Access数据库中表是否存在,表中某个字段是否存在

在C#中判断Access数据库中某个表是否存在以及该表中某个字段是否存在&#xff0c;可以通过以下步骤实现&#xff1a; 判断表是否存在 可以使用ADO.NET中的OleDbConnection.GetOleDbSchemaTable方法来获取数据库的架构信息&#xff0c;并检查特定的表是否存在。 using System…

【回溯 网格 状态压缩】52. N 皇后 II

本文涉及知识点 回溯 网格 状态压缩 LeetCode52. N 皇后 II n 皇后问题 研究的是如何将 n 个皇后放置在 n n 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回 n 皇后问题 不同的解决方案的数量。 示例 1&#xff1a; 输入&#x…

python3如何安装bs4

在python官网找到beautifulsoup模块的下载页面&#xff0c;点击"downloap"将该模块的安装包下载到本地。 将该安装包解压&#xff0c;然后在打开cmd&#xff0c;并通过cmd进入到该安装包解压后的文件夹目录下。 在该文件目录下输入"python install setup.py&quo…

信息系统架构模型_3.企业数据交换总线

1.企业数据交换总线 实践中&#xff0c;还有一种较常用的架构&#xff0c;即企业数据交换总线&#xff0c;即不同的企业应用之间进行信息交换的公共通道&#xff0c;如图1所示。 图1 企业数据交换总线架构 这种架构在大型企业不同应用系统进行信息交换时使用较普遍&am…

前端笔记-day05

文章目录 01-结构伪类选择器02-结构伪类选择器-公式用法03-伪元素选择器04-盒子模型-组成05-盒子模型-边框线06-盒子模型-单方向边框线07-盒子模型-内边距08-盒子模型-padding多值写法09-盒子模型-尺寸计算10-盒子模型-版心居中11-清除默认样式12-元素溢出overflow13-外边距合并…

uniapp解决后端传来的id太长导致精度丢失(超过16位的数字会变成0000)的问题

办法一&#xff1a;让后端把id传成字符串类型&#xff1b; 办法二&#xff1a;用jsonBig转换为bigInt数字类型&#xff1a; 1.在项目根目录打开命令行输入命令安装jsonBig插件&#xff1a; npm install json-bigint1.0.02.在封装的请求中使用插件&#xff0c;核心是在uni.re…

嵌入式基础课程配套电机FOC伺服电机开发板AT32F403磁编码IMU姿态

嵌入式基础课程配套电机FOC伺服电机开发板AT32F403磁编码IMU姿态 带你入门嵌入式有二十多年开发经验的老技骨做技术支持整个开发包硬件包括电机2205&#xff0c;支持12V到24V宽输入&#xff0c;配套12V2A电源。包装原理图和PCB嵌入式软件嵌入式基础课程 带你入门嵌入式 电机FO…

即插即用篇 | YOLOv8引入局部自注意力 HaloAttention | 为参数高效的视觉主干网络扩展局部自注意力

本改进已集成到 YOLOv8-Magic 框架。 我们提出了Axial Transformers,这是一个基于自注意力的自回归模型,用于图像和其他组织为高维张量的数据。现有的自回归模型要么因高维数据的计算资源需求过大而受到限制,要么为了减少资源需求而在分布表达性或实现的便捷性上做出妥协。相…

[力扣题解]51. N皇后

题目&#xff1a;51. N皇后 思路 回溯法 代码 class Solution { public:vector<vector<string>> result;bool right(int row, int col, int n, vector<string>& board){int i, j;// 不能同行, 这里我又没有写错&#xff0c;为什么结果不对呢&#xf…

嵌入式C语言高级教程:实现基于STM32的无人机飞控系统

无人机飞控系统是无人机的大脑&#xff0c;负责处理来自各种传感器的数据并控制无人机的飞行。本教程将指导如何在STM32微控制器上实现一个基础的无人机飞控系统。 一、开发环境准备 硬件要求 微控制器&#xff1a;STM32F405RGT6&#xff0c;因其高性能和大量的输入输出接口…

C语言中的控制语句:深入解析与案例实践上

在C语言中&#xff0c;控制语句是编程的核心&#xff0c;它们允许我们根据条件或循环的逻辑来决定代码的执行流程。本文将详细探讨C语言中的几种主要控制语句&#xff0c;并通过案例代码来展示其实际应用。 一、条件语句 条件语句根据给定的条件来决定执行哪段代码。C语言中最常…

机器学习算法应用——K近邻分类器(KNN)

K近邻分类器&#xff08;KNN&#xff09;&#xff08;4-2&#xff09; K近邻分类器&#xff08;K-Nearest Neighbor&#xff0c;简称KNN&#xff09;是一种基本的机器学习分类算法。它的工作原理是&#xff1a;在特征空间中&#xff0c;如果一个样本在特征空间中的K个最相邻的样…

交通数据三维可视化呈现与可视化分析系统开发(附程序源码)

目录 01 系统介绍 02 功能介绍 文件管理功能 模型研究 可视化分析功能 今天分享一套“交通数据三维可视化呈现与可视化分析系统”&#xff0c;并开放程序源代码下载&#xff0c;内容涉及开源空间数据库的使用、三维引擎的二次开发、矢量和栅格数据管理、交通流量分析模型框…