IDEA创建Web项目详细过程

亦凉 2022-05-11 14:58 236阅读 0赞

相关软件：Intellij Idea2017、jdk16、tomcat

Intellij Idea直接安装（可根据需要选择自己设置的安装目录），jdk使用1.6/1.7/1.8都可以，主要是配置好系统环境变量，tomcat上tomcat的官网下载压缩包解压即可。

##  一、创建简单web项目 ##

1、创建一个web project

File -> new Project ->选择project sdk 为1.6（如果没有sdk的同学请先配置）-> Next

![617148-20170802092907146-91979022.png][]

create project from template 页面，不勾选任何选项 -> Next

![617148-20170802093047755-586224724.png][]

输入项目名：webDemo -> Next -> Finish

![617148-20170802093224552-1216157022.png][]

##  二、创建一个Module ##

鼠标点中项目名称webDemo -> 右键选择New，选择Module -> Module SDK 选择1.6 -> 勾选JavaEE下的Web Application(3.1) ，注意窗口下的version对应为3.1，且Create web.xml已勾选 -> Next

![617148-20170802093727021-213024161.png][]

输入Module name 为firstweb -> Finish

![617148-20170802093921521-1094510523.png][]

3、创建好的web项目

![617148-20170802094038130-493955871.png][]

4、在web/WEB\_INF 目录下创建两个文件夹：classes和lib

classes用来存放编译后输出的class文件，lib用于存放第三方jar包

![617148-20170802094607927-568081061.png][]

5、配置文件夹路径

File -> Project Structure (ctrl + shift + Alt + s) 或者使用工具栏的快捷键 -> 选择Modules

\-> 选择Paths -> 选择“Use module compile out path” -> 将Outputpath 和Test output path 都设置为刚刚创建的classes文件夹

![617148-20170802094907005-261494878.png][]

![617148-20170802095225646-1238172626.png][]

选择当前窗口的Dependencies -> 将Module SDK选择为1.6 ->点击右边的 + 号 -> 选择 “1 JARS or directories ...”

![617148-20170802095637318-1978321365.png][]

\-> 选择刚刚创建的lib文件夹 -> OK

![617148-20170802095753380-1154472480.png][]

\-> 选择Jar Directory -> OK

![617148-20170802095902646-2089640270.png][]

\-> Apply -> OK

![617148-20170802100008740-140141911.png][]

##  三、配置Tomcat容器 ##

打开菜单Run -> Edit Configurations...

![617148-20170802100339333-1052407848.png][]

点击 “+” ，选择 “Tomcat Server” -> 选择“Local”

![617148-20170802100957396-345704066.png][]

在Name出输入新的服务器名，点击 "Application Server" 后面的 "Configure..."，弹出Application Servers窗口，在Tomcat Home 选择本地安装的tomcat目录 -> OK

![617148-20170802101359911-91182200.png][]

在"Run/Debug Configurations"窗口中Name一栏输入服务器的名字tomcat7，在“Server”面板中，勾选取消“After Launch”，设置“HTTP port”和“JMX port”（默认值即可），点击Apply -> OK，至此tomcat配置完毕（左边列表中tomcat图标上小红叉是未部署项目的提示，部署项目后就会消失）。

![617148-20170802102427896-2021889008.png][]

##  四、在tomcat上部署并运行项目 ##

在创建好tomcat后，可以通过工具栏快速打开tomcat的配置页面：

![617148-20170802102750177-1971274637.png][]

也可以通过菜单栏：Run -> Edit Configurations... ->选择刚创建的tomcat7 -> 选择Deployment ->点击右边的“ + ”号 -> 选择 Artifact

![617148-20170802103203849-1690013361.png][]

\-> 选择web项目 -> Application Context可以填“/firstweb”(也可以不填) -> Apply

![617148-20170802103443208-204757220.png][]

回到Server面板，将On 'update' action和On frame deactivation（这两个选项是tomcat配置了项目后才有的）改为update classes and resources -> Apply

![617148-20170802103729396-348498357.png][]

开发web项目并运行tomcat查看效果

1、编辑index.jsp页面

![617148-20170802104026333-1992389105.png][]

2、运行tomcat

![617148-20170802104137677-682462828.png][]

![617148-20170802104230677-444888327.png][]

本文出自于:file:///C:/Users/jack/Desktop/Idea/Intellij%20Idea%202017%E5%88%9B%E5%BB%BAweb%E9%A1%B9%E7%9B%AE%E5%8F%8Atomcat%E9%83%A8%E7%BD%B2%E5%AE%9E%E6%88%98%20-%20shindoyang%20-%20%E5%8D%9A%E5%AE%A2%E5%9B%AD.mhtml

[617148-20170802092907146-91979022.png]: /images/20220505/689c33d7d6c34eaca97f0a74a6636ecc.png
[617148-20170802093047755-586224724.png]: /images/20220505/46c53568501c44679edd9bbab2d7f055.png
[617148-20170802093224552-1216157022.png]: /images/20220505/83c255201c25464eb09ed442de163c49.png
[617148-20170802093727021-213024161.png]: /images/20220505/b7d22396cb30499b934aae576271344e.png
[617148-20170802093921521-1094510523.png]: /images/20220505/055581b99e3446d2a54293dc8b2e886e.png
[617148-20170802094038130-493955871.png]: /images/20220505/1be162dee86f477c887036d929821932.png
[617148-20170802094607927-568081061.png]: /images/20220505/eb0b1ebf1e7a4a56a76fd63b58d7f0f2.png
[617148-20170802094907005-261494878.png]: /images/20220505/0537d84c30cf4bdd941c883224041109.png
[617148-20170802095225646-1238172626.png]: /images/20220505/2e4dd37cb61a419e821cb5f78fe5dd68.png
[617148-20170802095637318-1978321365.png]: /images/20220505/a71c55583d134813af816ec14ee798ea.png
[617148-20170802095753380-1154472480.png]: /images/20220505/16b9f478918d438a9ae7d059a537d160.png
[617148-20170802095902646-2089640270.png]: /images/20220505/010e7bafd2d046928359cbdd32c8811c.png
[617148-20170802100008740-140141911.png]: /images/20220505/71e89b5d01304a73b2131cc3ad5b9d27.png
[617148-20170802100339333-1052407848.png]: /images/20220505/b30ab196dacd437fa396f600c58d5bec.png
[617148-20170802100957396-345704066.png]: /images/20220505/28f7fef7e97c4f739f18907142041def.png
[617148-20170802101359911-91182200.png]: /images/20220505/7493f352839843208b8a01da5b5f3280.png
[617148-20170802102427896-2021889008.png]: /images/20220505/d5766d317a69437a9e045499a4636f5a.png
[617148-20170802102750177-1971274637.png]: /images/20220505/cde6104fd7a3481999b827a860338f54.png
[617148-20170802103203849-1690013361.png]: /images/20220505/ceaf7afe37d84bde9053badbca302882.png
[617148-20170802103443208-204757220.png]: /images/20220505/f0697d957dd74684b83f7ed5b3a20695.png
[617148-20170802103729396-348498357.png]: /images/20220505/accd6cb575554fe7b21c162cc598232e.png
[617148-20170802104026333-1992389105.png]: /images/20220505/b00434acc7b749f791927d53a457b7e5.png
[617148-20170802104137677-682462828.png]: /images/20220505/e2f99874f63d43c4822fcf6cb63f7c10.png
[617148-20170802104230677-444888327.png]: /images/20220505/303fff8ab34f41dfb05b2cedc7f2cc50.png