記事
開始
勉強を始める
JavaRush /Java Blog /Random-JA /Maven、Spring、MySQL、Hibernate、および最初の CRUD アプリケーションの概要 (パート...
Макс
レベル 41

Maven、Spring、MySQL、Hibernate、および最初の CRUD アプリケーションの概要 (パート 4)

Random-JA グループに公開済み
こんにちは。この記事では、単純な CRUD アプリケーションを作成する過程で、Maven、Spring、Hibernate、MySQL、Tomcat などに初めて遭遇したことを共有したいと思います。これが最後の部分です。この記事は主に、ここですでに 30 ～ 40 のレベルを完了しているが、まだ純粋な Java を超えて冒険をしておらず、これらすべてのテクノロジ、フレームワーク、およびその他のなじみのないオープンワールドに参入し始めている (またはこれから始めようとしている) 人を対象としています。言葉。 これは、記事「Maven、Spring、MySQL、Hibernate、および最初の CRUD アプリケーションの紹介」の最後の 4 番目のパートです。以前の部分は、次のリンクからご覧いただけます。

コンテンツ：

デザインと Web リソース

私たちのアプリケーションは動作しますが、涙、退屈な碑文、醜いリンク、空の白い背景なしでは見ることはできません。これを修正して、さまざまな美しさを追加する必要があります。どうやってこれを行うのでしょうか？まず第一に、ページをいじってみて、HTMLの機能を使用してあらゆる種類のことを行うことができます。しかし、HTMLだけを使って背景、色、サイズ、要素の配置などを変更しようとすると。等々。そうすると、最終的にはページがめちゃくちゃになって、後で何も分からなくなる可能性があります。さらに、HTML のデザイン オプションは非常に限られています。これにはCSS (Cascading Style Sheets)を使用することをお勧めします。その後、デザインに関連するすべてを 1 か所に集めて、ページの目的の要素に適用できます。CSS コードは、特別なタグ内のJSPページに直接記述することもできますが、別のファイルに記述して、必要なページに適用する方がはるかに便利です。スタイルやその他の静的 Web リソースを含むファイルを配置するには、 webapp内に別のディレクトリを作成します。Web リソースと通常のリソース ( db.propertiesがある) を混同しないように、このディレクトリをresと呼び、すべての CSS ファイル、画像などをそこに配置します。
Maven、Spring、MySQL、Hibernate、および最初の CRUD アプリケーションの概要 (パート 4) - 1
これらのファイルを使用するには、構成内でその場所を指定する必要があります。私たちのクラスに行きましょうWebConfig。以前は、アノテーションを使用して@EnableWebMvc何も構成せず、単にデフォルトの構成を使用しました。しかし、ここで何かを設定する必要があります。WebMvcConfigurerこれを行うには、設定メソッドをオーバーライドできるインターフェイスを使用します。それ。デフォルトの構成を使用できますが、同時にいくつかの側面を自分用にカスタマイズできます。この場合addResourceHandlers、静的 Web リソースの場所を示すメソッドが必要です。念のため、クラス全体は次のようになります。 
package testgroup.filmography.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.ViewResolver;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "testgroup.filmography")
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/res/**").addResourceLocations("/res/");
    }

    @Bean
    ViewResolver viewResolver() {
        InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
        viewResolver.setPrefix("/WEB-INF/pages/");
        viewResolver.setSuffix(".jsp");
        return viewResolver;
    }
}
Java-университет
ページで CSS を使用するには、タグ内で CSS にリンクする必要がありますhead。 
<head>
    <link href="<c:url value="/res/style.css"/>" rel="stylesheet" type="text/css"/>
</head>
この行を追加して、たとえば次の単純な CSS ファイルを作成するだけです。 
table {
    border-spacing: 0 10px;
    font:  bold 100% Georgia, serif;
    margin: 40px auto;
    text-shadow: 5px 5px 5px #3F3F7F;
    background: #B1B9D9;
    text-align: center;
    vertical-align: middle;
    width: 50%;
    border: 10px solid blue;
}
これにより、テーブルが完全に変わります (もちろんばかげているように見えますが、たとえば次のようなものです): Maven、Spring、MySQL、Hibernate、および最初の CRUD アプリケーションの概要 (パート 4) - 2CSS について詳しく話す必要はないと思います。すべてが非常に単純です。インターネット上では、テーブルやフォームを設計するための既製のオプションが多数見つかります。しかし、もちろん、自分でデザインを行う方が良いです。デザイナーである必要はありません。結局のところ、これはある種の複雑なサイトではありません。最初の知り合いから数時間経っても、このような単純なページにかなり美しくきちんとしたデザインを作成するのに十分です。さらに、インターネットにはあらゆる種類のレッスンやサンプルが溢れており、1 つの画面で HTML と CSS を同時に編集して、すべてがどのようなものになるかをすぐに確認できる特別なサイトもあります。少し練習すれば、本物のアートを作成できます。確かに、ここでもあまり夢中になりすぎるべきではありません (もちろん、デザイナーになる計画がある場合は別ですが)。そうしないと、デザインとはそういうもので、長い間ここで立ち往生する可能性があります。初めて CSS を理解したとき、私は行き詰まってしまいました。私はあらゆるもの、すべての特性を試して、何かをひねり、いじくり回して、実験し、いくつかのサイトのページを取得して、見分けがつかないほど作り直したかったのです。私はおそらく、このおもちゃを手放すまで、他に何もせずに、このおもちゃを一週間楽しんでいたでしょう:) まあ、一般的には、もちろん、やりすぎて理解できないカラフルな奇跡を起こすべきではありません。味わい深く。注目に値する唯一のこと。CSS はデザインの記述であり、HTML はマークアップであることを理解する必要があります。完全にすべてを CSS で実行しようとするべきではありません。HTML でこれを数行の余分な行や、タグ内の 1 つの属性だけで実行する場合、いくつかの側面は非常に困難であり、いくつかはまったく不可能です。これらを組み合わせて、CSS であらゆる種類の色、背景、フォントを作成する必要があります。たとえば、表のセルをいくつか組み合わせる必要がある場合は、HTML ツールを使用する方が簡単です。たとえば、CSS と HTML を数時間いじってページで何ができたかを次に示します (これを実現するために私が行った混乱についてはここでは詳しく説明しません。最後には、このプロジェクトの GitHub へのリンクが表示されます): Maven、Spring、MySQL、Hibernate、および最初の CRUD アプリケーションの概要 (パート 4) - 3もちろん、そこですべてをどれだけ有能に実行できたかはわかりませんが、1 週間前に初めて CSS を見たことを考えると、かなりうまくいったと思います。

ページネーション

これですべてが機能し、見た目は良くなりましたが、これまでのところテーブルにはいくつかのレコードしかありません。その中に 100 本、あるいは 1000 本の映画がある場合はどうなるでしょうか? このような長いリストをスクロールするのはあまり便利ではありません。たとえば、リストが 10 エントリのページに表示される場合は、さらに便利です。したがって、ここではリストをページに分割する実装を試みます (これは「ページング」または「ページネーション」 (英語の pagination ) とも呼ばれます)。これはさまざまな方法で実行できます。たとえば、完全なリストを JSP ページに転送し、そこに必要なレコード数のテーブルを作成できます。あるいは、たとえば、サービスの一般リストから必要なレコードを抽出し、このミニリストを JSP ページに送信して表示することもできます。ただし、もちろん、これをデータベース レベルで行うのが最善です。このアイデアは、データベースから完全なリストを取得してからそれを部分に分割するのではなく、他のすべてには手を加えずに、最初にデータベースから必要な部分を取得することです。結局のところ、なぜデータベースから数百、数千のレコードをすべて一度に取り出す必要があるのでしょうか。必要なレコードが上位 10 に入っている場合は、この 10 件だけを取り出す方が良いのです。DAOに移動し、ページ番号を担当するメソッドにallFilmsパラメーターを追加しましょうint page(もちろん、サービスでも同じことを行います)。このメソッドの実装を少し変更してみましょう。以前はリスト全体を取り出していましたが、今回は一部だけを取り出します。setFirstResultこれには、メソッド(テーブルのどの行から開始するか) とsetMaxResults(表示するレコードの数) が役立ちます。 
@SuppressWarnings("unchecked")
public List<Film> allFilms(int page) {
    Session session = sessionFactory.getCurrentSession();
    return session.createQuery("from Film").setFirstResult(10 * (page - 1)).setMaxResults(10).list();
}
それらの。これが 1 ページ目の場合は、0 番目から始まる最大 10 レコードが表示され、これが 5 ページ目の場合は、40 番目から始まる 10 レコードが表示されます (データベースの番号付けは 0 から始まることを忘れないでください)。さらに、テーブル内のレコード数を返すメソッドも作成します。すべてのページの数を知り、JSP ページにそれらのページへのリンクを作成するには、これが必要になります。 
public int filmsCount() {
     Session session = sessionFactory.getCurrentSession();
     return session.createQuery("select count(*) from Film", Number.class).getSingleResult().intValue();
 }
このようなクエリを使用すると、intレコード自体を取り出すことなく、テーブル内のすべてのレコードの数を (値として) 取得します。次に、コントローラーに移動して、映画のリストを含むメイン ページを返すメソッドに取り組みましょう。 
@RequestMapping(value = "/", method = RequestMethod.GET)
public ModelAndView allFilms(@RequestParam(defaultValue = "1") int page) {
    List&ltFilm> films = filmService.allFilms(page);
    int filmsCount = filmService.filmsCount();
    int pagesCount = (filmsCount + 9)/10;
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("films");
    modelAndView.addObject("page", page);
    modelAndView.addObject("filmsList", films);
    modelAndView.addObject("filmsCount", filmsCount);
    modelAndView.addObject("pagesCount", pagesCount);
    return modelAndView;
}
新しい注釈がここに表示され@RequestParam、この値がリクエスト パラメーターから取得されていることを示します。ここで、パラメーターを使用してアドレス (例: http://localhost:8080/ ?page=4 ) にアクセスすると、それに応じて 4 番目のページが表示されます。デフォルト値を「1」に設定して、アプリケーションの起動時に、http://localhost:8080/パラメータを指定せずにアドレスにアクセスすると、最初のページが表示されるようにします。このメソッドではすべてのレコードの数を取得し、この簡単な方法でページ数を計算します。それらの。レコードが 10 件ある場合、これは 1 ページです。レコードが 11 件ある場合、これはすでに 2 ページです。このすべてをモデルに転送します。サイクル内のすべてのページへのリンクを作成するには、ページ数を把握する必要があります。また、たとえばページ上のどこかにこの情報を表示したい場合などに備えて、映画の数も把握しておく必要があります。あとは、films.jspに移動し、次の構成を使用して各ページへのリンクを追加するだけです。 
<c:forEach begin="1" end="${pagesCount}" step="1" varStatus="i">
    <c:url value="/" var="url">
        <c:param name="page" value="${i.index}"/>
    </c:url>
    <a href="${url}">${i.index}</a>
</c:forEach>
カウンタ 1、2、3、... でリンクを作成し、インデックス値でパラメータを設定します。

ちなみに、ページネーションと同様に、並べ替え、フィルタリング、検索などの機能を追加することもできます。さまざまなパラメータを DAO メソッドに渡し、それらを使用してデータベースへの適切なクエリを作成し、必要なレコードを必要な順序で取り出すだけです。
もう 1 つ小さなタッチを加えてみましょう。コントローラーに戻ります。追加、編集、削除のメソッドでは、操作が完了した後、メイン ページ"redirect:/"にリダイレクトします。それ。50 ページ目のどこかで [エントリの編集] をクリックすると、実行後にアドレス " / " に移動します。1ページ目に戻りましょう。あまり都合が悪いので、元の場所に戻りたいと思います。これを非常に簡単に解決しましょう。クラス内にFilmControllerインスタンス変数を作成しましょうint page 
private int page;
メソッド内で、allFilmsパラメーターの値をこの変数に割り当てますpage。 
this.page = page;
それ。このメソッドが実行されるたび (つまり、ページ間を移動するとき)、現在のページの値が変数に書き込まれます。次に、この値をメソッドで使用して、同じページにリダイレクトします。 
modelAndView.setViewName("redirect:/?page=" + this.page);

結論

おそらくここで終わります。その結果、本格的な CRUD アプリケーションが完成します。確かに理想からは程遠いですが（非常に遠い）、最適化や改善、バグの修正、機能の追加は可能です。crud 操作には組み込みメソッドを使用できます。フィルタリング、検索、並べ替えを追加します。他の関連テーブルを追加します。認可や認証などによるさまざまなユーザーのサポートを実装します。等々。想像力の範囲は無限ですので、ぜひ挑戦してください。 このプロジェクトの github へのリンク。ご清聴ありがとうございました。 PS これは私の人生で初めて記事を書く試みなので、厳密に判断しないでください:)。有用なリソースに別のリンクを追加していないことをお詫びします。残念ながら、情報を入手したソースへのリンクを保存する習慣がまだ身につきません。そしてもちろん、たくさんの手紙をお詫びします。簡潔にすることは私の才能ではありません。誰かがこれを処理できることを願っています。 すべての部分へのリンク
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION