小程序云应用入门实操系列课程第三讲 - 云应用的使用一:Node.js 初始化

简介: 云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要介绍云应用的使用,初始化 Node.js 小程序并部署小程序云应用,在此基础上简单讲解为下节内容需要准备的部分工作。

摘要

云应用是面向小程序应用场景,为开发者提供的⼀键构建后端应用运行环境、后端服务部署、运维监控等能力的⼀站式小程序部署服务。本次课程主要介绍云应用的使用,初始化 Node.js 小程序并部署小程序云应用,在此基础上简单讲解为下节内容需要准备的部分工作。

演讲嘉宾简介

白宦成 - Linux 中国开发组组长,阿里云 MVP;CSDN 专家,在 GitChat 平台上开设了《一学就会的 WordPress 实战课》达人课;自由职业者,曾就职于网易杭州研究院。

个人小程序作品:

运维密码小程序:2017年2月上线
配色助手小程序:2018年4月上线
Linux 小程序:2019年2月上线。

个人授课:

极客学院《微信小程序入门实战(仿 V2EX)》
极客学院《微信小程序进阶实战之分答应用开发》
网易云课堂《微信小程序初级工程师微专业》

系列课程大纲

  • 云应用的价值
  • 云应用的控制介绍
  • 云应用的使用一:Node.js初始化
  • 云应用的使用二:用户登录

本次直播视频精彩回顾,戳这里!
https://yq.aliyun.com/live/1039

以下内容根据演讲嘉宾视频分享整理而成。

本次的分享主要围绕以下三个方面:

一.Node.js 初始化
二.初始化 egg.js 的应用
三.为下节课做准备

Node.js 初始化

Node.js 应用:打开 Node.js 应用,云应用默认会提供一组环境包。在版本历史中有一个应用 CloudApp-NODEJS-Demo-V1,下载代码,查看代码。Node.js 应用项目的根目录中最重要的是 package.json 文件,大家可以发现项目其实非常简单,仅仅依赖于 egg.js1.10.1 版本以及 egg-scripts2.5.0 版本。其余的依赖有开发依赖,因为开发依赖在生产环境不会安装,不需要管理开发依赖,而 Scripts 里设置了具体的部署执行要求。其中,小程序代码中 package.json 启动 start 命令是 egg-scripts start—demon –title=egg-server- helloworld,以及对应的 stop 命令。所以是满足下面的云应用部署 Node.js 框架要求的。

1

部署应用的要求:如果想部署一个应用,云应用是有一些要求的。用户可以回到云应用列表页找到文档中心,查看 Node.js 相关部署要求。在后端框架说明中列举了云应用不同环境下的部署要求。对于正在使用的 Node.js,首先需要打包 ZIP 文件,打包源文件到 ZIP 文件的根目录。服务监听端口为7001,以及在 package.json 文件中实现了 start、stop 命令。上传了应用包文件以后云应用会自动帮用户启动应用。

2

APP 源码:Public 是静态文件。小程序更多需要服务端提供的 API 而不是静态文件,所以 Public 下是空的文件,这里主要看 router.js、foo.js 和 home.js 三个文件。如下图,在 router.js 中 exports 出了一个 app,定义了两个路由,分别是‘/’和‘/foo’两个命令,分别指向 app目录下的 controller 文件夹中 home 文件的 render 命令和 foo 文件的 render 命令。

3

如何执行命令:如果本地安装了 Node.js 环境,可以执行 npm install 安装相关的依赖。安装完成依赖以后启动 egg.js 服务端,查看服务端的运行,修改代码。安装完成以后只需执行 npm start 便可启动环境。

开发:执行 npm run dev 进入开发环境,修改代码, 将 home.js 中的返回信息改成“Hello Aliyun”。foo.js 文件也可以修改类似的内容,来达到对应的效果。因为目前启动的是开发环境,所以它和用户的修改会自动同步生效,这是使用开发模式的一个好处。

初始化 egg.js 的应用

