《教育培训》云应用前后端全部免费开源啦!【新源码】
在兼容和继承APICloud所有API、模块、技术栈以及用户体验的基础上,我们定义了一套新的代码编写标准(DSL):基于标准Web Components组件化思想,兼容Vue / React语法特性,通过一次编码,分别编译为APP、小程序代码,实现多端开发。
其中App代码基于DeepEngine3.0运行,全翻译式的运行原理提供完全原生的体验和性能。小程序代码被编译为符合微信小程序多端统一开发工具——kbone标准的代码,可直接在微信开发者工具中进行预览以及发布到微信小程序平台。
为了让开发者更加快速的学习和了解APICloud多端开发技术,会陆续推出新的源码供大家学习与使用。本次推出一款多端源码-《教育培训》,可以体验一套代码编译app+小程序。
本项目的一个教育培训服务APP。提供在线浏览机构信息、名师风采和课程预约订购等功能。
效果图
源码目录结构介绍项目源码在本仓库的 widget 目录下。其中该目录下的文件结构如下: - <font size="3"><font size="3"><font size="3"><font size="3" face="微软雅黑"><font size="3" face="微软雅黑">┌─component/ // 项目公共组件目录
- │ ├─img/ // 组件公用素材
- │ ├─a-card.stml // [基础组件]卡片组件
- │ ├─a-cell.stml // [基础组件]单元格组件
- │ ├─a-cell-group.stml // [基础组件]单元格容器组件
- │ ├─a-header.stml // [基础组件]头部导航组件
- │ ├─a-section.stml // [基础组件]章节组件
- │ ├─a-tab.stml // [基础组件]选项卡组件
- │ ├─a-tabs.stml // [基础组件]选项卡容器组件
- │ ├─b-course.stml // [业务组件]课程详情组件
- │ ├─b-notice.stml // [业务组件]提醒面板组件
- │ ├─c-course-list.stml // [组合组件]课程列表页
- ├─images/ // 图片素材图标资源目录
- ├─pages/ // 新版的AVM页面目录
- │ ├─course-detail/
- │ │ └─course-detail.stml // 课程详情页
- │ ├─course-list/
- │ │ └─course-list.stml // 课程列表页
- │ ├─course-pay/
- │ │ └─course-pay.stml // 购买课程页
- │ ├─course-preorder/
- │ │ └─course-preorder.stml // 预约课程页
- │ ├─order-detail/
- │ │ └─order-detail.stml // 用户订单详情页
- │ ├─order-list/
- │ │ └─order-list.stml // 用户订单列表页
- │ ├─pay-result/
- │ │ └─pay-result.stml // 下单(支付)结果页
- │ ├─play-video/
- │ │ └─play-video.stml // 视频播放页
- │ ├─preorder-detail/
- │ │ └─preorder-detail.stml // 用户预约详情页
- │ ├─preorder-list/
- │ │ └─preorder-list.stml // 用户预约列表页
- │ ├─tab-home/
- │ │ └─tab-home.stml // tab页-0 入口主页
- │ ├─tab-course/
- │ │ └─tab-course.stml // tab页-1 课程分类列表
- │ ├─tab-user/
- │ │ └─tab-user.stml // tab页-2 用户主页
- ├─script/ // JavaScript脚本目录
- │ ├─UserManager.js // 用户数据管理类
- │ └─req.js // 项目请求交互文件
- └─config.xml // 应用配置文件</font></font></font></font></font>
复制代码
使用步骤- 使用APICloud Studio 3 作为开发工具。
- 下载本源码。
- 在开发工具中新建项目,并将本源码导入新建的项目中,注意更新 config.xml 中的 appid 为你项目的 appid 。
- 使用 AppLoader 进行真机同步调试预览。
- 或者提交项目源码,并为当前项目云编译自定义Loader进行真机同步调试预览。
- 云编译 生成 Android & iOS App 以及微信小程序源码包。
【教育培训模板后端说明】
账号:admin 密码:123456 简介 项目采用云原生的方式来完成整体的从数据库设计,数据库建模,后台建立,api接口的生成,提供接口给到前端等一系列的操作 开发流程 1.创建模型表(核心)
创建模型
添加表字段
根据上面的操作,继续添加,字段根据实际需要的类型进行添加 添加好表字段以后,就可以根据添加行
按照上面的步骤,就可以完成数据库建立和数据的手动添加
2.创建云函数(核心)
添加函数包含了(普通函数/钩子函数/远程函数) 根据对应的选项,内容添加对应的函数,添加的函数可以作为后台调用的接口,也可以作为前端调用的接口
3.后端云(核心) 进入后台登陆界面 登陆进入后,可以看到已经有默认的模块已经建立好了
根据菜单管理和页面管理搭配使用,可以创建出想要的任何页面信息
新增或者打开页面后,会看到
点击查看源码信息,则可以看到,整个页面的增删改查的功能都是根据json信息来完成的
这里页面的编辑规则,遵循amis的编写方式 有了这个,就可以创建出任意形式的后台管理功能,这一切都基于APICloud后端云
4.WebApi接口开发 接口,想必大家都非常清楚是为了前端而准备的,这个前端不仅限于本案例中的微信小程序,PC网页,H5,APP,支付宝小程序,百度小程序,....此处省略一大堆前端,都可以使用webapi。 下面我们来看看webapi的样子吧 如果你所见,这块的接口也完全基于ApiCloud后端云,在函数的模块,仔细看文档的同学想必已经发现,我们上面已经讲到过了 开发webapi函数与开发后端调用的方法函数一样,都是从添加函数的里面去添加就好了。细心的同学也许会发现我在webapi的接口中增加了一些前缀F-,B-等标记,这主要是为了让前端开发的同学好区分,哪些是前端需要调用的api,哪些是后端需要调用的api,这样可以节省前端同学开发的时间,还有更多很好的玩的功能,欢迎大家一起来交流讨论。
完整后端文档说明:https://docs.apicloud.com/APICloud/Education-template-database
联系我们如果您在使用过程中遇到了问题,或者有更多的宝贵意见,欢迎到 APICloud 社区和 QQ 群与我们进行互动讨论。 |