一 代码结构
二 代码
1 web.xml
<?xml version="1.0" encoding="GBK"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>welcome to Tomcat</display-name>
<descripation>
Weclome to Tomcat
</descripation>
</web-app>
2 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function addtodo(){
var name = document.getElementById("name").value;
var list = document.getElementById("list");
list.innerHTML = list.innerHTML = "<p>"+name+"</p>";
}
</script>
</head>
<body>
<h1>TODO-web版</h1>
<label>请输入待办事项名称:</label><input id="name" type="text"/>
<button onclick="addtodo()">添加</button>
<h3>待办事项列表:</h3>
<div id="list"></div>
</body>
</html>
3 build.gradle
group 'com.imooc.gradle'
version '1.0-SNAPSHOT'
apply plugin: 'java'
// 新增war插件
apply plugin: 'war'
sourceCompatibility = 1.8
repositories {
mavenCentral()
}
dependencies {
testCompile group: 'junit', name: 'junit', version: '4.12'
}
修改该文件后,编译新增了war选项
三 编译
双击新增的war编译项。
编译结果如下
18:28:36: Executing task 'war'...
:compileJava UP-TO-DATE
:processResources UP-TO-DATE
:classes UP-TO-DATE
:war
BUILD SUCCESSFUL in 0s
3 actionable tasks: 1 executed, 2 up-to-date
18:28:37: Task execution finished 'war'.
四 安装
1 将上面生成的war包放到D:\Program\Tomcat8\webapps目录下
2 启动Tomcat,上面的war包会自动解压
3 解压后后的结果和代码结构进行比对,下面三张图揭示了映射关系。
五 测试