关于前端:堂食点餐APP前后端全部免费开源啦

40次阅读

共计 2485 个字符,预计需要花费 7 分钟才能阅读完成。

《堂食点餐》云利用是一套在线点餐的行业利用模版,顾客可通过小程序 /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…

正文完
 0