更新记录

2.2.5（2021-02-01） 下载此版本

修复密码修改的兼容问题

2.2.4（2021-01-31） 下载此版本

修复日期加减计算默认日期为0时区问题，迁移uniCloud云开发目录。

2.2.3（2020-12-15） 下载此版本

修复宽屏适配兼容问题

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

项目简介

BaseCloud是一套基于uniapp、uniCloud、uni-id的全栈开发框架，不依赖任何第三方框架，极度精简轻巧。

在开发前端界面时，除了适配移动端外，它对PC端也做了良好的适配；

在开发云函数时，它可以为您提供拦截器配置、路由管理、分页、列表、单数据快速查询等功能。除此之外，对于一些业务开发中的常用函数也已做好封装，拿来即用。

在BaseCloud的初始化项目模板中，为您实现了贯穿前后端的业务模块：管理员登录、用户管理、菜单管理、角色与权限管理、操作日志、系统参数配置等项目通用的基础后台管理功能，这一切全都基于云函数开发。

项目价值

基于BaseCloud的快速开发UI样式库，可以快速拼装前端界面，高还原度实现设计图效果，兼顾高效与灵活。

基于BaseCloud的云函数公用模块，你可以轻松实现单云函数、多云函数的路由管理、请求拦截管理与权限控制、常用业务函数快速开发。

基于BaseCloud的客户端缓存管理机制，你可以大幅度减少应用的云函数重复调用请求，未来云函数开始计费后，至少节省应用50%的流量费用。

基于BaseCloud的管理后台基础项目框架，你可以快速初始化一套自带用户、菜单、角色、权限、操作日志、系统参数管理的管理后台项目，在此基础上开始你的项目开发。

当然，这一切都只是刚刚开始，未来我们会基于BaseCloud推出更多贯穿前后端的业务模板，只要您的项目是基于BaseCloud框架，所有的业务模板拿来即用，5分钟快速集成到项目内，无需重复开发前端和后端。

对于开发者而言，基于BaseCloud的全栈快速开发框架，你可以封装自己的贯穿前后端的业务模块，发布到付费业务模块插件市场。 对于企业而言，基于BaseCloud的全栈快速开发框架，无需再费心招募不同工种不同技术栈的工程师，您只需要找到熟悉BaseCloud的工程师，让他们各自独立负责一个业务模块。 未来基于BaseCloud的项目，将会被拆分成几十个甚至上百个独立的模块，每个模块由一个工程师从前端到后端全链路负责，而他只需要懂一门开发语言：javascript，熟悉一个框架：BaseCloud。 项目交付后，您更无须担心后期维护与迭代更新，基于BaseCloud统一的开发规范，您可以很轻松找到随时能够接管您的项目的工程师。

使用说明文档

BaseCloud快速上手使用说明文档 <<

安装方式

方式一：插件市场使用HbuilderX导入示例项目。

方式二：从Gitee clone：Gitee链接，欢迎star、fork，关注最新动态 <<

https://gitee.com/phoooob/BaseCloud.git

方式三：从npm安装：npm地址 <<

npm i basecloud

更新升级

BaseCloud一键更新升级方法说明 <<

业务模块快速集成 - 持续开发中

1. 用户端-手机号码登录业务模块 <<
2. 用户端-APP版本检测更新业务模块（含管理端功能） <<
3. 管理端-数据字典业务模块 <<
4. 统一下单支付业务模块 <<

BaseCloud项目构成

1. common>base-cloud.scss 基础样式库，适配移动端和PC端，22kb。
2. common>js>base-cloud-client.js 客户端SDK，14.2kb。
3. cloudfunctions>common>base-cloud 云函数公共模块，13.9kb。
4. components PC端常用业务组件目录

项目预览

管理后台演示项目地址：https://base-cloud.joiny.cn <<

账号：admin 密码：123123123

快速开始

1. 请先下载BaseCloud管理后台项目模板，并导入到Hbuilder中
2. 右键点击cloudfunctions目录，选择一个服务空间，支持阿里云、腾讯云。
3. 找到cloudfunctions目录下的db_init.json数据库初始化文件，右键选择“初始化数据库”。
4. 右键点击cloudfunctions目录，选择上传所有云函数以及公共模块。
5. 点击运行到浏览器，运行成功后，在浏览器中进入登录页，初始账号：admin ，初始密码：123123123
6. !!!!特别注意：如果您初次从插件市场导入项目，由于npm install创建的软链接失效，修改公共模块中的代码将不会同步更新到云函数中， 例如：修改common > base-cloud > config.js 中的拦截器配置信息，amdin函数中的node_modules > base-cloud > config.js 可能不会同步更改， 如果遇到这种情况请删除admin > node_modules和admin > package-lock.json,然后重新安装admin函数的公共模块：

