Web项目开发模式
Model1
JSP+JavaBean模式。
JSP负责渲染数据和处理页面。
JavaBean是一个满足以下条件的类
被public修饰
其中的属性进行封装
用private修饰属性
提供get/set方法
有无参数的构造方法
这种模式,不适合复杂项目的开发。
jsp既要显示内容,又要处理数据,后期维护扩展不方便。
![](https://img-blog.csdnimg.cn/img_convert/2d5523806f3695fb5e87670b0979399f.jpeg)
Model2(MVC)
MVC模式:模型-视图-控制器模式。
M:Model模型 用于封装数据处理数据,对应业务逻辑类、数据访问类、实体类
V:View视图 用于渲染数据,对应页面(jsp或html)
C:Controller控制器 用户调度用户请求,对应servlet
这种模式适合复杂项目的开发;每个模块各司其职,耦合性低;对于后期维护和扩展较为方便。
![](https://img-blog.csdnimg.cn/img_convert/4a2379f41d1af3b5c8e50ee20a6badab.jpeg)
WEB阶段核心内容
B/S模式的访问流程
用户通过浏览器发送请求,访问服务器上的某个部署的项目,经过该项目的MVC,得到响应。
框架部分会使用SpringMVC替换现有的Servlet实现MVC的流程。
页面提交数据的方式
通过表单提交,可以设置get/post
<form action="地址" method="get/post">
<input type="text" name="参数" >
<input type="submit">
</form>
通过超链接提交,属于get提交
<a href="地址?参数=值&参数=值">xxx</a>
通过ajax提交,可以设置get/post
先导入Jquery
$.ajax({
//请求地址
url:'',
//提交数据
data:{
"参数名":值,
"参数名":值
},
//提交方式
type:"get/post",
//成功回调
success:function(res){
//res为控制层的返回值
},
//失败回调
error:function(){}
});
servlet依赖
如果要使用servlet、filter、listener、request、response都需要该依赖
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
</dependency>
web.xml中的相关配置
servlet
<!-- 声明servlet -->
<servlet>
<servlet-name>自定义servlet名</servlet-name>
<servlet-class>servlet全限定名</servlet-class>
<!-- servlet初始化参数 -->
<init-param>
<param-name>参数名</param-name>
<param-value>参数值</param-value>
</init-param>
</servlet>
<!-- 配置servlet请求映射 -->
<servlet-mapping>
<servlet-name>自定义servlet名</servlet-name>
<url-patten>/映射名</url-patten>
</servlet-mapping>
filter
<!-- 声明filter -->
<filter>
<filter-name>自定义filter名</filter-name>
<filter-class>filter全限定名</filter-class>
</filter>
<!-- 配置filter请求映射 -->
<filter-mapping>
<filter-name>自定义filter名</filter-name>
<!--过滤器通常用于解决中文乱码,要过滤所有请求-->
<url-patten>/*</url-patten>
</filter-mapping>
listener
<listener>
<listener-class>监听器的全限定名</listener-class>
</listener>
session
<!--设置全局session配置-->
<session-config>
<session-timeout>session有效时长,单位为分钟</session-timeout>
</session-config>
全局参数
<!--设置全局参数-->
<context-param>
<param-name>参数名</param-name>
<param-value>参数值</param-value>
</context-param>
数据访问层(Dao)
现在使用JDBC实现查询,框架部分会使用MyBatis、MyBatisPlus或JPA,简化该层的写法。
跳转
请求转发forward
保存在request中的数据会一直存在
request.getRequestDispatcher("目的路径").forward(request,response);
重定向redirect
保存在request中的数据会丢失(不是同一个请求)
response.sendRedirect("目的路径");
JSP
由控制层保存数据到作用域中,跳转到Jsp中展示数据。
作用域对象
pageContext request session application
内置对象
request response page pageContext session application out config exception
EL
表达式语言。替换jsp中的输出<%=%>部分。
从作用域中获取对象,通过.或[]获取属性,该属性必须存在且有get方法
对象名.属性名或{指定作用域.对象名[“属性名
从请求中获取参数,表单的name或?后的数据
${param.参数名}
逻辑判断、计算
非空判断 ${empty 对象}
计算 ${xx + yy}
获取当前项目上下文路径
${pageContext.request.contextPath}
特点
如果通过"某个作用域对象.setAttribute(“cus”,customer)"方法保存的对象,在JSP页面中如果用表达式,使用<%=cus%>,如果用EL,使用**${cus}**输出。会依次从pageContext–>reqeust–>session–>application中获取指定对象,如果一旦从某个作用域中获取到了指定对象,就不再判断后续作用域。也可以输出指定作用域中的对象。
JSL
<!--jstl标签库-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
先导入依赖,在jsp页面中引入标签库
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
四大作用域对象
作用域:共享数据的区域
pageContext
当前页面对象。共享数据区域范围为当前页面。
如果不在同一个页面,数据无法读取。
request
请求对象。共享数据区域范围为一次请求。
如果跳转中途使用了重定向,数据无法读取。
Session
会话对象。会话是用户访问服务器时的某个时间段。
共享数据区域范围在这个时间段内,默认30分钟。
如果在指定时间内没有操作或销毁会话时,数据无法读取。
application
项目对象。共享数据区域范围为整个项目。
作用域范围
application > session > request > pageContext
以上四个作用域对象,都有这几个方法
//将某个对象obj保存到作用域中,命名为str
作用域对象.setAttribute(String str,Object obj);
//从某个作用域中获取保存的某个对象
Object obj = 作用域对象.getAttribute(String str);
//从某个作用域中移除某个保存的对象
作用域对象.removeAttribute(String str);
作用域对象的使用
在JSP页面中
作用域对象也称为内置对象,直接通过对应的单词使用
p1.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<%
//在jsp中使用pageContext页面上下文对象,跳转到p2时不能使用
pageContext.setAttribute("str","保存在pageContext作用域中的字符串");
//在jsp中使用request请求对象,请求转发到p2时可以使用,重定向到p2时不能使用
request.setAttribute("str","保存在request中的字符串");
//在jsp中使用session会话对象,在默认的30分钟内,没有销毁,哪种跳转都能在p2中使用
session.setAttribute("str","保存在session中的字符串");
//在jsp中使用application应用程序对象,整个项目中任何页面都能使用
application.setAttribute("str","保存在application中的字符串");
//以上四个作用域对象,也是jsp中的内置对象,无需定义
//销毁会话
//session.invalidate();
//使用请求转发跳转到p2.jsp
//request.getRequestDispatcher("p2.jsp").forward(request,response);
//使用重定向跳转到p2.jsp
response.sendRedirect("p2.jsp");
%>
<h1><%=pageContext.getAttribute("str")%></h1>
</body>
</html>
p2.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><%=pageContext.getAttribute("str")%></h3>
<h3><%=request.getAttribute("str")%></h3>
<h3><%=session.getAttribute("str")%></h3>
<h3><%=application.getAttribute("str")%></h3>
</body>
</html>
Ajax(异步)
Asynchronous Javascript And XML
异步JavaScript和XML
一种数据交互方式,请求和响应是异步的。
使用ajax能实现在整个页面不重新加载的情况下,更新局部内容。
使用
浏览器都是支持异步提交,原生的JavaScript就能实现ajax,但使用极不方便,所以都是使用jquery封装后的**. a j a x ( ) ∗ ∗ 或 .ajax()**或.ajax()∗∗或.get() $.post()等函数。
- 在页面中导入jquery文件
<!--使用Ajax,需要导入jquery-->
<script src="jquery文件路径"></script>
- 在script标签中写ajax
<script>
某个节点.事件(function(){
//使用ajax异步提交数据
$.ajax({
//访问的URL地址
url:"servlet映射或具体url",
//提交的数据
data:{
//键:值
"形参":值,
"形参":值
},
//提交方式
type:"get/post/put/delete",
//成功访问URL后的回调函数
success:function(res){//res表示访问URL后返回的数据
},
//访问URL失败时的回调函数
error:function(){
}
});
});
</script>
具体案例
servlet
package com.hqyj.bookShop.servlet;
import com.hqyj.bookShop.dao.CustomerDao;
import com.hqyj.bookShop.entity.Customer;
import com.hqyj.bookShop.util.Cart;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@WebServlet("/customer")
public class CustomerServlet extends HttpServlet {
CustomerDao dao = new CustomerDao();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String op = req.getParameter("op");
switch (op) {
case "login":
//获取登录信息
String phone = req.getParameter("phone");
String password = req.getParameter("password");
//调用登录
Customer login = dao.login(phone, password);
if (login != null) {
//将登录成功的对象,保存到session中
session.setAttribute("customer", login);
//使用输出流对象输出一个字符串"ok"
resp.getWriter().print("ok");
} else {
//使用输出流对象输出一个字符串"ok"
resp.getWriter().print("error");
}
break;
}
}
}
页面
<html>
<head></head>
<body>
<input type="text" name="phone" placeholder="请输入手机号"/><br><br>
<input type="password" name="password" placeholder="请输入密码"/><br><br>
<input id="submit" type="button" value="登录"/>
</body>
<script src="./../system/bootstrap-3.4.1-dist/js/jquery-3.6.2.min.js"></script>
<script>
//如果是普通按钮,需要写单击事件
$("#submit").click(function () {
//获取输入的信息
let phone = $("input[name=phone]").val();
let password = $("input[name=password]").val();
if (phone == "" || password == "") {
alert("输入不能为空");
return;
}
//使用ajax提交登录信息
$.ajax({
//请求地址
url: "http://localhost:8080/Web03/customer",
//提交方式
type: "post",
//提交数据
data: {
"op":"login",
"phone": phone,
"password": password
},
//访问成功(能正常访问指定地址)后的回调函数。
success: function (res) {
if(res=="error"){
alert("用户名或密码错误");
}
if(res=="ok") {
location.href="http://localhost:8080/Web03/bookInfo?op=search";
}
}
});
});
//如果是表单,需要写表单提交事件
// $("form:eq(0)").submit();
</script>
</html>
JSP内置对象
在jsp页面中有一些对象是已经定义好了可以直接使用的,称为内置对象。
一共有9个内置对象。
request请求作用域对象
response响应对象
pageContext当前页作用域对象
session会话作用域对象
page当前jsp页面对象
out输出对象
application项目作用域对象
config配置对象
exception异常对象
Session
通常用session保存登录时的用户信息,实现在各个页面中共享信息或防止未登录的情况下访问。使用session时,会创建一个JSESSIONID,保存在cookie中,在浏览器开启状态下,该JSESSIONID默认会有30分钟的有效期,如果在30分钟内没有对session进行操作或关闭浏览器,该cookie就会销毁,对应的session就会失效。