java_web3

学习目标

day91 jquery

• 能够在HTML文件中引入jQuery文件
• 能够使用jQuery的基本选择器进行操作
• 能够使用jQuery的层级选择器进行操作
• 能够使用jQuery的属性选择器进行操作
• 能够使用jQuery的基本过滤器选择器进行操作
• 能够使用jQuery的表单过滤选择则其进行操作
• 能够理解jQuery的属性方法(基本&样式)
• 能够完成全选&全不选和下拉列表左右移动案例

day02 ajax & json

• 能够理解异步的概念
• 能够了解原生js的ajax
• 能够使用jQuery的$.ajax()进行访问
• 能够使用jQuery的$.get()进行访问
• 能够使用jQuery的$.post()进行访问
• 能够掌握json的对象&数组数据格式
• 能够使用json转换工具Jackson进行json格式字符串的转换
• 能够完成用户名是否存在案例

day03 redis

• 能够理解nosql的概念
• 能够说出redis的常用数据类型
• 能够使用redis的string操作命令
• 能够理解redis的hash操作命令
• 能够理解redis的list操作命令
• 能够理解redis的set操作命令
• 能够使用jedis对redis进行操作
• 能够完成jedis完成缓存优化案例

day01 JQuery

1. JQuery 基础

1. 概念

一个JavaScript的框架，简化JS开发

jQuery是一个快速、简洁的JavaScript框架，设计宗旨是“write less,do more”.封装js的常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和ajax交互。

JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。

2. 快速入门

1. 步骤：

   1. 下载JQuery

      • 目前有三个大版本：

        1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
        2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
        3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求， 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
        目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日

      • jquery-xxx.js和jquery-xxx.min.js区别：

        1. jquery-xxx.js：开发版本，给程序员看的，有良好的缩进和注释
        2. jquery-xxx.min.js：生产版本，程序中使用，没有缩进，体积小一些，程序加载更快。

   2. 导入jQuery的js文件：导入min.js文件

   3. 使用 var div1=$("#div1"); alert(div1.html())

3. jquery对象和js对象的区别和转换

1. jQuery对象在操作时更加方便
2. jQuery对象和js对象方法不通用
3. 相互转换
   • jq --> js : jq对象[索引] 或者 jq对象.get(索引)
   • js --> jq: $(js对象)

2. 选择器

筛选具有相似特征的元素(标签)

1. 基本操作学习

1. 事件绑定

   // 1. 获取b1按钮
   $("#b1").click(function(){
          
     alert("abc");
   });
   

2. 入口函数

   $(function(){
          
     
   });
   

3. window.onload和$(function)的区别

   • window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉
   • $(function) 可以定义多次的

4. 样式控制：css方法

   // $("#div1").css("background-color","red")
   $("#div1").css("backgroundColor","pink");
   

2.1 基本选择器

1. 标签选择器(元素选择器)

语法：$("html标签名")获取所有匹配标签名称的元素

2. id选择器

语法：$("#id的属性值") 获取与指定id属性值匹配的元素

3. 类选择器

语法：$(".class的属性值") 获取与指定class属性值匹配的元素

4. 并集选择器

语法：$("选择器1，选择器2....") 获取多个选择器选中的所有元素

2.2 层级选择器

1. 后代选择器

语法：$("A B") 选择A元素内部的所有B元素（包括孙子）

2. 子选择器

语法：$("A > B") 选择A元素内部的所有B子元素（儿子）

2.3 属性选择器

1. 属性名称选择器

语法：$("A[属性名]") 包含指定属性的选择器

2. 属性选择器

语法：$("A[属性名]='值'")包含指定属性等于指定值的选择器

3. 复合属性选择器

语法：$("A[属性名1]='值1'[]...")包含多个属性条件的选择器

2.4 过滤选择器

1. 首元素选择器

语法：:first 获得选择的元素中的第一个元素

2. 尾元素选择器

语法：:last 获取选择的元素中的最后一个元素

3. 非元素选择器

语法：:not(selector) 不包括指定内容的元素

4. 偶数选择器

语法：:even 偶数，从0开始计数

5. 奇数选择器

语法： :odd奇数，从0开始计数

6. 等于索引选择器

语法：:eq(index) 指定索引元素

7. 大于索引选择器

语法：:gt(index) 大于指定索引元素

8. 小于索引选择器

语法：:lt(index) 小于指定索引元素

9. 标题选择器

语法：:header 获取标题(h1~h6) 元素，固定写法

2.5 表单过滤选择器

1. 可用元素选择器

语法：:enabled 获取可用元素

2. 不可用元素选择器

语法： :disabled 获取不可用元素

3. 选中选择器

语法：:checked 获取单选/复选框选中的元素

