diff --git a/README.md b/README.md index 4978f64..3fbc540 100644 --- a/README.md +++ b/README.md @@ -2,81 +2,83 @@ [![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE) [![npm version](https://badge.fury.io/js/v-ajax-form.svg)](https://badge.fury.io/js/v-ajax-form) -**[ENGLISH TRANSLATE VERSION](README_ENG.md)** +**[日本語版はこちら](README.md)** -## はじめに +## Introduction -v-ajax-formは、Vue.jsのカスタムエレメントです。 -formタグを置き換えることで非同期通信処理を実現します。 +v-ajax-form is a custom element of Vue.js. Asynchronous communication processing is realized by replacing the form tag. -サーバからの応答はディスパッチされるformタグのイベントに、 -コールバックメソッドを設定することで処理することができます。 -HTMLと最低限のVue.jsを理解していれば、学習コストゼロで使えることを目指しました。 +Responses from the server can be processed by setting a callback method in the dispatched form tag event. -## 背景 -近年のWebサービスに求められる要件では -従来のページ遷移のみに頼った情報更新だけでは不十分であり、 -ページの一部のみの更新を行う非同期通信処理を使ったajaxを活用することを前提とする要件が当たり前のものとして求められるようになりました。 -しかし、HTMLが標準で備えていて最も手軽に入力値をサーバに送る機能であるFormタグはサーバとの通信の際にページ遷移を伴うものとなっています。 +If you understand HTML and the minimum Vue.js, we aimed to use it at zero learning cost. -非同期通信処理を保守性を維持した上で効率化する実装方法を検討した結果、 -Formタグと同じインターフェースで非同期通信処理を実現するVueのカスタムエレメントを実装して使うことが最適だと考えました。 +## Background +It is premised on using ajax that uses asynchronous communication processing that updates only a part of a page, and it is not enough to update information that relies only on conventional page transitions in the requirements required for Web services in recent years. Requirements are now taken for granted. -そのアイデアを実現し汎用的なものとして広く活用するために、このVue.jsプラグインを実装して公開しました。 -## インストール +However, the Form tag, which is the standard HTML feature that sends input values ​​to the server most easily, involves page transitions when communicating with the server. -3つの方法を用意しています。 -通信に必要な実装はaxiosに移譲しています(餅は餅屋ということで)。合わせてロードしてください。 -### ダウンロード -masterブランチの最新版をダウンロードしてください。 +As a result of examining the implementation method to improve the efficiency of asynchronous communication processing while maintaining maintainability, I thought it was optimal to implement and use Vue custom elements that realize asynchronous communication processing with the same interface as the Form tag . -[axios](https://github.com/axios/axios)もダウンロードしてください。 +This Vue.js plug-in was implemented and published to realize the idea and make it widely used as a general-purpose one. + +## Install + +Three methods are available. The implementation necessary for communication has been transferred to axios (One should go to specialists for the best results). Please load together. + +### Download +Download the latest version of the master branch. + + +Also download [axios](https://github.com/axios/axios). ### CDN -headタグ内に次のコードを貼り付けてください。 +Paste the following code inside the head tag. ``` html ``` ### npm -axiosも一緒に落ちてきます。 +axios will download together. + ``` bash npm install v-ajax-form ``` -## サンプルコード +## Sample code + +Information acquisition page for books. -本の情報取得ページです。 [jsfiddle](https://jsfiddle.net/hosokawat/tfhn2cp3/) -株式会社カーリル様(https://calil.jp) が提供している、 -openBDプロジェクトの「[書誌情報の取得API](https://openbd.jp)」をバックエンドに利用しました。 +[Bibliographic Information Acquisition API](https://openbd.jp) by The openBD project's was used as the back end. + -この場を借りてお礼申し上げます。ありがとうございます。 +I would like to take this moment to say thank you. -## 使い方 +## How to use -**/request**に対してpostメソッドでparam1の値を送信するHTMLコードは次のように記述できます。 +The HTML code that sends the value of param1 to the ***/request*** with the post method can be written as follows: ``` html
- - + +
``` -上記コードによるフォームは通信時に画面遷移を伴います。 +Forms with the above code are accompanied by screen transitions during communication. + -そして、**v-ajax-form**を利用すると、同様の条件で非同期通信を行うフォームを次のように記述できます。 +And using v-ajax-form, you can write a form that performs asynchronous communication under the same conditions as follows. ``` html @@ -85,9 +87,11 @@ openBDプロジェクトの「[書誌情報の取得API](https://openbd.jp)」 ``` -上記コードでは非同期通信処理のサーバ応答を処理するコードが含まれていません。 +The above code does not include the code for processing the server response of asynchronous communication processing. + + +The callback function for processing the response from the server can be registered as an event listener. -サーバからの応答を処理するためのコールバック関数はイベントリスナーとして登録することができます。 ``` html @@ -97,6 +101,7 @@ openBDプロジェクトの「[書誌情報の取得API](https://openbd.jp)」 ``` ``` javascript + methods: { receive: function(res){ // print out server response @@ -105,7 +110,8 @@ methods: { } ``` -クラスやID、もしくは任意の属性を設定することも可能です。 +class, ID, or any attribute can be set. + ``` html @@ -113,52 +119,52 @@ methods: { ``` -全てVueのレンダリングでリプレースされるformタグにコピーされます。 - -## 仕様 +Everything is copied to the form tag that will be replaced by Vue rendering. -### エレメント名 +## Specification +### Element v-ajax-form -### プロパティ +### property -|属性名|型|解説| +|Attribute name|Type|Explanation| |-------|----------|----------| -|action|String|非同期通信のリクエスト先| -|method|String|非同期通信のHTTPメソッド| -|uri-encode|Boolean|リクエストパラメータのキーと値をencodeURIComponentでエンコードします| -|*(その他)|String|formタグにコピーされます| +|action|String|Request destination of asynchronous communication| +|method|String|HTTP method for asynchronous communication| +|uri-encode|Boolean|Encode request parameter key and value with encodeURIComponent| +|*(others)|String|copied to form tag| -### イベント -v-ajax-formタグはformタグにリプレースされ、formのsubmitのリスナーを非同期処理に置き換えます。 +### Event +The v-ajax-form tag is replaced with the form tag, and the form submit listener is replaced with asynchronous processing. -非同期通信処理の進捗に伴い、次のイベントが順番にディスパッチされます。 -[start] -> [receive または fail] -> [done] +As the asynchronous communication process progresses, the following events are dispatched in order. -|イベント名|タイミング|パラメータ| +[start] -> [receive or fail] -> [done] + +|Event name|Timing|Parameters| |-------|----------|----------| -|start|通信の直前|リクエストパラメータ| -|receive|通信成功後|リクエストパラメータ&レスポンス・リクエスト情報| -|fail|通信失敗後|リクエストパラメータ&レスポンス・リクエスト情報| -|done|通信処理の完了後|リクエストパラメータ| +|start|Immediately before communication|Request parameters| +|receive|After successful communication|Request parameter & response request information| +|fail|After communication failure|Request parameter & response request information| +|done|After communication processing is completed|Request parameters| -### レンダリング仕様 -v-ajax-formはformタグにリプレースされ、全ての属性はformタグにコピーされます。 +### Rendering specification +v-ajax-form is replaced with the form tag, and all attributes are copied to the form tag. **Before** ``` html - - + + ``` **After** ``` html
- - + +
``` diff --git a/README_ENG.md b/README_ENG.md deleted file mode 100644 index 9525a16..0000000 --- a/README_ENG.md +++ /dev/null @@ -1,167 +0,0 @@ -# v-ajax-form -[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE) -[![npm version](https://badge.fury.io/js/v-ajax-form.svg)](https://badge.fury.io/js/v-ajax-form) -## Introduction - -v-ajax-form is a custom element of Vue.js. Asynchronous communication processing is realized by replacing the form tag. - - -Responses from the server can be processed by setting a callback method in the dispatched form tag event. - - -If you understand HTML and the minimum Vue.js, we aimed to use it at zero learning cost. - -## Background -It is premised on using ajax that uses asynchronous communication processing that updates only a part of a page, and it is not enough to update information that relies only on conventional page transitions in the requirements required for Web services in recent years. Requirements are now taken for granted. - - -However, the Form tag, which is the standard HTML feature that sends input values ​​to the server most easily, involves page transitions when communicating with the server. - - -As a result of examining the implementation method to improve the efficiency of asynchronous communication processing while maintaining maintainability, I thought it was optimal to implement and use Vue custom elements that realize asynchronous communication processing with the same interface as the Form tag . - - -This Vue.js plug-in was implemented and published to realize the idea and make it widely used as a general-purpose one. - -## Install - -Three methods are available. The implementation necessary for communication has been transferred to axios (One should go to specialists for the best results). Please load together. - -### Download -Download the latest version of the master branch. - - -Also download [axios](https://github.com/axios/axios). - - -### CDN -Paste the following code inside the head tag. -``` html - - -``` - -### npm -axios will download together. - -``` bash -npm install v-ajax-form -``` - - -## Sample code - -Information acquisition page for books. - - -[jsfiddle](https://jsfiddle.net/hosokawat/tfhn2cp3/) - - -[Bibliographic Information Acquisition API](https://openbd.jp) by The openBD project's was used as the back end. - - -I would like to take this moment to say thank you. - -## How to use - -The HTML code that sends the value of param1 to the ***/request*** with the post method can be written as follows: - -``` html -
- - -
-``` -Forms with the above code are accompanied by screen transitions during communication. - - -And using v-ajax-form, you can write a form that performs asynchronous communication under the same conditions as follows. - -``` html - - - - -``` - -The above code does not include the code for processing the server response of asynchronous communication processing. - - -The callback function for processing the response from the server can be registered as an event listener. - - -``` html - - - - -``` - -``` javascript - -methods: { - receive: function(res){ - // print out server response - console.log(res); - } -} -``` - -class, ID, or any attribute can be set. - -``` html - - - - -``` - -Everything is copied to the form tag that will be replaced by Vue rendering. - -## Specification - -### Element -v-ajax-form - -### property - -|Attribute name|Type|Explanation| -|-------|----------|----------| -|action|String|Request destination of asynchronous communication| -|method|String|HTTP method for asynchronous communication| -|uri-encode|Boolean|Encode request parameter key and value with encodeURIComponent| -|*(others)|String|copied to form tag| - -### Event -The v-ajax-form tag is replaced with the form tag, and the form submit listener is replaced with asynchronous processing. - - -As the asynchronous communication process progresses, the following events are dispatched in order. - -[start] -> [receive or fail] -> [done] - -|Event name|Timing|Parameters| -|-------|----------|----------| -|start|Immediately before communication|Request parameters| -|receive|After successful communication|Request parameter & response request information| -|fail|After communication failure|Request parameter & response request information| -|done|After communication processing is completed|Request parameters| - - -### Rendering specification -v-ajax-form is replaced with the form tag, and all attributes are copied to the form tag. - -**Before** -``` html - - - - -``` -**After** -``` html -
- - -
-``` diff --git a/README_JP.md b/README_JP.md new file mode 100644 index 0000000..9a7ce8c --- /dev/null +++ b/README_JP.md @@ -0,0 +1,164 @@ +# v-ajax-form +[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE) +[![npm version](https://badge.fury.io/js/v-ajax-form.svg)](https://badge.fury.io/js/v-ajax-form) + +**[ENGLISH TRANSLATION VERSION](README.md)** + +## はじめに + +v-ajax-formは、Vue.jsのカスタムエレメントです。 +formタグを置き換えることで非同期通信処理を実現します。 + +サーバからの応答はディスパッチされるformタグのイベントに、 +コールバックメソッドを設定することで処理することができます。 + +HTMLと最低限のVue.jsを理解していれば、学習コストゼロで使えることを目指しました。 + +## 背景 +近年のWebサービスに求められる要件では +従来のページ遷移のみに頼った情報更新だけでは不十分であり、 +ページの一部のみの更新を行う非同期通信処理を使ったajaxを活用することを前提とする要件が当たり前のものとして求められるようになりました。 + +しかし、HTMLが標準で備えていて最も手軽に入力値をサーバに送る機能であるFormタグはサーバとの通信の際にページ遷移を伴うものとなっています。 + +非同期通信処理を保守性を維持した上で効率化する実装方法を検討した結果、 +Formタグと同じインターフェースで非同期通信処理を実現するVueのカスタムエレメントを実装して使うことが最適だと考えました。 + +そのアイデアを実現し汎用的なものとして広く活用するために、このVue.jsプラグインを実装して公開しました。 + +## インストール + +3つの方法を用意しています。 +通信に必要な実装はaxiosに移譲しています(餅は餅屋ということで)。合わせてロードしてください。 + +### ダウンロード +masterブランチの最新版をダウンロードしてください。 + + +[axios](https://github.com/axios/axios)もダウンロードしてください。 + + +### CDN +headタグ内に次のコードを貼り付けてください。 +``` html + + +``` + +### npm +axiosも一緒に落ちてきます。 +``` bash +npm install v-ajax-form +``` + + +## サンプルコード + +本の情報取得ページです。 + +[jsfiddle](https://jsfiddle.net/hosokawat/tfhn2cp3/) + +株式会社カーリル様(https://calil.jp) が提供している、 + +openBDプロジェクトの「[書誌情報の取得API](https://openbd.jp)」をバックエンドに利用しました。 + +この場を借りてお礼申し上げます。ありがとうございます。 + +## 使い方 + +**/request**に対してpostメソッドでparam1の値を送信するHTMLコードは次のように記述できます。 + +``` html +
+ + +
+``` +上記コードによるフォームは通信時に画面遷移を伴います。 + +そして、**v-ajax-form**を利用すると、同様の条件で非同期通信を行うフォームを次のように記述できます。 + +``` html + + + + +``` + +上記コードでは非同期通信処理のサーバ応答を処理するコードが含まれていません。 + +サーバからの応答を処理するためのコールバック関数はイベントリスナーとして登録することができます。 + +``` html + + + + +``` + +``` javascript +methods: { + receive: function(res){ + // print out server response + console.log(res); + } +} +``` + +クラスやID、もしくは任意の属性を設定することも可能です。 +``` html + + + + +``` + +全てVueのレンダリングでリプレースされるformタグにコピーされます。 + +## 仕様 + +### エレメント名 + +v-ajax-form + +### プロパティ + +|属性名|型|解説| +|-------|----------|----------| +|action|String|非同期通信のリクエスト先| +|method|String|非同期通信のHTTPメソッド| +|uri-encode|Boolean|リクエストパラメータのキーと値をencodeURIComponentでエンコードします| +|*(その他)|String|formタグにコピーされます| + +### イベント +v-ajax-formタグはformタグにリプレースされ、formのsubmitのリスナーを非同期処理に置き換えます。 + +非同期通信処理の進捗に伴い、次のイベントが順番にディスパッチされます。 + +[start] -> [receive または fail] -> [done] + +|イベント名|タイミング|パラメータ| +|-------|----------|----------| +|start|通信の直前|リクエストパラメータ| +|receive|通信成功後|リクエストパラメータ&レスポンス・リクエスト情報| +|fail|通信失敗後|リクエストパラメータ&レスポンス・リクエスト情報| +|done|通信処理の完了後|リクエストパラメータ| + + +### レンダリング仕様 +v-ajax-formはformタグにリプレースされ、全ての属性はformタグにコピーされます。 + +**Before** +``` html + + + + +``` +**After** +``` html +
+ + +
+``` diff --git a/package.json b/package.json index 9034646..a5d185f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "v-ajax-form", - "version": "1.0.5", + "version": "1.0.6", "description": "vue.js component plug-in to make Form tag compatible with ajax request", "main": "v-ajax-form.js", "scripts": { @@ -32,4 +32,4 @@ "rollup-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.4" } -} +} \ No newline at end of file