怎么进行Midway Serverless 一体化应用开发?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

怎么进行Midway Serverless 一体化应用开发?

1358896759097293 2021-03-11 22:59:29 90

怎么进行Midway Serverless 一体化应用开发?

Serverless
分享到
取消 提交回答
全部回答(1)
  • 1358896759097293
    2021-03-14 22:32:26

    首先是创建应用,创建方法前几篇课程文章都有介绍,在这里就不再赘述。创建应用的 时候应用场景选择 WEB,解决方案选择 Midway Serverless OTS 数据库。创建完应用, 安装依赖,最后启动。 启动完成后,准备工作就结束了。下面正式进入演示,如何开发一个一体化应用,如何 去调用接口。 首先介绍下代码结构,在这个代码结构里有 apis 目录和一个传统前端的目录。我们以 获取 todolist 接口为例,在传统前端目录里可以看到获取 todo 接口是一个叫 getlist 的方 法,并用 fetch 调用 api/list 的接口。传统后端的接口是写在云端所以需要单独调用它;但 是在一体化工程里,后端是可以直接写在 apis 里面的。举个例子,在前端写的 api/list 的 代码,在 f.yml 里是可以找到对应的,它是在 handler 这里,handler 的作用就是查询所有 的 todos 并返回。 可以看到 handler 和 func 的 todo list 是相对应的,通过这样的方法,就可以把接口 信息、函数信息和具体代码相关联,这样前端的调用就直接调用本地开发函数。

    在前端社区中,主流的前端框架就三个:React, Vue 和 Angular;就分布来看, Angular 在国外比较主流,Vue 和 React 在国内比较受欢迎,这三个在开发模式上都有自 己的一些特点。在阿里云云开发平台上,使用 React 更多一些。所以今天演示的 demo 也 是和 React 相关的。国内很多网站都是使用 React 做开发的。 Vue 在国内也比较受欢迎,因为 Vue 可以支持中文,并且有中文文档和中文社区,且 上手门槛低,更容易受新人喜欢。这些方面都比 react 要更受欢迎。 我们可以用比较流行的样式库 Tailwind css 创建一个样式,然后把样式的 css 加载, 这样一个简单的网页就建成了。

    下面的开发就基于这个简单的网页演示。我们通过 input 里的 aria-label 的 Email address 和 Password 来调整 name 和 password,以对应今天演示的的账号和密码。 当输入框的文字发生改变的时候,就会触发 onChange 事件,然后传递出一 个 Event。 点 value 并输入一个 console.log 函数,然后在前端输入账号名,就能够通过监听前 端事件的方式,看到输入值。

    密码也同理。有了账号和密码之后,怎么把这个账号密码去提交给后端呢? 第一步就是获取账号和密码,在按钮上加一个 onClick 回调的事件。通过这个事件, 当按钮被点击,就会触发 handleSubmit 的一个表达方式,在 handleSubmit 过程中,会 显示正在注册的账户名和密码。

    所以前端已经拿到了注册的账号和密码,那么怎么发给后端呢? 熟悉 react 的同学应该了解钩子函数,钩子函数其实是 React 最近推出的一种编程范 式,叫 Hooks。在 React 官方网站有专门介绍 Hooks。

    简单介绍下 React 和 Hooks 的工作。React 在淡化生命周期的作用,再用函数值组 件做很多没有生命周期的概念。Hooks 是淡化生命周期的一个作用,而 React 是单向的数 据流不是双向数据绑定,这点和 Vue 还是不太一样的。 回到 Cloud IDE 开发平台,在左侧目录新建一个 users.ts 的文件夹,去重新开发注 册和登录的访问功能。先把他之前的代码直接给拷过来,然后命名为 User Service,然后 把一些无关紧要的代码给删掉。

    然后把他一些函数相关的东西给改成自己的。 如前面所提示的,所有函数都是需要到 f.yml 注册的,所以调整完函数,就去注册,在 这里把这个注册的函数取名为 register。 这个简单函数的作用是在从前端传递过来的查询参数里面取出 name 和 password, 并且返回给前端。 在这一步我们可以调用 Fetch/API/register。Fetch 是很常用的,是不管用哪个框架, 发 API 请求几乎都会去用到的。

    都准备好后,在前端发起一个简单的请求,并带上账号和密码。当这个请求已经发送到后端了,在请求地址的最后挂了一串查询参数,拉到下面 Query stri ng Parameters 里面有 name 和 password。后端也会把 name 和 password 返回。

    通过这种简单的方式,就可以实现把前端的信息传递给后端,后端接收到之后就可以存 取数据库。我们前后端开发交互的核心点,就是前端怎么把数据给后端,后端怎么把数据落 到数据库,然后后端怎么再把数据从数据库里面取出来再返回给前端。

    0 0
云开发平台
使用钉钉扫一扫加入圈子
+ 订阅

云开发平台是面向开发者打造的一站式、全云端的开发平台,打开浏览器就可以开发、调试、上线,所测即所得,并结合无服务器的模式重新定义云原生时代的研发工作方法论。

推荐文章
相似问题
云开发平台官网