IntelliJ IDEA 开发Web应用图文教程

简介: 本文目录1. 简介2. 软件下载与安装3. 创建Project4. 创建Module5. 项目目结构设置6. 配置Tomcat服务器7. 部署web应用并运行

1. 简介

Eclipse/MyEclipse确实用起来诸多不爽,准备切换IntelliJ IDEA,本篇介绍如何配置IDEA并使用IDEA开发一个Web应用。


2. 软件下载与安装

1,首先下载安装JDK并配置环境变量。


JDK安装目录D:\Java\jdk1.7.0_79

新建环境变量JAVA_HOME,其值为D:\Java\jdk1.7.0_79

环境变量PATH中添加 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

新建环境变量(如果已有CLASSPATH则在其起始位置添加 .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;(最开始有个小数点)


2,下载Tomcat并解压到D:\Java\apache-tomcat-7.0.73


3,下载并安装IntelliJ IDEA 2016.3.4,这里尽量安装2016版本的,其他版本可能跟下面截图中不大一样哦。安装过程比较简单,一直下一步下一步就行,不再具体介绍。


3. 创建Project

1,首先必须做一个说明,在IDEA中有两个非常重要的概念分别为Project和Module,注意Project是指的工作空间,而Module指的是工作控件下面的一个应用,比如一个Web应用就是一个Module。(IDEA中的Project相当于MyEclipse中的Workspace,而IDEA中的Module相当于MyEclipse中的Project)


2,新建一个目录IntelliJProject,用作IDEA项目的一个工作空间保存目录。此处为:D:\Java\IntelliJProject


3,打开IDEA,界面如下,选择Create New Project创建一个工作空间。

image.png

4,在New Project界面,注意选择Project SDK为之前下载的版本,然后Next

image.png

5,不选中Create project from template,我们不用模版,自己创建一个纯净的项目。然后Next

image.png

6,Project location选中之前设定的目录D:\Java\IntelliJProject,同时将Project name设为IntelliJProject(也可以跟目录不同名,但是建议同名,比较好记忆)。然后Finish完成Project的创建。

image.png

7,至此Project创建完毕,项目结构如图:

image.png

4. 创建Module

1,右键点击项目名称IntelliJProject,选择New-Module,打开新建Module窗口,注意因为要开发web项目,所以选择Web Application,同时创建一个web.xml,所以选中Create web.xml选项。点击Next。

image.png

2,Module name可设置为FirstModule,点击Finish。

image.png

3,此时项目结构如图,在工作空间IntelliJProject下有一个FirstModule应用,且已有web.xml配置文件和一个index.jsp网页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Res2WdG-1581740772113)(https://img-blog.csdn.net/20170527174439466?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd29zaGlzYW5nc2FuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]


4,创建必要的classes和lib文件夹,classes用来放置编译后的类,lib用来放置导入的包,都是需要的文件夹。创建方法:右击WEB-INF,选择New-Directory。

image.png

5. 项目目结构设置

1,虽然已经创建了classes和lib,但是此时项目并不知道这两个文件夹的作用,需要配置一番。

2,选择IDEA菜单栏的File-Project Structure,然后点击Project Structure窗口左侧菜单栏的Module,如图:

image.png

3,在中间一栏选中FirstModule,然后选择path选项卡,配置Output path和Test output path为classes目录,然后点击Apply,如图:

image.png

4,选择Dependencies选项卡,点击**+**,选择lib目录,如图:

image.png

5,在弹出的窗口选择Jar Directory,然后点击Apply。如图

image.png

6. 配置Tomcat服务器

1,选择菜单栏Run-Edit Configurations,在打开的窗口的左侧点击**+**符号添加Tomcat。

image.png

2,将Name设置为Tomcat7,点击Configure,配置之前下载的Tomcat如图,然后点OK

image.png

3,去掉After Launch之前的勾,然后点击Apply即可。注意默认端口8080

image.png

7. 部署web应用并运行

1,修改index.jsp代码为:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>第一个网页</title>
  </head>
  <body>
  测试网页
  </body>
</html>

2,在Run-Edit Configurations窗口选中刚刚建立的Tomcat7容器,然后选择Deployment,点击右边的**+**号,选择Artifact如图:

image.png

3,选择之前的FirstModule,配置其Application context为**/FirstApp**如图,然后点击OK

image.png

4,在最下方Application Servers窗口左侧的启动按钮,启动Tomcat

image.png

5,出现信息信息: Server startup in 149 ms,表示启动完成。


6,在浏览器地址栏输入:http://localhost:8080/FristApp/index.jsp

注意FirstApp即为配置的Application context,页面如下,成功了!

image.png

相关文章
|
26天前
|
开发框架 前端开发 JavaScript
ASP.NET Web Pages - 教程
ASP.NET Web Pages 是一种用于创建动态网页的开发模式,采用HTML、CSS、JavaScript 和服务器脚本。本教程聚焦于Web Pages,介绍如何使用Razor语法结合服务器端代码与前端技术,以及利用WebMatrix工具进行开发。适合初学者入门ASP.NET。
|
23天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
186 45
|
29天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
32 7
|
1月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
1月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
40 2
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
54 1
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
IntelliJ IDEA - 复制文件全限定名快捷键
IntelliJ IDEA - 复制文件全限定名快捷键
978 0
IntelliJ IDEA - 复制文件全限定名快捷键