【Javaweb 2】JSP,Filter,Listener,AJAX,Vue

最新推荐文章于 2024-07-22 22:58:19 发布

屠一乐

最新推荐文章于 2024-07-22 22:58:19 发布

阅读量546

点赞数 2

分类专栏： JavaWeb 文章标签： java ajax vue.js

本文链接：https://blog.csdn.net/m0_67563237/article/details/126273462

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

🌈博客主页：屠一乐的博客
📅 发文时间：2022.08.10
🎈 一定存在只有你才能做成的事
🌹 博主水平有限，如有错误，欢迎指正
欢迎各位👍收藏💎评论✉

JSP

概念：Java Server Pages,Java服务端页面
●一种动态的网页技术，其中既可以定义HTML、JS、CSS等静态内容，还可以定义Java代码的动态内容
●JSP = HTML + Java

JSP快速入门

1.导入JSP坐标

<dependency>
    <groupld>javax.servlet.jsp</groupld>
    <artifactld>jsp-api</artifactld>
    <version>2.2</version>
    <scope>provided</scope>
</dependency>

2.创建JSP文件
3.编写HTML标签和Java代码

<body>
    <h1>hello jsp~</h1>
    <System.out.printf("jsp hello");%>
</body>

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);

JSTL标签

JSP标准标签库(Jsp Standarded Tag Library),使用标签取代JSP页面上的Java代码

JSTL快速入门
1.导入坐标

<dependency>
    <groupld>jstl</groupld>
    <artifactld>istl</artifactld>
    <version>1.2</version>
</dependency>
<dependency>
    <groupld>taglibs</groupld>
    <artifactld>standard</artifactld>
    <version>1.1.2</version>
</dependency>

2.在JSP页面上引入JSTL标签库
<%taglib prefix="c"uri=“http://java.sun.com/jsp/jstl/core”%>
3.使用

<c:if>

JSTL标签

<c:forEach items="${brands}"var="brand">

相当于for循环
items:被遍历的容器
var:遍历产生的临时变量

begin:开始数
end:结束数
step:步长

<c:forEach begin="0"end="10"step="1"var=i">
${i}
</c:forEach>

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();
}

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;
    }
}

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);
    }
}

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java"  %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button"value="新增"><br>
<hr>
<table border="1"cellspacing="0"width=80%>
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>

<c:forEach items="${brands}" var="brand" varStatus="status">
    <tr align="center">
    <%--<td>${brand.id}</td>--%>
    <td>${status.count}</td>
    <td>${brand.brandName}</td>
    <td>${brand.companyName}</td>
    <td>${brand.ordered}</td>
    <td>${brand.description}</td>
        <c:if test="${brand.status ==1}">
        <td>启用</td>
        </c:if>
                <c:if test="${brand.status != 1}">
        <td>禁用</td>
        </c:if>
        <td><a href="#">修改</a><a href="#">删除</a></td>
        </tr>
    </c:forEach>
</body>
</html>

添加

修改：先回显数据，再修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc9ZINSs-1660132880687)(D:\BRILIANT\Documents\图片\image-20220711180817734-16575340993651.png)]

会话跟踪技术

会话：用户打开浏览器，访问web服务器的资源，会话建立，直到有一方断开连接，会话结束。在一次会话中可以包含多次请求和响应
会话跟踪：一种维护浏览器状态的方法，服务器需要识别多次请求是否来自于同一浏览器，以便在同一次会话的多次请求间共享数据
HTTP协议是无状态的，每次浏览器向服务器请求时，服务器都会将该请求视为新的请求，因此我们需要会话跟踪技术来实现会话内数据共享

实现方式：
1.客户端会话跟踪技术：Cookie
2.服务端会话跟踪技术：Session

Cookie基本使用

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.零：删除对应Cookie

Cookie存储中文
Cookie不能直接存储中文
如需要存储，则需要进行转码：URL编码

String value = "张三";
//URL编码
value=URLEncoder.encode(value,"UTF-8");
//IURL解码
value=URLDecoder.decode(value,"UTF-8");

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>30</session-timeout>
</session-config>

