《堂食点餐》APP前后端全部免费开源啦！

《堂食点餐》云应用是一套在线点餐的行业应用模版，顾客可通过小程序/APP自助扫码订餐、加菜、买单，从而降低门店服务人员工作量及餐厅的运营成本。前端模版源码开源后，获得了很多开发者的好评，为了给开发者带去更好的学习和开发福利，《堂食点餐》后端数据云函数也开源啦！模板的数据云模型和云函数现已上线到数据云预置模型中了。通过导入模型，即可体验云端一体的《堂食点餐》完整案例。

数据云3.0是一个全新的服务端开发运维平台，提供从后端开发、接口联调到上线运营维护等一整套方案。开发者无需考虑数据库和服务器等基础设施，无需关心服务器测试环境的搭建，数据的备份及服务扩容等与业务无关的工作，只需关心逻辑本身。

前端源码

餐饮点餐：一套代码生成APP+小程序，🔗点此查看源码讲解

后端源码

当我们使用《堂食点餐》模板创建应用以后，就可以根据需要导入数据云模型和云函数，具体方式如下：

1、开启数据云和导入模型

进入项目的控制面板，选择“云开发”中的“云设置”。如果是第一次打开这个界面，数据云默认是么有开启的。需要点击欢迎页的开启按钮，即可开启数据云。

开启数据云之后，可以在“云设置”页面进行一些基础设置。接下来重点关注到“数据模型”页面。点击“数据模型”打开相关页面，我们可以自行创建模型和云函数，也可以在右侧“预制模型”中看到“堂食点餐"同名模型。点击右下角绿色小加号，将该模型进行导入。

导入成功以后，可以在左侧看到相应的数据模型已经显示出来。点选模型，可以进入相关模型数据的预览。或者是点击左侧底部的“云函数开发”会弹出云函数管理浮层，浮层中间是使用引导和文档链接。可以点选左侧顶部的绿色按钮进行创作新的云函数， 也可以点选已有的云函数，学习研究预置的函数和接口是如何设计的。

2、体验一下

以左侧的 shop 模型为例，点击模型打开“远程函数”。在远程函数中找到 getInfo 接口，点选后右侧就会展现相关代码实现。此时需要进行一次全量发布，点击右侧上方的发布右侧的下拉箭头，选择全量发布，将刚刚导入的所有模型和云函数发布并生效。接下来可以点击接口联调，打开API接口生成列表。在 shop 分组下找到 getInfo 接口，并可以点击 “Try it out”进行接口测试。

请求后将会看到完整的请求地址。接下来打开App端的源码，找到 script/req.js 大约第三行的位置，将代码中的请求二级前缀更改为项目的真实API路径。例如：

const config = {
    schema: 'https',
-    host: 'a7777777777777-pd.apicloud-saas.com',
+    host: 'a6176110219206-dev.apicloud-saas.com',
    path: 'api'
}

保存后,打开首页开始测试一下: 进入 pages/main_home/main_home.stml 页面，右键点击空白区域，选择“实时预览”。稍等片刻，在右侧的预览区域将会出现预览画面。点击地址后面的复制图标，拿到预览地址。放置到chrome等浏览器中可以观察请求，确认渲染数据的确是来自当前项目的数据云接口的模型数据。

3、云模型 快速上手

云模型也就是云数据库。可以存取业务数据，还提供了数据访问的接口和相关API。

在一个项目中可以建立业务所需要的数据表模型。还是以 shop 为例：打开模型后，是一个表格的形式展现了模型内存在的数据。表头的内容是该模型的字段，表中的数据是模型下保存的记录。可以在头部的按钮中进行添加数据、删除数据、添加字段、设置关联等管理操作。

4、云函数示例代码

获取商家信息

GET /shops/getInfo
shop.getInfo = async()=> {
        try{
            const data = await shop.findOne({where: {"status":1}});
            return {status:0,msg:"成功",data:data};
        }catch(err){
            return {status:1,msg:"获取商家信息失败！",data:err};
        }
};

通过阅读上面的云函数源代码，可以看到一个云函数组成是十分简单的。在编辑状态下，可以看到表单中显示出了一个云函数的一些必要元素：选择 Model ，确定函数类型为“远程函数”，选择请求类型为“get”。完善函数名称和描述，最后设置一个函数（方法）名， 作为函数名称，也是远程接口的访问地址。

在函数中，通过模型的数据操作api来对接口做具体的功能实现：在上面的代码中， 就是从 shop 模型中找到一个 status 为 1的一条符合条件的数据。可以看到，查找条件是以 JSON 的形式放在 where 条件中的。正常情况下，成功找到数据并使用 return 关键字为函数返回值。而这个值也会作为云函数生成的接口的 response 的数据域， 来返回给前端。使用 try-catch 代码块来捕获相关错误，如果查找失败的情况下，并且也会返回给前端。

关于更多的模型方法可以参考🔗数据云3的完整文档。

5、管理后台 快速上手

除了模型和云函数之外，数据云3还提供一个快速后台生成管理系统。

为方便用户使用，我们内置了管理后台模块，用户开启服务后可通过 "https://appid-dev.apicloud-saas.com/admin/" 在测试环境进行访问。

此功能需要全局配置开启session服务以及开通文件存储，请在全局配置进行相关操作。

还是上面的例子：假设当前的 APPID 是 a6176110219206 ，那么对应的管理地址就是：https://a6176110219206-dev.ap... 默认的账号和密码是：账号：admin 密码：123456

在后台可以进行相关数据设置和页面快速开发。后台页面开发的规则是引入了低代码框架 AMIS 。详细可以参阅：https://baidu.github.io/amis/...

6、深入使用和进阶

回到数据云面板，可以查看示例模型和云函数。还可以通过数据云完整文档学习完整的数据云使用方法。数据云文档链接：https://docs.apicloud.com/Clo...