第6章 JSP技术

参考博文:eclipse设置java、html、xml、jsp自动代码提示

1、JSP简介

1.1 JSP的运行原理图

1.2 JSP基础语法

JSP页面可以包括指令标识HTML代码JavaScript代码嵌入的Java代码注释JSP动作标识等内容。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>

    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> JSP页面---显示系统时间</title>
</head>
<body>
<%
         Date date = new Date();                              
         SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
         String today =df.format(date);
      %>
      当前时间:<%=today%><br/>


<%
    int a = 1, b = 2; //定义两个变量a,b
    out.println(a+b);
%>

<br/><br/>
<%!
    public int print() { //定义print方法
        int a = 1, b = 2; //定义两个变量a,b
        return a+b;
    }
%>

<%
    out.println(print());//调用print()方法,输出其返回值
%>


</body>
</html>

1.2 案例 用户注册页面JSP

页面导航栏的顶部文件header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="header">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <!--navbar-header-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/index" >首页</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle " data-toggle="dropdown">商品分类
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu multi-column columns-2">
                            <li>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <h4>商品分类</h4>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#" >热销</a></li>
                    <li><a href="#" >新品</a></li>
                    <li><a href="#" class="active">注册</a></li>
                    <li><a href="#" >登录</a></li>
                </ul>
                <!--/.navbar-collapse-->
            </div>
            <!--//navbar-header-->
        </nav>
        <div class="header-info">
            <div class="header-right search-box">
                <a href="javascript:;">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </a>
                <div class="search">
                    <form class="navbar-form" action="/">
                        <input type="text" class="form-control" name="keyword">
                        <button type="submit" class="btn btn-default" aria-label="Left Align">
                            搜索
                        </button>
                    </form>
                </div>
            </div>
            <div class="header-right cart">
                <a href="goods_cart.jsp">
                    <span class="glyphicon glyphicon-shopping-cart " aria-hidden="true">
                        <span class="card_num"></span>
                    </span>
                </a>
            </div>
            <div class="clearfix"> </div>
        </div>
        <div class="clearfix"> </div>
    </div>
</div>
<!--//header-->

显示提示信息的底部文件footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!--footer-->
<div class="footer">
    <div class="container">
        <div class="text-center">
            <p>heima www.itcast.cn © All rights Reseverd</p>
        </div>
    </div>
</div>
<!--//footer-->

用户注册的文件user_register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<title>用户注册</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" rel="stylesheet" href="/firstweb/css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="/firstweb/css/style.css">
</head>
<body>
	<!--header-->
	<jsp:include page="/chapter06/header.jsp"/>
	<!--//header-->
	<!--account-->
	<div class="account">
		<div class="container">
			<div class="register">
				<form action="/user_rigister" method="post">
					<div class="register-top-grid">
						<h3>注册新用户</h3>
						<div class="input">
							<span>用户名 <label style="color:red;">*</label></span>
							<input type="text" name="username" placeholder="请输入用户名" required="required">
						</div>
						<div class="input">
							<span>邮箱 <label style="color:red;">*</label></span>
							<input type="text" name="email" placeholder="请输入邮箱" required="required">
						</div>
						<div class="input">
							<span>密码 <label style="color:red;">*</label></span>
							<input type="password" name="password" placeholder="请输入密码" required="required">
						</div>
						<div class="input">
							<span>收货人<label></label></span>
							<input type="text" name="name" placeholder="请输入收货">
						</div>
						<div class="input">
							<span>收货电话<label></label></span>
							<input type="text" name="phone" placeholder="请输入收货电话">
						</div>
						<div class="input">
							<span>收货地址<label></label></span>
							<input type="text" name="address" placeholder="请输入收货地址">
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="register-but text-center">
					   <input type="submit" value="提交">
					   <div class="clearfix"> </div>
					</div>
				</form>
				<div class="clearfix"> </div>
			</div>
	    </div>
	</div>
	<!--//account-->
	<!--footer-->
	<jsp:include page="/chapter06/footer.jsp"/>
	<!--//footer-->
</body>
</html>

CSS文件 

bootstrap.css 

链接:https://pan.baidu.com/s/1xokAvXm3AWFFeom6GLzgVQ 
提取码:x96k

style.css

链接:https://pan.baidu.com/s/1sVgasrVCPjPGeimjCm9e7A 
提取码:vu8n

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值