JavaWeb学习分享

2022-10-23 13:32:09

JavaWeb（学校学习）

1.1 day01

事件处理模型或者委托模型

真正会java： java技术平台 JavaEE ==> WEB应用开发(MVC) SSM

1.几个基本概念：

事件：用户在程序界面所进行的操作，比如单击鼠标或者输入字符，称为用户事件
事件源：发生事件的对象，一般指某一具体的组件，比如：用户点击某Button，则此Button即为事件源

事件处理器：指的是确定控件如何响应事件的事件过程

TomCat中在首页面中js的应用

<form action="">
		姓名: <input type="text" name="name"><br>
		密码: <input type="password" name="pass"><br>
		<input type="submit" value="登录">
		<input type="reset" value="重置">
          //点击按钮，会弹出对话框
		<input type="button" value="点击" onclick="onClick()">
	</form>

	//点击超链接，会弹出对话框
	<a href="javascript:gogo()">弹出对话框</a>
	<script type="text/javascript">
		function gogo(){
			alert("弹出对话框")
		}
		
		function onClick(){
			alert("你点击我干啥？邦邦两拳！！")
		}
	</script>

2. jsp初认识

JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。
JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。
JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。
JSP标签有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息
JSP是Java EE不可或缺的一部分，是一个完整的企业级应用平台。这意味着JSP可以用最简单的方式来实现最复杂的应用

展示(基于eclipse环境) mian.jsp文件:

/*
	编码方式最好设置为UTF-8,这样程序可以识别中文
*/
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>哈哈哈哦</h1>
    
    //java代码片段
	<%
		int x=20;
		double y=20.8;
	%>
        
	//输出x , y的值
	<%=x %>
	<%=y %>
</body>
</html>

注意：

TomCat 把jsp运行结果（在java代码处生成结果）就被当做文本信息和其他前端页面一起投送到浏览器页面
解决jsp小叉号问题：
(基于eclips)右键项目 Build Path —> Configure Build Path --> Libraries --> Add Library -->Server Runtime --> 选择TomCat服务器 --> 确定应用

1.2day02

1.JSP脚本元素

Java脚本插入
1. Java 代码段
  
  <% …%>
2. Java声明语句
  
  <%! …%>主要定义变量和成员方法变量变为了全局变量
3. Java表达式语句
  
  <%= %>主要用于输出结果
JSP指令
1. page指令
2. include指令:静态包含，被包含页面没有编译（当做是我们的一样拿来用）
JSP动作标记

include动态包含方法的引用，经过编译后把结果返回到主要页面,本身页面不运行
forword页面转向-------------->服务器端的跳转,地址栏不会改变
客户端的跳转:超链接,地址栏里会有变化
JSP内置对象

2.小案例 (index.jsp)

10 x 10表格

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    //10 x 10表格，每一行都会有10个数字（从1到10） tr是行。td是单元格
	<table border="1">
		<tr>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>2</td>
			<td>2</td>
		</tr>
	</table>
	<br>
	<table border="1">
		<%
			for(int i=1;i<=10;i++)
			{
				%>
				<tr>
					<%
						for(int j=1;j<=10;j++)
						{
							%>
								<td>
									<%=j%>
								</td>
							<%
						}
					%>
				</tr>
				<%
			}
		%>
	</table>
</body>
</html>

1.3day03

1.小案例练习

<table border="1" align="center">
		<%
			for (int i = 1; i <= 10; i++) {
		%>
		<tr>
			<%
				for (int j = i; j <= i * 15; j += i) {
			%>
			<td><%=j%></td>
			<%
				}
			%>
		</tr>
		<%
			}
		%>
	</table>

效果图：

注意:

<%@include file="lower.jsp"%>   //把所引用的页面当做主页面的一部分，把结果显示在主页面
<jsp:include page="Active.jsp"></jsp:include>  //Active.jsp经过编译把结果返回到主页面上
<jsp:forward page="second.jsp"></jsp:forward>  //second.jsp经过编译，主页面会被替换成second.jsp这个页面

2.example3_7案例

题目：编写JSP页面 example3_7.jsp、oddNumber.jsp和evenNumbers.jsp，example3_7.jsp页面中随机获取0~10的整数，当改数为偶数时转向页面evenNumber.jsp，否则转向页面oddNumber.jsp。访问example3_7页面。

example3_7.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		long num=Math.round(Math.random()*10);
	if(num%2==0){
		System.out.println("随机产生偶数数字:"+num);
		%>
			<jsp:forward page="evenNumber.jsp">
				<jsp:param value="<%=num %>" name="num"/>
			</jsp:forward>
		<%
	}
	else{
		System.out.println("随机产生奇数数字:"+num);
		%>
			<jsp:forward page="oddNumber.jsp">
				<jsp:param value="<%=num %>" name="num"/>
			</jsp:forward>
		<%
	}
	%>
</body>
</html>

evenNumber.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style="color:red;font-size:"30pt">我是偶数页</h1>
	产生的是偶数:
	<%=request.getParameter("num")%>
</body>
</html>

oddNumber.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1 style="color:red;font-size="30pt">我是奇数页</h1>
	产生的是奇数:
	<%=request.getParameter("num")%>
</body>
</html>

效果展示：

3.example3_8案例

