一、环境
下载jdk
下载解压tomcat
下载安装intelliJ IDEA编译器 注意要下载Ultimate(旗舰版)的，不然功能会不全！！！安装后还要配置环境。
二、创建项目
新建java项目
图片.png
选择新建空项目即可
图片.png
随便填个名字，选择路径，要全英文
新建完成后会弹出一个框，让我们做项目配置
图片.png
选择modules 点击+号 添加一个新模块
图片.png
选择java模块，然后选择一个SDK 进行下一步
图片.png
填写模块名称，可以看到，现在创建的模块路径是放在了我们新建的这个项目下的。后面可能会新建多个模块，都会放在这个项目里。
图片.png
点击OK 完成
新工程目录如下所示：
图片.png
src文件夹是存放java文件的，右键src -> NEW -> Java Class -> 新建一个Main类文件
图片.png
图片.png
图片.png
输入psvm可以跳出方法联想，直接会打出下面的main方法
再输入sout可以跳出打印方法联想
public class Main {
public static void main(String[] args) {
System.out.println("hello world");
}
}
直接在main文件中右键，选择run 就可以运行了，在控制台可以看到打印出了hello world
图片.png
三、添加web模块
目前我们已经能执行一个单机项目了，为了能够联网，数据互通，需要增加一个web模块。
对准项目根目录文件夹右键-> Add Framework Support
图片.png
勾选 Web Application， 点击OK
图片.png
可以发现目录中多出了一个web文件夹，这个文件夹内装的就是希望提供给客户端的资源
图片.png
在这个文件夹里，默认有一个index.jsp文件，和一个WEB-INF文件夹，暂时先不管，在这里我新建一个test.html文件。还在文件夹里放了一张图片flower.jpg。后面看看能不能访问到这些资源。
图片.png
四、集成tomcat
现在把tomcat集成到工程中来，点击右边Main下箭头，选择Edit Configuratioins
图片.png
点击左上角+号，选择Tomcat Server -> Local
图片.png
为tomcat命个名，configuration可以配置tomcat路径，就是解压的tomcat文件夹。
图片.png
配置好tomcat再点击Deployment->+号 ->Artifact 配置打包
图片.png
选择我们刚才的工程，后面application context写一个名字，表示该项目在tomcat里的项目名，我这里起名hello
后面访问地址http://127.0.0.1:8080/hello就可以访问这个项目了
图片.png
点击OK完成tomcat配置。
五、运行tomcat
配置好了，点击右上角的这2个按钮都可以运行，三角形是直接运行，小昆虫是debugger运行，可以用来断点调试。
图片.png
点击运行，等待一会儿大概十几秒钟，运行成功，浏览器被自动调起，并且自动访问了http://localhost:8080/hello/ 地址，也就是我们的项目地址。
图片.png
http://localhost:8080/hello/这个地址，访问的就是我们项目目录下的web文件夹下的index.htm 没有的话访问index.html，没有再访问index.jsp 等等。。。
所以现在访问的是我们项目中的index.jsp文件，与访问http://localhost:8080/hello/index.jsp是一样的效果。
想要访问我们自己新建的文件test.html和图片flower.jpg只需要访问地址http://localhost:8080/hello/test.html和http://localhost:8080/hello/flower.jpg即可。
图片.png
图片.png
六、重新部署
项目有改动后，需要重新部署tomcat才能生效，点击右上角运行按钮，选择Redeploy重新部署。
图片.png
等待一段时间的部署，再次访问，发现web已经被修改。
图片.png
七、登录例子
创建一个login.html文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
// 因为访问的就是本地项目所以这里地址也可以简写为/hello
<form action="http://localhost:8080/hello">
<div>
用户名
<input type="text" name="username">
</div>
<div>
密码
<input type="text" name="password">
</div>
<button type="submit">登录</button>
</form>
</body>
</html>
运行后输入用户名和密码 点击登录按钮
图片.png
可以看到跳转到hello项目，并且地址后面带上了用户名和密码
图片.png
现在只能发送用户名和密码给项目，并没有回调，还需要开发这块的功能。这里需要使用tomcat的两个库：servlet和jsp
点击右上角，project structure按钮
图片.png
依次点击Dependencies-> +号 -> library
图片.png
选择我们的Tomcat后 点击 add selecte按钮
图片.png
可以看到依赖中多了一个Tomcat，点击OK完成。
图片.png
项目目录中的External libraries文件夹下多了tomcat库，里面有servlet-api.jar和jsp-api.jar
图片.png
依赖添加完毕，现在在src文件夹下新增一个LoginServlet 类文件用来写登录服务。
为什么我起了个名字叫com.jonas.servlet.LoginServlet呢？因为防止重名，我们要有包的概念，将文件分隔开来，这样写其实会创建一个com文件夹，下面再创建一个jonas文件夹，下面再创建一个servlet文件夹，下面再创建LoginServlet文件，好处是在别的包里也可以创建一个同样叫LoginServlet的文件。这种分隔包的名字一般是公司的域名反过来写，比如公司域名是jonas.com，反过来就是com.jonas。
图片.png
在LoginServlet右键，mac电脑选择reveal in finder 可以看到创建的文件
图片.png
现在为LoginServlet文件添加代码，可以响应login.html网页传来的请求
package com.jonas.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;
/*
* 处理登录请求
* 1.继承HttpServlet才能够处理http请求
* 2.使用@WebServlet说明它要处理的请求路径*/
@WebServlet("/login") // 请求路径为/hello/login
public class LoginServlet extends HttpServlet {
@Override
//protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// 获取请求中带的参数
String username = req.getParameter("username");
String password = req.getParameter("password");
// 模拟在数据库中查找到的正确用户名和密码
if ("jonas".equals(username) && "12345".equals(password)) {
// 登录成功
resp.getWriter().write("login success!!!");
} else {
// 登录失败
resp.getWriter().write("login fail!!!");
}
}
}
login.html代码也需要修改一下，form表单需要增加一个请求方式为post，因为我们在LoginServlet类中就是用doPost方法来接收的。（如果是用doGet接收，也需要改为get方法请求）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="http://localhost:8080/hello/login" method="post">
<div>
用户名
<input type="text" name="username">
</div>
<div>
密码
<input type="text" name="password">
</div>
<button type="submit">登录</button>
</form>
</body>
</html>
重新部署代码，输入正确的用户名和密码
图片.png
登录成功！
图片.png
用户名密码输入错误时，登录失败！
图片.png
网友评论