javascript - 現在、Web サイトの開発にはどのような方法が一般的に使用されていますか?フロントエンドとバックエンドの分離とは何ですか?

私はずっ​​と独学で勉強してきたので、大企業がどのようにウェブサイトを書いているのかよく知りません。以前は、多くの Web サイトは、HTML に jsp または php コードを埋め込むことによって作成されていました。以前からnode+jade方式が使われていましたが、現在はバックグラウンドでインターフェースを提供し、Ajaxを送信してデータを取得してバックボーンテンプレートに表示するようになりました。では、一般的なアプローチとは何でしょうか?百度の先輩に聞いたら賢く教えてくれましたが、私もよくわかりませんでした。アドバイスをお願いします、よろしくお願いします

返信内容:

私はずっ​​と独学で勉強してきたので、大企業がどのようにウェブサイトを書いているのかよく知りません。以前は、多くの Web サイトは、HTML に jsp または php コードを埋め込むことによって作成されていました。以前からnode+jade方式が使われていましたが、現在はバックグラウンドでインターフェースを提供し、Ajaxを送信してデータを取得してバックボーンテンプレートに表示するようになりました。では、一般的なアプローチとは何でしょうか?百度の先輩に聞いたら賢く教えてくれましたが、私もよくわかりませんでした。アドバイスをお願いします、よろしくお願いします

フロントエンドとバックエンドを分離する理由は次のとおりです。以前は、Web サイトは JSP や ASP などの動的スクリプトを使用して開発されていました。
バックエンド言語、JavaScript、CSS、HTML を組み込んだ JSP や ASP などの混合スクリプトにより、コードの開発とメンテナンスが非常に不便になります。
フロントエンドの対話がますます複雑になるにつれて、JSP や ASP などのスクリプト構文では開発のニーズを満たすことができなくなりました。
そこで、フロントエンドとバックエンドの概念が提案されました。フロントエンド担当者がページの表示と対話を担当し、バックエンド担当者が作成したデータ インターフェイスを ajax 経由で呼び出します。
Web サイト開発の核心は基本的に次のとおりです:

1. html + css: ページ表示

2. JavaScript + ajax (これはブラウザの一部であり、JavaScript を通じて呼び出すことができます): ページの対話、ロジック処理

通常の開発フレームワークの選択:

1. シンプルなウェブサイト: jquery + bootstrap

2. バックエンド管理システム: angularjs + jquery + bootstrap + webpack

3. 複雑な製品: React + redux + webpack

現在、Web サイト開発は基本的にフロントエンドとバックエンドの分離モデルになっており、バックエンドはインターフェイスのみを書き込み、フロントエンドは arttemplate.js などの JS テンプレート エンジンを使用してデータをレンダリングします。 。 sea.js などのいくつかの js モジュール開発フレームワークも使用されます。

そうですね、現在はページを作成しません。フロントエンドはページを作成して CDN に直接配置し、バックエンドが提供するインターフェイスを呼び出してレンダリング用のデータを取得します。

smarty はフロントエンドとバックエンドを分離するために使用されるテンプレート エンジンです。そのコアコンテンツは MVC
M = Model
V = View
C = Controller

です。

この質問は非常に幅広いです。 Web サイトは、小規模なものから大規模なものまで、さまざまなカテゴリに分類できます。つまり、三流都市の小規模商店のホームページとタオバオはどちらもウェブサイトと呼ばれていますが、全体的な展開は大きく異なります。

実際、この基準に基づいて、要件をより迅速に実現し、需要の変化に対応し、その後のメンテナンスを容易にする方法をさらに検討してください。どちらが正しいでしょうか。利用している企業もあります。現時点では、jsp や php で html を直接記述することはほとんどないはずです。フロントエンドとリアエンドの分離は順調に進んでいます。したがって、誰がより多くを占め、誰がより少なく、それらをどのように区別するかは、各企業の技術レベルによって異なります。フロントエンド開発エンジニアが優秀なときは、フロントエンドの mvc や mvvm のことだけを考えて、すぐに実行します。バックエンドが素晴らしい場合は、このプロトタイプをバックエンドに渡して、残りのことは気にしないでいいと思います。

質問では、node+jadeがバックエンド、backboneがフロントエンドです。 Smarty は PHP の古いテンプレートです。ノードの翡翠に似ています。

それでは、自分のポジションを決めてください。あなたはフロントエンド、バックエンド、それともフルエンドですか? Java、node、php などの言語を最初に使用するのが最善です。すべてを知っている必要はありません。戻って問題を確認し、詳しく話し合います。

それと何か関係があるのでしょうか？ルーチンは基本的に同じですが、より多くの層に分かれている可能性がありますが、本質は変わっていません。すべてを練習して、より実践的な経験を積むだけです。心配しないでください。

html + ajax

あなたが聞きたい質問が、これから私が言いたいことなのかどうかわかりませんので、よく読んでください。
ウェブサイトのフロントエンドとバックエンドの分離については、質問の詳細にある一般的な説明を読みました。 . 前の php コードは html で書かれている可能性があります。コード内には純粋な php ファイル (php コードのみ) と html ファイルが存在しません。ここではフロントエンドとバックエンドが分離されていません。これは、大まかに言うと php とバックエンドを意味します。あなたには私がいて、私にはあなたがいます
しかし、その後の開発では、フロントエンド (html、css、js) エンジニアは PHP コードを読むことができない可能性があります。 CSS コンテンツにあまり精通していないため、後からコードを分離する方法が考案されました。これにより、全員がそれぞれの分野でパフォーマンスを向上させることができ、ある程度の効率を消費しますが、ある観点から見ると開発者にとってはフレンドリーです。
smarty テンプレートはその典型的な例で、フロントデスク (ユーザーが見るため) とバックエンド (ユーザーのニーズを実現する機能) を分離し、異なる開発者に提供します。

Smarty は、あなたが言及したバックエンド コードのフロントエンドに実装されたテンプレート エンジンです。Ajax は、フロントエンドとバックエンドの分離を実現するための非同期操作です。

フロントエンドとバックエンドの分離は、インターネットで言われているほど複雑ではありません。

まず、すべてのプログラムはデータに基づいていることを知っておく必要があります。データのないプログラムは、プログラムの追加、削除、変更、チェックに実質的な意味がありません。
フロントエンドとバックエンドの分離とは、データの操作と表示を分離することです。フロントエンドはデータ表示に重点を置き、テキスト、画像、アイコンを通じてデータを直感的に表示します。バックエンドはデータ操作に重点を置いています。フロントエンドはデータをバックエンドに送信し、バックエンドはデータを変更します。
バックエンドは通常、Java、C#、およびその他の言語を使用します。現在のノードは JavaScript に属しており、ここで言語をクラックしても意味がありません。バックエンドは、データベースに接続し、データを操作するために使用されます。
バックエンドは、バックエンドのデータ操作をトリガーするためにフロントエンドが呼び出すためのインターフェイスを提供します。
基本原則はこれです。言葉は不正確かもしれませんが、考え方は正しいです。