使用idea開發javaWeb應用程式-撰寫前端頁面

回到第一章：目錄

文章目錄

使用idea開發javaWeb應用程式-撰寫前端頁面
前言
一、新建index.html

前言

上一節搭建了idea+maven+tomcat的java web開發環境，創建了一個webapp模板工程：FirstJavaWeb
這節將在此基礎上，撰寫3個靜態頁面，并實作頁面的一些效果和跳轉：
index.html 用 html4撰寫
login.html 用html5 撰寫
main.jsp 用jsp頁面撰寫

工程結構如下：
在這里插入圖片描述

一、新建index.html

1、在webapp目錄上點右鍵，new - HTML File，選html4，輸入名字index，

在這里插入圖片描述
2、代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- html的頭部-->
<head>

    <title>我的第一個網站</title><!-- 網頁標題-->
    <meta charset="utf-8"><!-- 編碼格式-->
    <link rel="stylesheet" type="text/css" href="css/my.css"><!-- 引入樣式檔案-->
</head>
<!-- html的body部分-->
<body>
<div id="main-container" >  <!-- 最外層div區域-->
    <div id="div-header" >  <!-- 用于顯示頭部的div區域-->
        <h3 style="margin-bottom:0;">歡迎進入我的網站</h3>
        </hr>
        <p>
            天將降大任于斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能，——孟子
        </p>
    </div>

    <div id="div-content" >  <!-- 用于顯示圖片和內容的區域-->
        <img src="./pics/pic0.jpg" alt="" class="main-img">
        </br>
        <hr>
        <button id="enterButton" onclick="toJsp()">登錄入口</button>
    </div>


</div>
<!-- javascript 代碼-->
<script type="text/javascript">
//點擊按鈕跳轉到登錄頁面
function toJsp()
{
    window.location.href="login.html";
}
</script>
</body>
</html>

3、在webapp上右鍵，new - Directory ，新建一個目錄：css
在這里插入圖片描述
4、在css下新建檔案，命名：my.css，代碼如下：

/*所有的 p 標簽的樣式*/
p {
    color:black;
}
/* # id選擇器*/

/**最外層區域的樣式*/
#main-container
{
    position:absolute;/**采用絕對布局*/
    width:100%;/**寬度填滿瀏覽器*/
    height:100%;/**高度填滿瀏覽器*/
    background-color:#D0D0D0/**設定背景色為灰色*/
}
/** 頭部 區域的樣式*/
#div-header
{
    text-align:center;/** 區域元素居中顯示*/
    color:red;/** 設定字體顏色為紅色 */
    position:relative;/**采用相對布局*/
    height:80px;/** 高度 80像素*/
    width:800px; /** 寬度 800像素*/
    margin-left:50px; /** 距離左邊的邊距 50像素*/
}
/** 內容 區域的樣式*/
#div-content
{
    text-align:center;/** 該div區域的所有文本居中顯示*/
    position:absolute;/**采用相對布局*/
    background-color:#D0D0D9; /**設定背景色為灰色*/
    height:600px;/** 高度 600像素*/
    width:800px;/** 寬度 800像素*/
    border:2px dashed; /** 邊框的像素 2， dashed 含義為 虛線框*/
    border-color:gray; /** 邊框顏色為灰色*/
    box-shadow: 2px 2px 5px #D0D0D9; /** 邊框陰影效果*/
    margin-top:20px; /** 上邊距20 像素*/
    margin-bottom:10px; /** 下邊距10 像素*/
    margin-right:50px; /** 右邊距50 像素*/
    margin-left:50px; /** 左邊距50 像素*/
    border-radius:25px; /** 邊框的圓角像素 25像素*/

}
#enterButton{
    background-color:gray;  /** 設定按鈕背景色為灰色*/
    position:relative;      /**采用相對布局*/;
    width:100px; /** 寬度 100像素*/
    height:40px; /** 高度 40像素*/
}

/* . class選擇器*/
.main-img {
    position:relative;/**采用相對布局*/;
    width:784px;   /**寬度：784像素，為了讓圖片居中在div中*/
    height:584px;  /**高度：584像素，為了讓圖片居中在div中*/
        margin-top:8px;
        margin-bottom:8px;
        margin-right:8px;
        margin-left:8px;
}
.loginForm
{
    position:absolute;/**采用絕對布局*/
    top:70%; /**上邊距離父元素邊距：70%*/
    left:10%; /**左邊距離父元素邊距：10%*/
}

5、在webapp目錄下新建 js檔案夾，再新建檔案 my.js ，代碼如下：

//判斷輸入引數是否為空，是則回傳false，否則回傳true
function loginCheck(uname,pwd){
    if(uname == null || pwd == null || uname == "" || pwd == "") {
        return false;
    }
    return true;
}

6、在 webapp目錄下，新建pics檔案夾，任意復制2張圖片（解析度最好為4：3）到該檔案加下，命名分別為：pic0.jpg和pic1.jpg，如果找不到可以用下面2張，
在這里插入圖片描述

7、在webapp上點右鍵，新建檔案 login.html 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    <link rel="stylesheet" type="text/css" href="css/my.css">
    <script type="text/javascript" src="./js/my.js"></script>
</head>

<body>
<div id="main-container" >
    <div id="div-header" >
        <h3 style="margin-bottom:0;">歡迎進入我的網站</h3>
        </hr>
        <p>
            天將降大任于斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能，——孟子
        </p>
    </div>

    <div id="div-content" >
        <img src="./pics/pic0.jpg" alt="" class="main-img">
        <form id="loginForm" class="loginForm" action="main.jsp" method="post">
            <p>戶 名: <input id="uname" type="text" name="uname" /></p>
            <p>密 碼: <input id="pwd" type="password" name="pwd" /></p>
            <input type="button" value="登錄" onclick="check()"/>
        </form>
    </div>


</div>
<script type="text/javascript">

//檢查輸入是否為非空
function check()
{
    var uname = document.getElementById("uname").value;//獲取輸入的用戶名的值
    var pwd = document.getElementById("pwd").value;//獲取輸入的密碼值

    if(loginCheck(uname,pwd)){ //呼叫 js/my.js 中定義的方法，來檢查輸入是否非空
        document.getElementById("loginForm").submit();  //輸入不為空則跳轉到主頁面
    }else{
        alert("戶名和密碼不能空，");
        return false;
    }
}


</script>
</body>
</html>

8、在webapp上點右鍵，新建檔案 main.jsp 代碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>我的網站</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<!-- jsp 頁面可以內嵌 java代碼-->
<%
    String uname = request.getParameter("uname");
%>
<div id="main-container" >
    <div id="div-header" >
        <h3 style="margin-bottom:0;">歡迎你，<%= uname %> !</h3>
        </hr>
        <p>
            天將降大任于斯人也，必先苦其心志，勞其筋骨，餓其體膚，空乏其身，行拂亂其所為，所以動心忍性，曾益其所不能，——孟子
        </p>
    </div>
    <div id="div-content" >
        <img src="./pics/pic1.jpg" alt="" class="main-img">
        <p>
          當前時間: <%= (new java.util.Date()).toLocaleString()%>
        </p>
    </div>
</div>
</body>
</html>

9、運行，啟動成功后，瀏覽器輸入：http://localhost:8282/FirstJavaWeb/index.html
測驗頁面效果，
在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/244300.html

標籤：其他

上一篇：用JS編程出動態顯示當前系統的時間日期資訊

下一篇：JavaScript實作消消樂-源代碼

2.4-使用idea開發javaWeb應用程式-1（前端頁面）

使用idea開發javaWeb應用程式-撰寫前端頁面

文章目錄

前言

一、新建index.html