部分Web心得

验证码

• 也就是java代码生成的一张图片
  ​防止机器自动注册攻击服务器

• 生成验证码和输入验证码注册是两次请求，共享数据使用session

• equalIgnoreCase():忽略大小写比对

Filter

• 概念:过滤器,是JavaWeb三大组件(Filter,Servlet,Listener)之一
• 可以把资源的请求’拦截’下来
• 完成的’通用’的操作:
  • 比如权限控制
  • 统一编码处理
  • 敏感字符处理

快速入门

1. 定义类,实现Filter类,并重写所有方法
2. 配置Filter拦截资源的路径,在类上定义@WebFilter(对应的资源路径)
3. 在doFilter方法中输出一句话,并放行: chain.doFilter(request,response)

执行流程

1. 执行放行前逻辑,对request数据进行处理
2. 放行chain.doFilter(request,response)
3. 放行后,对Response数据进行处理

使用细节

1. Filter拦截资源路径配置

• 根据需求拦截资源路径@WebFilter("/*")
  • 拦截具体的资源:/index.jsp:只用访问index.jsp才会被拦截
  • 目录拦截:/user/*:访问/user下的所有资源都会被拦截
  • 后缀名拦截:*.jsp:访问后缀名为.jsp的资源,都会被拦截
  • 拦截所有:/*:访问所有资源都会被拦截

2. 过滤器链

• 一个web应用可以配置多个过滤器
• 注解配置,过滤顺序按照类名排序

3. 案例

• 登录,注册时,过滤器需要放行登录,注册等相关的资源路径
• 不断循环判断当前访问的资源路径是否在登录相关的资源路径中
  • 找到了就放行
  • 没找到,就说明想要直接访问登录后的资源,显然是不合理的,因此需要登录验证
    1. 判断session中是否有user对象
    2. 有,说明已经登陆成功,直接放行
    3. 没有,说明没有登录,跳转到登陆界面,并给出msg提示信息

Listener

• 概念:监听器 三大组件(Servlet,Filter,Listener)之一
• 监听application,session,request三个对象创建,销毁或者添加修改删除属性时自动执行代码

使用细节

1. 定义类,实现ServletContextListener接口
2. 在类上添加@WebListener()注解,不需要路径,因为是自动监听执行的

• 加载初始化资源
• 释放资源

AJAX

• 概念:异步的Javascript和XML的提交方式

作用

1. 数据交换

   • 通过ajax给服务器发送请求,获取响应数据

   • 使用ajax和服务器通信,从而ajax+html替换JSP页面

2. 异步交互

   • 在不重新加载整个界面的情况下,交换数据并更新部分网页的技术
   • 比如:搜索推荐,用户名是否可用校验等

3. 数据以json形式传递

快速入门

1. 编写AjaxServlet,并使用response输出字符串(后端代码)

   1. 接收前端参数:

      1. request.getParameter("name")

      2. 不能接收json的数据,解决方法:

         1. 获取请求体数据

            BufferedReader br = request. getReader();
String params = br. readLine() ;//保证了只读一行

         2. 将params字符串转为Java对象

            JSON.parseObject(params,User.class)

   2. 调用service代码,实现对应的功能

   3. 返回响应数据response.getWrite.write(),对应前端接收的responseText

2. 创建XMLHttpRequest核心对象:用于和服务器交换数据(前端代码),代码官网有

3. 向服务器发送请求

   1. xmlhttp.open(“GET\POST”,“请求的目标资源绝对路径”,“是否异步”)
   2. xml.send():发送数据

4. 获取服务器响应数据

   1. 绑定事件
   2. 判断响应状态码

Axios

• https://www.axios-http.cn/ :官网
• 异步ajax的框架,简化服务器发送和接受数据的书写

快速入门

1. 引入axios的js文件:

   <script src="js/axios-0.18.0.js"></script>

2. 使用axios发送请求,并获取响应结果

   • get:

     axios({
method:"get"//发送方式 ,
url:"htt://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"//绝对路径,并且参数在url中
     }).then(function (resp){//参数为响应结果
alert(resp.data);//弹出响应结果
})

   • post:

     axios({
method:"post" ,
url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"//参数不在url,需要单独发送
}).then(function (resp){
alert(resp.data);
});

3. 请求方式别名

   • 发送get请求:

     axios.get("url")
.then(function (resp){
alert(resp.data);
});

   • 发起post方式请求:

     axios.post("urI","参数")
.then(function (resp){
alert(resp.data);
});

JSON

• 概念:JavaScript对象表示法
• 由于语法简单,层次结构鲜明,多作为数据载体,数据以json格式进行传输,例如resp.data

基础语法

• 定义:

  var json= {Kkey1": value1,
"key2": value2,
...
};

• 获取数据:json.name

Fastjson

• Java最快的json库,实现json和Java对象之间转换

• 请求数据:json字符串->Java对象

• 响应数据: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

• https://v3.cn.vuejs.org/ :官网
• 前端js框架,免除js的DOM操作,简化书写
• 基于MVVM思想,实现数据的双向绑定,重点在数据上

MVVM

• Model-View-ViewModel:实现数据的双向绑定,相互关联
• Model-View-Controller:MVC实现Model->View的单向展示
  • 也就是数据到展示,并不能从展示层面自动影响绑定模型数据

快速入门

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

   <script src="js/vue.js"></script>

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

   new Vue({
el: "#app",//选择器,指定范围
   data() {//模型数据
return {
username://初始化绑定的模型数据

   ​ }
   ​ });

3. 编写视图

   `

   
   //v-model为绑定的数据模型,会随之改变
   {{username}}//插值表达式,取值
   `

常用指令

• html标签带有**'v-'前缀**的特殊属性,不同指令有不同含义,例如v-if,v-for…

• 常用指令

  • v-bind:为HTML标签绑定属性值,设置href,css样式等

    <a v-bind:href="url">百度一下</a>:v-bind可以省略

  • v-model:在表单元素上双向数据绑定,绑定的元素为data(){里面的元素}

    <input name="username" v-model="username" >//v-model为绑定的数据模型,会随之改变

    <input name="username" :model="username" >

  • v-on:为HTML标签绑定事件

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

    v-on:click <=> @click

    ​ new Vue({ ​ el: "#app ​ methods: {//事件方法 ​ show(){ ​ alert("我被点了"); ​ });

  • v-if,v-else-if,v-else:条件性的渲染元素,判定为true时渲染,否则不渲染

  • v-show:本质上改变的是display:none

  • v-for:列表渲染,遍历容器的元素或者对象的属性

    `

    
    {{addr}}
    
    `

    带索引

    `

    
    {{i}}—{{addr}}
    
    `

生命周期

• 每触发一个生命周期,自动执行一个生命周期方法

  new Vue({
el: "#app",//选择器,指定范围
  data() {//模型数据
return {
username://初始化绑定的模型数据
  ​ },mounted(){
  ​ alert('vue界面渲染完成')
  ​ }
  ​ });

Element

• https://element-plus.gitee.io/zh-CN/ :官网
• 基于Vue的网站组件库,用于快速构建网页
• 组件:网页部件,例如超链接,按钮,图片,表格等

快速入门

1. 引入Element的index.css和index.js文件和Vue.js
2. 创建Vue核心对象
3. 官网复制Element组件代码

布局

1. Layout布局:基础的24分栏,快速简易布局
2. Container布局容器:用于布局的容器组件,快速搭载页面的基本结构

Servlet代码优化

• web层Servlet个数多,不利于管理

• 将Servlet进行分类,对同一个实体操作方法,写到一个Servlet中,例如BrandServlet有增删查改等方法

具体步骤

1. @WebServlet("/brand/*")

2. 获取请求最后一段路径,其实就是方法名称,二者同名

   • 由于HttpServlet内置方法分发,但是只有doGet和doPost两种方法,默认无法调用增删查改方法

     1. 自定义Servlet,使用请求路径进行方法分发,替换内置的请求方式

        Servlet extends HttpServlet{}

     2. 获取请求路径

        request.getRequestURL()

     3. 获取最后一段路径(方法名)

        1. int index =url.lastIndexOf('/');//找到倒数第一个值的索引
        2. url.substring(index+1);//从最后一个'/'开始截取到最后一段路径,包括’/’,因此需要index+1

3. 通过反射获取方法对象,执行方法

   1. 获取BrandServlet字节码对象 Class

      • this:谁调用this,this代表谁,在这里代表BaseServlet的子类BrandServlet

        • 可以使用this代替~~_this~~ 指定Vue前端的元素,而非默认的window元素:axios(.....then(resp=>{

          this.tableData=resp.data.rows}))

      • Class<? extends BaseServlet> class=this.getClass();//获取字节码对象

   2. 获取方法 Method对象

      Method method=class.getMethod(methodName,HttpRequest.class,HttpResponse.class)

   3. 执行方法

      method.invoke(this,request,response)

自定义泛型

• public class PageBean<T>{

  private int sumPages

  private List<T> rows;

  }

• 由于一个页面的数据可能不只有一种User对象或者是Brand对象,因此需要自定义泛型去指定