新手入门
niucloud 采用前后端分离技术，管理端前端使用 element-plus+typescript+vue3.0 开发，系统没有二次封装，开发者只要了解了 elementplus 的组件就可以直接在 niucloud 中开发，简单快捷。同时插件分离，方便扩展
前期准备
开发者需要安装 nodejs >18.0 版本，配置接口访问地址
node.js 下载安装步骤参考本地开发环境搭建中 node.js 安装教程
bash
NODE_ENV = 'development'
# api请求地址,注意后台地址需要加上adminapi
VITE_APP_BASE_URL='http://127.0.0.1:8080/adminapi/'
# 图片服务器地址
VITE_IMG_DOMAIN='http://127.0.0.1:8080'
# 请求时header中token的参数名
VITE_REQUEST_HEADER_TOKEN_KEY='token'
# 请求时header中站点的参数名
VITE_REQUEST_HEADER_SITEID_KEY='site-id'安装依赖，启动项目运行
打开源码目录，路径切换到根目录/admin，在路径中输入 cmd ，回车
运行 node 命令 npm install，安装依赖
bash
npm install
运行 node 命令 npm run dev，启动项目
bash
npm run dev
打开系统后台
如果显示连接不通，说明接口地址配置错误，需要检查地址是否正确或者项目后台是否开启
配置接口地址正确后，启动，系统默认初始账号 admin，初始密码123456
管理端前端目录结构
niucloud 整体与 elementplus 相同，只是增加了插件的设计思路，开发插件只需要在插件目录下开发即可
目录结构
admin/
├── public/ # 公共文件（目前框架使用，插件只需要卸载插件内部）
│ ├── ueditor/ # 百度富文本编辑器资源
│ └── niucloud.ico # 网站图标
├── src/ # 系统功能文件
│ ├── addon/ # 插件模块目录
│ │ └── mall/ # 商城插件模块
│ │ ├── api/ # 插件API接口
│ │ ├── lang/ # 插件语言包
│ │ └── views/ # 插件视图组件
│ ├── app/ # 框架目录
│ │ ├── api/ # 框架功能api接口
│ │ │ ├── addon.ts # 插件相关API
│ │ │ ├── aliapp.ts # 支付宝小程序相关API
│ │ │ ├── app.ts # 应用相关API
│ │ │ ├── auth.ts # 认证授权相关API
│ │ │ ├── cloud.ts # 云编译相关API
│ │ │ ├── dict.ts # 字典相关API
│ │ │ ├── diy.ts # 自定义相关API
│ │ │ ├── diy_form.ts # 万能表单相关API
│ │ │ ├── h5.ts # H5相关API
│ │ │ ├── home.ts # 首页相关API
│ │ │ ├── member.ts # 会员相关API
│ │ │ ├── module.ts # 模块相关API
│ │ │ ├── notice.ts # 消息管理相关API
│ │ │ ├── pay.ts # 帐单列表相关API
│ │ │ ├── pc.ts # PC端相关API
│ │ │ ├── personal.ts # 个人中心相关API
│ │ │ ├── poster.ts # 海报相关API
│ │ │ ├── printer.ts # 打印机相关API
│ │ │ ├── site.ts # 站点相关API
│ │ │ ├── stat.ts # 统计相关API
│ │ │ ├── sys.ts # 系统相关API
│ │ │ ├── tools.ts # 插件开发相关API
│ │ │ ├── upgrade.ts # 升级相关API
│ │ │ ├── user.ts # 用户相关API
│ │ │ ├── verify.ts # 核销相关API
│ │ │ ├── weapp.ts # 微信小程序相关API
│ │ │ ├── wechat.ts # 微信相关API
│ │ │ └── wxoplatform.ts # 微信开放平台相关API
│ │ ├── assets/ # 框架资源文件
│ │ ├── components/ # 框架功能组件
│ │ │ ├── check-restart/ # 检查重启组件
│ │ │ ├── cloud-build/ # 云编译组件
│ │ │ ├── upgrade/ # 升级组件
│ │ │ ├── upgrade-log/ # 升级日志组件
│ │ │ └── user-info-edit/ # 用户信息编辑组件
│ │ ├── lang/ # 框架功能语言文件
│ │ │ ├── en/ # 英文语言包
│ │ │ └── zh-cn/ # 中文语言包
│ │ └── views/ # 框架页面
│ │ ├── app/ # 应用管理页面
│ │ │ ├── authorize.vue # 应用授权页面
│ │ │ ├── index.vue # 应用列表页面
│ │ │ ├── marketing.vue # 应用营销页面
│ │ │ └── upgrade.vue # 应用升级页面
│ │ ├── auth/ # 权限管理页面
│ │ │ ├── components/ # 权限组件
│ │ │ ├── log.vue # 权限日志页面
│ │ │ ├── menu.vue # 菜单管理页面
│ │ │ ├── role.vue # 角色管理页面
│ │ │ ├── site_menu.vue # 站点菜单页面
│ │ │ └── user.vue # 用户管理页面
│ │ ├── channel/ # 渠道管理页面
│ │ │ ├── aliapp/ # 支付宝小程序渠道
│ │ │ ├── app/ # 应用渠道
│ │ │ ├── h5/ # H5渠道
│ │ │ ├── pc/ # PC渠道
│ │ │ ├── weapp/ # 微信小程序渠道
│ │ │ └── wechat/ # 微信渠道
│ │ ├── dict/ # 字典管理页面
│ │ │ ├── components/ # 字典组件
│ │ │ └── list.vue # 字典列表页面
│ │ ├── diy/ # 自定义页面管理
│ │ │ ├── components/ # 自定义组件
│ │ │ ├── edit.vue # 自定义编辑页面
│ │ │ ├── index.vue # 自定义索引页面
│ │ │ ├── list.vue # 自定义列表页面
│ │ │ ├── member.vue # 会员自定义页面
│ │ │ ├── route.vue # 路由自定义页面
│ │ │ ├── tabbar.vue # TabBar管理页面
│ │ │ ├── tabbar_edit.vue # TabBar编辑页面
│ │ │ └── theme_style.vue # 主题样式页面
│ │ ├── diy_form/ # 万能表单管理
│ │ │ ├── components/ # 表单组件
│ │ │ ├── edit.vue # 表单编辑页面
│ │ │ ├── list.vue # 表单列表页面
│ │ │ └── records.vue # 表单记录页面
│ │ ├── error/ # 错误页面
│ │ │ └── 404.vue # 404页面
│ │ ├── finance/ # 财务相关页面
│ │ │ ├── components/ # 财务组件
│ │ │ ├── account.vue # 账户管理页面
│ │ │ ├── cash_out.vue # 提现管理页面
│ │ │ ├── offlinepay.vue # 线下支付页面
│ │ │ ├── pay_detail.vue # 支付详情页面
│ │ │ ├── pay_refund.vue # 支付退款页面
│ │ │ └── refund_detail.vue # 退款详情页面
│ │ ├── home/ # 首页相关页面
│ │ │ ├── edit_personal.vue # 个人信息编辑页面
│ │ │ ├── index.vue # 首页
│ │ │ └── personal.vue # 个人中心页面
│ │ ├── index/ # 控制台页面
│ │ │ ├── app_manage.vue # 应用管理控制台
│ │ │ ├── index.vue # 控制台首页
│ │ │ ├── preview.vue # 预览页面
│ │ │ ├── store.vue # 应用商店页面
│ │ │ ├── tools.vue # 工具页面
│ │ │ └── wxoplatform_callback.vue # 微信开放平台回调页面
│ │ ├── login/ # 登录页面
│ │ │ └── index.vue # 登录页面
│ │ ├── marketing/ # 营销相关页面
│ │ │ ├── components/ # 营销组件
│ │ │ ├── sign_config.vue # 签到配置页面
│ │ │ ├── sign_list.vue # 签到列表页面
│ │ │ ├── verifier.vue # 验证器页面
│ │ │ ├── verify.vue # 验证页面
│ │ │ ├── verify_detail.vue # 验证详情页面
│ │ │ └── verify_index.vue # 验证索引页面
│ │ ├── member/ # 会员管理页面
│ │ │ ├── components/ # 会员组件
│ │ │ ├── balance.vue # 会员余额页面
│ │ │ ├── commission.vue # 会员佣金页面
│ │ │ ├── growth.vue # 会员成长值页面
│ │ │ ├── label.vue # 会员标签页面
│ │ │ ├── level.vue # 会员等级页面
│ │ │ ├── level_edit.vue # 会员等级编辑页面
│ │ │ ├── member.vue # 会员列表页面
│ │ │ ├── member_detail.vue # 会员详情页面
│ │ │ └── point.vue # 会员积分明细页面
│ │ ├── poster/ # 海报管理页面
│ │ │ ├── components/ # 海报组件
│ │ │ ├── edit.vue # 海报编辑页面
│ │ │ └── list.vue # 海报列表页面
│ │ ├── printer/ # 打印机管理页面
│ │ │ ├── edit.vue # 打印机编辑页面
│ │ │ ├── list.vue # 打印机列表页面
│ │ │ ├── template_edit.vue # 模板编辑页面
│ │ │ └── template_list.vue # 模板列表页面
│ │ ├── setting/ # 系统设置页面
│ │ │ ├── components/ # 设置组件
│ │ │ ├── adminlogin.vue # 管理员登录设置页面
│ │ │ ├── agreement.vue # 协议管理页面
│ │ │ ├── agreement_edit.vue # 协议编辑页面
│ │ │ ├── cash_out.vue # 提现设置页面
│ │ │ ├── copyright.vue # 版权设置页面
│ │ │ ├── developer_token.vue # 开发者令牌页面
│ │ │ ├── export.vue # 导出设置页面
│ │ │ ├── growth_rule.vue # 成长规则设置页面
│ │ │ ├── layout.vue # 布局设置页面
│ │ │ ├── login.vue # 登录设置页面
│ │ │ ├── map.vue # 地图设置页面
│ │ │ ├── member.vue # 会员设置页面
│ │ │ ├── notice.vue # 通知设置页面
│ │ │ ├── notice_records.vue # 通知记录页面
│ │ │ ├── oplatform.vue # 开放平台设置页面
│ │ │ ├── pay.vue # 支付设置页面
│ │ │ ├── point_rule.vue # 积分规则设置页面
│ │ │ ├── sms.vue # 短信设置页面
│ │ │ ├── sms_niu.vue # 牛云短信页面
│ │ │ ├── sms_niu_pay_result.vue # 牛云短信支付结果页面
│ │ │ ├── sms_records.vue # 短信记录页面
│ │ │ ├── storage.vue # 存储设置页面
│ │ │ ├── system.vue # 系统设置页面
│ │ │ ├── transfer.vue # 转账设置页面
│ │ │ ├── transfer_scene.vue # 转账场景设置页面
│ │ │ └── weapp.vue # 微信小程序设置页面
│ │ ├── site/ # 站点管理页面
│ │ │ ├── components/ # 站点组件
│ │ │ ├── group.vue # 站点套餐页面
│ │ │ ├── group_edit.vue # 站点套餐编辑页面
│ │ │ ├── info.vue # 站点信息页面
│ │ │ ├── list.vue # 站点列表页面
│ │ │ ├── manage.vue # 站点管理页面
│ │ │ ├── user.vue # 站点用户页面
│ │ │ └── user_info.vue # 站点用户信息页面
│ │ ├── tools/ # 工具页面
│ │ │ ├── addon/ # 插件工具
│ │ │ ├── code/ # 代码管理页面
│ │ │ ├── attachment.vue # 附件管理页面
│ │ │ ├── backup_records.vue # 备份记录页面
│ │ │ ├── cloud_compile.vue # 云编译页面
│ │ │ ├── detection.vue # 检测工具页面
│ │ │ ├── schedule.vue # 定时任务页面
│ │ │ ├── schedule_log.vue # 定时任务日志页面
│ │ │ ├── updatecache.vue # 更新缓存页面
│ │ │ └── upgrade_records.vue # 升级记录页面
│ │ └── wxoplatform/ # 微信开放平台管理页面
│ │ ├── setting.vue # 微信开放平台设置页面
│ │ └── weapp_version.vue # 微信小程序版本管理页面
│ ├── components/ # 系统功能组件
│ │ ├── diy-link/ # 自定义链接组件
│ │ ├── diy-page/ # 自定义页面组件
│ │ ├── editor/ # 编辑器组件
│ │ ├── export-sure/ # 导出确认组件
│ │ ├── heat-map/ # 热区组件
│ │ ├── icon/ # 图标组件
│ │ ├── markdown/ # Markdown编辑器组件
│ │ ├── popover-input/ # 弹窗输入组件
│ │ ├── range-input/ # 范围输入组件
│ │ ├── select-area/ # 地区选择组件
│ │ ├── select-icon/ # 图标选择组件
│ │ ├── spread-popup/ # 展开弹窗组件
│ │ ├── upload-attachment/ # 附件上传组件
│ │ ├── upload-audio/ # 音频上传组件
│ │ ├── upload-file/ # 文件上传组件
│ │ ├── upload-image/ # 图片上传组件
│ │ ├── upload-video/ # 视频上传组件
│ │ ├── verifition/ # 验证组件
│ │ └── video-player/ # 视频播放器组件
│ ├── lang/ # 系统语言包加载
│ │ ├── en/ # 英文语言文件
│ │ ├── zh-cn/ # 中文语言文件
│ │ ├── i18n.ts # 国际化配置
│ │ ├── index.ts # 语言入口文件
│ │ └── language.ts # 语言工具函数
│ ├── layout/ # 系统布局加载（包含整体布局）
│ │ ├── admin/ # 管理员布局
│ │ │ ├── components/ # 管理员布局组件
│ │ │ │ ├── aside/ # 侧边栏组件
│ │ │ │ │ ├── index.vue # 侧边栏入口
│ │ │ │ │ ├── menu-item.vue # 菜单项组件
│ │ │ │ │ └── side.vue # 侧边栏主体
│ │ │ │ ├── header/ # 头部组件
│ │ │ │ │ ├── index.vue # 头部入口
│ │ │ │ │ ├── layout-setting.vue # 布局设置组件
│ │ │ │ │ ├── message.vue # 消息组件
│ │ │ │ │ ├── switch-lang.vue # 语言切换组件
│ │ │ │ │ └── user-info.vue # 用户信息组件
│ │ │ │ └── tabs.vue # 标签页组件
│ │ │ └── index.vue # 管理员布局入口
│ │ ├── admin_simplicity/ # 简约管理员布局
│ │ │ ├── components/ # 简约管理员布局组件
│ │ │ └── index.vue # 简约管理员布局入口
│ │ ├── bussiness/ # 业务布局
│ │ │ ├── components/ # 业务布局组件
│ │ │ ├── index.vue # 业务布局入口
│ │ │ └── layout.json # 业务布局配置
│ │ ├── darkside/ # 暗色侧边栏布局
│ │ │ ├── components/ # 暗色侧边栏布局组件
│ │ │ ├── index.vue # 暗色侧边栏布局入口
│ │ │ └── layout.json # 暗色侧边栏布局配置
│ │ ├── decorate/ # 装修布局
│ │ │ └── index.vue # 装修布局入口
│ │ ├── default/ # 默认布局
│ │ │ ├── components/ # 默认布局组件
│ │ │ │ ├── aside/ # 侧边栏组件
│ │ │ │ │ ├── index.vue # 侧边栏入口
│ │ │ │ │ ├── menu-item.vue # 菜单项组件
│ │ │ │ │ └── side.vue # 侧边栏主体
│ │ │ │ ├── header/ # 头部组件
│ │ │ │ │ ├── index.vue # 头部入口
│ │ │ │ │ ├── layout-setting.vue # 布局设置组件
│ │ │ │ │ ├── switch-lang.vue # 语言切换组件
│ │ │ │ │ └── user-info.vue # 用户信息组件
│ │ │ │ └── tabs.vue # 标签页组件
│ │ │ ├── index.vue # 默认布局入口
│ │ │ └── layout.json # 默认布局配置
│ │ ├── profession/ # 专业版布局
│ │ ├── components/ # 专业版布局组件
│ │ ├── index.vue # 专业版布局入口
│ │ └── layout.json # 专业版布局配置
│ │ └── index.vue # 布局入口
│ ├── router/ # 系统路由加载
│ │ ├── index.ts # 路由入口文件
│ │ └── routers.ts # 路由定义文件
│ ├── stores/ # 系统缓存加载
│ │ ├── modules/ # 状态模块
│ │ └── index.ts # Pinia入口文件
│ ├── styles/ # 系统样式加载
│ │ ├── font/ # 字体文件
│ │ ├── icon/ # 图标样式
│ │ ├── common.scss # 通用样式
│ │ ├── element-plus.scss # Element Plus 样式覆盖
│ │ ├── index.scss # 样式入口文件
│ │ └── tailwind.css # Tailwind CSS 样式
│ ├── types/ # 系统类型定义
│ │ └── global.d.ts # 全局类型声明
│ ├── utils/ # 系统公共函数
│ │ ├── common.ts # 通用工具函数
│ │ ├── directives.ts # 自定义指令
│ │ ├── lodop.ts # 打印插件工具
│ │ ├── qqmap.ts # 腾讯地图工具
│ │ ├── request.ts # 网络请求工具
│ │ ├── storage.ts # 存储工具
│ │ └── test.ts # 测试工具
│ ├── App.vue # 初始化vue
│ ├── main.ts # 初始化运行
│ └── vite-env.d.ts # Vite环境类型声明
├── .env.development # dev模式下配置
├── .env.production # 生产模式配置
├── index.html # 项目入口HTML文件
├── package-lock.json # npm依赖锁定文件
├── package.json # 依赖扩展配置
├── postcss.config.cjs # PostCSS配置文件
├── publish.cjs # 发布脚本
├── README.md # 项目说明文档
├── tailwind.config.cjs # Tailwind CSS配置
├── tsconfig.json # TypeScript配置文件
├── tsconfig.node.json # Node环境TypeScript配置
└── vite.config.ts # Vite构建配置文件页面开发
了解了 niucloud 管理端目录，下一步就是开发具体功能页面，下面通过一个具体功能的增删改查来讲解前端页面的开发过程
当然开发者可以通过代码生成器生成基本的增删改查，这里讲解具体功能设计思路，方便后期改动
商品标签功能页面开发讲解
开发具体功能之前要分析功能所在插件以及模块，如果是框架功能，java 代码是在 niucloud-core 下面功能模块下，管理端前端代码是在 admin 的 app 下的功能模块下。而商品标签是商城插件下商品功能板块的子项功能
商品标签后台接口控制器文件结构
商品标签 admin 前端对应功能的文件结构
商品标签后台控制器接口以及规范
商品标签前端接口文件
后台接口有了，下面就是书写前端接口文件，具体前端接口统一放在插件或者 app 目录的 api 文件夹下。可以统一放到模块文件下，也可以功能独立建立 api 接口文件，这里不做约束，只要后面 vue 文件引入即可。这里的商品品牌是写在了商品模块下
商品标签前端页面文件结构
接口书写完成后，下一步开始写具体功能页面了，这里要确定功能页面的名称，一般按照具体功能命名，比如商品标签列表 label_list
系统配置
开发环境配置
环境变量配置
项目提供了两种环境的配置文件：
-
开发环境 ：
.env.development -
生产环境 ：
.env.production
主要配置项说明：
| 变量名 | 描述 | 开发环境值 | 生产环境值 |
|---|---|---|---|
VITE_APP_BASE_URL |
API 请求基础地址 | http://127.0.0.1:8080/adminapi/ |
/adminapi/ |
VITE_IMG_DOMAIN |
图片服务器域名 | http://127.0.0.1:8080/ |
空（使用相对路径） |
VITE_REQUEST_HEADER_TOKEN_KEY |
请求头中Token的参数名 | token |
token |
VITE_REQUEST_HEADER_SITEID_KEY |
请求头中站点ID的参数名 | site-id |
site-id |
构建配置
项目使用 Vite 作为构建工具，主要配置位于 vite.config.ts 文件中：
import { fileURLToPath, URL } from "node:url"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
base: '',
server: {
host: '0.0.0.0'
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'assets': fileURLToPath(new URL('./src/assets', import.meta.url))
}
}
})