PythonでVue.jsを使う

2020年11月8日2021年1月24日

この記事からの発展となります。
まだご覧になっていない方は是非読んでみてください。

サンプルデータはscikit-learnから参考とさせていただきます。

まずは前回記事で作成したmain.pyを編集します。
必要なライブラリをインポートしてメソッドを追記します。

@app.route('/json',  methods = ['GET'])
def test_json():
    boston = datasets.load_boston()
    df_boston = pd.DataFrame(boston.data, columns = boston.feature_names)
    df_head = df_boston.head()
    df_dicts = df_head.to_dict(orient='records')
    list = []
    for i, df in enumerate(df_dicts, 1):
        json = {
            'number' : i,
            'age'    : df['AGE'],
            'b'      : df['B'],
            'chas'   : df['CHAS'],
            'crim'   : df['CRIM'],
            'dis'    : df['DIS'],
            'indus'  : df['INDUS'],
            'lstat'  : df['LSTAT'],
            'nox'    : df['NOX'],
            'ptratio': df['PTRATIO'],
            'rad'    : df['RAD'],
            'rm'     : df['RM'],
            'tax'    : df['TAX'],
            'zn'     : df['ZN']
        }
        list.append(json)
    return jsonify(list)

今回はhead()縛りで5件のみの表示とします。
index側はVue.jsを使用しますのでデータフレームから一行ずつ取り出してJSON形式に詰め直しています。

次はindex.htmlの編集をします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>BOSTON DF</h1>
    <div id="sample_app">
        <table class="table table-striped">
            <thead>
              <tr>
                <th>#</th>
                <th>CRIM</th>
                <th>ZN</th>
                <th>INDUS</th>
                <th>CHAS</th>
                <th>NOX</th>
                <th>RM</th>
                <th>AGE</th>
                <th>DIS</th>
                <th>RAD</th>
                <th>TAX</th>
                <th>PTRATIO</th>
                <th>B</th>
                <th>LSTAT</th>
              </tr>
            </thead>
            <tbody>
                <tr v-for="result in results">
                    <td>[[ result.number]]</td>
                    <td>[[ result.crim ]]</td>
                    <td>[[ result.zn ]]</td>
                    <td>[[ result.indus ]]</td>
                    <td>[[ result.chas ]]</td>
                    <td>[[ result.nox ]]</td>
                    <td>[[ result.rm ]]</td>
                    <td>[[ result.age ]]</td>
                    <td>[[ result.dis ]]</td>
                    <td>[[ result.rad ]]</td>
                    <td>[[ result.tax ]]</td>
                    <td>[[ result.ptratio ]]</td>
                    <td>[[ result.b ]]</td>
                    <td>[[ result.lstat ]]</td>
              </tr>
            </tbody>
          </table>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    <script>
        new Vue({
          el: '#sample_app',
          delimiters: ['[[', ']]'], // Flaskのdelimiterとの重複を回避
          data: {
            results: []
          },
          created() {
              axios.get('/json')
              .then(response => {
              this.results = response.data;
              })
              .catch(error => {
              console.log(error);
              });
          }
        });
    </script>
</body>
</html>

入力できたら下記アクセスしてみてください。