-
【Javaweb 2】JSP,Filter,Listener,AJAX,Vue
🌈博客主页：屠一乐的博客
📅 发文时间：2022.08.10
🎈 一定存在只有你才能做成的事
🌹 博主水平有限，如有错误，欢迎指正
欢迎各位👍收藏💎评论✉
JSP
概念：Java Server Pages,Java服务端页面
●一种动态的网页技术，其中既可以定义HTML、JS、CSS等静态内容，还可以定义Java代码的动态内容
●JSP = HTML + JavaJSP快速入门
1.导入JSP坐标
<dependency> <groupld>javax.servlet.jspgroupld> <artifactld>jsp-apiartifactld> <version>2.2version> <scope>providedscope> dependency>- 1
- 2
- 3
- 4
- 5
- 6
2.创建JSP文件
3.编写HTML标签和Java代码hello jsp~
- 1
- 2
- 3
- 4
JSP原理
JSP本质上就是一个Servlet
●JSP在被访问时，由JSP容器(Tomcat)将其转换为Java文件(Servlet),在由SR容器(Tomcat)将其编译，最终对外提供服务的其实就是这个字节码文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EDqHAjLW-1660132880683)(D:\BRILIANT\Documents\图片\image-20220710110818047-16574224999491.png)]
JSP脚本
JSP脚本用于在JSP页面内定义Java代码
●JSP脚本分类：
1.<%.%>内容会直接放到jspService()方法之中
2.<%=.%>:内容会放到out.orint()中，作为out.print()的参数
3.<%! %>:内容会放到」jspService()方法之外，被类直接包含JSP缺点
。由于JSP页面内，既可以定义HTML标签，又可以定义Java代码，造成了以下问题：
1.书写麻烦：特别是复杂的页面
2.阅读麻烦
3.复杂度高：运行需要依赖于各种环境JRE,JSP容器，JavaEE…
4.占内存和磁盘：JSP会自动生成.java和.class文件占磁盘，运行的是.class文件占内存
5.调试困难：出错后，需要找到自动生成的，java文件进行调试
6.不利于团队协作：前端人员不会Jva,后端人员不精HTML
7…[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7kSIxhP3-1660132880684)(D:\BRILIANT\Documents\图片\image-20220710113019499-16574238206182.png)]
EL表达式
Expression Language表达式语言，用于简化JSP页面内的Java代码
主要功能：获取数据
语法：${expression}
${brands}获取域中存储的key为brands的数据
JavaWeb中的四大域对象：
1.page:当前页面有效
2.request:当前请求有效
3.session:当前会话有效
4.application:当前应用有效
el表达式获取数据，会依次从这4个域中寻找，直到找到为止//1.准备数据 //2.存储到request域中 request.setAttribute("brands",brands); //3.转发到el-demo.jsp request.getRequestDispatcher(path:"/el-demo.jsp").forward(request,response);- 1
- 2
- 3
- 4
- 5
JSTL标签
JSP标准标签库(Jsp Standarded Tag Library),使用标签取代JSP页面上的Java代码
JSTL快速入门
1.导入坐标<dependency> <groupld>jstlgroupld> <artifactld>istlartifactld> <version>1.2version> dependency> <dependency> <groupld>taglibsgroupld> <artifactld>standardartifactld> <version>1.1.2version> dependency>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2.在JSP页面上引入JSTL标签库
<%taglib prefix="c"uri=“http://java.sun.com/jsp/jstl/core”%>
3.使用- 1
JSTL标签
<c:forEach items="${brands}"var="brand">- 1
相当于for循环
items:被遍历的容器
var:遍历产生的临时变量begin:开始数
end:结束数
step:步长- 1
- 2
- 3
MVC模式
●MVC是一种分层开发的模式，其中：
M:Model,业务模型，处理业务
V:View,视图，界面展示
C:Controller,控制器，处理请求，调用模型和视图MVC好处
职责单一，互不影响 有利于分工协作 有利于组件重用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M6h68PLa-1660132880684)(D:\BRILIANT\Documents\图片\image-20220710172757702-16574452790663.png)]
三层架构
数据访问层dao/mapper：对数据库的CRUD基本操作
业务逻辑层service：对业务逻辑进行封装，组合数据访问层层中基本功能，形成复杂的业务逻辑功能
表现层web/controller：接收请求，封装数据，调用业务逻辑层，响应数据[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yf0vSD3f-1660132880684)(D:\BRILIANT\Documents\图片\image-20220710173314723-16574455966564.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FCea6Guo-1660132880685)(D:\BRILIANT\Documents\图片\image-20220710174452252-16574462933875.png)]
案例
准备环境
创建新的模块brand demo,引入坐标
创建三层架构的包结构数据库表tb_brand
实体类Brand
MyBatis基础环境
Mybatis-config.xml
BrandMapper.xml
BrandMapper:接口[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5RPMIVj3-1660132880686)(D:\BRILIANT\Documents\图片\image-20220710232917008-16574669687656.png)]
public interface BrandMapper { /** * 查询所有 * @return */ //map映射属性名get，set方法名不一致 @ResultMap("brandResultMap") @Select("select * from tb_brand;") List<Brand> selectAll(); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
service层
public class BrandService { SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtil.getSqlSessionFactory(); /** * 查询所有 * @return */ public List<Brand> selectAll() { SqlSession sqlSession = sqlSessionFactory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); List<Brand> brands = mapper.selectAll(); sqlSession.close(); return brands; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
servlet
@WebServlet("/selectAll") public class SelectAllServlet extends HttpServlet { private BrandService brandService = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Brand> brands = brandService.selectAll(); // 存入request域中 request.setAttribute("brands", brands); //转发到brand.jsp request.getRequestDispatcher("/brand.jsp").forward(request, response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>Title
序号 品牌名称 企业名称 排序 品牌介绍 状态 操作 <%-- ${brand.id} --%>${status.count} ${brand.brandName} ${brand.companyName} ${brand.ordered} ${brand.description} 启用 禁用 修改删除 - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
添加
修改：先回显数据，再修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc9ZINSs-1660132880687)(D:\BRILIANT\Documents\图片\image-20220711180817734-16575340993651.png)]
会话跟踪技术
会话：用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应
会话跟踪：一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据
HTTP协议是无状态的，每次浏览器向服务器请求时，服务器都会将该请求视为新的请求，因此我们需要会话跟踪技术来实现会话内数据共享实现方式：
1.客户端会话跟踪技术：Cookie
2.服务端会话跟踪技术：SessionCookie基本使用
Cookie:客户端会话技术，将数据保存到客户端，以后每次请求都携带cookie数据进行访问
Cookie基本使用
1.创建Cookie对象，设置数据
Cookie cookie = new Cookie(“key”,“value”);
2.发送Cookie到客户端：使用response对象
response.addCookie(cookie);
3.获取客户端携带的所有Cookie,使用request对象
Cookie[] cookies = request.getCookies();
4.遍历数组，获取每一个Cookie对象：
5.使用Cookie对象方法获取数据
cookie.getName();
cookie.getValue();Cookie使用细节
Cookie存活时间
默认情况下，Cookie存储在浏览器内存中，当浏览器关闭，内存释放，则Cookie被销毁
setMaxAge(int seconds):设置Cookie存活时间
1.正数：将Cookie.写入浏览器所在电脑的硬盘，持久化存储。到时间自动删除
2.负数：默认值，Cookie在当前浏览器内存中，当浏览器关闭，则Cookie被销毁
3.零：删除对应CookieCookie存储中文
Cookie不能直接存储中文
如需要存储，则需要进行转码：URL编码String value = "张三"; //URL编码 value=URLEncoder.encode(value,"UTF-8"); //IURL解码 value=URLDecoder.decode(value,"UTF-8");- 1
- 2
- 3
- 4
- 5
Session
服务端会话跟踪技术：将数据保存到服务端
JavaEE提供HttpSession接口，来实现一次会话的多次请求间数据共享功能
使用：
1.获取Session对象
HttpSession session = request.getSession();
2.Session对象功能：
void setAttribute(String name,Object o):存储数据到session域中
Object getAttribute(String name):根据key,获取值
void removeAttribute(String name):根据key,删除该键值对Session原理
Session是基于Cookie:实现的[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Yf7JQje-1660132880687)(D:\BRILIANT\Documents\图片\image-20220712173942910-16576187845801.png)]
Session使用细节
Session钝化、活化：
服务器重启后，Sessiont中的数据是否还在？
钝化：在服务器正常关闭后，Tomcat会自动将Session数据写入硬盘的文件中活化：再次启动服务器后，从文件中加载数据到Session中
Seesion销毁：默认情况下，无操作，30分钟自动销毁<session-config> <session-Kimeout>30session-timeout> session-config>- 1
- 2
- 3
调用Session对象的invalidate()方法
小结
Cookie和Session都是来完成一次会话内多次请求间数据共享的
区别：
存储位置：Cookie是将数据存储在客户端，Session将数据存储在服务端
安全性：Cookie不安全，Session安全
数据大小：Cookie最大3KB,Session无大小限制
存储时间：Cookie可以长期存储，Session默认30分钟
服务器性能：Cookie不占服务器资源Session占用服务器资源登录注册案例
需求说明：
1.完成用户登录功能，如果用户勾选“记住用户”，则下次访问登录页面
自动填充用户名密码
2.完成注册功能，并实现验证码功能记住用户
如果用户勾选“记住用户”，则下次访问登陆页面自动填充用户名密码
如何自动填充用户名和密码？
1.将用户名和密码写入Cookie中，并且持久化存储Cookie,下次访问浏览器会自动
携带Cookie
2.在页面获取Cookie数据后，设置到用户名和密码框中
何时写Cookie?
1.登录成功
2.用户勾选记住用户复选框在remember复选框标签中添加value=“1”
if (user != null) { //判断是否勾选 if("1".equals(remember)) { //勾选，1在前防止NPE //获取cookie Cookie cusername = new Cookie("username", username); Cookie cpassword = new Cookie("password" , password ); //设置存活时间 cusername.setMaxAge(60 * 60 * 24 *7); cpassword.setMaxAge(60 * 60 * 24 *7); //发送 response.addCookie(cpassword); response.addCookie(cusername); } //成功,跳转到查询所有BrandServlet //user对象存到session HttpSession session = request.getSession(); session.setAttribute("user",user); String contextPath = request.getContextPath(); //重定向 response.sendRedirect(contextPath+"/selectAll"); } else { //登录失败 request.setAttribute("login_msg","用户名或密码错误"); //跳转到login.jsp request.getRequestDispatcher("/login.jsp").forward(request,response); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
记住用户-获取Cookie
如果用户勾选“记住用户”，则下次访问登陆页面自动填充用户名密码
如何自动填充用户名和密码？
1.将用户名和密码写入Cookie中，并且持久化存储Cookie,下次访问浏览器会自动携带Cookie
2.在页面获取Cookie数据后，设置到用户名和密码框中：
${cookie.**key.**value}∥key指存储在cookie中的键名称注册功能：保存用户信息到数据库
验证码功能：
展示验证码：展示验证码图片，并可以点击切换
校验验证码：验证码填写不正确，则注册失败验证码就是使用Java代码生成的一张图片
验证码作用：防止机器自动注册，攻击服务器判断程序生成的验证码和用户输入的验证码是否一样，如果不一样，则阻止注册
验证码图片访问和提交注册表单是两次请求，所以要将程序生成的验证码存入Session中Filter
概念：Filter表示过滤器，是JavaWeb三大组件(Servlet、.Filter、.Listener)之一。
过滤器可以把对资源的请求拦截下来，从而实现一些特殊的功能。
过滤器一般完成一些通用的操作，比如：权限控制、统一编码处理、敏感字符处理等等.Filter快速入门
1.定义类，实现Filter接口，并重写其所有方法
public class FilterDemo implements Filter{ public void init(FilterConfig filterconfig) public void doFilter(ServletRequest request) public void destroy(){}}- 1
- 2
- 3
- 4
2.配置Filter拦截资源的路径：在类上定义@WebFilter注解
@WebFilter("/*") public class FilterDemo implements Filter{}- 1
- 2
3.在doFilter方法中输出一句话，并放行
public void doFilter(ServletRequest request,ServletResponse resp){ System.out.println("filter被执行了.."); //放行 chain.doFilter(request,response); }- 1
- 2
- 3
- 4
- 5
1.放行后访问对应资源，资源访问完成后，还会回到Filter中吗？会
2.如果回到Filter中，是重头执行还是执行放行后的逻辑呢？放行后逻辑
执行放行前逻辑->放行->访问资源->执行放行后逻辑放行前对request数据进行处理,放行后对response资源处理
Filter拦截路径配置
Filter可以根据需求，配置不同的拦截资源路径
@WebFilter("/**" public class FilterDemo 拦截具体的资源：index.jsp:只有访问index.jsp时才会被拦截。 目录拦截：/user/*:访问/user下的所有资源，都会被拦截 后缀名拦截：****jsp:访问后缀名为jsp的资源，都会被拦截 拦截所有：/*：访问所有资源，都会被拦截过滤器链
一个Web应用，可以配置多个过滤器，这多个过滤器称为过滤器涟Listener
●概念：Listener表示监听器，是JavaWeb三大组件(Servlet、Filter、Listener)之一。
监听器可以监听就是在application,session,request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件
●Listener分类：JavaWeb中提供了8个监听器[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1lzz1r4z-1660132880687)(D:\BRILIANT\Documents\图片\image-20220715195700265-16578862221061.png)]
ServletContextListener使用
1.定义类，实现ServletContextListener接口public class ContextLoaderListener implements ServletContextListener{ /** *ServletContext对象被创建：整个web应用发布成功*/ public void contextInitialized(ServletContextEvent sce){} /** *ServletContext对象被销毁：整个web应用卸载*/ public void contextDestroyed(ServletContextEvent sce){}}- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.在类上添加@WebListener注解
AJAX
●概念：AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML
●AJAX作用：
1.与服务器进行数据交换：通过AJAX可以给服务器发送请求，并获取服务器响应的数据使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了
2.异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等.…
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eamc6uQP-1660132846597)(D:\BRILIANT\Documents\图片\image-20220715201506540-16578873091431.png)]
AJAX快速入门
1.编写AjaxServlet,并使用response输出字符串
2.创建XMLHttpRequest对象：用于和服务器交换数据var xmlhttp; if (window.XMLHttpRequest){ //code for IE7+,Firefox,Chrome,Opera,Safari xmlhttp = new XMLHttpRequest(); else{ //code for IE6,IE5 xmlhttp new ActiveXObject("Microsoft.XMLHTTP");}- 1
- 2
- 3
- 4
- 5
- 6
- 7
3.向服务器发送请求
xmlhttp.open("GET","url"); xmlhttp.send();//发送请求- 1
- 2
4.获取服务器响应数据
xmlhttp.onreadystatechange function (){ if(xmlhttp.readyState == 4 &&xmlhttp.status == 200){ alert(xmlhttp.responseText); }}- 1
- 2
- 3
- 4
Axios异步框架
·Axios对原生的AJAX进行封装，简化书写
官网：https://www.axios-http.cnAxos快速入门
1.引入axios的js文件<script src="js/axios-0.18.0.js"></cript> //2.使用axios发送请求，并获取响应结果 axios({ method:"get", url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan" )).then(function(resp){ alert(resp.data); }) //```js axios({ method:"post", url:"http://localhost:8080/ajax-demo1/aJAXDemo1", data:"username=zhangsan" }).then(function (resp){ alert(resp.data); });- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
Axios请求方式别名
为了方便起见，Axios已经为所有支持的请求方法提供了别名。
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])发送get请求
axios.get(“url”)
then(function (resp){
alert(resp.data);});
发送post请求
axios.post("url ",“参数”)
.then(function(resp){
alert(resp.data);});JSON
概念：JavaScript Object Notation。JavaScript对象表示法
由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输JSON基础语法
定义：var 变量名={"key1":value1, "key2":value2, 示例： var json {"name":"zhangsan", "age":23, "addr":["北京"，"上海"，"西安"]};- 1
- 2
- 3
- 4
- 5
- 6
获取数据：
变量名.key json.namevalue的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值(true或false)
数组（在方括号中）
对象（在花括号中）
null请求数据：JSON字符串转为ava对象
响应数据：Java对象转为JSON字符串JSON数据和Java对象转换
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。
●使用：
1.导入坐标<dependency> <groupld>com.alibabagroupld> <artifactld>fastjsonartifactld> <version>1.2.62version> dependency>- 1
- 2
- 3
- 4
- 5
2.Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
3.JSON字符串转Java对象
User user = JSON.parseObject(jsonStr,User.class);Vue
●Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写
●基于MVVM(Mode-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
●官网：https://cn.vuejs.orgVue快速入门
1.新建HTML页面，引入Vue.js文件
2.在JS代码区域，创建Vue核心对象，进行数据绑定
new Vue({ el:"#app",//作用范围 data(){//数据 return{ username:""} } });- 1
- 2
- 3
- 4
- 5
- 6
- 7
3.编写视图
<div id="app"> <input name="username"v-model="username"> {{username}}//插值表达式 div>- 1
- 2
- 3
- 4
Vue常用指令
指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for…
·常用指令[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWDw9Z67-1660132846598)(D:\BRILIANT\Documents\图片\image-20220716175456639-16579652982561.png)]v-bind:
<a v-bind:href="url">百度一下</a> <!--v-bind可以省略--> <a:href="url">百度一下</a>- 1
- 2
- 3
v-model:
<input name="username"v-model="username">- 1
html:
<input type="button"value="一个按钮"v-on:click="show()"> <input type="button"value="一个按钮"@click="show()">- 1
- 2
vue:
new Vue({ el:"#app", methods:{ show(){ alert(("我被点了");}} });- 1
- 2
- 3
- 4
- 5
- 6
v-if:
<div v-if="count ==3">div1</div> <div v-else-if="count ==2">div2</div> <div v-else>div3</div>- 1
- 2
- 3
v-show://和if渲染方式不同
<div v-show="count ==3">div4</div>- 1
v-for:
{{addr}}
//addrs为数组模型- 1
- 2
- 3
加索引
{{i + 1}}:{{addr}}
- 1
- 2
- 3
- 4
Vue生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
发送异步请求，加载数据Element
●Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
·组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element官网：https://element.eleme.cn/#/zh-CNListenerElement快速入门
1.引入Element的css、js文件和Vue.js- 1
- 2
2.创建Vue核心对象
- 1
- 2
- 3
- 4
- 5
3.官网复制Element组件代码
Element布局
Element中有两种布局方式：
Layout布局：通过基础的24分栏，迅速简便地创建布局
Container布局容器：用于布局的容器组件，方便快速搭建页面的基本结构- 相关阅读:
探索人工智能领域——每日30个名词详解【day4】
HTML期末大作业：DIV简单的篮球网页制作期末作业 篮球明星科比js三级页面
SQL的CASE WHEN函数、CAST函数、CONVERT() 函数、COALESCE()函数、DATEDIFF()函数
TDengineGUI无法连接TDengine
Vatee万腾科技创新之舟：Vatee数字化力量引领未来的独特路径
872. 最大公约数（史上最详细讲解 7种算法,STL+算法标准实现）
微软和OpenAI正在开发AI芯片， 并计划下个月发布
【计算机毕业设计】家政服务平台
可视化 | （一）数据基础及基本数据可视化方法
使用VSCode插件开发Hyperledger Fabric智能合约（链码）
- 原文地址：https://blog.csdn.net/m0_67563237/article/details/126273462
