Springboot+jsp+ui フレームワーク (vue、layui、elementui、bootstrap5) を使用してプロジェクトを構築するアイデアを提供し、参照用のソース コードを提供します。@source code: https://
gitee .com/FnTop/j4n-spring-boot-jsp-vue-easyui
コンセプト
-
Spring Boot は、Java ベースの Web アプリケーションを迅速に構築するためのフレームワークです。自動構成や組み込み組み込みサーバーなど、開発プロセスを簡素化する機能を提供します。
-
JSP (Java Server Pages) は、HTML ページを動的に生成するための Java ベースのサーバー側テクノロジです。Spring Boot では、JSP を使用してビュー層を構築できます。
-
Vue は、ユーザー インターフェイスを構築するための軽量のフロントエンド インターフェイス フレームワークです。ボトムアップ アプローチを使用してアプリケーションを構築し、使いやすいコンポーネント化された開発モデルを提供します。
-
EasyUI は、テーブル、フォーム、レイアウトなどの豊富なユーザー インターフェイス コンポーネントを提供する jQuery ベースの UI ライブラリです。美しく使いやすい Web アプリケーション インターフェイスを迅速に構築するのに役立ちます。
要約すると、Spring Boot JSP Vue EasyUI は、Spring Boot をバックエンド フレームワークとして、JSP をビュー レイヤ テクノロジとして、Vue をフロントエンド フレームワークとして、EasyUI を UI ライブラリとして使用する Web アプリケーション開発モデルです。この組み合わせにより、開発が迅速で保守が容易で、優れたユーザー エクスペリエンスを備えた Web アプリケーションを提供できます。
フローチャート
プロセスの説明
以下のコードが理解できない場合は、プロジェクト テンプレートを取得して確認してください。
j4n-spring-boot-jsp-vue-easyui
ModelAndView (略してMVC) 私は個人的にモデルデータ(モデル)とビュー分析(ビュー)を略して呼んでいます。以下の説明はモデルとビューの観点から説明されます
最初の一歩
プロジェクトを開始し、インデックス アドレスに従ってフロントエンド プロジェクトのホームページにアクセスし、通常のフロントエンドとバックエンドの対話を実行します。
第二段階
フロントエンドのインタラクション
- フロントエンドがリクエストを送信し、コントローラーがそれを受信し、コードが DB データを処理してモデルにカプセル化します。ビューを介した JSP ページ転送。JSP ページでは、
el表达式モデル データは + easyui コンポーネントまたは元の HTML を通じてレンダリングされます。それ以来、動的ページデータ対話 (ModelAndView 対話) が完了しました。
//简单的ModelAndView
ModelAndView modelAndView = new ModelAndView();
//假设 hello world 就是db的数据，//省略db的业务操作
modelAndView.addObject("message", "Hello World!");
modelAndView.setViewName("hello");
return modelAndView;
当然也可以这样写，但是要配置下方yaml的视图解析。这是可以不配置，只是作者忘记了默认视图解析路径是啥
ModelAndView modelAndView = new ModelAndView();
modelAndView.addObject("message", "Hello World!");
return "hello";
ヤムル
spring:
mvc:
view:
prefix: /WEB-INF/views/
suffix: .jsp
エル式
${
message}
- Ajax がリクエストを送信し、RestContrller がそれを受信し、コードが DB データを処理してオブジェクトにカプセル化し、処理のためにデータを JSON 形式で JSP ページに返します。JSP ページに到達したら、easyui フレームワークのみを介してデータをバインドしてレンダリングできます。取得したデータは、vue を介してデータにレンダリングすることもできます。マウントされた初期化ページは easyUI コンポーネントをマウントするため、easyui コンポーネントはデータに関連付けられます (JSON インタラクション)
/**
@RestController底层是下方两个注解。@Controller 默认返回是modelandview 。如果加了@ResponseBody则返回是JSON
RestController是写在类上的，相当给所有方法加上了@ResponseBody。如果一个控制层要同时存在modelandview 和JSON返回。那类上的注解必须是Controller,需要modelandview 返回的只要在方法上加上@ResponseBody即可
*/
@Controller
@ResponseBody
- 別の種類の対話も Ajax リクエストですが、モデルと JSON データを同時にフロントエンドに送信できます。モデルは jsp テクノロジーを通じて解析および取得され、JSON は ajax (ModelAndView または JSON インタラクション) を通じてレンダリングされます。
要約する
-
従来のプロジェクトは、Spring コンテナに依存して、XML を通じて Bean を構成し、依存関係の注入を完了します。Tomcat も独自に設定する必要があり、設定や開発が非常に面倒です。Springboot には Tomcat が組み込まれており、アノテーションを通じて依存関係の注入を完了できるため、開発が非常に便利かつ簡単になります。
-
vue を使ったらフロントエンドとバックエンドを分けたらどうだという人もいますが、この質問はどうでしょうか。会社のプロジェクトは jsp で開発されており、会社の本来の業務をすべて vue 開発に置き換えることができない限り、どうすることもできません。これ。。。半年ではなくても1年分のお金です。
-
Lauiui またはブートストラップを使用できますか? もちろん。フロントエンド UI フレームワークが js または jquery パッケージである限り、原理は同じです。
ありがとう
- この記事を最初から最後まで読んでいただき、誠にありがとうございます。この記事の内容があなたのインスピレーションと助けになれば幸いです。他にご質問がある場合、またはさらに理解が必要な場合は、お気軽に私のダイナミクスに従ってメッセージを残してください。
- 最後に、作者をフォローして「いいね！」をしていただけますか。ありがとうございます。
- 集める価値があると思うなら集めてもいいよ