前端学习笔记（企业课）

最新推荐文章于 2023-05-10 15:13:02 发布

置顶羽凌fairy

最新推荐文章于 2023-05-10 15:13:02 发布

阅读量277

点赞数

分类专栏：计算机 jsp 文章标签： jsp servlet

本文链接：https://blog.csdn.net/qq_43760243/article/details/115462737

版权

计算机同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jsp

5 篇文章 0 订阅

订阅专栏

文章目录

验证成功之后跳转下一页面
按钮弯度
javascript 初步学习
jquery
Bootstrap
模板网站
前端向后台传数据：Ajax form表单 a标签
Servlet向前端传数据：Ajax request/session el表达式
el+mysql 实例：从数据库中提取出数据并输出到页面
对错误和异常进行优化处理
用拦截器给所有页面设置utf-8编码

验证成功之后跳转下一页面

在代码中加入：

if(验证条件)
 response.sendRedirect("要跳转页面的路径");

按钮弯度

border-radius:5px

javascript 初步学习

1. 脚本位置

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。
但type 属性不是必需的，JavaScript 是 HTML 中的默认脚本语言。

JavaScript 位置：<head>或<body>部分均可也可放在外部文件中
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src属性中设置脚本的名称：

<script src="myScript.js"></script>

2. js规则

请在每条可执行的语句之后添加分号
为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符
javascript用var x=7;的形式去定义变量并赋值，加减乘除都可以正常运算，大小写敏感，命名规则与java一样，不可与关键字同名，倾向于小写开头的驼峰命名。用//和/**/写注释
可用+连接两个字符串，字符串是文本，由双引号或单引号包围，变量名. length 可返回字符串的长度，字符串值中有引号用\转义

3. 学习笔记

函数：

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}
//访问没有 () 的函数将返回函数定义 即函数若想发挥作用括号不能省
/*在 JavaScript 函数中声明的变量，会成为函数的局部变量,只能在函数内访问,局部变量在函数开始时创建，在函数完成时被删除。*/

对象：

//可以用var定义对象 并给其属性和方法
var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
//访问属性值的两种方法
1.person.lastName;
2.person["lastName"];

常用事件：

onclick 	用户点击了 HTML 元素
onmouseover 	用户把鼠标移动到 HTML 元素上
onmouseout 	用户把鼠标移开 HTML 元素

选择器：

 getElementById(ID) //返回对指定ID的第一个对象的引用
 getElementsByClassName(classname) //返回文档中所有指定类名的元素
 getElementsByTagName(tagname) //返回文档中指定标签的元素

弹窗：alert
控制台打印：console.log

常用功能：

1.改变html中内容
document.getElementById("选择器id").innerHTML = "改变后html中的内容";

2.改变网页样式示例 属性都是驼峰命名
document.getElementById("选择器id").style.属性名="属性值";

3.修改属性示例 选择器选中元素.属性名=属性值即可修改
document.getElementById("选择器id").属性名 = "属性值";

4.迭代数组示例
for(var (变量名)num in (数组名)nums){
 alert(nums[num]);}
 
