《web应用技术》第十一次课后作业

已于 2024-06-11 21:11:58 修改
阅读量305 收藏 4
点赞数 3
文章标签： 前端
于 2024-06-07 19:53:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75844191/article/details/139529120
版权

1.Filter原理

1.编写DemoFilter类实现Filter接口

在web服务器启动时会自动创建filter对象，需要调用init方法（初始方法），只调用一次。destroy方法（销毁方法）也只调用一次，但是doFilter方法一次请求调用一次，会调用多次。

 测试的代码如下：

package com.liuxiaocan.finalwork.Filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;
@WebFilter(urlPatterns ="/*" )//定义过滤器要拦截什么请求,/*是所有请求
public class DemoFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
        System.out.println("初始化成功！！！！");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("过滤启动！！！！");
    }

    @Override
    public void destroy() {
        Filter.super.destroy();
        System.out.println("销毁成功！！！！");
    }
}

当运行程序时会输出对应的语句表示过滤器已经初始化成功，访问前端页面时会运行doFilter方法，输出对应的语句。

 Filter的放行操作代码：

 @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("过滤启动！！！！");
        filterChain.doFilter(servletRequest,servletResponse);//放行操作，允许访问对应操作
    }

2.过滤器的详细内容

1.过滤器的执行过程

在过滤器中放行以后访问了对应的接口以后还会回到过滤器中，但是是执行放行操作之后的步骤。

2.过滤器的拦截路径

拦截具体路径：

@WebFilter(urlPatterns ="/loginnn" )//定义过滤器要拦截什么请求,/*是所有请求
public class DemoFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
        Filter.super.init(filterConfig);
        System.out.println("初始化成功！！！！");
    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("过滤启动！！！！");
        filterChain.doFilter(servletRequest,servletResponse);//放行操作，允许访问对应操作
        System.out.println("放行后！！！！");
    }

    @Override
    public void destroy() {
       Filter.super.destroy();
       System.out.println("销毁成功！！！！");
    }
}

 登录成功后输出如下内容：

 3.过滤器链

在一个web应用中配置了多个过滤器，多个过滤器就形成了一个过滤器链。在过滤器链的执行过程中，先执行第一个过滤器，再执行第二个过滤器，放行后先回到第二个过滤器，再回到第一个过滤器。执行顺序按照过滤器类名的排序。

 2.实施登陆验证功能

先发起一个请求，获取请求路径，如果请求路径是登录路径则直接放行不用进行登陆验证。如果不是登录界面则获取请求头的令牌token，如果令牌存在且有效则直接放行，如果令牌不存在且令牌无效则返回未登录的提示。

测试Filter过滤器的功能： 

package com.liuxiaocan.finalwork.Filter;

import com.alibaba.fastjson.JSONObject;
import com.liuxiaocan.finalwork.Pojo.Result;
import com.liuxiaocan.finalwork.Utils.JwtUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.util.StringUtils;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Slf4j
@WebFilter(urlPatterns = "/*")
public class LoginFilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        //获取请求路径
        HttpServletRequest request=(HttpServletRequest) servletRequest;
        HttpServletResponse response=(HttpServletResponse) servletResponse;
        String requestURL = request.getRequestURL().toString();
        log.info(requestURL);
        //判断是不是登录路径
        if(requestURL.contains("login")){
            log.info("登录操作直接放行");
            filterChain.doFilter(request,response);
            return;//让代码不用继续执行
        }
        //获取请求头的token
        String token = request.getHeader("token");
        //判断token是否存在，不存在的处理过程
        if(!StringUtils.hasLength(token)){
            log.info("请求头为空");
           Result r=Result.error("not_login");
           //把r转化成json格式数据
            String s = JSONObject.toJSONString(r);
            response.getWriter().write(s);//响应json格式的字符串
            return;
        }
        //校验jwt令牌是否有效
        try {
            JwtUtils.parseJWT(token);
        }catch (Exception e){
            e.printStackTrace();
            log.info("解析失败！返回错误");
            Result r=Result.error("not_login");
            //把r转化成json格式数据
            String s = JSONObject.toJSONString(r);
            response.getWriter().write(s);//响应json格式的字符串
            return;
        }
        //放行
        log.info("成功放行！！！");
        filterChain.doFilter(request, response);

    }
}

 

 实现前端页面之间的token传递： 

show.html:

主要在分页展示接口中传递了token请求头，实现token的传递。在删除操作和搜索的接口也需要传递令牌实现认证。

show(){
      axios(`/page/${this.pageSize}/${this.currentPage}`, { headers: {//传递token
            'token': this.token
        }}).then(r=>{
        if(r.data.statusCode==1){
          this.ComponentData=r.data.data.rows;
          this.total=r.data.data.total;
        }
      }).catch(error=>{
        console.error(error);
      })
    },
