2.4-使用idea开发javaWeb应用程序-1(前端页面)

使用idea开发javaWeb应用程序-编写前端页面

回到第一章:目录


文章目录

  • 使用idea开发javaWeb应用程序-编写前端页面
  • 前言
  • 一、新建index.html


前言

上一节搭建了idea+maven+tomcat的java web开发环境,创建了一个webapp模板工程:FirstJavaWeb
这节将在此基础上,编写3个静态页面,并实现页面的一些效果和跳转:
index.html 用 html4编写
login.html 用html5 编写
main.jsp 用jsp页面编写


工程结构如下:
2.4-使用idea开发javaWeb应用程序-1(前端页面)_第1张图片

一、新建index.html

1、在webapp目录上点右键,new - HTML File,选html4,输入名字index。

2.4-使用idea开发javaWeb应用程序-1(前端页面)_第2张图片
2、代码如下:


<html>

<head>

    <title>我的第一个网站title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/my.css">
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">
        br>
        <hr>
        <button id="enterButton" onclick="toJsp()">登录入口button>
    div>


div>

<script type="text/javascript">
//点击按钮跳转到登录页面
function toJsp()
{
      
    window.location.href="login.html";
}
script>
body>
html>

3、在webapp上右键,new - Directory ,新建一个目录:css
2.4-使用idea开发javaWeb应用程序-1(前端页面)_第3张图片
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张。
2.4-使用idea开发javaWeb应用程序-1(前端页面)_第4张图片
2.4-使用idea开发javaWeb应用程序-1(前端页面)_第5张图片
7、在webapp上点右键,新建文件 login.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"%>

<html>
<head>
    <title>我的网站title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/my.css">
head>
<body>

<%
    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
测试页面效果。
2.4-使用idea开发javaWeb应用程序-1(前端页面)_第6张图片

你可能感兴趣的:(开发-测试技术基础知识培训)