JavaWeb - jstl标签库(if、forEach)，jsp开发模式，mvc开发模式，Javaee三层结构，json插件

转载请注明出处：https://blog.csdn.net/mythmayor/article/details/72844184

第一部分：jstl标签库

1、jstl标签库的简介

1.1 jstl：JavaServerPages Standard Tag Library，jsp的标准的标签库
1.2 使用jstl标签库，可以和jsp指令taglib一起使用，替代页面中<% %>
（1）jstl版本 1.0   1.1   1.2

1.3 要使用jstl标签库，导入jstl的jar包（两个jar包）
（1）jstl标签库使用在jsp页面中，需要jsp页面中引入标签库，使用taglib指令引入
= <%@ taglib uri="jstl标签库的路径" prefix="jstl标签库的别名" %>
= 找到引入的jar包里面，找到META-INF的c.tld文件，找到
	<short-name>c</short-name>
	<uri>http://java.sun.com/jsp/jstl/core</uri>
= <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
（2）写法：
= <c:标签库的名称 属性="属性值">

1.4 jstl的入门案例
（1）代码
    <!-- 嵌入java代码 -->
    <%
	int m = 10;
	if(m == 10) {
    %>
	<h2>m等于10</h2>
    <% 
	} else {
    %>
	<h2>m不等于10</h2>
    <% 
	}
     %>
 
    <hr/>
    <!-- 使用jstl标签库，把java代码换成jstl表示出来 -->
    <!-- 定义一个变量 ，使用jstl里面set标签实现，向域对象里面设置一个值 -->
    <c:set var="a" value="20"></c:set>
    <!-- 条件判断，使用jstl里面的if标签实现 -->
    <c:if test="${a==10 }">
	<h1>a等于10</h1>   
    </c:if>
    <c:if test="${a!=10 }">
	<h2>a不等于10</h2>
    </c:if>

2、jstl的if标签

2.1 进行条件判断的标签
2.2 写法 <c:if test="判断的条件">
2.3 在jstl中没有 <c:else>标签
2.4 代码
    <!-- 条件判断，使用jstl里面的if标签实现 -->
    <c:if test="${a==10 }">
	<h1>a等于10</h1>   
    </c:if>
    <c:if test="${a!=10 }">
	<h2>a不等于10</h2>
    </c:if>

3、jstl的forEach标签

3.1 遍历的操作的标签
3.2 使用forEach标签获取域对象里面数组、集合（list、set、map）、多个对象的属性值
3.3 写法：<c:forEach var="每次遍历的值" items="域对象里面 ${名称}">

3.4 使用forEach标签获取域对象里面的数组的值
（1）代码
    <!-- 使用jstl的foreach标签获取域对象里面的数组的值 -->
    <%
	//创建数组，把数组放到域对象里面
	String[] arr = {"lucy","mary","jack"};
	request.setAttribute("arr", arr);  	
     %>
    <!-- 使用el表达式获取 -->
    ${arr[0] }
    
    <hr/>
    <!-- 使用foreach标签获取 -->
    <!-- 
	使用增强for循环
	for(String a : arr) {}
     -->
    <c:forEach var="a" items="${arr }">
	${a }<br/>
    </c:forEach>

3.5 使用jstl的forEach标签获取域对象里面的集合中的值
（1）获取域对象里面list集合里面的值
= 代码
    <!-- 使用jstl的forEach标签获取域对象里面的list集合的值 -->
    <%
	//创建list集合
	List<String> list = new ArrayList<String>();
	list.add("aaaa");
	list.add("bbbb");
	list.add("cccc");
	//把list集合放到域对象里面
	request.setAttribute("list", list);
     %>
    <!-- 使用el表达式获取里面list的值 -->
    ${list[0] }
    
    <hr/>
    <!-- 使用forEach标签获取值 -->
    <!-- 
	for(String l : list) {}
     -->
    <c:forEach var="l" items="${list }">
	${l } <br/>
    </c:forEach>


（2）获取域对象里面set集合里面的值
= 使用el表达式不能获取域对象里面的set集合中的值，因为set集合无序的，不能通过下标获取
= 代码
    <!-- 使用jstl里面的forEach标签获取域对象里面的set集合的值 -->
    <%
	//创建set集合，把set集合放到域对象里面
	Set<String> set = new HashSet<String>();
	set.add("WWW");
	set.add("QQQ");
	set.add("TTT");
	request.setAttribute("set", set);
     %>
     <!-- 使用el表达式获取 -->
   <%--   ${set[0] } --%>
   <!-- 使用forEach标签获取 -->
   <c:forEach var="set" items="${set }">
	${set }<br/>
   </c:forEach>


