JavaWeb基础(学习笔记)（二）

最新推荐文章于 2021-02-25 04:11:24 发布

Boss Water

最新推荐文章于 2021-02-25 04:11:24 发布

阅读量284

点赞数 4

分类专栏： JavaWeb 文章标签： JavaWeb 连接数据库登录注册 js实现注册判断

本文链接：https://blog.csdn.net/weixin_45066737/article/details/100540796

版权

JavaWeb 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.创建JSP页面

首先，在创建之前必须要做的事，更改编码。

在jsp页面中输出数组中的元素案例，使用for循环和Arrays.toString()方法
介绍两种导包方式：

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

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

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import = "java.util.Arrays" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个jsp页面</title>
<%
	int[] arr = new int[]{1,2,3,4};
%>
</head>
<body>
<h1><a href="/web01_0903/index02.jsp">Java和jsp混合使用</a></h1>
	<!--用for循环输出数组中的元素  -->
	<!--用Arrays.toString()方法输出数组中的元素  -->
<%
	for(int i=0;i<arr.length;i++){
		out.println(arr[i]);
	}	
%>
<br />
<%=Arrays.toString(arr) %>
</body>
</html>

输出数组中的元素

2.Java代码和html标签混合使用

java和html混合使用的小案例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ page import="java.util.*" %>
    <%@ page import="java.util.Map.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp和java的混合使用</title>
<%
ArrayList list = new ArrayList();
list.add("玩具");
list.add("文具");
list.add("书籍");
HashMap<Integer,String> map = new HashMap<>();
map.put(1, "玩具");
map.put(2, "文具");
map.put(3, "书籍");
%>
</head>
<body>
<!-- 一般情况下推荐将Java代码和html标签分离 -->
<table>
	<tr>
		<td>编号</td>
		<td>类型</td>
	</tr>
	<%
		for(int i=0;i<list.size();i++){
	%>
	<tr>
		<td><%=i+1 %></td>
		<td><%=list.get(i) %></td>
	</tr>
	<%} %>
</table>
<hr />

<%
	Set<Entry<Integer, String>> e = map.entrySet();
	Iterator<Entry<Integer, String>> it = e.iterator();
%>
<!-- 将输出到select标签中 -->
<select>
	<%
		while(it.hasNext()){
			Entry<Integer, String> key =it.next();
	%>
	<option value="<%=key.getKey() %>"><%=key.getValue() %></option>
	<%
		}
	%>
</select>
<hr />
<!-- 将输出到radio标签中 -->
<%
	Set<Integer> key = map.keySet();
	for(Integer k:key){	
%>
<input type="radio"  value="<%=k %>"><%=map.get(k) %>
<%
	}
%>
</body>
</html>

运行结果

3.实现用户的登录功能

注意：每次在jsp文件中写代码前更改编码

<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
%>

登录：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
%>
<!-- 以post方式提交表单跳转到web02_0904/Login1.jsp页面 -->
<form action="/web02_0904/Login1.jsp" method="post">
	用户名：<input type="text" name="name" value=""><br />
	密码：<input type="password" name="password" value=""><br />
	<!-- 增加复选框选项 -->
	<input type="checkbox" name="happy" value="篮球">篮球
	<input type="checkbox" name="happy" value="足球">足球
	<input type="checkbox" name="happy" value="棒球">棒球
	<br />
	<input type="submit" value="登录">
</form>

</body>
</html>

登录成功的判断：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录验证</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
%>
<%
	//从index.jps页面传递来的数据， 使用request来获取
	String name = request.getParameter("name");
	String password = request.getParameter("password");
	//设置登录名是张三，密码是9999，如果输入正确跳转到welcom.jsp页面，如果输入不正确，跳转到原来的页面
	if("张三".equals(name) && "9999".equals(password)){
		/*
			response是客户端行为，是客户端（浏览器行为）来发起跳转请求
			request是服务端行为，是由服务器内部进行跳转，如果服务器跳转了的地址 浏览器不知道，所以浏览器就停留在上一个地址
		*/
		//response.sendRedirect("welcom.jsp?name="+name);
		request.getRequestDispatcher("welcom.jsp").forward(request, response);
		//注意：服务器跳转的是相对路径
	}else{
		response.sendRedirect("index.jsp");
	}
%>

</body>
</html>

注意：用//response.sendRedirect(“welcom.jsp?name=”+name);
request.getRequestDispatcher(“welcom.jsp”).forward(request, response);跳转页面的区别；
在地址栏中：
response跳转
http://localhost:8080/web02/welcome.jsp?cu_name=???
request跳转
http://localhost:8080/web02/login1.jsp?cu_name=张三&cu_phone=9999

登陆成功后跳转的welcome.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎界面</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
%>
<%
	String name = request.getParameter("name");
%>
你好！<%=name %><br />
</body>
</html>

登陆成功

4.连接MySQL，进行用户的登录注册功能

登录页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!-- 如果用户名和密码输入错误就会出现提示 -->
<style type="text/css">
	#p1{
		display: none;
		color: red;
	}
	
</style>
<!-- 提示输出后3秒后消失 -->
<script type="text/javascript">
	setTimeout(function(){
		p1.style.display=null;
	},3000);
</script>
</head>
<body>
<p id="p1">用户名或密码错误</p>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	String err = request.getParameter("err");
	//如果err传回来的值是1，则输出错误提示
	if("1".equals(err)){
		out.println("<script type='text/javascript'>window.onload=function(){ p1.style.display='block';}</script>");
	}
	