5.js一个事件的整体示例 在按钮中写事件=函数名 在script标签对中写函数功能
function c(){
   for(var num in nums){
	alert(nums[num]);}
<button onclick="c()">修改样式</button>

6.定时器
setInterval(函数名,毫秒数);//每隔设定的毫秒数，循环执行函数
setTimeout(function, milliseconds)/;/在等待指定的毫秒数后执行函数。

4.老师上课的代码（基本用法+图片轮播）

<html>
  <head>
    <title>JS测试</title>
	<script type="text/javascript">
		//数组类型
		var nums = [11,12,13,14];
		//对象类型
		var people = {name:"张三",age:24};
		function c(){//遍历nums数组
			for(var num in nums){
				alert(nums[num]);
			}
			//修改样式
			document.getElementById("a").style.backgroundColor="green";
			//修改内容
				//直接当成字符串修改
			document.getElementById("a").innerText = "<b>京东<//b>";
				//执行样式
			document.getElementById("a").innerHTML = "<b>京东<//b>";
			//修改属性
			document.getElementById("a").href = "http://www.jd.com";
		}
	</script>
  </head>
  <body>
  	<a id="a" href="http://www.baidu.com">百度一下</a>
  	<button onclick="c()">修改样式</button>
  </body>
</html>

图片轮播：（可点击按钮切换也会自动跳转下一张）
把图片路径存到数组中，点击按钮切换图片地址即可注意首尾图片切换间地址的变换

<html>
  <head>
    <title>图片轮播</title>
	<script type="text/javascript">
		var imgs = ["/JS/image/1.jpg.webp","/JS/image/2.jpg.webp","/JS/image/3.jpg.webp","/JS/image/4.jpg","/JS/image/5.jpg","/JS/image/6.jpg","/JS/image/7.jpg.webp","/JS/image/8.jpg.webp"];
		var index = 1;
		function before(){
			index--;
			if(index == -1){
				index = 7;
			}
			document.getElementById("img").src = imgs[index];
		}
		
		function after(){
			index++;
			if(index == 8){
				index = 0;
			}
			document.getElementById("img").src = imgs[index];
		}
		setInterval(after,3000);//定时器
	</script>
  </head>
  
  <body>
  	<button onclick="before()">上一张</button>
  	<img src="/JS/image/2.jpg.webp" id="img">
  	<button onclick="after()">下一张</button>
  </body>
</html>

jquery

1. 用jquery需要先把jquery.js复制到web项目下

在这里插入图片描述
jquery.js百度云：
链接: https://pan.baidu.com/s/1B4zZJhuqzz_7CE84pTqIzQ 提取码: 9ajf
这样加载的话js的src为：js/jquery.js

2.学习笔记

1.选择器

* 	    $("*") 	        所有元素
#id 	$("#lastname") 	id="lastname" 的元素
.class 	$(".intro") 	所有 class="intro" 的元素
element $("p") 	        所有 <p> 元素

2.事件

click 	用户点击了 HTML 元素
mouseover 	用户把鼠标移动到 HTML 元素上
mouseout 	用户把鼠标移开 HTML 元素

3.在文档加载后激活函数事件函数必须写在该语句中才能发挥作用

$(document).ready(function(){
  $(".btn1").click(function(){//事件函数
    $("p").slideToggle();
  });
});//注意事件函数和ready函数在};之间都有一个)
$(function) 等价于 $(document).ready(function()

4.常用功能

1.修改样式 属性名也是驼峰
$("#id").css("属性名","属性值");

2.获取/修改标签内容
$("#id").html();//获取
$("#id").html("修改后的内容");//修改

3.获取或修改input属性值:
$("#input的id").val();//获取input标签值
$("#input的id").val("李四");//修改input标签值

4.修改标签属性值
$("#id").attr("属性名","属性值");

5.显示/隐藏元素的切换 toggle();{
 $("#id").toggle();

6.添加和清空元素
$("#id").append()
$("#id").remove()

定义列表实现点击之后显示/隐藏切换：

$("#dt").click(function(){
 $(".dd").toggle();
});

5.用Ajax接收和传递数据

返回字符串时 jsp文件的 dataType:"text",Ajax文件中response.setContentType("text/html");
返回json串时 jsp文件的 dataType:"json",Ajax文件中response.setContentType("text/json");
如果有参数 jsp文件的Ajax部分 data:{属性名:$("#输入框id").val()}, 没有参数就data:{},
$("#tableid tr:gt(0)").remove();清空上一次查询的数据记录
如果想对查询为空做出弹窗回应可用data.length做条件 alert(“查询为空”);做回应

jsp中Ajax写法：

<script type="text/javascript">
 $(document).ready(function(){
  $("#btn-id").click(function(){
	$("#tableid tr:gt(0)").remove();//清空上一次查询的数据记录
		 $.ajax({
			 type:"post",
			 url:"Ajax地址",
			 data:{属性名:$("#输入框id").val()},//没有参数就直接{},
			 dataType:"json",//如果返回字符串 这里参数为text
			 success:function(data){//这里可用if(data.length==0)去处理查询为空的情况
			 if(data.length==0)alert("查询为空");
				 else{
					  for(var index in data){
						 $("#table1").append("<tr class=\"student1\"><td>"+data[index].sno+"</td><td>"+data[index].name+"</td><td>"+data[index].classes+"</td></tr>")}
						}
			 },
				 error:function(){
					  alert("处理失败");	}				
				});			
			});
   });
</script>

Ajax.java写法：

public class Ajax1 extends HttpServlet{
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		//接收前端信息
		resp.setContentType("text/json");//如果是返回text 这里参数是text/html
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		
		String sno=req.getParameter("sno");//获得data参数
		
		Connection con = Jdbc.getCon();//数据库中获取信息
	    String sql = "select sno,sname,sclass from student.stu where sno='"+sno+"'";
		List<Student> list = new ArrayList<Student>();
		try {
			PreparedStatement ps = con.prepareStatement(sql);
			ResultSet res = ps.executeQuery();
			while(res.next()){
				String sno1=res.getString(1);//获得第一列的数据
				String sname=res.getString(2);
				String sclass=res.getString(3);
				Student s1 = new Student(sno1,sname,sclass);
				list.add(s1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		//返回数据
		PrintWriter pw = resp.getWriter();
		String json = JSON.toJSONString(list);	//将list信息转成JSON串
		pw.println(json);
	}
}

3.老师上课代码（对学生信息进行查询添加清空）

文件位置：
在这里插入图片描述
Ajax.java(servlet)

public class Ajax extends HttpServlet {
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8");//防止中文乱码
		response.setContentType("text/html");
		response.setCharacterEncoding("utf-8");
		
		String name = request.getParameter("name");//获得前台的值
		String age = request.getParameter("age");
		System.out.println(name+"\t"+age);//在控制台输出获得的值
		
		PrintWriter out = response.getWriter();
		out.println("查询成功");//把查询成功发给前台
		out.flush();
		out.close();
	}
}

index.jsp

<html>
  <head>    
    <title>jquery</title>
	<script type="text/javascript" src="/Jquery/js/jquery.js"></script>
	<script type="text/javascript">
		//jquery绑定事件
		//表示页面加载完成之后才会执行其中的代码
		$(document).ready(function(){
			$("#btn").click(function(){
				//修改样式
				$("#a").css("color","red");
				//修改内容
				$("#a").html("<b>京东</b>");
				$("#a").text("<b>京东</b>");
				$("#ipt").val("李四");
				//修改属性
				$("#a").attr("href","http://www.jd.com");
			});
			$("#dt").click(function(){
				$(".dd").toggle();
			});
			
			$("#select").click(function(){
				//填写表格内容
				$.ajax({
					//请求方式
					type:"post",
					//请求地址
					url:"servlet/Ajax",
					//请求数据
					data:{name:$("#name").val(),age:$("#password").val()},
					
					//设置返回信息的类型
					dataType:"text",
					//请求成功之后的返回参数
					success:function(data){
						alert(data);
					},
					//失败处理
					error:function(){
						alert("请求失败");
					}
					
				});
				var students = [{sno:"1001",name:"张三",classes:"1801"},{sno:"1002",name:"李四",classes:"1802"},{sno:"1003",name:"王五",classes:"1803"}];
				for(var s in students){
					$("#tab").append("<tr class="+"\"data\""+"><td>"+students[s].sno+"</td><td>"+students[s].name+"</td><td>"+students[s].classes+"</td></tr>");	
				}
				
			});
			$("#delete").click(function(){
				$(".data").remove();
			});
		})	
	</script>	
  </head>
  <body>
  	<a href="http://www.baidu.com" id="a">百度一下</a>
  	<button id="btn">修改a标签</button>
  	<br/>账号<input type="text" id="ipt"/> 	
  	<dl>
  		<dt id="dt">学生管理</dt>
  		<dd class="dd">成绩查询</dd>
  		<dd class="dd">课表查询</dd>
  		<dd class="dd">学分查询</dd>
  	</dl>
  	<hr/>
  	账号<input type="text" id="name"/>  密码<input type="password" id="password"/>
  	<button id="select">查询</button><br/>
  	<button id="delete">清空</button><br/>
  	<table border="1px" id="tab">
  		<tr>	
  			<th>学号</th>
  			<th>姓名</th>
  			<th>班级</th>
  		</tr>
  	</table>
  </body>
</html>

Bootstrap

网址：Bootstrap
常用页面：
在这里插入图片描述使用方法：
1.到这里下载bootstrap

2.解压之后复制到Web项目里

3.把上面的两段link代码复制到文件中代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

4.常用代码

1.需要先放在一个容器里
<div class="container-fluid"></div>

2.默认12列 写的时候直接写占几列就可 空白的部分最好还是用一个标签对去占据而不要偏移
<div class="col-xs-1 one"></div>//表示占一列 one也是它的列名

3.行+列整体布局示例：
<div class="row">
  <div class="col-xs-6">左半部分</div>
  <div class="col-xs-6">右半部分</div>
</div>

4.列偏移 使用 .col-md-offset-* 类可以将列向右侧偏移（只是看到知道作用就好）
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>

5.行要赋予高度才能生效

5.常用辅助功能
字体图标网址
用法：用span标签对网页中对应的属性设置为类名然后用font-size设置大小
如：<span>class="glyphicon glyphicon-camera"</span>
带图标的按钮：<button class="btn btn-info"><span class="glyphicon glyphicon-trash"></span></button>

表格+按钮+输入框样式网址
在这里插入图片描述

表格用法：

<table class="table table-bordered"></table>//带边框
还可以设置成：
table table-hover //悬停的变灰
table table-striped //一行白一行灰

按钮用法：
在这里插入图片描述

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

简单输入框用法：

<input type="text" class="form-control" placeholder="Text input">

在这里插入图片描述

带图标的输入框用法：
在这里插入图片描述

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

仿写一个带图标和按钮的输入框示例：
<div class="col-xs-4">
 <div class="input-group" style="width:200px">
 <input type="text" class="form-control" aria-label="..." style="height: 40px">
 <div class="input-group-btn">
 <button  type="button" class="btn btn-default" style="height: 40px"><span class="glyphicon glyphicon-user" style="font-size: 20px;"></span></button>
 <button  type="button" class="btn btn-info" style="height: 40px">查询</button>
</div></div>

模板网站

网页模板
 element-ui
比较好的一个后台模板

前端向后台传数据：Ajax form表单 a标签

Ajax和form都支持post和get两种方法 a只支持get
Ajax不能实现页面跳转即使用重定向和转发也只是发送页面代码

1.Ajax传数据的方法在上文Jquery部分已作说明（通过按钮点击事件启用Ajax，可以文本框输入也可以直接data中写参数）

2.form表单代码如下：
(action写Servlet地址 method=“post” 输入框要写name参数才能传值 button类型submit)

<form action="Ajax地址" method="post">
<input type="text" name="name"/><br/>
<input type="text" name="age"/><br/>
<button type="submit">提交</button>
</form>

3.a标签代码如下：(用到了下文中get的传送参数原理直接在地址后拼接参数传参)

<a href="Ajax地址?name=张三&age=12">查询</a>

get方法
1.传送参数原理
如向login发送参数 name:张三 age:12
传送方式为在地址后直接拼接参数：login?name=张三&age=12

2.中文乱码解决
在接收数据的Sevlet接收数据后将编码格式改为utf-8 示例如下：

name = new String(name.getBytes("iso-8859-1"),"utf-8");

Servlet向前端传数据：Ajax request/session el表达式

请求转发和重定向：

转发：只能写相对路径 发一次请求 会跳转到Servlet页面 刷新页面会重新发送请求
request.getRequestDispatcher("index.jsp").forward(request, response);
重定向：相对/绝对路径都可以 发两次请求 会跳转到jsp页面 刷新页面不会重新发送请求
response.sendRedirect("index.jsp");

和数据库随时保持一致用转发 但是转发刷新会重复操作（涉及金额的不能用转发）
一般用重定向比较多 但是重定向只能保持与数据库在第一次请求发送的数据保持一致 刷新不会更新数据库中新改数据

建议：增删改用重定向查询用转发

1.Ajax向前端传数据

//不会修改页面地址 无法实现页面跳转
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");

PrintWriter pw = resp.getWriter();
pw.print("要返回的数据（会存到data中）");//一般是转成json串发送

2.转发和重定向传数据

1> 传变量值(转发用request 重定向用session)
数据流向：form.jsp->servlet->home.jsp
转发:

form.jsp:
<form action="forward" method="post">
姓名：<input type="text" name="name"/><br>
     <button type="submit">提交</button>
</form>

servlet：
req.setAttribute("name",req.getParameter("name"));//转发
req.getRequestDispatcher("home.jsp").forward(req, resp);

home.jsp:
<%=request.getAttribute("name")%>

重定向:

form.jsp:
<form action="redirect" method="post">
姓名：<input type="text" name="name"/><br>
    <button type="submit">提交</button>
</form>

servlet：
HttpSession hs = req.getSession();//重定向
hs.setAttribute("name", req.getParameter("name"));
resp.sendRedirect("home.jsp");

home.jsp：
<%=session.getAttribute("name")%>

2>传实体类（传的是实体类 jsp中需要导入java实体类）
数据流向：servlet->home.jsp
转发：

servlet:
Student s1 = new Student("张三","12","1801");
Student s2 = new Student("李四","13","1801");
Student s3 = new Student("王五","14","1801");
List<Student> list=new ArrayList<Student>();
list.add(s1);list.add(s2);list.add(s3);
req.setAttribute("list",list);//转发
req.getRequestDispatcher("home.jsp").forward(req, resp);

home.jsp:
<%
ArrayList<Student> list=(ArrayList)request.getAttribute("list");
    for(Student s:list){
      out.print(s.getName()+"\t");
      out.print(s.getAge()+"\t");
      out.print(s.getClasses());
      out.print("<br/>");}
%>

重定向：

servlet:
Student s1 = new Student("张三","12","1801");
Student s2 = new Student("李四","13","1801");
Student s3 = new Student("王五","14","1801");
List<Student> list=new ArrayList<Student>();
list.add(s1);list.add(s2);list.add(s3);

HttpSession hs = req.getSession();
hs.setAttribute("list",list);
resp.sendRedirect("home.jsp");//重定向

home.jsp:
<%
ArrayList<Student> list=(ArrayList)request.getAttribute("list");//只能用request获取值
    for(Student s:list){
      out.print(s.getName()+"\t");
      out.print(s.getAge()+"\t");
      out.print(s.getClasses());
      out.print("<br/>");}
%>

3>传数据库数据
数据流向：servlet->home.jsp
转发：

servlet:
resp.setContentType("text/html;charset=utf-8");
req.setCharacterEncoding("utf-8");
		
		List<Student> list=new ArrayList<Student>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "root");
			String sql = "select name,age,classes from student";
			PreparedStatement ps = null;
			ResultSet res = null;
			ps = con.prepareStatement(sql);
			res = ps.executeQuery();
			while(res.next()){
				    Student s = new Student();
					s.setName(res.getString(1));
					s.setAge(res.getString(2));
					s.setClasses(res.getString(3));
					list.add(s);
				}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
        catch (SQLException e) {
			e.printStackTrace();
		}
        
        req.setAttribute("list",list);//转发
		req.getRequestDispatcher("home.jsp").forward(req, resp);
		
home.jsp:
<%
ArrayList<Student> list=(ArrayList)request.getAttribute("list");
    for(Student s:list){
      out.print(s.getName()+"\t");
      out.print(s.getAge()+"\t");
      out.print(s.getClasses());
      out.print("<br/>");}
%>

重定向：

servlet:
List<Student> list=new ArrayList<Student>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "root");
			String sql = "select name,age,classes from student";
			PreparedStatement ps = null;
			ResultSet res = null;
			ps = con.prepareStatement(sql);
			res = ps.executeQuery();
			while(res.next()){
				    Student s = new Student();
					s.setName(res.getString(1));
					s.setAge(res.getString(2));
					s.setClasses(res.getString(3));
					list.add(s);
				}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
        catch (SQLException e) {
			e.printStackTrace();
		}
		
		HttpSession hs = req.getSession();
		hs.setAttribute("list",list);
        resp.sendRedirect("home.jsp");//重定向

home.jsp:
<%
ArrayList<Student> list=(ArrayList)session.getAttribute("list");//这里只能用session
    for(Student s:list){
      out.print(s.getName()+"\t");
      out.print(s.getAge()+"\t");
      out.print(s.getClasses());
      out.print("<br/>");}
%>

3.用el表达式
JSTL标准标签库学习网站
1>取值：在jsp页面中${参数名}就可以取到参数的值
2>格式化输出日期：

在jsp文件第二行加格式化标签：
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>

jsp的body部分写以下语句即可格式化输出时间：
<fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm:ss"/>

3>日期实例：

servlet:
req.setAttribute("date",new Date());//转发

HttpSession hs = req.getSession();//重定向
hs.setAttribute("date",new Date());

jsp:
<fmt:formatDate value="${date}" pattern="yyyy-MM-dd HH:mm:ss"/><br/>

4.jstl常用语句

在jsp文件第二行加核心标签：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

if标签：
<c:if test="${student.age>18}">成年人</c:if>  

if else标签(前面可以多个if 除去多个if之外的情况)：
<c:choose>
 <c:when test="${student.age>18}"> 成年人</c:when>
 <c:otherwise>未成年人</c:otherwise>
</c:choose>

循环遍历标签：
//item是遍历对象 var是迭代里的对象名 begin/end是开始/结束下标 step是迭代步长 默认为1
<c:forEach items="${list}" var="student" begin="1" step="2">
${student.属性}

el+mysql 实例：从数据库中提取出数据并输出到页面

servlet:
        List<Student> list=new ArrayList<Student>();
		try {
			Class.forName("com.mysql.jdbc.Driver");
			Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/student?useUnicode=true&characterEncoding=utf-8", "root", "root");
			String sql = "select name,age,classes from student";
			PreparedStatement ps = null;
			ResultSet res = null;
			ps = con.prepareStatement(sql);
			res = ps.executeQuery();
			while(res.next()){
				    Student s = new Student();
					s.setName(res.getString(1));
					s.setAge(res.getString(2));
					s.setClasses(res.getString(3));
					list.add(s);
				}
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
        catch (SQLException e) {
			e.printStackTrace();
		}
        
        req.setAttribute("list",list);//转发
		req.getRequestDispatcher("home.jsp").forward(req, resp);
-------------------------------------------------------------------------------------
重定向的话最后两行改成下面三行即可：
HttpSession hs = req.getSession();
hs.setAttribute("list",list);
resp.sendRedirect("home.jsp");//重定向
----------------------------------------------------------------------------------
jsp：
<table border="1px" bordercolor="skyblue">
      <tr>
       <th>姓名</th><th>班级</th><th>年龄</th><th>if判断的年龄</th><th>else判断的年龄</th>
      </tr>
    <c:forEach items="${list}" var="student">
    <tr>
       <td>${student.name}</td><td>${student.classes}</td><td>${student.age}</td>
       <td>
        <c:if test="${student.age>=18}">成年人</c:if>
        <c:if test="${student.age<18}">未成年人</c:if>
       </td>
       <td>
        <c:choose>
         <c:when test="${student.age>=18}">成年人</c:when>
         <c:otherwise>未成年人</c:otherwise>
        </c:choose>
       </td>
      </tr>
    </c:forEach>
</table>

效果图：
在这里插入图片描述

对错误和异常进行优化处理

0.先下载一个好看的404页面把样式包拷贝到项目下好看的404模板传送门
1.新建一个错误提示页面路径为jsp/Error.jsp 记得修改link引入样式的路径
2.创建一个servlet（路径为/Error）代码如下：（进入这个servlet就直接跳转到错误页面）

public class Error extends HttpServlet {
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.sendRedirect("jsp/Error.jsp");
	}
}

3.配置xml文件

Servlet部分是自动生成的
配置错误部分 把location改成Servlet地址就可
配置异常的部分 把location改成Servlet地址就可（异常这里也可以新建其他的jsp和servlet去跳转）

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>Error</servlet-name>
    <servlet-class>com.xszx.controller.Error</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Error</servlet-name>
    <url-pattern>/Error</url-pattern>
  </servlet-mapping>

<!-- error-code 相关的错误页面 -->
	<error-page>
	    <error-code>404</error-code>
	    <location>/Error</location>
	</error-page>
	<error-page>
	    <error-code>403</error-code>
	    <location>/Error</location>
	</error-page>
	
	<!-- exception-type 相关的错误页面 -->
	<error-page>
	    <exception-type>javax.servlet.ServletException</exception-type>
	    <location>/Error</location>
	</error-page>
	
	<error-page>
	    <exception-type>java.lang.Throwable</exception-type >
	    <location>/Error</location>
	</error-page>

用拦截器给所有页面设置utf-8编码

1.新建java文件实现filter接口代码如下：

public class MyFilter implements Filter{
	public void destroy() {
	}
	public void doFilter(ServletRequest req, ServletResponse resp,
			FilterChain chain) throws IOException, ServletException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html;charset=utf-8");//设置编码
		chain.doFilter(req, resp);//取消拦截
	}
	public void init(FilterConfig arg0) throws ServletException {
	}
}

2.配置xml文件

filter-name：java文件名
filter-class：java文件路径
url-pattern>：/* 表示拦截所有请求即可为所有页面设置utf-8编码

   <filter>
  		<filter-name>MyFilter</filter-name>
  		<filter-class>com.xszx.util.MyFilter</filter-class>
  	</filter>
  	<filter-mapping>
  		<filter-name>MyFilter</filter-name>
  		<url-pattern>/*</url-pattern>
  	</filter-mapping>

注：要放在 web.xml 的</web-app>标签对之前
用拦截器之后所有的servlet都不需要再写上面两行设置utf-8编码的语句了

xml顺序：
在这里插入图片描述

羽凌fairy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记（企业课）

文章目录Servlet接收jsp页面数据Servlet接收jsp页面数据jsp页面中：<input type="text" name="name"><input type="passwprd" name="password">servelet中：String name = request.getParamter("name");String password = request.getParamter("password");...
复制链接

扫一扫