在要引入公用模块的云函数目录，执行npm init -y生成package.json文件。 执行npm install ../common/base-cloud引入base-cloud模块。

BaseCloud用户交流QQ群：

如果你想入手云开发，本框架是绝佳的学习素材和项目快速搭建方案，学习过程中有问题，快来群里提问，专业客服妹子秒回复。

群号：649807152

点击链接，直接加入qq群 <<

项目结构介绍

请务必对照仔细浏览项目目录介绍，您阅读本项目的文档将会事半功倍。

服务端项目目录

├── cloudfunctions───────────# 云函数目录
│       └── admin──────────────────# 管理后台业务函数
│             └── controller──────────────────# 管理后台业务函数根目录
│                   └── menu.js────────────────────────# 菜单管理业务函数
│                   └── operateLog.js──────────────────# 操作日志业务函数与接口
│                   └── paramConfig.js─────────────────# 系统参数配置业务函数
│                   └── role.js────────────────────────# 角色管理业务函数
│             └── node_modules──────────────────# admin函数依赖公共模块
│             └── index.js──────────────────────# admin函数入口文件
│       └── api────────────────────# 用户端业务函数
│       └── user-center────────────# 用户相关业务函数
            └── user.js────────────────────────# 用户管理业务函数
│       └── clearlogs──────────────# 过期操作日志清理定时任务函数
│       └── curl──────────────# URL化云函数
│       └── common─────────────────# 公共模块
│               └── base-cloud──────────────────# base-cloud公共模块
│                       └── intercepters──────────────────# 拦截器函数目录
│                               └── loginInter.js─────────────────# 用户登录状态拦截拦截函数
│                               └── authInter.js──────────────────# 用户权限拦截拦截函数
│                       └── base-cloud-config.js──────────────────# 公共模块配置文件，注册全局拦截器（重要！）       
│                       └── index.js──────────────────────# BaseCloud公共模块源码，开发阶段无需关心    
│       └── db_init.json───────────# 数据库初始化文件，包含数据表和初始化数据

客户端项目目录

├── cloudfunctions────────# 云函数目录...
├── common────────────────# 静态资源文件目录
│       └── js──────────────────# js文件目录
│             └── base-cloud-client.js─────────────────# BaseCloud客户端SDK
│             └── clipBoard.js─────────────────────────# 支持web端复制API
│             └── md5.js───────────────────────────────# MD5加密函数，用于密码加密传输，客户端数据缓存等场景
│       └── base-cloud.scss────────────────────# BaseCloud样式类库入口文件
│       └── base-cloud-font.scss───────────────# BaseCloud图标样式文件
│       └── base-cloud-mobile.scss─────────────# BaseCloud移动端样式文件
│       └── base-cloud-pc.scss─────────────────# BaseCloud适配PC端样式文件
├── pages────────────────# 页面
├── static───────────────# 图片静态资源文件目录
├── uni.scss─────────────# scss变量配置文件

管理后台业务模块云函数目录结构

├── cloudfunctions─────────────────# 云函数目录
        └── user-center──────────────────# 用户相关业务函数
│               └── controller──────────────────# 用户相关业务函数根目录
                        └── user.js────────────────────────# 用户管理业务函数
