Vue+ElementUI+Springbootの基礎知識は何ですか？

1. 旧世界の Web

バックエンド

(1) 当初、Web バックエンドは基本的に、HTML に埋め込むのに非常に便利なスクリプト言語である PHP で書かれていました。

(2) その後、Java が力を発揮し始め、JSP Servlet が主流になりました。

(3) Java は臭くて長いことに気づき、一般的に使用されるいくつかのアイデアをクラスにカプセル化し始めたので、Spring は成長し、AOP の側面と IoC 制御反転という 2 つの核となる概念を備えました。この 2 つのアイデアはまさに無敵です。

AOP: たとえば、プログラム内のあらゆる場所で例外がスローされる可能性があります。以前は、あらゆる場所で try と catch が必要でしたが、これは非常に面倒で、catch 後の処理も同様でした。 Web の出口をインターセプトするアスペクトがある場合、すべてのトラフィックはこのアスペクトを通過します。例外がインターセプトされてスローされると、対応するエラー コードが返されます。このようにして、多くの場所で、例外は単に例外を処理するだけで済みます。コードはもちろん、例外処理方法も統一されています。これは AOP の最も単純なアプリケーションです。

IoC: Spring は、インスタンス化する必要があるすべてのクラスに対して Bean と呼ばれる新しいオブジェクトを作成するコンテナーの概念を提供します (Wandou のこのサイトと同様)。クラス A がクラス B を必要とする場合、単にこのサイトを圧縮するように、マネージド クラス B オブジェクトをクラス A に挿入します。これにより、クラス間の結合が切り離されます。必要なものは何でも取得できます。相互間に事前依存関係はありません。クラス A を取得するとき、クラス A のコンストラクターについて心配する必要はありません。また、クラス A をインスタンス化する必要があります。クラスファースト B. クラス C... もちろん、実際にはクラス間には複雑な参照関係がたくさんありますが、インスタンス化の順序や依存関係ループの例外は Spring で管理できます。

(4) 人々が怠惰になり続けるにつれて、Spring XML を書きたくなくなったので、Springboot のようなものが生まれました。スローガンは「規約は設定よりも優れています」であり、いくつかの基本的なパラメータが設定されています。変更する必要がない場合はpomを直接参照して使用できますが、変更する場合はapplication.ymlファイルのオプションパラメータを設定するだけで済みます。 , 構成 Bean を記述するだけです。これで、すべての構成 Bean と application.yml が自動的に挿入され、クラス名がどの Bean であるか、ID が何であるか、初期化方法などを示す XML を記述する必要はありません。 Jetbrains の統合開発環境 IDEA を使用すると、Java の記述が非常に簡単になり、コーディング量が削減され、保守が容易になります。

(5) 未来: それは囲碁の世界でしょう。

フロントエンド

(1) はじめに HTML CSS JS スリーキングコング

(2) JSでは満足できないことが分かり開発したいと思いましたより便利なスクリプトが必要だったので、Jquery が登場しました。

HTML には繰り返しのステートメントが多すぎるため、JSP などのフロントエンドとバックエンドを組み合わせた言語が登場しました。 Thymeleaf は引き続き Springboot で利用でき、フロントエンドの初心者向けに特別に紹介されたツールをバックエンド開発者に提供します。

フロントエンドの専門家は、フロントエンドのしきい値が低すぎることに気づき、「コンポーネント」の考え方を使用して重複コードを管理し、しきい値を引き上げました。例えば、HTML CSS JS を使ってようやく非常に美しい Table を書くことができましたが、それを使用するたびにコードをすべてコピーしなければならず、少し変更すると、コピーした場所もすべて変更しなければなりません。このテーブルがコンポーネントの場合、テーブルを参照してデータを渡すだけで、自動的に HTML にレンダリングされ、関連する CSS と JS を参照できます。また、毎回どのブラウザに対応するかを検討するのは面倒ですが、スクリプトがあれば、対応するバージョンやブラウザを入力し、より高度な言語で記述し、各種対応ブラウザに自動変換します。コンパイル中のブラウザー ブラウザーのネイティブ HTML CSS JS、これは素晴らしいと思いませんか?これが最新のフロントエンド言語につながります。現代のフロントエンド言語の基礎は React であり、すべてが JS で織り込まれています。 React はまだ比較的ネイティブであるため、その上にさまざまなフレームワークが派生していますが、有名なものとしては、Vue や Ant Design があり、いくつかの一般的なアイデアや、JS による HTML 生成などの基本的な操作がカプセル化されています。本当に言いたいのは、始めるのは難しすぎるということです...