​ :selected 获取下拉框选中的元素

3. DOM操作

1. 内容操作

1. html() 获取/设置元素的标签体内容 内容-->内容
2. text() 获取/设置元素的标签体纯文本内容 内容-->内容
3. val() 获取/设置元素的value属性值

2. 属性操作

1. 通用属性操作
   1. attr() 获取/设置元素的属性
   2. removeAttr() 删除属性
   3. prop() 获取/设置元素的属性
   4. removeProp() 删除属性

attr 和 prop区别：

1. 如果操作是是元素的固有属性，建议使用prop
2. 如果操作的是元素自定义的属性，建议使用attr

2. 对class属性操作
   1. addClass(): 添加class属性值
   2. removeClass(): 删除class属性值
   3. toggleClass(): 切换class属性
   4. css()

toggleClass(“one”): 判断如果元素对象上存在class=“one”,则将属性值one删掉；如果不存在class=“one”，添加

3. CRUD操作
   1. append(): 父元素将子元素追加到末尾
      • 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
   2. prepend()：父元素将子元素追加到开头
      • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
   3. appendTo():
      • 对象1.appendTo(对象2)：将对象1添加到对象2元素内部，并且在末尾
   4. prependTo()：
      • 对象1.prependTo(对象2)：将对象1添加到对象2元素内部，并且在开头
   5. after()：添加元素到元素后边
      • 对象1.after(对象2)：将对象2添加到对象1后边，对象1和对象2是兄弟关系
   6. before(): 添加元素到元素前边
      • 对象1.before(对象2)：将对象2添加到对象1前边，对象1和2是兄弟
   7. insertAfter()：
      • 对象1.insertAfter(对象2)：将对1添加到对象2后边，对象1和对象2是兄弟关系
   8. insertBefore()
      • 对象1.insertBefore(对象2)：将对象1添加到对象2前边，对象1和2是兄弟
   9. remove(): 移除元素
      • 对象.remove() 将对象删除掉
   10. empty(): 清空元素的所有后代元素
       • 对象.empty() 将对象的后代元素全部清空，但是保留当前对象及其属性节点。

jquery高级

1. 动画

1. 三种方式显示和隐藏元素

1. 默认显示和隐藏方式
   1. show([speed],[easing],[fn])
      1. 参数
         1. speed 动画的速度。三个预定义的值(“slow”,“normal”,“fast”)或表示
         2. easing：用来切换效果，默认“swing”，可用参数“linear”
            • swing: 动画执行效果：先慢，中间快，最后又慢
            • linear：动画执行时速度是匀速
         3. fn: 在动画完成时执行的回调函数，每个元素执行一次
   2. hide()
   3. toggle()
2. 滑动显示和隐藏
   1. slideDown(xxx)
   2. slideUp(xxx)
   3. slideToggle(xxx)
3. 淡入淡出显示和隐藏方式
   1. fadeIn(xxx)
   2. fadeOut(xxx)
   3. fadeToggle(xxx)

2. 遍历

1. js的遍历方式

• for(初始化值;循环结束条件;步长)

2. jq的遍历方式
   1. jq对象.each(callback)
      1. 语法：jquery对象.each(function(index,element(){}));
         • index：就是元素在集合中的索引
         • element：就是集合中的每一个元素对象
         • this：集合中的每一个元素对象
      2. 回调函数返回值
         • false：如果当前function返回为false，则结束循环break
         • true：如果当前function返回为true，结束本次循环，继续下次循环continue
   2. $.each(object,[callback])
   3. for…of: jquery 3.0版本之后提供的方式
      • for(元素对象 of 容器对象)

不管用js方式或jq方式去遍历数组，里面得到的对象都是JS对象，如果要调用JQ方式需要先转换！

3. 事件绑定

1. jquery标准的绑定方式
   • jq对象.事件方法(回调函数);
     • 如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
2. on绑定事件/off解除绑定
   • jq对象.on(“事件名称”,回调函数)
   • jq对象.off(“事件名称”)
     • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
3. 事件切换：toggle
   • jq对象.toggle(fn1,fn2…)
   • 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

4. 插件

增强jquery的功能

1. 实现方式
   1. $.fn.extend(object) 对象级别 对当前页面的方法的抽取，重复利用
      • 增强通过Jquery获取的对象的功能 $("#id")
   2. $.extend(object) 全局级别 直接使用，一般用于实现一些算法
      • 增强JQuery对象自身的功能 $/jQuery

day02 ajax

1. ajax

1. 概念

ASynchronous JavaScript And XML 异步的JavaScript 和 XML

异步 和 同步：客户端和服务器端相互通信的基础上。

• 同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
• 异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