│                               └── login()──────────────────────────# 登录接口
│                               └── checkToken()─────────────────────# token验证接口
│                               └── logout()─────────────────────────# 退出登录接口
│                               └── changeStatus()───────────────────# 切换用户禁用状态接口
│                               └── info()───────────────────────────# 用户信息查询接口
│                               └── save()───────────────────────────# 保存、更新用户信息接口
│                               └── myInfo()─────────────────────────# 当前用户信息接口
│                               └── modify()─────────────────────────# 修改当前用户信息(含密码)接口
│                               └── list()───────────────────────────# 用户列表查询接口
│                               └── delete()─────────────────────────# 删除用户接口
│       └── admin──────────────────# 管理后台业务函数
│               └── controller──────────────────# 管理后台业务函数根目录
│                       └── menu.js────────────────────────# 菜单管理业务函数
│                               └── listByType()─────────────────────# 根据菜单类型查询菜单列表接口
│                               └── globalData()─────────────────────# 查询登录用户信息、权限菜单列表接口
│                               └── info()───────────────────────────# 查询菜单信息接口
│                               └── save()───────────────────────────# 保存、更新菜单信息接口
│                               └── delete()─────────────────────────# 删除菜单信息接口
│                               └── list()───────────────────────────# 菜单列表查询接口
│                       └── operateLog.js──────────────────# 操作日志业务函数与接口
│                       └── paramConfig.js─────────────────# 系统参数配置业务函数
│                               └── info()───────────────────────────# 查询参数配置项信息接口
│                               └── save()───────────────────────────# 保存、更新参数配置项信息接口
│                               └── delete()─────────────────────────# 删除参数配置项接口
│                               └── list()───────────────────────────# 参数配置项列表查询接口
│                       └── role.js────────────────────────# 角色管理业务函数
│                               └── info()───────────────────────────# 查询角色信息接口
│                               └── save()───────────────────────────# 保存、更新角色信息接口
│                               └── delete()─────────────────────────# 删除角色接口
│                               └── list()───────────────────────────# 角色列表查询接口
│                               └── options()────────────────────────# 角色选项列表查询接口（供用户角色选择时使用）
│                       
│               └── node_modules──────────────────# admin函数依赖公共模块
│               └── index.js──────────────────────# admin函数入口文件

PC端组件使用说明文档

【auth 组件】

用于用户权限控制，当用户拥有操作权限时展现，否则不展现该元素。

关于权限控制的业务逻辑：用户登录成功后，读取该用户所属角色拥有的权限菜单列表，存储到本地，键名为menuList，权限判断就是基于menuList进行的判断。

<auth url="user-center/user/save">

   <navigator url="/pages/user/userEdit">编辑</navigator> 

</auth>

【auth-btn 组件】

用于用户权限控制，当用户拥有操作权限时展现，否则不展现该元素。点击按钮时，会发送请求。

<auth-btn url="user-center/user/changeStatus" :params="{id:1}">
   禁用
</auth-btn>

【auth-nav 组件】

用于用户权限控制，当用户拥有操作权限时展现，否则不展现该元素。点击按钮时，会进行页面跳转。

<auth-nav :href="`/pages/user/userEdit?id=${item._id}`" url="user-center/user/save" >
   编辑
</auth-nav>

【switch-btn 组件】

用于权限控制的开关切换按钮，无权限仅展示，不可发送请求。

【switchs 组件】

【checkboxs 组件】

复选框组件，用于多选，支持v-model

<checkboxs title="角色" :list="roleList" name="x.roleIds|请选择角色" :value="data.roleIds" 
titleName="x.roleNames" titleKey="name" valueKey="_id"></checkboxs>

【radios 组件】

单选框组件，用于单选，支持v-model

<radios title="菜单类型" :list="menuTypeList" :value="data.type" 
name="x.type|菜单类型" @change="chooseMenuType"></radios>

【multi-selects 组件】

下拉多选组件，用于多选，支持v-model，可以搜索关键字筛选

<multi-selects title="角色" :list="roleList" name="x.roleIds|请选择角色" 
:value="data.roleIds" titleName="x.roleNames" titleKey="name" valueKey="_id"></multi-selects>

【selects 组件】

下拉单选组件，用于单选，支持v-model，可以搜索关键字筛选

<selects title="父级菜单" :list="parentMenuList" name="x.parentId" 
:value="data.parentId" titleKey="name" valueKey="_id"></selects>

【inputs 组件】

输入框组件，type支持hidden类型，输入框有内容时，可以点击清空图标清空。

<inputs name="x.name|用户名" title="用户名" :value="data.name" :hiddenValue="data._id"></inputs>

【textareas 组件】

<textareas title="权限地址" @blur="inputBlur" name="x.url|权限地址" 
:value="data.url" placeholder="多个权限地址请用英文分号隔开"></textareas>

【datepicker 组件】

【conditions 组件】

分页筛选条件组件

<conditions :conditions="conditions" :list="conditonList" @confirm="submitSearch"></conditions>

