目錄
- 簡介
- 步驟一
- 步驟二 在idea上創(chuàng)建一個動態(tài)web項目
- 步驟三 將Tomcat服務(wù)器部署到j(luò)avaweb項目中
- 步驟四 Tomcat上的相關(guān)部署
- 步驟五 編寫簡單的四則運算計算器程序,實現(xiàn)前后端交互
- 步驟六 運行代碼,查看結(jié)果
簡介
基于IDEA部署Tomcat服務(wù)器,并在上面創(chuàng)建第一個servlet程序,實現(xiàn)前后端交互。然后做一個簡單的四則運算計算器。
本程序基于2021年最新版IDEA,解決的與老版本配置不同問題
idea2021 最新 jihuo 教程(無線重制使用)
步驟一
安裝Tomcat(前提已經(jīng)安裝好JDK)
1、Tomcat是免費的服務(wù)器,直接在官網(wǎng)下載即可
2、壓縮包下載好后直接將其解壓到指定路徑下
3、在安裝路徑下有一個bin文件夾,在里面找到startup.bat文件,雙擊運行,之后出現(xiàn)以下運行結(jié)果
![](/d/20211016/002fee81ae1bd45524c59faac9d7d051.gif)
4、在瀏覽器中輸入網(wǎng)址http://localhost:8080,出現(xiàn)以下界面表示Tomcat服務(wù)器已經(jīng)成功部署
![](/d/20211016/5981e15a59b4cc6b48491e788e50daf1.gif)
步驟二 在idea上創(chuàng)建一個動態(tài)web項目
在舊版本中,IDEA創(chuàng)建項目中直接有一個JAVA Enterprice,但是最新版中沒有這個選項。
![](/d/20211016/2471f32e66e9a246f8d7142189766c43.gif)
所以我們用以下方法解決:
1、先創(chuàng)建一個普通的Java工程
![](/d/20211016/4260ec196b4197e0f05bf6c0844324ad.gif)
2、右鍵工程,選擇 Add Framework Support…
![](/d/20211016/166a7060c472d0b8081c6faa760bcc09.gif)
3、在打開的窗口中勾選Web Application(4.0),然后點擊OK,此時IDEA就會自動生成javaweb目錄結(jié)構(gòu)和所需的資源
![](/d/20211016/a033843682d1521837dfe7021c0d2488.gif)
(注:這是我已經(jīng)寫好并運行過一次之后的目錄結(jié)構(gòu)。第一次生成的目錄結(jié)構(gòu)只有.idea、src、web以及下面的iml文件)
到這里基于IDEA的javaweb項目就已成功創(chuàng)建
步驟三 將Tomcat服務(wù)器部署到j(luò)avaweb項目中
1、首先我們在web/WEB_INF 目錄下創(chuàng)建兩個文件夾,并命名為classes和lib
classes用來存放編譯后輸出的class文件,lib用于存放第三方j(luò)ar包
![](/d/20211016/0e105b977a26245c7f90619d3f55edec.gif)
2、配置文件路徑
File -> Project Structure,打開以下窗口。然后選擇Modules-- Paths – 勾選“Use module compile out path” ,并將Outputpath 和Test output path 都設(shè)置為剛剛創(chuàng)建的classes文件夾
![](/d/20211016/1971105081db1515c2d51feb76177767.gif)
3、在當(dāng)前窗口繼續(xù)選擇Dependencies – 將Module SDK選擇為1.6,然后點擊右邊的 + 號 – 選擇 “1 JARS or directories …”
![](/d/20211016/a591a86762e4e1ac8978c6f3c5fb1ebe.gif)
4、在打開的窗口中把路徑選擇到剛剛創(chuàng)建的lib文件夾,然后點擊OK
![](/d/20211016/ca774bbbd181f98a2be5d7316b334ee3.gif)
5、在出現(xiàn)的窗口中選擇Jar Directory – OK
![](/d/20211016/25a6a4174526f5320cb2851f20e2536b.gif)
6、然后在最外層 Project Structure窗口選擇Apply–OK
7、然后我們正式開始配置tomcat容器。首先打開菜單Run -> Edit Configurations…
![](/d/20211016/4c1b6ddcaa123aade69e6a6ffe3a7afd.gif)
8、點擊+號,選擇Tomcat Server” – “Local”
![](/d/20211016/514f2bce34ce9f8b49e40c1ac5db9de3.gif)
9、然后在Name處輸入你想自定義的服務(wù)器名,點擊 “Application Server” 后面的 “Configure…”,彈出Application Servers窗口,在Tomcat Home 后面的文本框選擇本地安裝tomcat的目錄 – OK
![](/d/20211016/75368034a141715739c8fbf019721d4c.gif)
![](/d/20211016/ad72373dd58d80e4cd9872e098e3709b.gif)
10、在"Run/Debug Configurations"窗口中Name一欄輸入服務(wù)器的名字,在“Server”面板中,勾選取消“After Launch”,設(shè)置“HTTP port”和“JMX port”(默認(rèn)值8080即可),點擊Apply -> OK
![](/d/20211016/fe221222884ff6ce22c5aea17c2a7f6c.gif)
到這里tomcat就配置完畢了,左邊列表中tomcat圖標(biāo)上顯示的小紅叉是未部署項目的提示,部署項目后小紅叉就會消失
步驟四 Tomcat上的相關(guān)部署
1、創(chuàng)建好Tomcat后,就可以通過工具欄快速打開tomcat的配置頁面
![](/d/20211016/29caf86934f977ac06d82313a14ff4de.gif)
2、選擇Deployment --點擊右邊的“ + ”號 – 選擇 Artifact–然后選擇web項目 – Application Context中根據(jù)需要任意填寫(也可以不填) – Apply
![](/d/20211016/494445bb85193311c0dbe05a31a6a3d4.gif)
3、在server面板中將On ‘update' action和On frame deactivation的值改為update classes and resources – Apply
注:這兩個選項需要tomcat成功配置了項目后才有
![](/d/20211016/816ad6b35042e168d9446440acad9d45.gif)
到此tomcat的配置也就完成了
步驟五 編寫簡單的四則運算計算器程序,實現(xiàn)前后端交互
1、編寫index.jsp文件,寫出前端頁面(這里附上我的代碼)
![](/d/20211016/c2a717312573c60d84a892f9d3ef7adb.gif)
<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程序,實現(xiàn)后端的簡單四則運算處理(附上代碼)
![](/d/20211016/d8326e30a28f6d1cee7c5e4cc143f0f2.gif)
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("計算結(jié)果為:"+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的連接搭出來
![](/d/20211016/628d66b512834dcd662bbffd26d6bd44.gif)
![](/d/20211016/e68e5ceb06d5b93e4322a6a5c0f9216a.gif)
<web-app 框架是已經(jīng)有的,仿照上圖將中間內(nèi)容寫好即可
步驟六 運行代碼,查看結(jié)果
點擊運行,然后再index.jsp頁面選擇瀏覽器打開頁面
![](/d/20211016/215c3b414df17dedb9ce07c99e08827b.gif)
運行結(jié)果如下
![](/d/20211016/e6e380832493d0019212575ff8cb124d.gif)
測試
在第一個輸入框中輸入第一個運算數(shù),第二個框中輸入四則運算符(+、-、*、/),第三個框中輸入第二個運算數(shù),點擊Go,返回運算結(jié)果
如:
![](/d/20211016/a6b89ac4d69d5ad4c851d956fd86ad7c.gif)
![](/d/20211016/6ab0c5bd84bcbb8e47fab8d174b97aa5.gif)
程序成功!
到此這篇關(guān)于基于IDEA部署Tomcat服務(wù)器的步驟詳解的文章就介紹到這了,更多相關(guān)idea部署Tomcat服務(wù)器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!