SSubmit(){
        axios.get(`/search/${this.pageSize}/${this.currentPage}?cno=${this.form.cno}&cname=${this.form.cname}&csize=${this.form.csize}`,{
            headers:{
                'token':this.token,
            }
        }).then(r=>{
            if(r.data.statusCode==1){
                this.ComponentData=r.data.data.rows;
                this.total=r.data.data.total;
            }
        }).catch(error=>{
            console.error(error);
        })
    },
    deleteall(){
        if(window.confirm("确定要删除吗？")){
            axios.post("/DeleteAll",
               this.List,{headers: {
                   'token':this.token,
                'Content-Type': 'application/json'
            }}).then(r=>{
                if(r.data.statusCode==1){
                    window.alert("删除成功！")
                    this.show();
                }
            }).catch(error=>{
                console.error(error);
            })
        }
    },
  created(){
      this.token= localStorage.getItem("Token") || ""//获取Token值
      this.show();
  }

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="./js/vue.js"></script>
  <script src="./js/axios-0.18.0.js"></script>
  <link rel="stylesheet" href="element-ui/index.css">
  <script src="./element-ui/index.js"></script>
</head>
<body style="margin-top:0px;margin-left: 0px;margin-right: 0px">
<div id="app" >
    <div v-if="token && token.trim()">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#1C86EE"
            text-color="#fff"
            active-text-color="#C1CDCD">
        <el-menu-item index="1">仓库信息</el-menu-item>
        <el-menu-item index="2">
           <el-link  :underline="false"  href="show.html" >零件信息</el-link>
        </el-menu-item>
        <el-menu-item index="3" >职工信息</el-menu-item>
        <el-menu-item index="4">供应商信息</el-menu-item>
    </el-menu>

    <div style="text-align:center">
        <h1 style="text-align: center">零件信息表</h1>

     <p align="center">
         <el-form :inline="true"  :model="form" class="demo-form-inline">
             <el-form-item label="零件号">
                 <el-input v-model="form.cno" placeholder="零件号"></el-input>
             </el-form-item>
             <el-form-item label="零件名">
                 <el-input v-model="form.cname" placeholder="零件名"></el-input>
             </el-form-item>
             <el-form-item label="尺寸">
                 <el-input v-model="form.csize" placeholder="尺寸"></el-input>
             </el-form-item>
             <el-form-item>
                 <el-button type="primary" @click="SSubmit">查询</el-button>
             </el-form-item>
         </el-form>
     </p>
    </div>
  <el-table
          :data="ComponentData"
          style="width: 80%;margin: auto " ref="multipleTable"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">

      </el-table-column>
    <el-table-column
            align="center"
            label="零件号"
            prop="cno">
    </el-table-column>
    <el-table-column
            align="center"
            label="零件名"
            prop="cname">
    </el-table-column>
    <el-table-column
            align="center"
            label="尺寸"
            prop="csize">
    </el-table-column>
    <el-table-column
            align="center"
            label="单价"
            prop="cprice">
    </el-table-column>
    <el-table-column
            align="center"
            label="描述"
            prop="ctext">
    </el-table-column>
    <el-table-column
            align="center"
            label="操作">
<!--      <template slot="header" slot-scope="scope">-->
<!--        <el-input-->
<!--                v-model="search"-->
<!--                size="mini"-->
<!--                placeholder="输入关键字搜索"/>-->
<!--      </template>-->
      <template slot-scope="scope">
        <el-button
                size="mini"
                type="success"
                @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
        <div style="width: 80%;margin: auto;margin-top: 10px" ><el-button type="primary" plain v-on:click="JumpOff">添加零件</el-button>
            <el-button type="danger" plain v-on:click="deleteall">批量删除</el-button>
        </div>
    <div style="text-align: center">
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5, 10, 15, 20,25]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next"
          :total="total">
  </el-pagination>
    </div>

    </div>
    <div v-if="!token">
        <a href="first.html"  style="text-decoration: none;">点击登录！！！</a>
    </div>