data() {
    return {
        conditonList:[
            {title:"用户名",name:"name"}, //默认是输入框类型的，只需提供这两个属性即可
            //如果是下拉选择类型的，则需要提供list属性，两个键值对：title、value
            {title:"状态",name:"status",type:"select",list:[{title:"正常",value:0},{title:"禁用",value:1}]}, 
            //日期类型的筛选条件：可以配置name和endName，表示开始和结束时间，timeType是指日期格式，valueType可选为string字符串类型或timestamp时间戳类型（推荐）：
            /**
             * rangetime 时间范围，精确到分钟
             * range 时间范围，精确到天
             * time 时间，小时：分钟
             * date 日期，年-月-日
             * datetime 日期时间，精确到分钟
             */
            //showSeconds属性表示是否显示秒，任何日期格式都可以搭配这个属性使用。
            {title:"时间",name:"startTime",endName:"endTime",type:"time",timeType:"rangetime",showSeconds:true,valueType:'timestamp'},
        ],
        conditions:{
            name : ""
        }
    }
},

【copy 组件】

一键复制的功能

<copy :text="data.text" :showIcon="false"></copy>

【empty 组件】

<empty :list="list" :loading="loading"></empty>

【images 组件 - 已废弃，由files组件替代】

图片显示、预览组件

【files 组件 】

文件显示、预览组件，支持图片、视频、音频三种类型的文件

【labels 组件】

表单标题组件，主要为了对齐其他的表单布局使用

【layout 组件】

布局组件，所有页面使用

【mores 组件】

当文本内容为多行时，只显示一行，点击该文字，可以展示显示全部，再次点击则收起。

<mores>{{item.content}}</mores>

【paginate 组件】

分页器组件，需要传入pageNumber（页码）属性和page（分页数据）属性。其中page属性详细结构如下，在BaseCloud的公共模块已对分页数据做了封装，直接调用即可返回该数据结构：

page: {
    pageNumber: 1, //页码
    lastPage: true, //是否最后一页
    totalPage: 1, //总页码
    list: [], //列表数据
    totalRow: 0, //总数据条数
    pageSize: 10 //每页条数
},

该组件会触发一个回调函数@switchPage，返回数据结构如下：

{
    pageSizeChanged : true , //每页数据条数是否切换
    pageNumber :  1 , //页码
    pageSize : 5 //每页数据条数
}

【tables 组件】

<tables :list="list">
    <block slot="thead">
        <th>角色名称</th>
        <th>类型</th>
        <th class="autoWidth">权限描述</th>
        <th>操作</th>
    </block>
    <block slot="tbody">
        <tr v-for="( x , index) in list" :key="index">
            <td>{{x.name}}</td>
            <td>{{x.typeStr}}</td>
            <td>{{x.remark}}</td>
            <td>
                <auth-nav :href="`/pages/role/roleEdit?id=${x._id}`" 
                url="admin/role/info" class="main bold plr5">
                    编辑
                </auth-nav>

                <auth-btn :url="`admin/role/delete?id=${x._id}`" confirm="delete" 
                @success="remove(index)" class="main bold plr5">
                    删除
                </auth-btn>
            </td>
        </tr>
    </block>
</tables>

【upload-images 组件，已废弃，由uploads组件替代】

图片上传组件，直接上传到云储存，支持多张图片上传

【uploads 组件】

图片、音频、视频上传组件，直接上传到云储存，图片支持多张图片上传，其他文件每次只能上传一个，可以多次上传。

//指定valueKey时，需要传入的value为一个数组或字符串数组，数组中每个元素为json对象
<uploads title="头像" name="x.avatar" valueKey="src" type="image" v-model="data.avatar" :count="1"></uploads>

export default {
    data() {
        return {
            data : {
                //可以为数组，也可以为字符串化的数组
                avatar : [
                    {
                        src : 'http://xxxx.com/xx.jpg' , //必填属性
                        size : 2501 //其他选填属性...
                    }
                ]
            }
        }
    },
}

【quote 组件】

一段引用语、提示语

【alerts 弹窗组件】

模态框，弹窗

参考如下代码显示弹窗：

//定义弹窗的ref属性为alerts或其他自定义的名字
<alerts ref="alerts"></alerts>

showAlerts:function(){
    this.$refs.alerts.show(); //显示弹窗
    this.refs.alerts.hide();
}