ajax：用于创建交互式网页的开发技术

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。提升用户的体验

2. 实现方式

1. 原生的js实现方式(了解)

• 创建核心对象

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

  ​

• 建立连接

  xmlhttp.open("GET","/day22/ajaxServlet?username=tom",true);
  

  ​

• 发送请求

   xmlhttp.send();
  

  ​

• 接收数据

   xmlhttp.onreadystatechange=function()
   {
         
     // 判断readyState就绪状态
     if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
         
       var responseText = xmlhttp.responseText;
       alert(responseText);
     }
   }
  }
  

  ​

<script>
        function fun() {
      
            // 发送异步请求
            // 1. 创建核心对象
            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");
            }
            // 2. 建立连接
            /*
                参数：
                    1. 请求方式
                        get ：请求参数在url后拼接，send方法为空参
                        post： 请求参数在send方法中定义
                    2. 请求的URL
                    3. 同步或异步请求：true异步
             */
            xmlhttp.open("GET","/day22/ajaxServlet?username=tom",true);

            // 3. 发送请求
            xmlhttp.send();

            // 4. 接收并处理来自服务器的响应结果
            // 获取方式：xmlhttp.responseText
            // 什么时候获取？当服务器响应成功后再获取

            // 当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
            xmlhttp.onreadystatechange=function()
            {
      
                // 判断readyState就绪状态
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
      
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    script>

2. jquery实现方式(重点)

2.1 $.ajax()

$.ajax({
     
  url:"/day22/ajaxServlet1",
  type:"get", // 默认get
  // data:"username=jack&age=23", // 请求参数
  data:{
     "username":"jack","age":23},
  success:function (data) {
     
    alert(data);
  },//响应成功后的回调函数
  error:function () {
     
    alert("出错了。。。");
  },
  dataType:"text" // 设置接收到的相应数据的格式

});

2.2 $.get()

语法： $.get(url, [data], [callback], [type])

参数：url：请求路径；data：请求参数；callback：回调函数；type：响应结果的类型

callback:发送成功时回调函数。data:待发送 Key/value 参数。type:返回内容格式，xml, html, script, json, text, _default。

2.4 $.post()

语法：$.post(url, [data], [callback], [type])

2. json

1. 概念

Javascript Object Notation javascript对象表示法

• json现在多用于存储和交换文本信息的语法
• 进行数据的传输
• JSON 比 XML 更小、更快，更易解析。

2. 语法

1. 基本规则

• 数据在名称/值对中：json数据是由键值对构成的
  • 键用引号(单双都行)引起来，也可以不使用引号
  • 值的取值类型：
    1. 数字（整数或浮点数）
    2. 字符串（在双引号中）
    3. 逻辑值（true 或 false）
    4. 数组（在方括号中）
    5. 对象（在花括号中）
    6. null
• 数据由逗号分隔：多个键值对由逗号分隔
• 花括号保存对象：使用{}定义json 格式
• 方括号保存数组：[]

2. 获取数据

1. json对象.键名
2. json对象[“键名”]
3. 数组对象[索引]
4. 遍历

for(var key in person){
     
     alert(key+":"+person[key])
}

for (var i = 0; i < ps.length; i++) {
     
  var p = ps[i];
  for(var key in p){
     
    alert(key+":"+p[key])
  }
}

遍历需要注意：person[key]，而不是person.key

3.JSON转为Java对象(了解)

JSON解析器：

• 常见的解析器：Jsonlib，Gson，fastjson，jackson

1. 导入jackson的相关jar包
2. 创建Jackson核心对象 ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
   • readValue(json字符串数据,Class)

4. Java对象转换JSON

1. 导入jackson的相关jar包

2. 创建Jackson核心对象 ObjectMapper

3. 调用ObjectMapper的相关方法进行转换

4. 转换方法：

• writeValue(参数1，obj):

  参数1：

  ​ File：将obj对象转换为JSON字符串，并保存到指定的文件中

  ​ Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中

  ​ OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

• writeValueAsString(obj):将对象转为json字符串

  ​

2. 注解：
   1. @JsonIgnore：排除属性。
   2. @JsonFormat：属性值的格式化
      • @JsonFormat(pattern = “yyyy-MM-dd”)
   3. 复杂java对象转换
      1. List：数组
      2. Map：对象格式一致

案例

校验用户名是否存在

服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：

1. $.get(type):将最后一个参数type指定为"json"
2. 在服务器端设置MIME类型response.setContentType("application/json;charset=utf-8");

day03 redis

1. 概念

redis是一款高性能的NOSQL系列的非关系型数据库，键值存储数据库。

1.1 什么是nosql

not only sql,泛指菲关系型数据库

2. 命令操作

1. redis的数据结构

redis存储的是：key,value格式的数据，其中key都是字符串，value有5种数据结构

数据结构：

1. 字符串类型 string
2. 哈希类型hash： map格式
3. 列表类型list：linkedlist格式，支持重复元素
4. 集合类型 set：不允许重复元素
5. 有序集合类型 sortedset：不允许重复元素，且元素有顺序

2. 字符串类型 string

1. 存储 set key value
2. 获取：get key
3. 删除：del key

3. 哈希类型

1. 存储：hset key field value
2. 获取
   • hget key field：获取指定的field对应的值
   • hgetall key：获取所有的field和value
3. 删除 hdel key field

4. 列表类型 list

linkedlist，可以添加一个元素到列表的头部（左边）或者尾部（右边）

1. 添加
   1. lpush key value：将元素加入列表左表
   2. rpush key value：将元素加入列表右边
2. 获取：lrange key start end：范围获取
3. 删除：
   • lpop key ：删除列表最左边的元素，并将元素返回
   • rpop key：删除列表最右边

5. set集合

不允许重复元素

1. 存储：sadd key value
2. 获取：smembers key
3. 删除：srem key value

6. 有序集合类型 sortedset

不允许重复元素，且元素有顺序.每个元素都会关联一个double类型的分数。redis正是通过分数来为集合中的成员进行从小到大的排序。

1. 存储：zadd key score value
2. 获取：zrange key start end [withscores]
3. 删除：zrem key value

7. 通用命令

1. keys * : 查询所有的键
2. type key ： 获取键对应的value的类型
3. del key：删除指定的key value

4. 持久化

redis是一个内存数据库，当redis服务器重启，或者电脑重启，数据会丢失。我们可以将redis内存中的数据持久化保存到硬盘的文件中。

redis持久化机制：

RDB：默认方式

不需要进行配置，默认就使用这种机制

在一定的间隔时间中，检测key的变化情况，然后持久化数据

1. 编辑redis.windows.conf文件

   save 900 1

   save 300 10

   save 60 10000

2. 重新启动redis服务器，并指定配置文件名称

   D:\xxx\redis-2.8.9>redis-server.exe redis.windows.conf

AOF

日志记录的方式，可以记录每一条命令的操作。可以每一次命令操作后，持久化数据

1. 编辑redis.windwos.conf文件

   appendonly no（关闭aof） --> appendonly yes （开启aof）

   appendfsync everysec ： 每隔一秒进行一次持久化

5. java客户端 Jedis

一款java操作redis数据库的工具

使用步骤:

1. 下载jedis的jar包

2. 使用

   //1. 获取连接
   Jedis jedis = new Jedis("localhost",6379);
   //2. 操作
   jedis.set("username","zhangsan");
   //3. 关闭连接
   jedis.close();
   

   ​

6. Jedis操作redis

1.字符串

可以使用setex()方法存储可以指定过期时间的 key value

jedis.setex("activecode",20,"hehe");

2. 哈希类型 hash

和redis语法都一致，后面的就不写了。

7. jedis连接池

JedisPool

使用

// 创建一个配置对象
JedisPoolConfig config = new JedisPoolConfig();
config.setMaxTotal(50);
config.setMaxIdle(10);// 最大空闲连接

// 1. 创建jedis连接池对象
JedisPool jedisPool = new JedisPool(config,"localhost",6379);
// 2. 获取连接
Jedis jedis = jedisPool.getResource();
// 3. 使用
jedis.set("hehe","haha");

// 4. 关闭,归还到连接池
jedis.close();

8. 连接池的工具类

public class JedisPoolUtils {
     
    private static JedisPool jedisPool = null;
    static {
     
        // 读取配置文件
        InputStream is = JedisPoolUtils.class.getClassLoader().getResourceAsStream("jedis.properties");
        Properties pro = new Properties();
        try {
     
            pro.load(is);
        } catch (IOException e) {
     
            e.printStackTrace();
        }
        // 获取数据，设置到JedisPoolConfig中
        JedisPoolConfig config = new JedisPoolConfig();
        config.setMaxTotal(Integer.parseInt(pro.getProperty("maxTotal")));
        config.setMaxIdle(Integer.parseInt(pro.getProperty("maxIdle")));

        // 初始化
        jedisPool = new JedisPool(config, pro.getProperty("host"), Integer.parseInt(pro.getProperty("port")));
    }
    /**
     *  获取连接方法
     */
    public static Jedis getJedis(){
     
        return jedisPool.getResource();
    }
}

使用

// 通过连接池工具类获取
Jedis jedis = JedisPoolUtils.getJedis();
// 3. 使用
jedis.set("hello","world");
// 4. 关闭,归还到连接池
jedis.close();