题目：编写两个页面example3_8.jsp和computer.jsp，在页面example3_8.jsp中使用include动作标记动态包含文件computer,并向它传递一个矩形的长和宽;computer.jsp收到参数后计算矩形的面积，并显示结果。运行example3_8.jsp页面。

example3_8

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>计算矩形的周长和面积</h1>
	<jsp:include page="computer.jsp">
		<jsp:param value="18" name="chang"/>
		<jsp:param value="10" name="kuan"/>
	</jsp:include>
</body>
</html>

computer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
	String chang= request.getParameter("chang");
	String kuan= request.getParameter("kuan");
	double c=Double.parseDouble(chang);
	double k=Double.parseDouble(kuan);
	double zc=2*(c+k);
	double mj=c*k;
	%>
		长方形的面积为:<%=mj %> <br>
		长方形的周长为:<%=zc %>

效果展示：

1.4day04

小项目

项目要求

在login.jsp登录界面中输入用户名和密码，会到验证页面进行验证，用户名和密码在数据库中存在则会跳转到success.jsp成功登录页面，失败则会跳转到失败页面，提醒登录错误，重新登录

<%@page import="java.util.Scanner"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>登录界面</h1>
<form action="<%=request.getContextPath() %>/webTwo/validate.jsp">
	<table>
		<tr>
			<td>账户输入:</td>
			<td><input type="text" name="user"></td>
		</tr>
		<tr>
			<td>密码输入:</td>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<td align="center"><input type="submit" value="登录"></td>
			<td align="center"><input type="reset" value="重置"></td>
		</tr>
	</table>
</form>
</body>
</html>

validate.jsp：验证页面

<%@page import="myCn.CN"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>验证页面</h1>
<%
	String User="tom";
	String pwd="jenny";
	String user=request.getParameter("user");
	String passwd=request.getParameter("passwd");
	boolean result=new CN().pd(user, passwd);
	if(result){
		%>
			<jsp:forward page="success.jsp"></jsp:forward>
		<%
	}
	else{
		%>
			<jsp:forward page="fail.jsp"></jsp:forward>
		<%
	}
%>

</body>
</html>

success.jsp：成功页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>登录成功</h1>
	欢迎<%=request.getParameter("user")%>用户登录本网站
</body>
</html>

fail.jsp：失败页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>账号或者密码输入有误</h1>
	<a href="login.jsp">点我返回登录页面</a>
</body>
</html>

CN.java:连接数据库

package myCn;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class CN {
	public Connection getCn(){
		try {
            //通过初始化驱动类com.mysql.jdbc.Driver，该类就在 mysql-connector-java-5.1.26-bin.jar中
            // 1.注册 JDBC 驱动
            //Class.forName是把这个类加载到JVM中，加载的时候，就会执行其中的静态初始化块，完成驱动的初始化的相关工			//作
			Class.forName("com.mysql.jdbc.Driver");
			String url="jdbc:mysql://127.0.0.1:3306/np";
            //2.打开连接
			Connection conn=DriverManager.getConnection(url,"root","root123");
			return conn;
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
		
	}
	public boolean pd(String name,String pass) {
		boolean flag=false;
		Connection conn=getCn();
		try {
            //3.执行查询
			Statement st = conn.createStatement();
			String sql="select * from user";
            //4.执行查询语句，并把结果集返回给集合ResultSet
			ResultSet rs=st.executeQuery(sql);
			while(rs.next()) {
				String n=rs.getString("name");
				String p=rs.getString("pass");
				if (name.equals(n)&&pass.equals(p)) {
					flag=true;
				}
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return flag;
	}
}

1.5day05

小案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	输入密钥:
	<form action="validate.jsp">
		<input type="password" name="pwd">
		<input type="submit" value="提交">
	</form>
</body>
</html>

validate.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		String pass = request.getParameter("pwd");
		request.setAttribute("aa", "hahahhaha");
		if(!"2019manpinde".equals(pass)){
			//response.sendRedirect("error.jsp");
			%>
				<jsp:forward page="error.jsp"></jsp:forward>
			<%
		}
		else{
			out.print("2019年蛮拼的！！！");
		}
		//request.setAttribute("aa", "hahahhaha"); 写在这里不指行，在if语句里，页面就已经跳走了
	%>
</body>
</html>

error.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>密钥错误</h1>
	<%=	request.getAttribute("aa")%>
</body>
</html>

运行结果展示

码农公寓

JavaWeb学习分享

JavaWeb（学校学习）

1.1 day01

1.几个基本概念：

2. jsp初认识

1.2day02

1.JSP脚本元素

2.小案例 (index.jsp)

1.3day03

1.小案例练习

2.example3_7案例

3.example3_8案例

1.4day04

小项目

1.5day05

小案例

谢谢您的收看，本博客记录我的学习过程，没有很多大佬写的好，写的全，毕竟我还是一个小菜鸟，哈哈，持续更新

码农公寓

JavaWeb（学校学习）

1.1 day01

1.几个基本概念：

2. jsp初认识

1.2day02

1.JSP脚本元素

2.小案例 (index.jsp)

1.3day03

1.小案例练习

2.example3_7案例

3.example3_8案例

1.4day04

小项目

1.5day05

小案例

谢谢您的收看，本博客记录我的学习过程，没有很多大佬写的好，写的全，毕竟我还是一个小菜鸟，哈哈，持续更新

相关文章