</div>
<script>
new Vue({
  el:"#app",
  data(){
    return{
      ComponentData:[],
      search:'',
      currentPage: 1,// 当前页码
      pageSize:5,
      total:100,
      index:'',
      form:{
          cno:'',
          cname:'',
          csize:''
      },
      multipleSelection: [],
        List:[],
        // login1:{
        // }
        token:''
    }
  },
  methods:{
    handleEdit(row) {
     window.location.href="update.html?con="+row.cno;
    },
    handleDelete(row) {
      if(window.confirm("你确定要删除这条数据吗？")){
        axios.post(`/delete/${row.cno}`).then(r=>{
          if(r.data.statusCode==1){
            alert("删除成功！")
            this.show();
          }
        }).catch(error=>{
          console.error(error);
        })
      }
    },
    handleSizeChange(val) {
      this.pageSize=val;
      this.show();
    },
    handleCurrentChange(val) {
      this.currentPage =val;
      this.show();
    },
    show(){
      axios(`/page/${this.pageSize}/${this.currentPage}`, { headers: {//传递token
            'token': this.token
        }}).then(r=>{
        if(r.data.statusCode==1){
          this.ComponentData=r.data.data.rows;
          this.total=r.data.data.total;
        }
      }).catch(error=>{
        console.error(error);
      })
    },
    JumpOff(){
        window.location.href="insert.html"
    },
    SSubmit(){
        axios.get(`/search/${this.pageSize}/${this.currentPage}?cno=${this.form.cno}&cname=${this.form.cname}&csize=${this.form.csize}`,{
            headers:{
                'token':this.token,
            }
        }).then(r=>{
            if(r.data.statusCode==1){
                this.ComponentData=r.data.data.rows;
                this.total=r.data.data.total;
            }
        }).catch(error=>{
            console.error(error);
        })
    },
    deleteall(){
        if(window.confirm("确定要删除吗？")){
            axios.post("/DeleteAll",
               this.List,{headers: {
                   'token':this.token,
                'Content-Type': 'application/json'
            }}).then(r=>{
                if(r.data.statusCode==1){
                    window.alert("删除成功！")
                    this.show();
                }
            }).catch(error=>{
                console.error(error);
            })
        }
    },
    handleSelectionChange(val){
    this.multipleSelection=val;
     this.List = this.multipleSelection.map(m => m.cno);
    }
  },
  created(){
      this.token= localStorage.getItem("Token") || ""//获取Token值
      this.show();
  }
})




</script>
</body>
</html>

 update.html修改变动的部分：

 update(){
                axios.post("/update",JSON.stringify(this.componentlist),{headers: {
                    'Content-Type': 'application/json',
                    'token':this.token
                }}).then((r)=>{
                    if(r.data.statusCode==1){
                        location.href='show.html';
                        console.log(JSON.stringify(this.componentlist))
                    }
                    else{
                        console.log(r.data.message);
                    }
                }).catch(error=>{
                    console.error(error);
                })
            }
        },

insert.html修改的部分：

  addP(){
        if (Object.keys(this.Plist).length === 0) {
          alert('请输入零件信息！');
          return;
        }
        axios.post("/insert",this.Plist,{
          headers:{
            "token":this.token,
            'Content-Type': 'application/json'
          }
        }).then(r=>{
          console.log(r.data);
          if(r.data.statusCode==1){
            alert("插入成功！")
            location.href='show.html';
          }
          else{
            console.log(r.data.message);
          }
        }).catch(error=>{
          console.error(error);
        })
      }
    },
    mounted(){
      this.token=localStorage.getItem("Token") || ""
        // axios.get("/login1").then(r=>{
        //   this.login=r.data;
        //   console.log(this.login);
        // }).catch(error=>{
        //   console.log(error);
        // })

    }
  })

3.Apifox的使用

自动生成接口文档如下：

 

 

生成的markdown文档：

 