（3）获取域对象里面map集合里面的值
= 使用el表达式获取域对象里面map集合值，根据map的key得到value
= 代码
    <!-- 使用jstl的foreach标签获取域对象里面map集合值 -->
    <%
	//创建map，把map集合放到域对象里面
	Map<String,String> map = new HashMap<String,String>();
	map.put("aaa", "AAA");
	map.put("bbb", "BBB");
	map.put("ccc", "CCC");
	request.setAttribute("map", map);
     %>
    <!-- 使用el表达式获取值 -->
    ${map.aaa }
    
    <hr/>
    <!-- 使用foreach标签获取值 -->
    <c:forEach var="m" items="${map }">
	${m.key } , ${m.value } <br/>
    </c:forEach>

3.6 使用jstl的forEach标签获取域对象里面多个对象的属性的值
（1）如何把多个对象放到域对象里面
= 可以先把多个对象放到集合里面（list），再把list集合放到域对象里面
= 代码
    <!-- 把多个对象放到域对象里面 -->
    <%
	//创建多个对象
	User user1 = new User();
	user1.setUsername("东方不败");
	user1.setPassword("999");
	
	User user2 = new User();
	user2.setUsername("岳不群");
	user2.setPassword("444");
	
	User user3 = new User();
	user3.setUsername("林平之");
	user3.setPassword("666");
	
	//把多个对象放到list集合里面
	List<User> list = new ArrayList<User>();
	list.add(user1);
	list.add(user2);
	list.add(user3);
	//把list集合放到域对象里面
	request.setAttribute("list", list);
     %>

= 获取多个对象的属性值的代码
    <!-- 使用jstl的foreach标签获取域对象里面多个对象的属性的值 -->
     <!-- 使用foreach标签获取值 -->
     <c:forEach var="user" items="${list }">
	${user.username }  ：：  ${user.password } <br/>
     </c:forEach>

第二部分：jsp的开发模式

1、jsp的开发模式

1.1 有两种开发模式
第一种：模型一
（1）使用技术是jsp和javabean
（2）特点：需要在jsp中嵌入java代码，jsp中java代码和html代码混合使用，造成页面的结构很混乱，不利于程序的维护

第二种：模型二（一般使用）
（1）使用技术是 jsp、servlet和javabean
（2）特点：结构很清晰，每种技术只负责自己应该做的事情，利于程序维护
（3）jsp：负责显示数据；javabean：负责是处理数据；servlet：负责的是管理操作，哪个javabean里面的数据显示到哪个jsp页面中

2、使用模型二实现登录的功能

2.1 登录功能实现的步骤
（1）创建登录页面（使用jsp创建页面），写表单，在表单里面有输入用户名和密码的输入项，提交表单到servlet里面
（2）创建javabean，封装数据；创建类处理数据操作（判断用户名和密码是否正确）
（3）创建servlet，管理功能
= * 1、获取输入的用户名和密码
  * 	= 使用request.getParameter方法实现
  * 2、把用户名和密码封装到javabean里面
  * 	= 使用传统方式
  *  = 使用beanutils框架，getParameterMap()方法
  * 3、调用service里面的方法实现登录

3、mvc的开发模式

3.1 各部分的组成
在mvc里面各部分使用不同的技术，这些技术，每种技术只是负责自己应该做的事情
使用mvc的开发模式，可以使程序结构清晰，利于程序的维护，后期扩展
（1）m：模型
（2）v：视图
（3）c：控制器
（4）特点：使用控制器，控制哪个模型里面的数据显示到哪个视图里面

3.2 在javaweb开发中，模型二就是一种mvc的模式
（1）m：使用javabean技术，处理数据
（2）v：使用jsp技术，显示数据
（3）c：使用servlet技术，控制管理功能

4、javaee的三层结构

4.1 web层
    业务逻辑层
    持久化层

4.2 dao模式
（1）专注于对数据库操作的模式，使用在持久化层里面
（2）使用方式：
首先创建接口，接口里面定义操作数据库的方法
之后，创建类，这个类实现接口里面的方法
在使用dao时候参数使用对象的形式进行传递的

第三部分： 案例

1、案例一：使用mvc+dao模式实现登录功能

1.1 实现步骤的分析（画图）

1.2 代码实现
= 核心代码
	//调用dao接口里面的方法
	UserDao dao = new UserDaoImpl();
	boolean flag = dao.loginUser(user);

2、案例二：使用mvc+dao模式实现用户注册功能

2.0 最终的目的：向数据库表添加一条记录
2.1 实现步骤的分析（画图）

2.2 代码实现