2. Vue の新しい世界への扉を開けましょう

1. 基本概念

• Node .js は、JavaScript コードを実行するために特別に設計された JavaScript ランタイム環境です。 java -jar xxx.jar に似たコマンド (node xxx.js

• npm:node.js パッケージ管理の実行など)。 Java の Maven や Gradle と同様に、JavaScript にも npm があり、バージョン管理や、すでに記述された JavaScript コードの参照に使用されます。

• ES6: ECMAScript 6 は JavaScript の新しいバージョンで、ネイティブ JavaScript よりも簡単に作成できます。

• #Babel: ES6 や ES7 などの高レベル バージョンの js を低レベル バージョンの js 言語に変換し、さまざまな実行プラットフォームとのスクリプトの互換性を容易にするために使用されます

• vue-cli: vue のコマンド ライン ツールです。

• vue-router: フロントエンドには「ルーティング」と呼ばれる重要な概念があり、実際にルーティングの方法を管理します。ページ URL がジャンプします。これは Vue のルーティング コンポーネントです。

• webpack: すべてのフロントエンド プロジェクト コードをまとめてパッケージ化して圧縮し、高級言語 (CSS 高級言語 SCSS、LESS など) をコンパイルし、コードを削減できます。冗長性、およびオンデマンドでのファイルのロードに加えて、複数の環境設定を区別したり、画像、フォント、その他のファイルを圧縮したり、ホット ロード (サービスを再起動せずに、保存後すぐにブラウザにコードを表示したりする)

2、npm

http://maven.aliyun.com/nexus/content/groups/public##設定檔package.json#設定檔內容“dependencies” : {“vue”: “^1.0.0”}打包產生的目錄

對比項	npm	maven
倉庫名稱	registry	repository
官方倉庫	http://registry.npmjs.org	https://mvnrepository.com
國內倉庫	##https: //registry.npm.taobao.org
	pom.xml
	……

## dist

target
• 由於npm非常火，在高版本的node.js裡面，已經整合了npm
  3、Vue
• 大概了解下vue是什麼。

• 語法：vue在語法上類似標籤版本的JSP動態網頁語言，或非常類似themeleaf。

元件：vue的一切都是元件，你可以把HTML CSS JS封裝在一起自訂一個元件。

路由：本質就是，給什麼URL，應該回傳什麼元件。

封裝好的一些功能：例如mounted可以在網頁載入時處理內容，data可以定義一些變數且發生改動的時候自動渲染局部元件，methods可以定義一些js函數等等等

CSS你可以用SCSS等語言來寫，可以加scope關鍵字來限制css的作用範圍，只需要import就可以引用任何其他的元件，定義好的元件可以直接以HTML標籤的形式來書寫，透過data來傳參，例如：

<mytitle></mytitle>

核心就是用高階語言更懶地去寫HTML CSS JS……

4、element -ui

###element-ui是餓了麼出的一個前端UI，它已經設定好了一些精美的元件，你只需要把這些元件拼湊成一個個網頁，而不需要從頭自己一個一個去寫組件了。 ###############這些元件，如單選框、表格、進度條等，設計十分精美，只需傳入資料即可呈現。如果覺得有不好看的地方，可以自己覆寫CSS來更換，對於功能需求強烈、介面設計無所謂的中台頁面、後台頁面而言，十分方便。 ######5、為什麼不用layui######從我接觸前端以來，一直用的都是layui。後面發現它更適合在原生HTML CSS JS/Jquery基礎上來優化頁面顯示效果，而不太相容現代前端語言的想法。它帶有一些預設的jQuery初始化和事件觸發方式，與Vue的寫法不太相容。此外，有些元件如tooltip、popover並不包含在內。 ###

以上がVue+ElementUI+Springbootの基礎知識は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。