Q&A
冒頭文章で訴えられても困りますので不要です。きちんと要件”のみ”を書き、自身が調べてみたことやってみたことを記載してください。（できれば質問テンプレートをご活用ください https://teratail.com/help/question-tips#questionTips3-8 )
大変支離滅裂な質問になってしまい申し訳無いです。
今度サーバーサイドがJAVAでjspをViewに使用するWebアプリケーションのjsp部分の製作をすることになりました。
しかし自分は普段Vueなどのnodejsで動くフレームワークを触っているので、jspや素のJavaScriptはあまり得意ではありません。コンポーネント化しての開発も魅力的なVue.jsのような形式で開発したいなという時にふと思ったのですが、VueのフレームワークNuxt.js(SSRフレームワークだが静的サイトの出力も出来る)にてhrml、css、jsの部品を作成し、それをjspに書き込むという方法で無理やり出来るのではないかと思いました。
そもそもサーバーサイドにnodeを使えばいい話ですがそうも行かないので、、、
コレを行った際に何か重大な問題は発生しますか？(コードの可読性、ルーティングなどに対応出来ないという点は承知です)
またどう考えても他にいい感じの方法がある気がしてるのですが何か(大雑把で申し訳ないです)良い案御座いませんでしょうか、、、？
回答1件
0
ベストアンサー
もっと単純に考えたほうが良いのではないでしょうか？
サーバーサイドはJavaでJSPページをレンダリングして、レンダリングされたページのHTMLでvue読み込めばいいだけだと思いますよ。
私も今の開発ではサーバーサイドJava(SpringBoot)でフロントをvueJS組み込んでおり、そこでもHTMLの出力はJavaで行ってHTMLでVueを読み込んで行うスタイルです。SPAではなく普通にページ遷移はJavaが行うマルチページでやってます。
vueだとSPAのイメージを多く持たれているのでページ遷移のあるものできないと思われる方もいるかと思いますが各ページ毎に用意したvueのエントリポイントのapp.jsを用意すればいいですよね。
JSPの階層構造と対応するvueの階層構造を合わせてあげればわかりやすいです。
フォルダ毎にapp.jsを作るのはwebpackのオプションでやってくれます。
webpackで複数のディレクトリへ出力する
Qiita - webpackでモジュール解決しながらディレクトリ構成を保ったまま書き出す
開発時の階層例
text
1 ---- jsp (ここのフォルダの名前は適当です自分の環境に読み替えてください) 2 | +-- home 3 | | +- index.jsp 4 | | +- home.jsp 5 | +-- user 6 | | +- index.jsp 7 | | +- new.jsp 8 | | +- confirm.jsp 9 +-- css 10 +-- js 11 +-- images 12 +-- scripts( vueの元ソース置き場) 13 | +-- home 14 | | +- index 15 | | + app.js 16 | | + page.vue 17 | | +- home 18 | +-- user 19 | | +- index 20 | | +- new 21 | | +- confirm 22 | +-- components (共通で使えるVueComponents) 23 | 24 +-- dist(コンパイル後のvue置き場) 25 +-- home 26 | +- index 27 | + app.js 28 | +- home 29 | + app.js 30 +-- user 31 | +- index 32 | + app.js 33 | +- new 34 | + app.js 35 | +- confirm 36 | + app.js
JSPで出力するページは極端な話以下のようなHTMLで良いです。
html
1<body> 2 <!-- home/index --> 3 <div id="app"></div> 4 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 5 <!-- home/indexに使用するvueのエントリポイント ページ毎に異なる app.jsを読む--> 6 <script src="dist/home/index/app.js"></script> 7</body>
各ページに用意するapp.jsは以下のようなものですね。
この中で各ページのレンダリングに使う.vueを読み込んであげればよいです。
js
1import Vue from "vue"; 2import Page from "./page"; 3 4var app = new Vue({ 5 el: '#app', 6 components: { Page} 7});
投稿2018/06/19 21:55
編集2018/06/20 00:30
総合スコア2404
なるほど！とても聞きたかった部分が的確に聞けて良かったです！ありがとうございます！
javaでJSONを生成してそれをvue側に渡したいときにどのように処理しているかなどはご存知ではありませんか？
Java側のフレームワークに何を使用しておられるのかわからないですが、APIとなるメソッドのHTTPResponceにJSONの文字列を返すことになります。JSON文字列の生成には Jacksonというライブラリを使用しています。このライブラリを使うとJavaのクラスオブジェクトやMapオブジェクトとJSON文字列の変換をやってくれます。 "Jackson JSON"というキーワードで検索するといろいろ参考記事出てきます。
私はSpringBoot使用しているため @RestControllerというアノテーションで一発ですが
下記に実際の流れがわかるServeletでJackson使用したサンプルコードがありました。
https://www.websec-room.com/2013/08/03/921
あなたの回答
tips
プレビュー