调用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);
        }

记住用户-获取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(){}}

2.配置Filter拦截资源的路径：在类上定义@WebFilter注解

@WebFilter("/*")
public class FilterDemo implements Filter{}

3.在doFilter方法中输出一句话，并放行

public void doFilter(ServletRequest request,ServletResponse resp){
System.out.println("filter被执行了..");
//放行
chain.doFilter(request,response);
}

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){}}

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");}

3.向服务器发送请求

xmlhttp.open("GET","url");
xmlhttp.send();//发送请求

4.获取服务器响应数据

xmlhttp.onreadystatechange function (){
if(xmlhttp.readyState == 4 &&xmlhttp.status == 200){
alert(xmlhttp.responseText);
}}

Axios异步框架

·Axios对原生的AJAX进行封装，简化书写
官网：https://www.axios-http.cn

Axos快速入门
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);
});

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":["北京"，"上海"，"西安"]};

获取数据：
变量名.key json.name

value的数据类型为：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值(true或false)
数组（在方括号中）
对象（在花括号中）
null

请求数据：JSON字符串转为ava对象
响应数据：Java对象转为JSON字符串

JSON数据和Java对象转换
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。
●使用：
1.导入坐标

<dependency>
    <groupld>com.alibaba</groupld>
    <artifactld>fastjson</artifactld>
    <version>1.2.62</version>
</dependency>

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.org

Vue快速入门

1.新建HTML页面，引入Vue.js文件

2.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({
    el:"#app",//作用范围
    data(){//数据
        return{
    		username:""}
    }
    });

3.编写视图

<div id="app">
    <input name="username"v-model="username">
    {{username}}//插值表达式
</div>

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>

v-model:

<input name="username"v-model="username">

html:

<input type="button"value="一个按钮"v-on:click="show()">
<input type="button"value="一个按钮"@click="show()">

vue:

new Vue({
    el:"#app",
    methods:{
        show(){
        alert(("我被点了");}}
    });

v-if:

<div v-if="count ==3">div1</div>
<div v-else-if="count ==2">div2</div>
<div v-else>div3</div>

v-show://和if渲染方式不同

<div v-show="count ==3">div4</div>

v-for:

<div v-for="addr in addrs">
{{addr}}<br>//addrs为数组模型
</div>

加索引

<div v-for="(addr,i)in addrs">
<!--i表示索引，从0开始-->
{{i + 1}}:{{addr}}<br>
</div>

Vue生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
状态阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
发送异步请求，加载数据

Element

●Element:是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，用于快速构建网页
·组件：组成网页的部件，例如超链接、按钮、图片、表格等等~
Element官网：https://element.eleme.cn/#/zh-CNListener

Element快速入门
1.引入Element的css、js文件和Vue.js

<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script><link rel="stylesheet"href="element-ui/lib/theme-chalk/index.css">

2.创建Vue核心对象

<script>
new Vue({
el:"#app"
})
</script>

3.官网复制Element组件代码

Element布局

Element中有两种布局方式：

Layout布局：通过基础的24分栏，迅速简便地创建布局
Container布局容器：用于布局的容器组件，方便快速搭建页面的基本结构

屠一乐

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【Javaweb 2】JSP,Filter,Listener,AJAX,Vue

📅 发文时间：2022.08.10🎈 一定存在只有你才能做成的事🌹 博主水平有限，如有错误，欢迎指正。
复制链接

扫一扫

专栏目录

【Javaweb 2】JSP,Filter,Listener,AJAX,Vue

文章目录

JSP

JSP快速入门

JSP原理

JSP脚本

EL表达式

JSTL标签

JSTL标签

MVC模式

三层架构

案例

会话跟踪技术

Cookie基本使用

Session

登录注册案例

记住用户

Filter

Filter快速入门

Listener

AJAX

AJAX快速入门

Axios异步框架

JSON

Vue

Vue快速入门

Vue常用指令

Element

Element布局

“相关推荐”对你有帮助么？