apicloud apicloud

注册
查看: 2844|回复: 50

[案例源码] 《堂食点餐》云应用前后端全部免费开源啦!

回帖奖励 62 云币
回复本帖可获得 1 云币奖励! 每人限 1 次

主题:
1151
帖子:
5495
云币:
2147207945

圣诞节捣蛋鬼APICloud大会专属勋章足球狗儿童节快乐

[案例源码] 《堂食点餐》云应用前后端全部免费开源啦!

2844 50 | 发表于 2021-5-24 16:32:32 |阅读模式 | |
《堂食点餐》云应用前后端全部免费开源啦!

     《堂食点餐》云应用是一套在线点餐的行业应用模版,顾客可通过小程序/APP自助扫码订餐、加菜、买单,从而降低门店服务人员工作量及餐厅的运营成本。前端模版源码开源后,获得了很多开发者的好评,为了给开发者带去更好的学习和开发福利,《堂食点餐》后端数据云函数也开源啦!模板的数据云模型和云函数现已上线到数据云预置模型中了。通过导入模型,即可体验云端一体的《堂食点餐》完整案例。
      数据云3.0是一个全新的服务端开发运维平台,提供从后端开发、接口联调到上线运营维护等一整套方案。开发者无需考虑数据库和服务器等基础设施,无需关心服务器测试环境的搭建,数据的备份及服务扩容等与业务无关的工作,只需关心逻辑本身。


一. 前端源码-餐饮点餐,一套代码生成APP+小程序【解析教程+视频】
      https://community.apicloud.com/bbs/thread-169184-1-1.html

二. 后端源码-数据云模型导入和快速上手
     当我们使用《堂食点餐》模板创建应用以后,就可以根据需要导入数据云模型和云函数。

      1.【开启数据云和导入模型】
      进入项目的控制面板,选择“云开发”中的“云设置”。 如果是第一次打开这个界面,数据云默认是么有开启的。需要点击欢迎页的开启按钮,即可开启数据云。
开启数据云之后,可以在“云设置”页面进行一些基础设置。 接下来重点关注到“数据模型”页面。点击“数据模型”打开相关页面,我们可以自行创建模型和云函数,也可以在右侧“预制模型”中看到“堂食点餐"同名模型。 点击右下角绿色小加号,将该模型进行导入。
      导入成功以后,可以在左侧看到相应的数据模型已经显示出来。点选模型,可以进入相关模型数据的预览。 或者是点击左侧底部的“云函数开发”会弹出云函数管理浮层,浮层中间是使用引导和文档链接。可以点选左侧顶部的绿色按钮进行创作新的云函数, 也可以点选已有的云函数,学习研究预置的函数和接口是如何设计的。


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


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



  1. const config = {
  2.     schema: 'https',
  3. -    host: 'a7777777777777-pd.apicloud-saas.com',
  4. +    host: 'a6176110219206-dev.apicloud-saas.com',
  5.     path: 'api'
  6. }
复制代码

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


      3. 【云模型 快速上手】
      云模型也就是云数据库。可以存取业务数据,还提供了数据访问的接口和相关API。
      在一个项目中可以建立业务所需要的数据表模型。还是以 shop 为例:打开模型后,是一个表格的形式展现了模型内存在的数据。表头的内容是该模型的字段,表中的数据是模型下保存的记录。可以在头部的按钮中进行添加数据、删除数据、添加字段、设置关联等管理操作。


      4.【云函数示例代码】
      获取商家信息

  1. GET /shops/getInfo
  2. shop.getInfo = async()=> {
  3.         try{
  4.             const data = await shop.findOne({where: {"status":1}});
  5.             return {status:0,msg:"成功",data:data};
  6.         }catch(err){
  7.             return {status:1,msg:"获取商家信息失败!",data:err};
  8.         }
  9. };
复制代码

      通过阅读上面的云函数源代码,可以看到一个云函数组成是十分简单的。在编辑状态下,可以看到表单中显示出了一个云函数的一些必要元素: 选择 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.apicloud-saas.com/admin/ 默认的账号和密码是: 账号:admin 密码:123456
      在后台可以进行相关数据设置和页面快速开发。后台页面开发的规则是引入了低代码框架 AMIS 。详细可以参阅:https://baidu.github.io/amis/zh-CN/docs/

      6.【深入使用和进阶】
      回到数据云面板,可以查看示例模型和云函数。还可以通过数据云完整文档学习完整的数据云使用方法。 数据云文档链接:https://docs.apicloud.com/Cloud-API/sentosa


本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
5
帖子:
16
云币:
21
发表于 2021-6-23 16:00:06 |

回帖奖励 +1 云币


支持好活动~ 顶

主题:
41
帖子:
98
云币:
75
发表于 2021-5-24 19:52:40 |

回帖奖励 +1 云币

主题:
110
帖子:
507
云币:
792
发表于 2021-5-24 21:19:55 |

回帖奖励 +1 云币

职业车手

UID:129114

主题:
137
帖子:
1599
云币:
3281

APICloud粉丝圣诞节我还是个孩子!不想上班!SB侠APICloud大会专属勋章足球狗

发表于 2021-5-24 22:02:38 |

回帖奖励 +1 云币

回帖奖励 +1 云币

主题:
10
帖子:
814
云币:
562

APICloud粉丝一周年中秋节社会摇女朋友我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼

发表于 2021-5-25 10:18:23 |

回帖奖励 +1 云币

回帖奖励 +1 云币

实习司机

UID:5695

主题:
46
帖子:
137
云币:
309
发表于 2021-5-25 10:24:53 |

回帖奖励 +1 云币

挺不错有适合的客户可以推荐下

马路杀手

UID:722608

主题:
8
帖子:
289
云币:
346
发表于 2021-5-25 18:45:11 |

回帖奖励 +1 云币

主题:
0
帖子:
1
云币:
2
发表于 2021-5-26 08:30:01 |

回帖奖励 +1 云币

JIAYOU加油

实习司机

UID:212532

主题:
26
帖子:
121
云币:
171
发表于 2021-5-26 14:39:59 |

回帖奖励 +1 云币

这是一个完整示例,非常实用。如果后台管理的默认密码能修改则更安全、完善了。

马路杀手

UID:722608

主题:
8
帖子:
289
云币:
346
发表于 2021-5-26 16:28:03 |
ntfa 发表于 2021-5-26 14:39
这是一个完整示例,非常实用。如果后台管理的默认密码能修改则更安全、完善了。 ...

可以在后台管理修改用户密码的

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表