初始化 egg.js 的应用:初始化一个 egg.js 的应用,其中的代码需要自己手写。打开 egg.js.org,进入 egg.js 官网指南页面。编写 egg.js 应用,初始化一个应用。创建目录 mkdir aliyun-zhibo;进入到目录下 cd aliyun-zhibo;通过执行命令npm init egg --type=simple,表示创建一个简单的模板,初始化一个 egg.js 应用;输入名称 aliyun-zhiboapp,描述 zhiboapp,author 可以根据自己情况填写,cookie security keys 是随机生成的 key,保证生成的 cookie 不会被轻易破解。完成初始化以后提示已进入目录。

安装依赖:执行 npm install,安装相关的依赖。

启动开发环境:执行 npm run dev,启动一个开发环境,可以发现生成的项目文件与默认项目下的文件是一样的。将 home.js 中的“hi,egg”修改成“Hello Aliyun”。生效以后便可以试着将目前的应用部署到小程序云应用上。

部署应用:进入 aliyun-zhibo 目录,选择文件,删除其中不需要的内容(如 node-modules),压缩成 ZIP 代码包,叫 code.zip。进入云应用控制台,点击上传发布包,输入版本号等信息,如v0101,上传文件,找到 code.zip 文件,点击确认上传。上传成功以后点击发布,在发布当中找到刚刚上传的v0101,完成版本发布任务。版本已经部署成功后显示部署版本是v0101。点击公网地址可以看到返回的信息是前面设置的“Hello Aliyun”,说明部署是成功的。

为下节课做准备

分发请求:在部署好一个简单应用后,可以多做一点事情,为下一节课任务做准备。如实现微信登录的功能,首先需要一个新的路由,叫做 login,将 router.js 中的方法改成 login。同样在 home.js 中,创建新的 login 的方法。在 router.js 当中引入的 login 路由会转发到 home.js 中的 login 方法当中,将 login 方法中的文字也改成 login,执行本地的开发的命令,从而预览代码是否能够正常有效的工作。

4
5

因为代码没有办法正常有效工作的话,上传到云端也不可能有效的工作,所以需要在在本地提前做验证。进入到默认页面127.0.0.1:7001,在后面输入/login,输出了 login,说明请求已经完成了正确的分发。使用 egg.js 将请求进行分发是最基础且最重要的开发过程,在分发的请求里面可以做一些比较细致的东西。

Service(服务):egg.js 把一些对外的东西放在了服务当中,当然也可以把数据库放在service当中去做这个服务。Copy 一些 service 代码,在 app目录下创建 service 文件夹,创建一个新的文件,叫 user.js,粘贴代码。因为没有对接数据库,目前没有那么多数据,可以手动伪造一些数据写入用户属性。

6

接下来去做一个请求,希望 login 可以返回通过 user-service 拿到的数据。启动成功以后继续访问127.0.0.1:7001/login,看到返回的数据是 user-service 中的数据。这样一个基础的 service 的定义就完成了。

7

实际上,在真正使用的时候会在 home.js 里面定义非常多不同的方法,去完成相对复杂的操作。借助 service 功能可以实现简化应用开发。原本的应用开发过程中可能要把很多精力放在 controller 里,对代码的复用性非常差。

交流讨论

扫码加入 阿里云小程序云支持群 一起交流讨论技术问题 更多直播等你观看

_jpeg

更多资讯

关注 ALI繁星计划 公众号 第一时间获取最新小程序云干货

_2019_05_09_2_03_05

目录
相关文章
|
7天前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
8天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
24 0
|
14天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
25 0
|
6天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。
|
7天前
|
JavaScript
学习Node.js入门范例
然后,cmd中运行命令node E:/Test/server.js
10 2
|
8天前
|
IDE JavaScript 开发工具
Auto.js 开发入门
Auto.js 开发入门
|
13天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
13天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
13天前
|
JavaScript 前端开发 程序员
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
|
14天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”