vvvolcanoooo
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《web应用技术》第十次课后作业
m0_74988430的博客
06-06 645
浏览器在第一次请求服务器时，服务器创建会话对象session，每一个session都有一个id，服务器端给浏览器响应数据时会将id通过Cookie响应给浏览器，（Set-Cookie:JSESSION=1），浏览器接收到响应数据后自动将Cookie存储在浏览器本地，在后续的每一次请求都会将Cookie的数据获取出来并且带到服务端，服务器拿到session的id会从众多的session中找到当前请求的会话对象session。优点：支持pc端、移动端，解决集群环境下的认证问题，减轻服务器端存储的压力。
《Web应用技术》第十一次课后作业
2201_76124361的博客
06-24 295
其具体应用场景一般是登录验证，流程为浏览器发生登录请求，登录成功后，服务端生成jwt令牌并下发给浏览器，后续浏览器的每次请求都要携带jwt令牌，服务端统一拦截所有请求，并检查是否携带jwt令牌以及是否有效，若有效，则允许访问web资源，若非法，则返回错误响应信息。其流程是拦截请求，执行放行前逻辑，放行，然后访问web资源，返回过滤器，执行放行后逻辑，通常配合webfilter注解和servletconponentscan注解，实现对指定路径进行拦截和对servlet组件支持。
web应用技术-第十次课后作业
2302_80868896的博客
06-23 128
新建管理员信息的数据库表。
《Web应用技术》第十次课后作业
2201_76124361的博客
06-04 179
【代码】《Web应用技术》第十次课后作业。
《Web应用技术》第十二次课后作业
iiiide的博客
06-25 577
狭义的 Servlet 是指 Java 语言实现的一个接口，广义的 Servlet 是指任何实现了这个 Servlet 接口的类，一般情况下，人们将 Servlet 理解为后者。在 Servlet 的整个生命周期内，对于 Servlet 的每一次访问请求，Servlet 容器都会调用一次 Servlet 的 service() 方法，并且创建新ServletRequest 和 ServletResponse 对象，就是说，service() 方法在 Servlet 的整个生命周期中会被调用多次。
《web应用技术》第十二次课后作业
2202_75844191的博客
06-21 341
Java Servlet 是运行在 Web 服务器或应用服务器上的程序，它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。
第十次课后作业-《web应用技术》
2302_76973330的博客
06-03 376
【代码】《web应用技术》第10次课后作业。
web第十二次课后作业
最新发布
2303_80224736的博客
06-27 141
将多个模块组成一个整体，同时进行项目的构建，无需根据依赖关系手动构建，直接在聚合工程上构建，实现项目的方便打包、编译、安装等，实现聚合功能需要一个不具有任何业务功能的空工程，有且仅有一个pom文件的聚合工程。实现：聚合工程通常也是继承当中的父工程，通过<modules>标签设置当前聚合工程所包含的子模块名称，其中模块的书写顺序不影响项目构建，在构建时，会自动根据模块间的依赖关系设置构建顺序。概念——描述的是两个工程间的关系，与Java中的继承相似，子工程可以继承父工程中的配置信息，常见于依赖关系的继承。
第十二次课后作业--servlet技术和maven高级功能
w_peifang的博客
06-22 892
...
带你学C第一季课后作业及答案
11-17
Htmlse14—se140网页版的全部习题及答案 为第一季版变量 _ 课后测试题及答案,带你学C带你飞到宏定义 _ 课后测试题及答案.
ASP.NET Web 应用开发技术（第二版） 课后答案
06-19
ASP.NET Web 应用开发技术（第二版） 课后答案 喻钧 web应用程序
林子雨大数据技术原理及应用第五章课后作业答案.pdf
11-17
林子雨大数据技术原理及应用第五章课后作业答案.pdf
韦东山老师第一期视频课后作业
05-28
本代码包含韦东山老师在第一期视频后所留的课后作业，其中包括对各个模块的整合
微机原理与接口技术第4章课后作业答案PPT课件.ppt
11-11
本节课后作业答案PPT课件涵盖了微机原理与接口技术第4章的相关知识点，包括汇编语言程序设计、数据定义语句、指令语句的执行结果、无符号双子长数之和的程序设计、测试寄存器的某一位是否为0、将二进制数转换为ASCII...
日常工作记录目录
与海
06-21 726
EasyExcel实现二维码下载与展示
前端 CSS 经典：文字描边
weixin_64684095的博客
06-24 368
文字描边有两种实现方式。
SPECweb2009调优指南
developersupport的博客
06-25 864
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 406
整洁大气，非常漂亮，前端内容均可通过后台修改。
jsp应用与开发技术第3版课后答案
01-18
《JSP 应用与开发技术第3版》是一本讲解 JavaServer Pages（JSP）应用与开发技术的经典教材。在课后答案中，我们可以找到对书中提出的问题的详细解答和指导，帮助我们更好地学习和理解 JSP 技术。 在课后答案中，我们可以找到对 JSP 的基础知识、高级特性和实际应用的深入讲解和示例。我们可以看到对 JSP 标记、表达式和脚本的详细解释，还有对 JSP 模板、标签库和自定义标签的介绍。此外，课后答案还包括对 JSP 的数据库访问、国际化、安全性和性能优化等方面的指导，帮助我们更好地应用 JSP 技术进行 Web 开发。 通过学习课后答案，我们可以更好地掌握 JSP 技术的核心概念和实际应用，从而能够更加熟练地开发基于 JSP 的 Web 应用程序。同时，课后答案还可以帮助我们更好地理解书中的知识点，并解决在学习和实践中遇到的问题，是我们学习和应用 JSP 技术的重要辅助资料。 总之，《JSP 应用与开发技术第3版》课后答案为我们提供了丰富的学习资源和实践指导，是我们学习 JSP 技术的宝贵资料。希望大家能够认真阅读课后答案，并在学习和实践中不断提升自己的技能。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值