Node.jsフレームワーク ThinkJS開発コントローラーの説明-jsチュートリアル-php.cn

原文: Jingxiu.com Web ページのインスタントプッシュ | 転載する場合は出典を示してください
リンク:

この一連のチュートリアルでは、ThinkJS v2.x バージョン (公式 Web サイト) を例として使用し、実際の操作に焦点を当てています。。

この記事では引き続きコントローラーの使用方法を説明します。

コンストラクターメソッド

オブジェクトのインスタンス化時に何かを実行したい場合は、コンストラクターメソッドが最適な選択です。 ES6 が提供するコンストラクターは constructor です。 constructor 。

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
方法
ECMAScript 6 入门作者：阮一峰

init 与 constructor

thinkjs 强大的地方在于，我们不仅可以规规矩矩的 export default class 自己声明 Class ，还提供了动态创建 Class 的方法：think.controller。

但是 thinkjs 动态创建的 Class 没有 constructor，而是提供了一个 init 作为构造方法的替代方法，该方法的使用方式与 constructor 一致。

上一篇文章（Node.js 国产 MVC 框架 ThinkJS 开发 controller 篇基类与继承链部分）中也有 init 方法的使用示例，再看代码：

// src/home/controller/base.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);// 要求全部 url 必须携带 auth 参数let auth = this.get(&#39;auth&#39;);if (think.isEmpty(auth)) {  return this.error(500, &#39;全部 url 必须携带 auth 参数&#39;);}
  }}

ログイン後にコピー

当然这并不是表示不能使用 constructor 方法了，假如你是像我一样习惯使用 export default class 自己声明 Class 的筒子，还是可以用回标准的 constructor 方法的。

thinkjs 动态创建 Class 的方法参见官方文档，这里不再赘述。

魔术方法

thinkjs 实现了几个很有用的魔术方法，为开发提供了极大的便利，手动点赞～

__before 前置操作

顾名思义，前置操作会抢先在 Controller 中具体的 Action 执行之前执行，就是“在 xxx 之前执行”的意思。来看代码：

