当社はIT技術のオンライン教育を得意としたセミナー専門会社です。

ITエンジニアの技術力UPをお約束します。

VueアプリでJSONの取得とJSONでマウントして動的にコンテンツブロックを上書き

最初にnodeのパッケージマネージャを便利なyarnにしてみよう。facebookの開発で使われたパッケージマネージャということでnpmより使い勝手が良いとの噂がある。そしてこのパッケージマネージャでVue-cliをインストールする。今回はVueでサーバーサイドアプリを実験してみよう。尚且、VueでJSONを取得して所定のHTMLのブロックへデータを上書きするテストをやってみたいと思います。

yarnのインストール方法

vueアプリ作成のためにプロジェクトを作成し初期アプリを立ち上げる

デフォルトでは8080で起動するので設定ファイルを作成

ドキュメントルート配下にファイル名「vue.config.js」で作成します。

JSONから取得した情報をvueスクリプトでページへ展開する箇所を実装。

プロジェクトページの配下にsrcフォルダーがありますが、ここにコンテンツのプログラムやテンプレートを配置します。publicは静的ファイルを配置します。

最初にsrc配下のmain.jsを見ていきましょう。ファイルを開くとこんな感じです。レンダーにアプリケーションインタフェイスを渡してApp.vueのテンプレート設定を 読み込ませている作りになっていますね。ここはそういうルールだと理解すれば良いと思います。そしてレンダーしたものをHTMLの#appのidブロックへマウントして上書き する感じの処理になっています。

main.jsの中身App.vueの中身vueスクリプトで外部JSONファイルをHTMLマウントして上書きする処理。

ブラウザーで確認してみよう!

http://localhost:3000/ な感じでブラウザーから接続してみよう