%>
	
	<form action="/web03_0904/login.jsp" method="post">
		用户名：<input type="text" name="cu_name" /><br />
		密码：<input type="password" name="cu_phone" /><br />
		<input type="submit" value="登录" /><a href="/web03_0904/reg.jsp">没有账户嘛？</a>
	</form>
</body>
</html>

登录界面
登录验证：
java连接数据库的代码

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.DriverManager"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	String cu_name = request.getParameter("cu_name");
	String cu_phone = request.getParameter("cu_phone");
	Connection conn = null;
	try{
		Class.forName("com.mysql.jdbc.Driver");
		String url="jdbc:mysql://localhost:3306/ishopn?characterEncoding=utf8";
		String user="root";
		String password="123456";
		conn = DriverManager.getConnection(url, user, password);
		
		//sql的查询语句
		String sql = "select count(*) from customer where cu_name=? and cu_phone=?";
		PreparedStatement ps = conn.prepareStatement(sql);
		ps.setString(1,cu_name);
		ps.setString(2,cu_phone);
		ResultSet rs = ps.executeQuery();
		rs.next();
		int c = rs.getInt(1);
		if(c>0){
			//如果查到的值大于0则，登录成功，跳转到welcome.jsp页面
			request.getRequestDispatcher("welcome.jsp").forward(request, response);
		}else{
			//如果失败就跳转回登录页面输出提示
			response.sendRedirect("/web03_0904/index.jsp?err=1");
		}
		
	}catch (Exception e) {
		e.printStackTrace();	
	}finally{
		if(conn!=null){
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}
%>

错误提示
登陆成功跳转到welcome.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎界面</title>
</head>
<body>
<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
%>
<%
	String cu_name = request.getParameter("cu_name");
%>
你好！<%=cu_name %><br />
</body>
</html>

注册页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<!-- 做一个简单的表单验证 所有的不能为空 用户名不能少于3个字符 密码不能少于4个字符 -->
	<%
	request.setCharacterEncoding("utf-8");
	response.setCharacterEncoding("utf-8");
	%>
	
	<form action="/web03_0904/doreg.jsp" method="post" onsubmit="return check()">
		用户名：<input type="text" name="cu_name" /><br />
		密码：<input type="password" name="cu_phone" /><br />
		性别：<input type="radio" name="cu_gender" value="1" checked />男
		<input type="radio" name="cu_gender" value="2" />女<br />
		家庭地址：<input type="text" name="cu_address" /><br />
		<input type="submit" value="注册" /><a href="/web03_0904/index.jsp">已经有账户!</a>
	</form>
	<script type="text/javascript" src="/web03_0904/js/reg.js"></script>
</body>
</html>

注册页面
表单验证所有的不能为空用户名不能少于3个字符密码不能少于4个字符
js代码：

// 1 获取元素
var inputs=document.getElementsByTagName("input");
var cu_name=document.getElementsByName("cu_name")[0];
var cu_phone=document.getElementsByName("cu_phone")[0];
// 2 操作元素
function check(){
	//1为空判断
	for(var i=0;i<inputs.length;i++){
		if(inputs[i].value==null || inputs[i].value==""){
			alert("所有信息都不能为空");
			inputs[i].focus();
			return false;
		}
		
	}
	//用户名长度判断
	if((cu_name.value).trim().length<=2){
		alert("用户名至少3个字母");
		return false;
	}
	//密码长度判断
	if((cu_phone.value).trim().length<=3){
		alert("用户密码至少4个字母");
		return false;
	}
	
	return true;
}

所有信息为空
用户名长度判断
密码长度判断
注册成功判断代码，注册成功后写入数据库中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.*"%>
<%@page import="java.util.UUID"%>
<%
//修改字符集
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//获取表单中的五个属性
String cu_id=UUID.randomUUID().toString();
String cu_name=request.getParameter("cu_name");
String cu_phone=request.getParameter("cu_phone");
String cu_gender=request.getParameter("cu_gender");
String cu_address=request.getParameter("cu_address");

//java连接数据库操作
Connection conn = null;

try{
Class.forName("com.mysql.jdbc.Driver");	
String url="jdbc:mysql://localhost:3306/ishopn?characterEncoding=utf8";
String user="root";
String password="123456";
conn = DriverManager.getConnection(url, user, password);
String sql = "insert into customer (cu_id,cu_name,cu_phone,cu_gender,cu_address) values (?,?,?,?,?)";
PreparedStatement ps = conn.prepareStatement(sql);
ps.setString(1, cu_id);
ps.setString(2, cu_name);
ps.setString(3, cu_phone);
ps.setInt(4, new Integer(cu_gender));
ps.setString(5, cu_address);
int line = ps.executeUpdate();
//写入成功就跳转到welcome.jsp页面，失败就回到登录页面
if(line>0){
	response.sendRedirect("/web03_0904/welcome.jsp?cu_name="+cu_name);
}else{
	response.sendRedirect("/web03_0904/index.jsp?err=2");
}

}catch(Exception e){
	e.printStackTrace();
}finally{
	if(conn!=null){
		try{
			conn.close();
		}catch(Exception e){
			e.printStackTrace();
		}
		
	}
}
%>

Boss Water

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础(学习笔记)（二）

1.创建JSP页面首先，在创建之前必须要做的事，更改编码。在jsp页面中输出数组中的元素案例，使用for循环和Arrays.toString()方法介绍两种导包方式：1.<%@ page language="java" import = "java.util.Arrays" contentType="text/html; charset=UTF-8" pageEncodin...
复制链接

扫一扫

专栏目录