Struts2 ジャンプ後に CSS と JS が無効になる問題の解決策のアイデアと実装手順

Struts2 ジャンプ後に CSS と JS が無効になる問題の解決策のアイデアと実装手順
struts2 アクションの実行後にジャンプした jsp が表示されると、css が機能しません。問題が発生しているプロジェクトを例に挙げます。
アクションは次のとおりです。

コードをコピー
コードは次のとおりです。

<アクション名="listUser" クラス="listUserAction">
<結果>/users/userList.jsp</結果>
</アクション>

(: listUser の機能は、すべてのユーザーを検索し、それらを userList.jsp のユーザーの下に表示することです。spring が使用されているため、ここでの「listUserAction」は applicationContext.xml で設定された名前です)
userList.jsp の CSS 設定は次のとおりです

コードをコピー
コードは次のとおりです。

<link href="../css/style.css" rel="スタイルシート" type="text/css" />

(: ディレクトリ階層は次のようになります。WebRoot の下には users フォルダと css フォルダがあるため、users の下の jsp が style.css を呼び出す場合は、ルート ディレクトリに移動して css フォルダを見つける必要があります)
ただし、listUser から正常に実行した後に、プログラムが /users/userList.jsp にジャンプすると、/css/style.css が機能しません。アドレスバーに直接 jsp を表示した場合は正常に表示されます。
インターネットで見つかった方法では、 CSS に絶対パスを使用するように書かれています

コードをコピー
コードは次のとおりです。

<link href="http://blog.163.com/<%=request.getContextPath%>/css/style.css" rel="スタイルシート" type="text/css" />

しかし、これには明らかな欠点があり、それは携帯性が悪いということです。
結果を <result>userList.jsp</result> に変更し、jsp をルート ディレクトリに置くと、このような問題は発生しません。この時点で、問題の原因はほぼわかっています。つまり、アクションがルート ディレクトリにあります。プログラムを実行するときにアドレス バーから確認できます。つまり、名前空間がルート ディレクトリにあり、"../css/style.css" は当然見つかりません。
問題を理解すれば、解決策は簡単に見つかります。 listUser が設定されているパッケージを見つけて、namespace="/users" を追加します。今がその時だ

コードをコピー
コードは次のとおりです。

<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts 構成 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd">
<ストラット>
<パッケージ名="users" は、="struts-default" 名前空間="/users"> を拡張します。
......
<アクション名="listUser" クラス="listUserAction">
<結果>/users/userList.jsp</結果>
</アクション>
......
</パッケージ>
</strusts>

その後、サーバーを再起動すると、正常に表示されます。同時に、アドレスバーのアクションの前に「/users」が追加されていることもわかります。また、接続されたビデオにジャンプする場合も「/users/userList.jsp」になるため、一貫性が保たれ、問題が解決されます。

<<:  MySQLにおける遅いSQLの最適化の方向性について詳しく話しましょう

>>:  Intellij IDEA による Docker イメージの展開方法の手順の迅速な実装

推薦する

IE6 の iframe の水平スクロール バーの解決策

状況は以下のとおりです: (PS: 赤いボックスは iframe 領域を表し、灰色の四角形は上記の ...

Vue3.0 手書き拡大鏡効果

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

JavaScript が Jingdong の虫眼鏡効果を模倣

この記事では、Jingdongの虫眼鏡効果を実現するためのJavaScriptの具体的なコードを紹介...

Nginx http ヘルスチェック構成プロセス分析

パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...

DockerでVueプロジェクトをデプロイする方法を教えます

1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...

XHTML 入門チュートリアル: テーブルタグの応用

<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだ...

CSS3 を使用した SVG パス ストロークのアニメーション化入門チュートリアル

JavaScript に依存せず、純粋な CSS を使用してsvgストローク描画アニメーション効果と...

CSS で要素を中央揃えにする N 通りの方法

目次序文インライン要素の中央揃えテキストを垂直に中央揃え要素を水平方向に中央揃えにするブロックレベル...

MySQL のスロークエリの方法と例

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

MySQL FAQ シリーズ: 一時テーブルを使用する場合

一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...

Docker に共通コンポーネント (mysql、redis) をインストールする方法

Dockerはmysqlをインストールします docker search mysql 検索 dock...

Vue シングルページ アプリケーションで Markdown レンダリングを実装する

以前、Markdown をレンダリングするときに、mavonEditor のプレビュー モードを使用...

MySQL ソートの原則とケース分析

序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...

HTML ウェブページでのアンカー(名前付きアンカー)の使用の概要

以下の情報はインターネットから収集したものです1. アンカーは、Web ページ作成におけるハイパーリ...