// src/home/controller/user.js&#39;use strict&#39;;export default class extends think.controller.base {
  __before() {console.log(&#39;this is __before().&#39;);
  }
  indexAction() {console.log(&#39;this is indexAction().&#39;);return this.end();
  }}// 访问 /home/user/index 的执行结果如下：// this is __before().// this is indexAction().

ログイン後にコピー

那么可能有人会说：看上去 __before 跟 init 是一样的用途嘛。老规矩，来看代码：

// src/home/controller/user.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);console.log(&#39;this is init().&#39;);
  }
  __before() {console.log(&#39;this is __before().&#39;);
  }
  indexAction() {console.log(&#39;this is indexAction().&#39;);return this.end();
  }}// 访问 /home/user/index 的执行结果如下：// this is init().// this is __before().// this is indexAction().

ログイン後にコピー

看到了吗？执行还是有先后顺序的，再来个复杂一点的：

// src/home/controller/base.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);console.log(&#39;this is base.init().&#39;);
  }}// src/home/controller/user.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);console.log(&#39;this is user.init().&#39;);
  }
  __before() {console.log(&#39;this is user.__before().&#39;);
  }
  indexAction() {console.log(&#39;this is user.indexAction().&#39;);return this.end();
  }}// 访问 /home/user/index 的执行结果如下：// this is base.init().// this is user.init().// this is user.__before().// this is user.indexAction().

ログイン後にコピー

好吧，你会说“意料之中”～

__after 后置操作

明白了前置操作，后置操作也不难理解，看代码：

// src/home/controller/user.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);console.log(&#39;this is init().&#39;);
  }
  __before() {console.log(&#39;this is __before().&#39;);
  }
  __after() {console.log(&#39;this is __after().&#39;);
  }
  indexAction() {console.log(&#39;this is indexAction().&#39;);return this.end();
  }}// 访问 /home/user/index 的执行结果如下：// this is init().// this is __before().// this is indexAction().

ログイン後にコピー

咦？貌似有地方不对。。。__after 没执行。

这当然不是 __after 写在 indexAction 上面导致的！修改代码：

// src/home/controller/user.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);console.log(&#39;this is init().&#39;);
  }
  __before() {console.log(&#39;this is __before().&#39;);
  }
  __after() {console.log(&#39;this is __after().&#39;);return this.end();
  }
  indexAction() {console.log(&#39;this is indexAction().&#39;);
  }}// 访问 /home/user/index 的执行结果如下：// this is init().// this is __before().// this is indexAction().// this is __after().

ログイン後にコピー

这次 OK 了，和预期的结果一致。

我知道细心的你已经注意到有句代码 return this.end() 从 indexAction 移动到 __after 里面了。

this.end() 内部执行了 Node.js HTTP response.end() 操作，表示整个响应流结束了，因此如果想要启用 __after 的话，这句代码就要放在 __after 里面运行。

__call 空操作

这个魔术方法有点特殊，它不像前两个魔术方法一样用于在某个流程节点打点运行，而是分担了 init 的部分职责：用于检测当某个 Controller 被访问的 Action 并未定义的情况下，由 __call 来接手运行。

// src/home/controller/user.js&#39;use strict&#39;;export default class extends think.controller.base {
  init(...args) {super.init(...args);console.log(&#39;this is init().&#39;);
  }
  __call() {console.log(this.http.action + &#39;Action is not exists.&#39;);return this.end();
  }
  indexAction() {console.log(&#39;this is indexAction().&#39;);return this.end();
  }}// 访问 /home/user/test 的执行结果如下：// this is init().// testAction is not exists.

ログイン後にコピー

可以看到当访问的 testAction 不存在时，框架会运行 __call 来进行处理，我们的处理是记录错误并结束响应输出。

示例代码是将 __call 放在了二级子类中，通常是放在基类中，可以管控全部子类的非法访问处理。

提示：本方法只能用于捕捉 Action 不存在的情况，但是假如 Controller 不存在，会直接触发 404 错误（被框架接管）而无法干涉。
如要捕捉 Controller 不存在的情况，需要扩展框架的错误类，另文描述。

外部调用方式

thinkjs 官网 API 中有实例化另外一个 Controller 的接口，但是并没有说明这个具体有什么用途：

//实例化 home 模块下 user controllerlet instance = think.controller(&#39;user&#39;, http, &#39;home&#39;);

ログイン後にコピー

那么通常这个方法可以用来实例化兄弟层级 Controller ，或者获取数据、或者触发一个业务流程等，来看代码：

// src/home/controller/user.js 增加_getPoints() {
  return 8000;}// src/home/controller/index.jslet instance = think.controller(&#39;user&#39;, this.http, &#39;home&#39;);let points = instance._getPoints();console.log(points); // 打印：8000instance.indexAction(); // 与直接执行 /home/user/index 是一样的效果instance.testAction(); // 报错 [Error] TypeError: instance.testAction is not a function

ログイン後にコピー

可见是 thinkjs 提供了一个按需实例化某个 Controller 并运行其方法的途径。

乍看上去这个方式与 this.redirect 运行结果非常接近（除了不会触发 __call

🎜コンストラクターメソッドは、新しいコマンドを通じてオブジェクトインスタンスが生成されるときに、クラスのデフォルトメソッドです。クラスにはコンストラクターメソッドが必要です。明示的に定義されていない場合は、デフォルトで空のコンストラクターメソッドが追加されます。 🎜メソッド🎜ECMAScript 6 Getting Started 著者: Ruan Yifeng🎜🎜
init とコンストラクター
🎜 thinkjs の強みは、デフォルトクラスをエクスポート< /code できるだけではないことです。 > クラスを自分で宣言し、クラスを動的に作成するメソッドも提供します: <code>think.controller。 🎜🎜しかし、thinkjs によって動的に作成されたクラスには constructor がありませんが、コンストラクターメソッドの代替として init が提供されます。これは コンストラクターコード>の一貫性。 🎜🎜前の記事 (Node.js 国内 MVC フレームワーク ThinkJS 開発コントローラーの章基本クラスと継承チェーン部分) にも init メソッドの使用例があります。もう一度コードを見てみましょう: 🎜
🎜🎜
// src/home/controller/util.js'use strict';export default class extends think.controller.base { calcGPSDistance(lat, lng){// 计算 GPS 两点直线距离return distance; } calcBaiduDistance(lat, lng){// 计算百度大地坐标两点直线距离return distance; } calcSosoDistance(lat, lng){// 计算 Soso坐标两点直线距离return distance; }}
ログイン後にコピー
ログイン後にコピー
🎜 もちろん、あなたが私と同じで、exportdefaultclass メソッドを使用できないという意味ではありません。 code> を使用してクラスを宣言する場合でも、標準の constructor メソッドを使用できます。 🎜🎜🎜Thinkjs のクラスを動的に作成するメソッドは公式ドキュメントに記載されているため、ここでは詳しく説明しません。 🎜🎜🎜マジックメソッド🎜🎜thinkjs は、開発に非常に便利ないくつかの非常に便利なマジックメソッドを実装しています。~🎜
__before pre-operation
🎜 名前が示すように、pre-operation はプリエンプティブに実行されます。コントローラー内の特定のアクションが実行される前とは、「xxx より前に実行する」という意味です。コードを見てみましょう: 🎜
🎜🎜
// src/common/controller/complete.js'use strict';export default class extends think.controller.base { /** * 显示中转页面 * * 调用方式： * let complete = think.controller('complete', this.http, 'common'); * return complete.display('应用新增成功！', '/', 5); * * @param msg 提示文字，支持 HTML * @param url 后续自动跳转的目标地址 * @param delay 停留秒数 * @returns {think.Promise} */ display(msg, url='', delay=3) {let tpl = 'common/complete/200';let opt = think.extend({}, {type: 'base', file_depr: '_', content_type: 'text/html'});this.fetch(tpl, {}, opt).then(content => { content = content.replace(/COMPLETE_MESSAGE/g, msg); if (url) {content = content.replace(/TARGET_URL/g, url);content = content.replace(/WAIT_SECONDS/g, delay); }; this.type(opt['content_type']); return this.end(content);}).catch(function(err){ return this.end('');}); }}
ログイン後にコピー
ログイン後にコピー
🎜 そして、次のように言う人もいるかもしれません: __before と init は同じ目的を持っているようです。いつものように、コードを見てみましょう: 🎜
🎜🎜
<!DOCTYPE html><html><head><title>正在跳转 - 荆秀网</title></head><body><a href="/"><img src="/static/img/logo.png" alt="XxuYou" width="60"></a> <h1>COMPLETE_MESSAGE</h1><pre class="brush:php;toolbar:false">提示：页面将在 WAIT_SECONDS 秒后重定向到 <a href="TARGET_URL">TARGET_URL</a>
ログイン後にコピー
ログイン後にコピー
🎜見ましたか?実行シーケンスはまだ残っていますが、ここではより複雑なシーケンスを示します: 🎜
🎜🎜
// Controller 内调用方式indexAction() { // 业务流程。。。 let complete = think.controller('complete', this.http, 'common'); return complete.display('操作成功！', '/', 5);}
ログイン後にコピー
ログイン後にコピー
🎜OK、「期待される」と言うでしょう~🎜
__事後操作
🎜理解前操作と後操作を理解するのは難しくありません。コードを見てください: 🎜
🎜🎜rrreee🎜え?何かが間違っているようです。。。 __after は実行されません。 🎜🎜もちろん、これは __after が indexAction の上に記述されていることが原因ではありません。変更されたコード: 🎜
🎜🎜rrreee🎜 今回は問題なく、期待された結果と一致しています。 🎜🎜 注意していれば、コード return this.end() が indexAction から __after に移動されていることに気づいたはずです。 🎜🎜this.end() は内部で Node.js HTTP response.end() オペレーションを実行し、応答ストリーム全体が終了したことを示します。 __after の場合、このコードは __after 内で実行する必要があります。 🎜
__call no-op
🎜 このマジックメソッドは少し特殊で、前の 2 つのマジックメソッドのように特定のプロセスノードで実行するためには使用されませんが、init< の役割を共有します。 /code> 部分的な責任: 定義されていないアクションによってコントローラーがアクセスされたときを検出するために使用され、<code>__call が操作を引き継ぎます。 🎜
🎜🎜rrreee🎜 アクセスされた testAction が存在しない場合、フレームワークは処理のために __call を実行することがわかります。エラーをログに記録し、応答の出力を終了します。 🎜🎜サンプルコードでは、__call を第 2 レベルのサブクラス (通常は基本クラス) に配置し、すべてのサブクラスの不正アクセス処理を制御できます。 🎜🎜🎜ヒント: このメソッドは、アクションが存在しない場合の状況をキャプチャするためにのみ使用できますが、コントローラーが存在しない場合は、(フレームワークによって引き継がれる) 404 エラーが直接トリガーされ、干渉することはできません。 🎜Controllerが存在しない状況を捉えたい場合はフレームワークのエラークラスを拡張する必要がありますが、それについては別の記事で説明します。 🎜🎜🎜外部呼び出しメソッド🎜🎜Thinkjs 公式ウェブサイトの API には、別のコントローラーをインスタンス化するためのインターフェースがありますが、これの具体的な使用方法は説明されていません:🎜
🎜🎜rrreee🎜したがって、通常、このメソッドは次のようになります。兄弟レベルのコントローラーをインスタンス化したり、データを取得したり、ビジネスプロセスをトリガーしたりするには、次のコードを参照してください: 🎜
🎜🎜rrreee🎜 thinkjs が次の方法を提供していることがわかります。オンデマンドでコントローラーをインスタンス化し、そのメソッドを実行します。 🎜🎜一見すると、このメソッドは this.redirect の結果に非常に似ています (__call のマジックメソッドがトリガーされない点を除く)。このメソッドを提供する thinkjs を使用しますか?コードを見てみましょう: 🎜

// src/home/controller/util.js'use strict';export default class extends think.controller.base { calcGPSDistance(lat, lng){// 计算 GPS 两点直线距离return distance; } calcBaiduDistance(lat, lng){// 计算百度大地坐标两点直线距离return distance; } calcSosoDistance(lat, lng){// 计算 Soso坐标两点直线距离return distance; }}
ログイン後にコピー
ログイン後にコピー
这是一个助手 Controller，一个“隐身”的 Controller，从 url 是无法直接访问到的，因为它的所有方法名均没有 Action 后缀。
这个场景下，运行时实例化 Controller 并操作其方法的方式就派上用场了。
内置 http 对象
控制器在实例化时，会将 http 传递进去。该 http 对象是 ThinkJS 对 req 和 res 重新包装的一个对象，而非 Node.js 内置的 http 对象。
Action 里如果想获取该对象，可以通过 this.http 来获取。

thinkjs 官网
扩展应用：增加一个 n 秒后自动跳转的过渡页功能
thinkjs 框架并没有给我们准备这样一个过渡页面的功能，那么我们可以自己实现一个来练练手，上代码：

// src/common/controller/complete.js'use strict';export default class extends think.controller.base { /** * 显示中转页面 * * 调用方式： * let complete = think.controller('complete', this.http, 'common'); * return complete.display('应用新增成功！', '/', 5); * * @param msg 提示文字，支持 HTML * @param url 后续自动跳转的目标地址 * @param delay 停留秒数 * @returns {think.Promise} */ display(msg, url='', delay=3) {let tpl = 'common/complete/200';let opt = think.extend({}, {type: 'base', file_depr: '_', content_type: 'text/html'});this.fetch(tpl, {}, opt).then(content => { content = content.replace(/COMPLETE_MESSAGE/g, msg); if (url) {content = content.replace(/TARGET_URL/g, url);content = content.replace(/WAIT_SECONDS/g, delay); }; this.type(opt['content_type']); return this.end(content);}).catch(function(err){ return this.end('');}); }}
ログイン後にコピー
ログイン後にコピー

<!DOCTYPE html><html><head><title>正在跳转 - 荆秀网</title></head><body><a href="/"><img src="/static/img/logo.png" alt="XxuYou" width="60"></a> <h1>COMPLETE_MESSAGE</h1><pre class="brush:php;toolbar:false">提示：页面将在 WAIT_SECONDS 秒后重定向到 <a href="TARGET_URL">TARGET_URL</a>
ログイン後にコピー
ログイン後にコピー

// Controller 内调用方式indexAction() { // 业务流程。。。 let complete = think.controller('complete', this.http, 'common'); return complete.display('操作成功！', '/', 5);}
ログイン後にコピー
ログイン後にコピー
以上新增的 src/common/controller/complete.js 是一个非侵入式的成功业务处理页面，其内部运行与兄弟 Controller src/common/controller/error.js 类似。

以上新增的 view/common/complete_200.html 则是相关的过渡页面的模版。其中存在三个占位符（分别对应 display 方法的入參）：

COMPLETE_MESSAGE 用于操作成功的文字提示内容

TARGET_URL 用于稍后会自动进入的目标 url

WAIT_SECONDS 用于页面过渡时间，单位是秒

实现原理其实非常简单，阅读一下两个新增的代码就能明白。

扩展应用：快速构建 REST API

其实这部分因为太简答，我本来是不想写的。不过考虑到教程的完整性，还是写一下比较好。

REST 的概念介绍这里不再赘述，有兴趣的可以自行搜索。

thinkjs 的官网说到：

自动生成 REST API，而无需写任何的代码。

此言不虚，创建 Controller 时只要增加一个参数（thinkjs controller [name] --rest），即可生成一个能够操作数据库表的 REST API。

当然操作的约定也还是有的：

GET /ticket #获取ticket列表

GET /ticket/12 #查看某个具体的ticket

POST /ticket #新建一个ticket

PUT /ticket/12 #更新ticket 12

DELETE /ticket/12 #删除ticekt 12

遵从了上述操作约定，的确是可以直接操作数据库表内的数据了。

只是这样的 API 只不过是一个“裸奔”状态的 API，还是不能直接投入使用。因为它不仅要求请求方熟悉所有的数据表结构，还要依赖请求方来维护多表数据之间的关联性，更不用提什么操作路径的映射、字段映射、返回数据的映射等等问题了。

就算 thinkjs 还提供了字段过滤、自定义 GET/POST/PUT/DELETE 方法来进行更多的定制，那么最终的结果很可能是在当前的 API 外面再包裹一层能够提供操作路径映射、鉴权令牌发放和识别、字段映射、关联数据维护等等。

当然作为一个开发框架，thinkjs 确实已经做的够多了，足够优秀了，因此我们还是需要像构建一个应用系统那样去完整构建一个可供实施的 REST API 的生产模型。
以上がNode.jsフレームワーク ThinkJS開発コントローラーの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。