第一个Gradle Web项目——TODO-WEB

向右看齐 2021-07-25 01:42 529阅读 0赞

**一 代码结构**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

**二 代码**

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选项

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

**三 编译**

双击新增的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'.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

**四 安装**

1 将上面生成的war包放到D:\\Program\\Tomcat8\\webapps目录下

2 启动Tomcat，上面的war包会自动解压

3 解压后后的结果和代码结构进行比对，下面三张图揭示了映射关系。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5][]

**五 测试**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/0e76b6dafdfe4d1388df0a79a413f2cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/2ff9e77fcd824b3285d3206085c745b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/01dfdb71b74443a2b45245fd149df336.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/1b9fd0c2c89b499086cbf6cfeb7e5250.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4]: /images/20210724/389a944dd16f4d1bbe521410ee38a29b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5]: /images/20210724/8f5c65fc39a245258399c32f25f108ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6]: /images/20210724/bc2b9c71b5844a0aaae71c8ff716a779.png