Express从0到1

1.6k
ExpressMicrosoft Power Automate

背景 ​

在我刚开始接触Microsoft Power Platform的时候，我的mentor王老师向我展示了他用C#写的一个小工具，用来批量清除一些运行中的工作流。

当时我对Power Automate并不太了解，只是想为什么批量清除一些工作流需要这么麻烦？还要自己写工具？

一年过去了，我只觉得王老师真牛逼，没这工具，可不得给我的高贵的黑色罗技牌无线 LightSpeed G502鼠标点坏了。

关键词 ​

我们先说Express，再说Automate Cancelation Tool。

Express ​

Why Express? ​

上周五时候，我们有个客户不小心写了一个死循环，导致产生了很多运行中的工作流需要清除，这时候王老师的工具又派上用场了。

但是总给客户一个.EXE的可执行程序，我总觉得少点什么东西，想来想去，可不就是少了一个即点即用的工具嘛！

好的，想法有了，那么我们就去实现这个想法🌴：

  • 首先我们要选一个好的框架，优秀的框架会让我事半功倍，于是我就问了一下我的好朋友谷歌：

好朋友给我推荐了Node JS&Express，Angular， Django， Spring boot…框架很丰富，但我一个都不会。

  • 既然Node JS&Express排第一，学哪个还不是学啊，就它了，我相信群众的眼光。

Hello World ​

经过短暂的文档阅读，我已经运行了我的第一个Express站点，Hello World:

js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`hello world app is listening on port ${port}`)
})

这可太简单了！💪💪 我们直接开搞！

Automate Cancelation Tool ​

先列出Cancelation Tool需要注意的几个关键点：

  • 账户认证
  • 获取工作流的业务逻辑，包括所在的环境和流的一些ID什么的
  • 执行取消操作

事实告诉我们，欲速则不达，我们的Express站点，目前还不能进行前后端交互，因为我根本不知道Express是如何进行前后端交互的，所以账户认证第一步就卡主了。

没关系，哪里卡主，我们就学习哪里。 通过询问我的另外一个好朋友，Stack Overflow，我大概知道了前后端的交互是通过routing配置来完成的。

Express之Routing ​

Routing就是路由的意思，每个路由都可以通过不同的请求方法来相应前端页面的请求。

例如，我们可以在users路由下面创建多个路由节点，分别用来处理同步的请求。

  • 处理get请求：
js
app.get('/', function (req, res) {
  res.send('Hello World!')
})
  • 处理post请求：
js
app.post('/', function (req, res) {
  res.send('Got a POST request')
})

/代表是主机根地址，例如我们想处理/users目录下面的删除请求，可以参考如下：

js
app.delete('/users', function (req, res) {
  res.send('Got a DELETE request at /users')
})
  • 实际代码实例：

这可太简单了！💪💪 我们直接进入下一步！

Express之Views ​

路由问题解决之后，我们的前后端可以进行请求交互了，但是，前端的页面怎么展示呢？ 好朋友直接给出了一个视频教程，太贴心了。


一般的做法是通过另外一个类似于HTML的框架来展示，也就是.hbs文件。我们可以理解为.html文件。

html我可太熟悉了，谁还不会写个<body></body>呢？

html
<h1>Microsoft Power Automate API</h1>
<h3>当前正在运行的automate flow集合:</h3>
<h4>请选择您的环境：<h4>
<form >
<table>
    <tbody>
        {{!-- {{#each profile}}
        <tr>
            <td>{{@key}}</td>
            <td>{{this}}</td>
        </tr>
        {{/each}} --}}

        {{#each profile}}
        <tr>
            <td>
                {{this}}
            </td>
        </tr>
        {{/each}}

    </tbody>
</table>
<a href="/auth/acquireToken">再次提交</a>
<a href="/">返回主页</a>

Express之Javascipt ​

完成了基本UI的和前后端交互的功能之后，我们只需要用JavaScript编写一些操作逻辑，例如发送API请求，处理服务器返回的JSON数据，再把数据展示到前端。

经过一段时间的代码编写之后，我们就写完了。源码地址：https://github.com/leapyear1969/PowerAutomateCancelTool

网站展示 ​

我从未见过简洁大方的网站，在今天众多花里胡哨的站点中，简直是一股清流！！！

好吧，我承认HTML没有我想的那么简单，网站的设计也是一门学问。

  • 网站首页：
  • 管理员授权页面：
  • 业务处理界面：

后记 ​

Express从入门到入门，我是一个完完全全的小白，在项目过程中遇到的所有的问题都是通过百度或者Google或者Stack Overflow搜索的，大概花了3天的时间完成了整个项目，也收获了很多有的没的的知识，充实了自己。



下一站：再战艾泽拉斯，做你曾经做过的事！ ​


China WoW
中文WebOCR