基于IDEA部署Tomcat服務器，并在上面創建第一個servlet程式，實作前后端互動，然后做一個簡單的四則運算計算器，

簡介

? 基于IDEA部署Tomcat服務器，并在上面創建第一個servlet程式，實作前后端互動，然后做一個簡單的四則運算計算器，

? 本程式基于2021年最新版IDEA，解決的與老版本配置不同問題

步驟一

安裝Tomcat（前提已經安裝好JDK)

? 1、Tomcat是免費的服務器，直接在官網下載即可

? 2、壓縮包下載好后直接將其解壓到指定路徑下

? 3、在安裝路徑下有一個bin檔案夾，在里面找到startup.bat檔案，雙擊運行，之后出現以下運行結果

在這里插入圖片描述

4、在瀏覽器中輸入網址http://localhost:8080，出現以下界面表示Tomcat服務器已經成功部署
在這里插入圖片描述

步驟二

在idea上創建一個動態web專案

? 在舊版本中，IDEA創建專案中直接有一個JAVA Enterprice，但是最新版中沒有這個選項，

在這里插入圖片描述

所以我們用以下方法解決：

1、先創建一個普通的Java工程
在這里插入圖片描述

2、右鍵工程，選擇 Add Framework Support…
在這里插入圖片描述

3、在打開的視窗中勾選Web Application（4.0)，然后點擊OK，此時IDEA就會自動生成javaweb目錄結構和所需的資源
在這里插入圖片描述

（注：這是我已經寫好并運行過一次之后的目錄結構，第一次生成的目錄結構只有.idea、src、web以及下面的iml檔案）

到這里基于IDEA的javaweb專案就已成功創建

步驟三

將Tomcat服務器部署到javaweb專案中

1、首先我們在web/WEB_INF 目錄下創建兩個檔案夾，并命名為classes和lib

? classes用來存放編譯后輸出的class檔案，lib用于存放第三方jar包

在這里插入圖片描述

2、組態檔路徑

File -> Project Structure，打開以下視窗，然后選擇Modules-- Paths – 勾選“Use module compile out path” ，并將Outputpath 和Test output path 都設定為剛剛創建的classes檔案夾
在這里插入圖片描述

3、在當前視窗繼續選擇Dependencies – 將Module SDK選擇為1.6，然后點擊右邊的 + 號 – 選擇 “1 JARS or directories …”

在這里插入圖片描述

4、在打開的視窗中把路徑選擇到剛剛創建的lib檔案夾，然后點擊OK

在這里插入圖片描述

5、在出現的視窗中選擇Jar Directory – OK

在這里插入圖片描述

6、然后在最外層 Project Structure視窗選擇Apply–OK

7、然后我們正式開始配置tomcat容器，首先打開選單Run -> Edit Configurations…

在這里插入圖片描述

8、點擊+號，選擇Tomcat Server” – “Local”
在這里插入圖片描述

9、然后在Name處輸入你想自定義的服務器名，點擊 “Application Server” 后面的 “Configure…”，彈出Application Servers視窗，在Tomcat Home 后面的文本框選擇本地安裝tomcat的目錄 – OK

在這里插入圖片描述

10、在"Run/Debug Configurations"視窗中Name一欄輸入服務器的名字，在“Server”面板中，勾選取消“After Launch”，設定“HTTP port”和“JMX port”（默認值8080即可），點擊Apply -> OK

在這里插入圖片描述

到這里tomcat就配置完畢了，左邊串列中tomcat圖示上顯示的小紅叉是未部署專案的提示，部署專案后小紅叉就會消失

步驟四

Tomcat上的相關部署

1、創建好Tomcat后，就可以通過工具列快速打開tomcat的配置頁面

在這里插入圖片描述

2、選擇Deployment --點擊右邊的“ + ”號 – 選擇 Artifact–然后選擇web專案 – Application Context中根據需要任意填寫（也可以不填) – Apply

在這里插入圖片描述

3、在server面板中將On ‘update’ action和On frame deactivation的值改為update classes and resources – Apply

? 注：這兩個選項需要tomcat成功配置了專案后才有

在這里插入圖片描述

到此tomcat的配置也就完成了

步驟五

撰寫簡單的四則運算計算器程式，實作前后端互動

1、撰寫index.jsp檔案，寫出前端頁面（這里附上我的代碼）

在這里插入圖片描述

<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
  <h3>I can do a arithmetic.</h3>
  <div class="_from">
      <form action="login" method="get">
          <input type="text" name="firstNum" class="firstNum" placeholder="The First Number">
          <input typr="text" name="operation" class="operation" placeholder="Arithmetic">
          <input type="text" name="secondNum" placeholder="The Second Number">
          <input type="submit" name="submit" value="Go">
      </form>
  </div>
  </body>
</html>

2、撰寫后端java程式，實作后端的簡單四則運算處理（附上代碼）
在這里插入圖片描述

package com.mycalc.servlet;

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 java.io.IOException;

/**
 * @author Milo
 * @creat 2021-04-09 8:27
 * @function
 * @versions
 */
@WebServlet("/login")
public class Calc extends HttpServlet{
    int firstNum;
    char operation;
    int secondNum;
    String submit;
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("------已進入Get程式-------");
        resp.setContentType("text/html;charset = utf-8");
        req.setCharacterEncoding("utf-8");
        this.firstNum = Integer.parseInt(req.getParameter("firstNum"));
        this.operation = (req.getParameter("operation")).charAt(0);
        this.secondNum = Integer.parseInt(req.getParameter("secondNum"));
        this.submit = req.getParameter("submit");

        resp.getWriter().write("計算結果為："+this.arithmetic());
    }
    protected int arithmetic(){
        int opResult = 0;
        if (this.operation == '+') {
            opResult = this.firstNum + this.secondNum;
            System.out.println(opResult);
        }
        else if(this.operation == '-'){
            opResult = this.firstNum-this.secondNum;
            System.out.println(opResult);
        }
        else if(this.operation == '*') {
            opResult = this.firstNum*this.secondNum;
            System.out.println(opResult);
        }
        else if(this.operation == '/'){
            opResult = this.firstNum/this.secondNum;
            System.out.println(opResult);
        }
        return opResult;
    }

3、撰寫web.xml檔案，把中間servlet的連接搭出來
在這里插入圖片描述