Symfoware

Symfowareについての考察blog

Riot ajaxで取得したjsonデータをテーブルに表示する(axios使用)

lua nginx moduleでデータベースにアクセスし、json形式のデータを返却することができました。
lua nginx moduleからMariaDB(MySQL)に接続する(lua-sql-mysql)

Riotで取得したjsonを表示してみようと思います。


axios



Riotにajax通信を行う機能はないので、別途ライブラリを使用することにしました。
こちらを参考に「axios」を使ってみます。
superagentとaxiosの使い分け
https://github.com/mzabriskie/axios

CDNを使うことにしました。
https://cdnjs.com/libraries/axios



json形式のデータ



lua nginx moduleからMariaDB(MySQL)に接続する(lua-sql-mysql)
こちらで使ったluaをそのまま使用することにしました。


  1. local driver = require 'luasql.mysql'
  2. env = assert (driver.mysql())
  3. con = assert (env:connect('sample', 'root', 'P@ssw0rd', 'localhost', 3306))
  4. -- 接続文字コードを変更
  5. assert (con:execute('SET NAMES utf8mb4'))
  6. -- データをを取得
  7. result = {}
  8. cur = assert (con:execute("SELECT id, value from t"))
  9. row = cur:fetch ({}, "a")
  10. while row do
  11. local copy_row = {}
  12. for field in pairs(row) do
  13. copy_row[field] = row[field]
  14. end
  15. table.insert(result, copy_row)
  16. row = cur:fetch (row, "a")
  17. end
  18. cur:close()
  19. con:close()
  20. env:close()
  21. -- テーブルをjsonに変換
  22. local cjson = require "cjson"
  23. json_text = cjson.encode(result)
  24. ngx.say(json_text)




テーブルの内容をそのまま返します。


nginxの設定ファイルの抜粋はこのようになりました。


    root /var/www/html;

    location /api {
        lua_code_cache off;
        default_type 'application/json';
        content_by_lua_file /var/dev/lua/sample.lua;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }



/apiでアクセスされた時はluaを実行。
それ以外は、/var/www/htmlにあるファイルを表示します。


Riot + axiosを記載するhtmlファイルは、/var/www/html/index.htmlに配置します。


  1. <!doctype html>
  2. <html lang="ja">
  3.     
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>Riot + axios</title>
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9. </head>
  10. <body>
  11.     <!-- ここにタグの内容を反映 -->
  12.     <my-tag></my-tag>
  13. </body>
  14. <!-- ここからRiotプログラム -->
  15. <!-- カスタムタグ -->
  16. <script type="riot/tag">
  17. <my-tag>
  18. <h3>ボタンクリックでデータ取得</h3>
  19. <div><input type="button" value="追加" onclick={ add }></div>
  20. <table border="1">
  21.     <thead>
  22.      <tr>
  23.         <td>id</td><td>value</td>
  24.      </tr>
  25.     </thead>
  26.     <tbody>
  27.     <tr each={ items }>
  28.         <td>{ id }</td>
  29.         <td>{ value }</td>
  30.     </tr>
  31.     </tbody>
  32. </table>
  33. var self = this;
  34. self.items = []
  35. add(event) {
  36.      axios.get('/api')
  37.         .then(function (response) {
  38.             self.items = response.data
  39.             self.update()
  40.         })
  41.         .catch(function (error) {
  42.             console.log(error)
  43.         });
  44. }
  45. </my-tag>
  46. </script>
  47. <!-- マウント -->
  48. <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
  49. <script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.4.0/riot%2Bcompiler.min.js"></script>
  50. <script>
  51. riot.mount('my-tag')
  52. </script>
  53.     
  54. </html>



データが再描画されなくて悩みましたが、こちらが参考になりました。
Riot.jsでAjaxを使った非同期通信について


初期状態

742_01.png

ボタンクリック後

742_02.png


ちゃんとデーブルの内容が更新されました。

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/04/09(日) 23:16:22|
  2. Lua
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Riot ajaxなど非同期通信後の再描画 | ホーム | lua nginx moduleでMessagePackのデータを使用(lua-MessagePack)>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1975-bcb8d08d
この記事にトラックバックする(FC2ブログユーザー)