基于 Spring Boot 创建部署云应用 Todo App

本文介绍如何基于 Spring Boot 技术栈创建并部署一个简单的 Todo App 应用程序。

前提条件

操作步骤

整个操作流程分为以下 6 步:

创建小程序

  • 登录 蚂蚁金服开放平台,选择 开发者中心 > 小程序 > 创建
  • 填写 基本信息,点击 创建 按钮,创建应用名为 示例应用 小程序。

说明:一个账号下最多可以创建10个小程序;未提交过审核的小程序可以删除,删除的小程序不在计数范围。

创建云应用后端服务

  • 我的小程序 页面,选择刚创建的小程序,点击 查看,进入 开发管理 页面。
  • 点击左侧导航栏的 云服务(公测),在 云服务列表 页面点击 创建云服务 > 创建云应用
  • 创建云应用 页面,选择 SpringBoot 技术栈,填入 应用名称描述 (选填),点击 创建

构建环境

  • 返回 云服务 页面,点击刚创建的云服务卡片中的 构建环境 按钮。
  • 购买环境资源 页面,选择合适的环境配置方案,点击 同意《产品服务协议》 > 确认配置

说明:此处选择 小程序云应用入门(Mysql版),当前测试环境该方案免费提供,但若连续 7 日未部署过代码,环境会被自动回收。

  • 订单详情 页面,点击 确认购买。购买成功后会自动进入 构建环境 页面。构建过程会耗时几分钟,构建成功后,您可以选择 查看应用详情 ,或者 返回应用列表

数据准备

云应用详情 页面,选择 数据库 页签,点击查看 Web 控制台,登录后进入 PhpMyAdmin 的数据库管理页面。(数据库自带admin账户,admin账户的初始密码可点击 数据库 标签页中的眼睛图标(image)查看,可使用admin账户登录PhpMyAdmin

在页面左侧,选中 sample 数据库中,新建表 task,

imagetask表的数据结构如下图。

image

请确保您新建的表结构与图中完全一致,否则示例程序可能无法运行,注意:字段名称、 字段类型、 id 字段为主键且自增(A_I)、 done 字段默认值为 0、各字段是否允许空值。点击 保存,完成创建该示例程序所需的数据库表。

除了如上所述创建表的操作,您也可以通过执行以下 SQL 语句创建task表。

  1. USE sample; CREATE TABLE `task` (`id` bigint(20) NOT NULL AUTO_INCREMENT,`label` varchar(140) CHARACTER SET utf8 DEFAULT NULL,`done` tinyint(1) NOT NULL DEFAULT '0',`img_url` varchar(256) CHARACTER SET utf8 DEFAULT NULL,`user_id` varchar(50) CHARACTER SET utf8 DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

开发云应用后端服务

打开 IDEA > 新建项目,选择 AntCloud Initializer 应用,选择 SpringBoot 下的 Todo App Java 版,点击 Next

填写项目名(Project name),点击 Finish 完成项目创建。

image

说明:Todo App 应用示例演示了小程序服务端 SDK 使用(参见类 UserController),数据库增删改查(参见类 TaskController),文件上传下载(参见类 UploadController)等功能。后端代码结构如下图。image其中,包 controller 是 Web 接口层代码,service 是服务层代码,dal 是数据访问层代码。controller 层使用 resteasy 作为 jax-rs 框架实现。dal 层使用 Hibernate 作为 JPA 实现。代码的具体实现请参看项目中的代码注释。

打开 src/resources/application.properties 文件,填入服务运行所需的参数。

image其中,应用域名(demo.domain)和数据库地址可从云应用 web 控制台的应用详情页获得。小程序的应用密钥可参考文档 《生成RSA密钥》 获得。使用 RSA密钥生成工具生成 PKCS8 格式的私钥、公钥后,将私钥内容写为 application.privateKey 的值,再将公钥设置到开放平台(具体过程可参考文档《上传应用公钥并获取支付宝公钥》),最后将生成的支付宝公钥内容写为 application.publicKey 的值。

1.png

1.png

重要:要使用小程序服务端 SDK 获取用户信息,小程序 > 开发管理 > 功能列表 中,必须添加 获取会员信息 功能。image.png

运行类 com.alipay.demo.Application,HTTP 访问本地端口 http://localhost:8080/todos 返回(空的)待办事项列表,则说明程序运行成功。

本地调测程序成功后,即可将程序发布到云应用服务的云服务器。选择 View > Tool**Windows > AntCloud,打开 小程序云应用** 视窗。

image

通常情况下, 小程序云应用 视窗会显示在 IDEA 界面的下方。

image

小程序云应用 视窗中,点击 登录账号 ,通过扫描二维码登录支付宝账户。

image

点击 关联小程序,选择刚创建的云应用 SpringBootDemo,并关联到当前工程。

image

image

关联云应用后,可在 小程序云应用 视窗中查看关联的云应用详情。

image

小程序云应用 视窗中,点击 云应用管理,在弹出的操作界面中,点击 部署云应用

image

弹出的 部署云应用(本地构建) 的操作界面。点击 本地构建,工程会被打包成 JAR 包。

image

点击 部署应用 将该打包好的项目 JAR 包部署到测试环境上。

image

开始部署后,云应用管理 视窗会打出部署日志。部署结束后会有消息提示部署完成。

image

开发小程序前端界面

打开 小程序开发者工具,在菜单中选择 项目 > 新建项目

image

选择模板:选择 Todo 云应用-NodeJS 示例 ,点击 下一步。(NodeJS和Spring Boot的demo用的是同一套前端代码,因此 Todo 云应用-NodeJS示例 模板也可用于演示基于 Spring Boot 的云应用)

image.png

选择云服务:填写项目名称,选择项目路径。由于后端服务在 IDEA 中开发完成,此处勾选 不启用云服务 。点击 完成,进入编码。关于前端代码的详细介绍请参看 文档

image

在左侧导航栏,选择 云服务 图标,并关联应用。不需要选择云服务。

image

运行程序前,需修改 client/app.js 文件中的变量 demoDomain(请求后端服务的域名/IP 地址)的值为您的云应用服务的域名。

image

项目编译后,即可从 IDE 右侧看到渲染的界面。

点击 IDE 右上角的 上传 按钮将小程序上传到开放平台。上传完毕后,登录到开放平台提交审核,审核完毕后,小程序即可进行发布操作。

image

原文: https://docs.alipay.com/mini/cloud-service/xpea3t