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

首先是创建应用，创建方法前几篇课程文章都有介绍，在这里就不再赘述。创建应用的 时候应用场景选择 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 返回。

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