2.3 注册功能的完善
（1）用户的id不需要输入，使用程序自动生成出来（随机唯一的id值）
第一种方式：创建表时候，把id的字段设置成主键，同时自动增长（类型是int）
第二种方式：通过程序生成一个随机的唯一的值（使用毫秒数；使用工具类UUID生成）
= 代码
	//生成一个随机的唯一的id值，把生成的id值封装到javabean里面
	String id = UUID.randomUUID().toString();
	id = id.replace("-", "");
	user.setId(id);

（2）用户名称不能重复添加
= 实现的思路
== 根据输入的用户名到数据库里面进行查询，如果存在相同名称的用户名，不进行添加；否则，添加用户	
= 代码
	//获取输入的用户名
	String username = request.getParameter("username");
	//调用service里面的方法判断是否相同
	UserService service = new UserService();
	boolean userExist = service.findUserByName(username);
	//如果存在，不进行添加
	if(userExist) {
		//回到注册页面，同时传递错误的信息
		request.setAttribute("msg", "用户名已经存在");
		request.getRequestDispatcher("/reg.jsp").forward(request, response);
		return;
	}

3、案例三：使用mvc+dao模式实现显示所有用户功能

3.1 把用户表里面的所有用户的信息，显示到页面的表格里面
3.2 实现的步骤
（1）创建servlet，在servlet里面调用service里面的方法实现查询表中的所有数据
= 把所有的用户放到什么地方？
== 在表中有多条记录，先把每条记录放到user对象里面
== 有多个user对象，把多个user对象放到list集合里面

= 把list集合里面的多个user对象显示到页面中
== 把list集合传递到页面中，把list集合放到域对象里面
== 通过转发到用户列表显示的页面

（2）创建service，在service里面创建方法调用dao接口里面的方法

（3）创建接口，创建类实现接口里面的查询的方法

3.3 代码实现
（1）封装数据的过程
	//创建list集合
	List<User> list = new ArrayList<User>();
	//遍历结果集
	while(rs.next()) {
		//得到每次遍历的记录
		String id = rs.getString("id");
		String username = rs.getString("username");
		String password = rs.getString("password");
		String addr = rs.getString("addr");
		//把每条记录先放到user对象里面
		User user = new User();
		user.setId(id);
		user.setUsername(username);
		user.setPassword(password);
		user.setAddr(addr);
		//把每个user对象放到list里面
		list.add(user);
	} 

（2）在页面中显示所有的用户到表格里面
	<table border="1" cellpadding="10">
		<tr>
			<th>用户id</th>
			<th>用户名称</th>
			<th>用户密码</th>
			<th>用户地址</th>
		</tr>
		<c:forEach var="user" items="${list }">
			<tr>
				<td>${user.id }</td>
				<td>${user.username }</td>
				<td>${user.password }</td>
				<td>${user.addr }</td>
			</tr>
		</c:forEach>	
	</table> 

4、json插件的使用

4.1 得到所有的用户信息，返回的json数据格式，在页面中显示json里面的数据到表格里面

4.2 把list集合转换成json的数据格式

4.3 首先导入json插件使用到的jar包

4.4 使用JSONArray和JSONObject类

5、案例四：使用json数据格式显示所有的用户的信息

5.1 代码
（1）list转换成json的数据格式
	//把list转换成json格式
	JSONArray json = JSONArray.fromObject(list);

	request.setAttribute("json", json);
	request.getRequestDispatcher("/listjson.jsp").forward(request, response);

（2）在jsp中通过js解析json数据格式
	//得到域对象里面json的数据
	var json = ${json};
	//解析json数组的格式
	//[{"addr":"china","id":"100","password":"123","username":"zhangsan"},
	// {"addr":"tianjin","id":"200","password":"999","username":"lisi"}]
	var tab = "<table border='1' cellpadding='10'>";
	for(var i=0;i<json.length;i++) {
		//得到数组里面的每个对象
		var arr = json[i];
		//得到每个对象的内容
		var username = arr["username"];
		var password = arr["password"];
		var addr = arr["addr"];
		//把这些值显示到表格里面
		tab += "<tr><td>"+username+"</td><td>"+password+"</td><td>"+addr+"</td></tr>";
	}
	tab += "</table>";
	//alert(tab);
	//使用innerHTML属性把表格代码显示到div里面
	var div1 = document.getElementById("div1");
	div1.innerHTML = tab;

6.补充

(1)ajax:

$.ajax({
        type:"POST",
        url:"/aaa/testExits",
        data:{username:usernameValue},
        dataType:"text",
        success:function (msg){
                $("#reg_username_span").html("<font color='red'>"+msg+"</font>");
        }
    });