記事ディレクトリ
序文
提示：这里可以添加本文要记录的大概内容：
JavaWeb プロジェクトを作成する前にTomcatおよび JavaWeb ツールをダウンロードしてください
以下の図は JavaWeb ツールのコード プロンプトを示しています。独自のものかどうかを確認できます。
サーブレットプロジェクトを作成する
提示：以下是本篇文章正文内容，下面案例可供参考
初めて JavaWeb プロジェクトを生成する：動的 Web プロジェクトを作成する
後で JavaWeb プロジェクトを生成する：
ステップ 1: HttpServlet を継承する
ステップ 2: @WebServlet アノテーションを追加、アドレスを設定する
ステップ 3: doXXX メソッド (計 7 種類) を書き換え、リクエストを処理し応答する
コード固有の操作:
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//第二步：增加@WebServlet注解，配置地址
@WebServlet("/hello")
//第一步：继承HttpServlet
public class HelloServlet extends HttpServlet{
//第三步：重写doXXX方法，处理请求并响应
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
リクエストを処理して応答する
リクエストを処理する
//处理请求
//1.获取请求中的数据
//调用HttpServletRequest中的方法getParameter("数据名")
String name = req.getParameter("name");
//2.具体处理
System.out.println("前端发送的数据是"+name);
対応するタイプは以下の3つです
テキスト/プレーン、プレーンテキスト
//生成纯文本格式的响应
//1.调用HttpServletResponse中的setContentType方法设置内容类型
resp.setContentType("text/plain;charset=utf-8");
//2.调用HttpServletResponse中的getWriter方法输出响应内容
PrintWriter writer = resp.getWriter();
writer.print("Hello, world!");
writer.flush();
上記のコードは、応答のコンテンツ タイプを text/plain に設定し、文字列「Hello, world!」を出力します。content を出力した後にメソッドを呼び出すとflush()、コンテンツが出力ストリームにフラッシュされることに注意してください。
出力効果:
テキスト/html、htmlコード
//生成 HTML 代码格式的响应
//1.调用HttpServletResponse中的setContentType方法设置内容类型
resp.setContentType("text/html;charset=utf-8");
//2.调用HttpServletResponse中的getWriter方法输出响应内容
PrintWriter writer = resp.getWriter();
writer.print("<html><head><title>Hello, world!</title></head><body><h1>Hello, world!</h1></body></html>");
writer.flush();
出力効果:
application/json、JSON形式の文字列
学生クラス:
public class Student {
private String name;
private String sex;
public Student() {
super();
// TODO 自动生成的构造函数存根
}
public Student(String name, String sex) {
super();
this.name = name;
this.sex = sex;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}
サーブレットクラス:
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import po.Student;
@WebServlet("/hello")
public class HelloServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//处理请求
//1.获取请求中的数据
//调用HttpServletRequest中的方法getParameter("数据名")
String name = req.getParameter("name");
//2.具体处理
System.out.println("前端发送的数据是"+name);
//生成响应
//1.调用HttpServletResponse中的setContentType 设置内容类型
resp.setContentType("application/json;charset=utf-8");
//2.调用HttpServletResponse中的getWriter 输出流
PrintWriter writer = resp.getWriter();
Student s1 = new Student("张三","男");
Student s2 = new Student("李四","女");
ArrayList<Student> list = new ArrayList<>();
list.add(s1);
list.add(s2);
Gson gson = new Gson();
writer.print( gson.toJson(list));
}
}
出力効果:
サーブレットのライフサイクル
- ロードフェーズ: コンストラクターの呼び出し
- 初期化フェーズ: init メソッドの呼び出し
サーブレット操作をサポートする Web コンテナは、クライアントからリクエストを受け取ると、まずユーザーがリクエストしたサーブレット オブジェクトが存在するかどうかを判断し、存在しない場合は、サーブレット クラスをロードし、サーブレット オブジェクトを作成し、サーブレット メソッドを呼び出して初期化する必要がありますinit()。 - サービス フェーズ: 返送されたリクエストを処理するためにサービス メソッドを呼び出します。コンテナは、
このクライアント リクエストのオブジェクトServletRequestとスレッドを作成し、ServletResponseサーブレット オブジェクトのservice( )メソッドを呼び出し、service()クライアントのリクエスト メソッドに従ってdoGet()メソッドまたはメソッドを間接的に呼び出しますdoPost()。
service() メソッドの実行が終了すると、応答が生成され、コンテナーはその応答をクライアントに送り返します。 - 破棄フェーズ: destroy メソッドを呼び出して破棄します。 Web アプリケーションがアンインストールされるか、サーバーがシャットダウンされると、コンテナーは
、このクライアント要求に対して作成されたServletRequestオブジェクトServletResponseと対応するスレッドを破棄します。このとき、destroy()リソースを解放するメソッドが呼び出されます。
サーブレット クラスのロード、サーブレット オブジェクトの作成、初期化メソッド init () の呼び出し、およびメソッド destroy () の破棄は、サーブレットのライフ サイクル全体で 1 回だけであることに注意してください。
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns = "/life",loadOnStartup = 5)
public class LifeCycleServlet extends HttpServlet{
public LifeCycleServlet() {
System.out.println("构造方法调用了");
}
@Override
public void init() throws ServletException {
// TODO init自动生成的
System.out.println("init方法调用了");
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("service方法调用了");
}
@Override
public void destroy() {
// TODO 自动生成的方法存根
System.out.println("destroy方法调用了");
}
}
プロジェクト実行後のコンソール出力:
第 4 段階: 破棄ステージ。破棄メソッドを呼び出して破棄します。
「サーバー」で Tomcat を右クリックして停止し
、コンソールに戻ります。
サーブレットのライフサイクル全体を通じて呼び出されるメソッド
サーブレットには、ライフサイクル全体を通じてサーバーによって自動的に呼び出されるいくつかのメソッドがあり、主なメソッドは次のとおりです: メソッド: 初期
init( )化に使用されます
Destro( )メソッド: リソースの解放に使用されます
service( )メソッド: ユーザーの要求を処理し、ユーザーに応答するサービス クラスのメソッド ほぼすべての処理機能がここで完了します。service( )通常、メソッドは doGet( ) または doPost( ) メソッドを呼び出します。
doGet( )メソッドは get メソッドのリクエストに応答でき、doPost() メソッドは post メソッドのリクエストに応答できます。
通常、service( ) メソッドを直接書き換えることは推奨されませんが、doGet( ) または doPost( ) メソッドを書き換える必要があります。通常、フォームの送信には post メソッドが、ハイパーリンクには get メソッドが使用されることが多いです。
サーブレットの動作原理
CORS クロスドメイン設定
CORS は、Web アプリケーションが異なるドメイン名またはポートからリソースを要求できるようにし、同一生成元ポリシーの制限を解除するメカニズムです。これはカスタムのリクエスト ヘッダーとレスポンス ヘッダーを追加することで実現され、Web サーバーが提供するアクセス ポリシーでは、異なるドメインからのリクエストによるリソースへのアクセスが許可または拒否されます。CORS は Web アプリケーションの開発を容易にし、クロスオリジン リクエストをより便利にします。
まず、簡単なユーザーログイン機能を実現するためのサーブレットをJavaWebで作成します。
ログインするときは、ユーザー名とパスワードを渡す必要があります。ユーザー名が admin、パスワードが 111 の場合、ログインは成功し、戻り結果は「成功」になります。それ以外の場合、戻り結果は「失敗」になります。
同時に、クロスドメインの非同期リクエストを許可するリクエスト ヘッダーが応答に追加されます。最後に、フロントエンド ページで使用できるように、結果が PrintWriter を通じて応答に書き戻されます。
バックエンドコード:
// 前后端分离项目
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/login")
public class LoginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String name = req.getParameter("name");
String pwd = req.getParameter("pwd");
String result = null;
// ==判断的是内容
if (name.equals("user") && pwd.equals("123456")) {
result = "成功";
} else {
result = "失败";
}
//允许跨域 异步请求 * 代表所有
resp.setHeader("Access-Control-Allow-Origin", "*");
//我的响应类型 纯文本
resp.setContentType("text/plain;charset=utf8");
//得到字符输出流
PrintWriter writer = resp.getWriter();
//将变量result的值输出到控制台或文件中
writer.print(result);
}
}
Tomcat を起動し、元のリンクの後に疑問符を付けて名前とパスワードの値を追加します。?name=user&pwd=123456
次にフロントエンドのコードを書きます。
Routerジャンプがあるため、関数を選択するときに追加します。
プロジェクトが成功したら axios フレームワークをインストールします。プロジェクトにnpm i axios
入った後、ルーター フォルダーにあるindex.js ファイルを開きます。また
、ルート コンポーネントを除くすべてのサブコンポーネントを削除します
。ルート コンポーネント内の Home、About、およびすべてのスタイルを削除し、ルーティング出口を 1 つだけ残します
削除後の表示:
次に、2 つの新しいサブビュー LoginView と IndexView を作成します。
ホーム ページ ビューに h1 タグを追加します。ビューの目的を示すだけです。
<h1>欢迎访问首页视图</h1>
また、ログイン ビューに h1 タグを追加します。必要なのは、このビューの目的を示すことだけです。
<h1>登录视图</h1>
ビューの書き込み後にルーティングを構成します:index.js
- インポートビュー
import LoginView from '@/views/LoginView'
- ビューのルーティングを設定する、3 つの設定項目
{
path: '/',
name: 'login',
component: LoginView
},
{
path: '/index',
name: 'index',
component: () => import('@/views/IndexView')
}
]
ターミナルに戻って開始します。
次に、ログイン ビューにコンテンツを追加します (2 つの入力ボックス、ボタン、エラー メッセージ)。
<template>
<div>
<h1>登录视图</h1>
名： <input type="text" v-model="name"><br>
密： <input type="text" v-model="pwd">
<p v-show="isError">用户名或密码输入错误</p><br>
<button @click="login">登录</button>
</div>
</template>
次にdataにname、pwd、isErrorのデータを設定します
data () {
return {
name: '',
pwd: '',
isError: false
}
},
次に、メソッドにログイン定義を追加します
methods: {
login(){
}
},
ここでリクエストの送信を完了しaxios、対応するデータを処理します。
最初のインポート:
import axios from 'axios'
次にリクエストを書きます。
methods: {
login(){
// 模板字符串拼接动态数据
axios.get(`http://localhost:8888/CORS/login?name=${
this.name}&pwd=${
this.pwd}`)
.then((resp) =>{
// 处理服务器后端发回的响应，使用箭头函数
// 判断相应的数据成功还是失败
if ( resp.data =='成功' ) {
this.$router.push('/index')
} else {
// 失败显示错误提示
this.isError = true
}
})
}
},
最後に、ログイン ビューの完全なコード: (コンテンツを豊富にするためにスタイル コードを追加します)
<template>
<div class="login-container">
<h1>用户登录</h1>
<form>
<div class="form-field">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" v-model="name">
</div>
<div class="form-field">
<label for="password">密 码:</label>
<input type="password" id="password" name="password" v-model="pwd">
</div>
<p v-show="isError" class="error-text">用户名或密码输入错误，请重新输入</p>
<button @click="login" class="login-btn">登录</button>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
name: '',
pwd: '',
isError: false
}
},
methods: {
login(){
// 使用模板字符串拼接动态数据
axios.get(`http://localhost:8888/CORS/login?name=${
this.name}&pwd=${
this.pwd}`)
.then((resp) =>{
// 处理服务器后端发回的响应，使用箭头函数
// 判断相应的数据成功还是失败
if (resp.data == '成功') {
this.$router.push('/index')
} else {
// 失败显示错误提示
this.isError = true
}
})
}
},
components: {
},
computed: {
},
watch: {
},
mounted () {
}
}
</script>
<style scoped>
.login-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f6f6f6;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 1px 5px #ccc;
}
.form-field {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.form-field label {
font-size: 18px;
margin-right: 10px;
}
.form-field input {
font-size: 18px;
padding: 5px;
border-radius: 3px;
border: 1px solid #ccc;
flex: 1;
}
.error-text {
color: red;
font-size: 18px;
margin-top: 10px;
}
.login-btn {
font-size: 18px;
font-weight: bold;
color: white;
background-color: #4CAF50;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
.login-btn:hover {
background-color: #3E8E41;
}
</style>
出力効果:
