JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx

1. MVC 开发模式
2. EL表达式
- 2.1 概念 & 作用 & 语法
- 2.2 EL表达式的功能及使用
- - 2.2.1 功能一：运算
  - 2.2.2 功能二：获取值
- 3.3 EL表达式中的隐式对象
3. JSTL
- 3.1 JSTL概念 & 作用 & 使用
- 3.2 常用的JSTL标签—— if | choose | foreach
- - 3.2.1 if标签
  - 3.2.2 choose标签
  - 3.2.3 foreach标签
- 3.3 案例练习
4. 三层架构：软件设计架构
- 4.1 概念 & 示意图
- 4.2 案例：用户信息列表展示
5. Filter：过滤器
- 5.1 概念 & 快速入门
- 5.2 Filter过滤器细节
- 5.3 Filter过滤器案例
- - 5.3.1 案例一：登录验证
  - 5.3.2 案例二：敏感词汇过滤
  - - 5.3.2.1 需求 & 分析
    - 5.3.2.2 知识点补充——代理模式
    - 5.3.2.3 代理模式例程
    - 5.3.2.4 敏感词过滤代码
6. Listener：监听器
- 6.1 概念 & ServletContextListener接口
- 6.2 Listener 代码
7. JQuery 基础
- 7.1 JQuery 概念
- 7.2 JQuery 快速入门
- 7.3 JQuery对象与JS对象区别和转换
- 7.4 JQuery选择器
- - 7.4.1 基本操作学习
  - 7.4.2 选择器分类
  - - 7.4.2.1 基本选择器
    - 7.4.2.2 层级选择器
    - 7.4.2.3 属性选择器
    - 7.4.2.4 过滤选择器
    - 7.4.2.5 表单过滤选择器
- 7.5 JQuery的DOM操作
- - 7.5.1 内容操作
  - 7.5.2 属性操作
  - - 7.5.2.1 通用属性操作
    - 7.5.2.2 对class属性操作
  - 7.5.3 CRUD操作
- 7.6 JQuery 案例
- - 7.6.1 案例一：隔行换色
  - 7.6.2 案例二：全选和全不选
  - 7.6.3 案例三：QQ表情选择
  - 7.6.4 案例四：下拉列表选中条目左右移动
8. JQuery 高级
- 8.1 动画——三种方式显示和隐藏元素
9. AJAX
- 9.1 AJAX概念
- 9.2 AJAX 实现方式
- - 9.2.1 JS实现方式（了解）
  - 9.2.2 JQeury实现方式
10. Maven
11. JSON
- 11.1 JSON概念
- 11.2 JSON基本语法
- 11.3 JSON获取数据
- 11.3 JSON数据和Java对象相互转换
- - 11.3.1 JSON解析器
  - 11.3.2 JSON转为Java对象
  - 11.3.3 Java对象转换JSON
  - 11.3.4 代码——Java对象&JSON 相互转换
- 11.4 案例——校验用户名是否存在
12. Redis
- 12.1 NoSQL简介
- - 12.1.1 NoSQL概念
  - 12.1.2 NOSQL和关系型数据库比较
- 12.2 主流的NOSQL产品
- 12.3 Redis概念 & 应用场景 & 下载安装
- 12.4 redis的数据结构 & 命令操作
- 12.5 redis的持久化
- 12.6 Java客户端 Jedis
- - 12.6.1 Jedis快速入门
  - 12.6.2 Jedis操作redis中的数据结构
  - 12.6.3 jedis连接池： JedisPool
  - - 12.6.3.1 JedisPool 快速入门
    - 12.6.3.2 jedis 连接池工具类
- 12.7 案例
13. Linux
- 13.1 Linux概述
- 13.2 Linux安装
- 13.3 Linux的远程访问
- 13.4 Linux的目录结构
- 13.5 Linux的常用命令
- 13.6 Vi和Vim编辑器
- 13.7 Linux的权限命令
- 13.8 Linux上常用网络操作
- 13.9 Linux上软件安装
- - 13.9.1 Linux安装软件的常见方式
  - 13.9.2 上传与下载工具
  - 13.9.3 在Linux上安装JDK
  - 13.9.4 在Linux上安装Mysql
  - 13.9.5 在Linux上安装tomcat
  - 13.9.6 在Linux上安装redis
  - 7.9.7 部署Java项目到Linux
- 13.10 linux命令积累
14. Nginx
- 14.1 Nginx简介
- - 14.1.1 什么是Nginx
  - 14.1.2 Nginx 应用场景
- 14.2 Nginx的安装与启动
- - 14.2.1 Nginx安装前环境准备
  - 14.2.2 Nginx下载&安装
  - 14.2.3 Nginx启动与访问
- 14.3 Nginx静态网站部署
- 14.4 Nginx反向代理
- - 14.4.1 反向代理简介
  - 14.4.2 配置反向代理
- 14.5 负载均衡
- - 14.5.1 什么是负载均衡
  - 14.5.2 配置负载均衡

说明：本内容整理自B站黑马程序员Java web课程视频及文档>>B站黑马程序员Java web课程视频

1. MVC 开发模式

 
1. jsp演变历史1. 早期只有servlet，只能使用response输出标签数据，非常麻烦2. 后来有了jsp，简化了Servlet的开发，如果过度使用jsp，在jsp中即写大量的java代码，又写html表，造成难于维护，难于分工协作3. 再后来，java的web开发，借鉴mvc开发模式，使得程序的设计更加合理性2. MVC——将程序分为Model、View、Controller三部分1. M：Model，模型。JavaBean(Java对象)完成具体的业务操作，如：查询数据库，封装对象2. V：View，视图。JSP展示数据3. C：Controller，控制器。Servlet1.获取用户的输入2.调用模型3.将数据交给视图进行展示

MVC开发模式

        3.优缺点：1. 优点：1. 耦合性低，方便维护，可以利于分工协作2. 重用性高2. 缺点：1. 使得项目架构变得复杂，对开发人员要求高

2. EL表达式

2.1 概念 & 作用 & 语法

    1. 概念：Expression Language 表达式语言2. 作用：替换和简化jsp页面中java代码的编写3. 语法：${表达式}4. 注意：jsp默认支持el表达式的。如果要忽略el表达式1. 设置jsp中page指令中：isELIgnored="true" 忽略当前jsp页面中所有的el表达式2. \${表达式} ：忽略当前这个el表达式

2.2 EL表达式的功能及使用

2.2.1 功能一：运算

 
1. 功能一：运算：运算符：1. 算数运算符： + - * /(div) %(mod)2. 比较运算符： > < >= <= == !=3. 逻辑运算符： &&(and) ||(or) !(not)4. 空运算符： empty功能：用于判断字符串、集合、数组对象是否为null或者长度是否为0${empty list}:判断字符串、集合、数组对象是否为null或者长度为0${not empty str}:表示判断字符串、集合、数组对象是否不为null 并且 长度>05.程序代码：<%@ page import="java.util.List" %><%@ page import="java.util.ArrayList" %><%@ page contentType="text/html;charset=UTF-8" language="java"   %><html><head><title>Title</title></head><body>${3 > 4}\${3 > 4}<hr><h3>算数运算符</h3>${3 + 4}<br>${3 / 4}<br>${3 div 4}<br>${3 % 4}<br>${3 mod 4}<br><h3>比较运算符</h3>${3 == 4}<br><h3>逻辑运算符</h3>${3 > 4  && 3 < 4}<br>${3 > 4  and 3 < 4}<br><h4>empty运算符</h4><%String str = "";request.setAttribute("str",str);List list = new ArrayList();request.setAttribute("list",list);%>${not empty str}${not empty list}</body></html>

2.2.2 功能二：获取值

 
2. 功能二：获取值
2.1、 el表达式只能从域对象中获取值
2.2、 语法：1. ${域名称.键名}：从指定域中获取指定键的值1.域名称：1. pageScope        --> 从pageContext中获取值2. requestScope  --> 从request中获取值3. sessionScope  --> 从session中获取值4. applicationScope --> 从application（ServletContext）中获取值2.举例：如在request域中存储了name=张三，则获取“张三”的方式为：${requestScope.name}3.代码：<%@ page import="java.util.List" %><%@ page import="java.util.ArrayList" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>el获取域中的数据</title></head><body><%//在域中存储数据session.setAttribute("name","李四");request.setAttribute("name","张三");session.setAttribute("age","23");request.setAttribute("str","");%><h3>el获取值</h3>${requestScope.name}${sessionScope.age}${sessionScope.haha}${name}${sessionScope.name}</body></html>

    2. ${键名}：表示依次从最小的域中查找是否有该键对应的值，直到找到为止。3. 获取对象、List集合、Map集合的值1. 对象：${域名称.键名.属性名}1.本质上会去调用对象的getter方法2.程序代码：2. List集合：${域名称.键名[索引]}3. Map集合：${域名称.键名.key名称}${域名称.键名["key名称"]}4.代码：1.User类：package cn.itcast.domain;import java.text.SimpleDateFormat;import java.util.Date;public class User {private String name;private int age;private Date birthday;public User(String name, int age, Date birthday) {this.name = name;this.age = age;this.birthday = birthday;}public User() {}/*** 逻辑视图* @return*/public String getBirStr(){if(birthday != null){//1.格式化日期对象SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//2.返回字符串即可return sdf.format(birthday);}else{return "";}}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public Date getBirthday() {return birthday;}public void setBirthday(Date birthday) {this.birthday = birthday;}}

 
3. el.jsp代码：<%@ page import="cn.itcast.domain.User" %><%@ page import="java.util.*" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>el获取数据</title></head><body><%User user = new User();user.setName("张三");user.setAge(23);user.setBirthday(new Date());request.setAttribute("u",user);List list = new ArrayList();list.add("aaa");list.add("bbb");list.add(user);request.setAttribute("list",list);Map map = new HashMap();map.put("sname","李四");map.put("gender","男");map.put("user",user);request.setAttribute("map",map);%><h3>el获取对象中的值</h3>${requestScope.u}<br><%--* 通过的是对象的属性来获取* setter或getter方法，去掉set或get，在将剩余部分，首字母变为小写。* setName --> Name --> name--%>${requestScope.u.name}<br>${u.age}<br>${u.birthday}<br>${u.birthday.month}<br>${u.birStr}<br><h3>el获取List值</h3>${list}<br>${list[0]}<br>${list[1]}<br>${list[10]}<br>${list[2].name}<h3>el获取Map值</h3>${map.gender}<br>${map["gender"]}<br>${map.user.name}</body></html>

效果：

3.3 EL表达式中的隐式对象

 
3. 隐式对象：1.el表达式中有11个隐式对象2.隐式对象pageContext的功能：1.获取jsp其他八个内置对象2.${pageContext.request.contextPath}：动态获取虚拟目录3.代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>el隐式对象</title></head><body>${pageContext.request}<br><h4>在jsp页面动态获取虚拟目录</h4>${pageContext.request.contextPath}<%%></body></html>

3. JSTL

3.1 JSTL概念 & 作用 & 使用

 
1. 概念：JavaServer Pages Tag Library  JSP标准标签库是由Apache组织提供的开源的免费的jsp标签     <标签>
2. 作用：用于简化和替换jsp页面上的java代码
3. 使用步骤：1. 导入jstl相关jar包2. 引入标签库：taglib指令：  <%@ taglib %>3. 使用标签4. 常用的JSTL标签—— if | choose | foreach

3.2 常用的JSTL标签—— if | choose | foreach

 
2.常用的JSTL标签—— if | choose | foreach

3.2.1 if标签

 
1. if:相当于java代码的if语句1. 属性：test 必须属性，接受boolean表达式如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容一般情况下，test属性值会结合el表达式一起使用2. 注意：c:if标签没有else情况，想要else情况，则可以再定义一个c:if标签3.代码：<%@ page import="java.util.List" %><%@ page import="java.util.ArrayList" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head><title>if标签</title></head><body><%--c:if标签1. 属性：* test 必须属性，接受boolean表达式* 如果表达式为true，则显示if标签体内容，如果为false，则不显示标签体内容* 一般情况下，test属性值会结合el表达式一起使用2. 注意：c:if标签没有else情况，想要else情况，则可以在定义一个c:if标签--%><c:if test="true"><h1>我是真...</h1></c:if><br><%//判断request域中的一个list集合是否为空，如果不为null则显示遍历集合List list = new ArrayList();list.add("aaaa");request.setAttribute("list",list);request.setAttribute("number",4);%><c:if test="${not empty list}">遍历集合...</c:if><br><c:if test="${number % 2 != 0}">${number}为奇数</c:if><c:if test="${number % 2 == 0}">${number}为偶数</c:if></body></html>

3.2.2 choose标签

 
2. choose:相当于java代码的switch语句1. 使用choose标签声明                      相当于switch声明2. 使用when标签做判断                   相当于case3. 使用otherwise标签做其他情况的声明     相当于default4.代码：<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head><title>choose标签</title></head><body><%--完成数字编号对应星期几案例1.域中存储一数字2.使用choose标签取出数字         相当于switch声明3.使用when标签做数字判断         相当于case4.otherwise标签做其他情况的声明  相当于default--%><%request.setAttribute("number",51);%><c:choose><c:when test="${number == 1}">星期一</c:when><c:when test="${number == 2}">星期二</c:when><c:when test="${number == 3}">星期三</c:when><c:when test="${number == 4}">星期四</c:when><c:when test="${number == 5}">星期五</c:when><c:when test="${number == 6}">星期六</c:when><c:when test="${number == 7}">星期天</c:when><c:otherwise>数字输入有误</c:otherwise></c:choose></body></html>

3.2.3 foreach标签

 
3. foreach:相当于java代码的for语句<%@ page import="java.util.ArrayList" %><%@ page import="java.util.List" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head><title>foreach标签</title></head><body><%--foreach:相当于java代码的for语句1. 完成重复的操作for(int i = 0; i < 10; i ++){}* 属性：begin：开始值end：结束值var：临时变量step：步长varStatus:循环状态对象index:容器中元素的索引，从0开始count:循环次数，从1开始--%><c:forEach begin="1" end="10" var="i" step="2" varStatus="s">${i} <h3>${s.index}<h3> <h4> ${s.count} </h4><br></c:forEach><hr><%--2. 遍历容器List<User> list;for(User user : list){}* 属性：items:容器对象var:容器中元素的临时变量varStatus:循环状态对象index:容器中元素的索引，从0开始count:循环次数，从1开始--%><%List list = new ArrayList();list.add("aaa");list.add("bbb");list.add("ccc");request.setAttribute("list",list);%><c:forEach items="${list}" var="str" varStatus="s">${s.index} ${s.count} ${str}<br></c:forEach></body></html>

3.3 案例练习

 
5. 练习：需求：1.在request域中有一个存有User对象的List集合。需要使用jstl+el将list集合数据展示到jsp页面的表格table中2.隔行显示不同的颜色<%@ page import="cn.itcast.domain.User" %><%@ page import="java.util.List" %><%@ page import="java.util.ArrayList" %><%@ page import="java.util.Date" %><%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head><title>test</title></head><body><%List list = new ArrayList();list.add(new User("张三",23,new Date()));list.add(new User("李四",24,new Date()));list.add(new User("王五",25,new Date()));request.setAttribute("list",list);%><table border="1" width="500" align="center"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>生日</th></tr><%--数据行--%><c:forEach items="${list}" var="user" varStatus="s"><c:if test="${s.count % 2 != 0}"><tr bgcolor="red"><td>${s.count}</td><td>${user.name}</td><td>${user.age}</td><td>${user.birStr}</td></tr></c:if><c:if test="${s.count % 2 == 0}"><tr  bgcolor="green"><td>${s.count}</td><td>${user.name}</td><td>${user.age}</td><td>${user.birStr}</td></tr></c:if></c:forEach></table></body></html>

网页效果

4. 三层架构：软件设计架构

4.1 概念 & 示意图

    1. 界面层(表示层)：用户看的得界面。用户可以通过界面上的组件和服务器进行交互2. 业务逻辑层：处理业务逻辑的3. 数据访问层：操作数据存储文件

三层架构示意图：

4.2 案例：用户信息列表展示

 
1. 需求：用户信息的增删改查操作
2. 设计：1. 技术选型：Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat2. 数据库设计：create database day17; -- 创建数据库use day17;               -- 使用数据库create table user(   -- 创建表id int primary key auto_increment,name varchar(20) not null,gender varchar(5),age int,address varchar(32),qq  varchar(20),email varchar(50));3. 开发：1. 环境搭建1. 创建数据库环境2. 创建项目，导入需要的jar包2. 编码4. 测试
5. 部署运维

用户信息的增删改查

5. Filter：过滤器

5.1 概念 & 快速入门

 
1. 概念：1.生活中的过滤器：净水器,空气净化器，土匪、2.web中的过滤器：当访问服务器的资源时，过滤器可以将请求拦截下来，完成一些特殊的功能。3.过滤器的作用：一般用于完成通用的操作。如：登录验证、统一编码处理、敏感字符过滤...

 
2. 快速入门：1.步骤：1. 定义一个类，实现接口Filter(实现javax.servlet包下的Filter接口)2. 复写方法3. 配置拦截路径1. web.xml2. 注解

注意：是实现javax.servlet包下的Filter接口

 
3. 代码：@WebFilter("/*")//访问所有资源之前，都会执行该过滤器public class FilterDemo1 implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {System.out.println("filterDemo1被执行了....");//放行filterChain.doFilter(servletRequest,servletResponse);}@Overridepublic void destroy() {}}

5.2 Filter过滤器细节

 
3. 过滤器细节：
1. web.xml配置中配置( 如下配置的作用等同于注解@WebFilter("/*") )  <filter><filter-name>demo1</filter-name><filter-class>cn.itcast.web.filter.FilterDemo1</filter-class></filter><filter-mapping><filter-name>demo1</filter-name><!-- 拦截路径 --><url-pattern>/*</url-pattern></filter-mapping>

 
2. 过滤器执行流程1. 执行过滤器2. 执行放行后的资源3. 回来执行过滤器放行代码下边的代码4. 代码：package cn.itcast.web.filter;import javax.servlet.*;import java.io.IOException;//@WebFilter("/*")public class FilterDemo2 implements Filter {public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {//对request对象请求消息增强System.out.println("filterDemo2执行了....");//放行chain.doFilter(req, resp);//对response对象的响应消息增强System.out.println("filterDemo2回来了...");}public void init(FilterConfig config) throws ServletException {}public void destroy() {}}3. 过滤器生命周期方法1. init:在服务器启动后，会创建Filter对象，然后调用init方法。只执行一次。用于加载资源2. doFilter:每一次请求被拦截资源时，会执行。执行多次3. destroy:在服务器关闭后，Filter对象被销毁。如果服务器是正常关闭，则会执行destroy方法。只执行一次。用于释放资源

 
4. 过滤器配置详解1.拦截路径配置：1. 具体资源路径： /index.jsp   只有访问index.jsp资源时，过滤器才会被执行2. 拦截目录： /user/*    访问/user下的所有资源时，过滤器都会被执行3. 后缀名拦截： *.jsp        访问所有后缀名为jsp资源时，过滤器都会被执行4. 拦截所有资源：/*       访问所有资源时，过滤器都会被执行2.拦截方式配置：资源被访问的方式1.注解配置：设置dispatcherTypes属性1. REQUEST：默认值。浏览器直接请求资源2. FORWARD：转发访问资源3. INCLUDE：包含访问资源4. ERROR：错误跳转资源5. ASYNC：异步访问资源2.web.xml配置设置<dispatcher></dispatcher>标签即可3.代码：package cn.itcast.web.filter;import javax.servlet.*;import java.io.IOException;//浏览器直接请求index.jsp资源时，该过滤器会被执行//@WebFilter(value="/index.jsp",dispatcherTypes = DispatcherType.REQUEST)//只有转发访问index.jsp时，该过滤器才会被执行//@WebFilter(value="/index.jsp",dispatcherTypes = DispatcherType.FORWARD)//浏览器直接请求index.jsp或者转发访问index.jsp。该过滤器才会被执行//@WebFilter(value="/*",dispatcherTypes ={ DispatcherType.FORWARD,DispatcherType.REQUEST})public class FilterDemo5 implements Filter {public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {System.out.println("filterDemo5....");chain.doFilter(req, resp);}public void init(FilterConfig config) throws ServletException {}public void destroy() {}}

 
5. 过滤器链(配置多个过滤器)1.执行顺序：如果有两个过滤器：过滤器1和过滤器21. 过滤器12. 过滤器23. 资源执行4. 过滤器25. 过滤器1 2.过滤器先后顺序问题：1. 注解配置：按照类名的字符串比较规则比较，值小的先执行（根据字典序进行比较）如： AFilter 和 BFilter，AFilter就先执行了。2. web.xml配置： 谁定义在上边，谁先执行

5.3 Filter过滤器案例

5.3.1 案例一：登录验证

 
4. 案例：1. 案例1_登录验证需求：1. 访问day17_case案例的资源。验证其是否登录2. 如果登录了，则直接放行。3. 如果没有登录，则跳转到登录页面，提示"您尚未登录，请先登录"。

登录验证流程

 
案例1_登录验证代码：
package cn.itcast.web.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
/*** 登录验证的过滤器*/
@WebFilter("/*")
public class LoginFilter implements Filter {public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {System.out.println(req);//0.强制转换（ServletRequest是接口）HttpServletRequest request = (HttpServletRequest) req;//1.获取资源请求路径String uri = request.getRequestURI();//2.判断是否包含登录相关资源路径,要注意排除掉 css/js/图片/验证码等资源if(uri.contains("/login.jsp") || uri.contains("/loginServlet") || uri.contains("/css/") || uri.contains("/js/") || uri.contains("/fonts/") || uri.contains("/checkCodeServlet")  ){//包含，用户就是想登录。放行chain.doFilter(req, resp);}else{//不包含，需要验证用户是否登录//3.从获取session中获取userObject user = request.getSession().getAttribute("user");if(user != null){//登录了。放行chain.doFilter(req, resp);}else{//没有登录。跳转登录页面request.setAttribute("login_msg","您尚未登录，请登录");request.getRequestDispatcher("/login.jsp").forward(request,resp);}}// chain.doFilter(req, resp);}public void init(FilterConfig config) throws ServletException {}public void destroy() {}
}

5.3.2 案例二：敏感词汇过滤

5.3.2.1 需求 & 分析

 
2. 案例2_敏感词汇过滤1.需求：1. 对day17_case案例录入的数据进行敏感词汇过滤2. 敏感词汇参考《敏感词汇.txt》3. 如果是敏感词汇，替换为 *** 2.分析：1. 对request对象进行增强。增强获取参数相关方法2. 放行。传递代理对象

5.3.2.2 知识点补充——代理模式

 
3.知识点补充——代理模式   如何增强对象的功能？————   代理模式(设计模式：一些通用的解决固定问题的方式)1. 代理模式概念：1. 真实对象：被代理的对象2. 代理对象：3. 代理模式：代理对象代理真实对象，达到增强真实对象功能的目的代理模式实现方式：1. 静态代理：有一个类文件描述代理模式2. 动态代理：在内存中形成代理类动态代理实现步骤：1. 代理对象和真实对象实现相同的接口2. 获取代理对象： 代理对象= Proxy.newProxyInstance();3. 使用代理对象调用方法。4. 增强方法动态代理增强方式：1. 增强参数列表2. 增强返回值类型3. 增强方法体执行逻辑

现实中代理的情形：

5.3.2.3 代理模式例程

 
2.代理模式  例程：
1、SaleComputer接口package cn.itcast.proxy;public interface SaleComputer {public String sale(double money);public void show();}
2、Lenovo类package cn.itcast.proxy;/*** 真实类*/public class Lenovo implements SaleComputer {@Overridepublic String sale(double money) {System.out.println("花了"+money+"元买了一台联想电脑...");return "联想电脑";}@Overridepublic void show() {System.out.println("展示电脑....");}}

 
3、ProxyTest类package cn.itcast.proxy;import java.lang.reflect.InvocationHandler;import java.lang.reflect.Method;import java.lang.reflect.Proxy;public class ProxyTest {public static void main(String[] args) {//1.创建真实对象Lenovo lenovo = new Lenovo();//2.动态代理增强lenovo对象/*三个参数：1. 类加载器：真实对象.getClass().getClassLoader()2. 接口数组：真实对象.getClass().getInterfaces()3. 处理器：new InvocationHandler()*/SaleComputer proxy_lenovo = (SaleComputer) Proxy.newProxyInstance(lenovo.getClass().getClassLoader(), lenovo.getClass().getInterfaces(), new InvocationHandler() {/*代理逻辑编写的方法：代理对象调用的所有方法都会触发该方法执行参数：1. proxy:代理对象2. method：代理对象调用的方法，被封装为的对象3. args:代理对象调用的方法时，传递的实际参数*/@Overridepublic Object invoke(Object proxy, Method method, Object[] args) throws Throwable {/*System.out.println("该方法执行了....");System.out.println(method.getName());System.out.println(args[0]);*///判断是否是sale方法if(method.getName().equals("sale")){//1.增强参数double money = (double) args[0];money = money * 0.85;System.out.println("专车接你....");//使用真实对象调用该方法String obj = (String) method.invoke(lenovo, money);System.out.println("免费送货...");//2.增强返回值return obj+"_鼠标垫";}else{Object obj = method.invoke(lenovo, args);return obj;}}});//3.调用方法/* String computer = proxy_lenovo.sale(8000);System.out.println(computer);*/proxy_lenovo.show();}}

5.3.2.4 敏感词过滤代码

 
package cn.itcast.web.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.lang.reflect.InvocationHandler;
import java.lang.reflect.Method;
import java.lang.reflect.Proxy;
import java.util.ArrayList;
import java.util.List;
/*** 敏感词汇过滤器*/
@WebFilter("/*")
public class SensitiveWordsFilter implements Filter {public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {//1.创建代理对象，增强getParameter方法ServletRequest proxy_req = (ServletRequest) Proxy.newProxyInstance(req.getClass().getClassLoader(), req.getClass().getInterfaces(), new InvocationHandler() {@Overridepublic Object invoke(Object proxy, Method method, Object[] args) throws Throwable {//增强getParameter方法//判断是否是getParameter方法if(method.getName().equals("getParameter")){//增强返回值//获取返回值String value = (String) method.invoke(req,args);if(value != null){for (String str : list) {if(value.contains(str)){value = value.replaceAll(str,"***");}}}return  value;}//后续完善一：判断方法名是否是 getParameterMap//后续完善二：判断方法名是否是 getParameterValuereturn method.invoke(req,args);}});//2.放行chain.doFilter(proxy_req, resp);}private List list = new ArrayList();//敏感词汇集合public void init(FilterConfig config) throws ServletException {try{//1.获取文件真实路径ServletContext servletContext = config.getServletContext();String realPath = servletContext.getRealPath("/WEB-INF/classes/敏感词汇.txt");//2.读取文件BufferedReader br = new BufferedReader(new FileReader(realPath));//3.将文件的每一行数据添加到list中String line = null;while((line = br.readLine())!=null){list.add(line);}br.close();System.out.println(list);}catch (Exception e){e.printStackTrace();}}public void destroy() {}}

6. Listener：监听器

6.1 概念 & ServletContextListener接口

 
1. 概念：web的三大组件之一。事件监听机制事件    ：一件事情事件源 ：事件发生的地方监听器 ：一个对象注册监听：将事件、事件源、监听器绑定在一起。 当事件源上发生某个事件后，执行监听器代码2.ServletContextListener接口:监听ServletContext对象的创建和销毁方法：void contextDestroyed(ServletContextEvent sce) ：ServletContext对象被销毁之前会调用该方法void contextInitialized(ServletContextEvent sce) ：ServletContext对象创建后会调用该方法实现监听器步骤：1. 定义一个类，实现ServletContextListener接口2. 复写方法3. 配置1. 配置方式一web.xml<listener><listener-class>cn.itcast.web.listener.ContextLoaderListener</listener-class></listener>指定初始化参数<context-param>2. 配置方式二注解：@WebListener

6.2 Listener 代码

        package cn.itcast.web.listener;import javax.servlet.ServletContext;import javax.servlet.ServletContextEvent;import javax.servlet.ServletContextListener;import javax.servlet.annotation.WebListener;import java.io.FileInputStream;@WebListenerpublic class ContextLoaderListener implements ServletContextListener {/*** 监听ServletContext对象创建的。ServletContext对象服务器启动后自动创建。** 在服务器启动后自动调用* @param servletContextEvent*/@Overridepublic void contextInitialized(ServletContextEvent servletContextEvent) {//加载资源文件//1.获取ServletContext对象ServletContext servletContext = servletContextEvent.getServletContext();//2.加载资源文件String contextConfigLocation = servletContext.getInitParameter("contextConfigLocation");//3.获取真实路径String realPath = servletContext.getRealPath(contextConfigLocation);//4.加载进内存try{FileInputStream fis = new FileInputStream(realPath);System.out.println(fis);}catch (Exception e){e.printStackTrace();}System.out.println("ServletContext对象被创建了。。。");}/*** 在服务器关闭后，ServletContext对象被销毁。当服务器正常关闭后该方法被调用* @param servletContextEvent*/@Overridepublic void contextDestroyed(ServletContextEvent servletContextEvent) {System.out.println("ServletContext对象被销毁了。。。");}}

7. JQuery 基础

7.1 JQuery 概念

 
1. 概念： 一个JavaScript框架。简化JS开发jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
2.可以自定义js代码封装方法，实现简单的js框架（jQuery是较复杂的JavaScript框架）：1.在js/itcast.js文件中自定义方法：//封装方法，根据id来获取元素对象function $(id){var obj = document.getElementById(id);return obj;}2.在代码中调用自定义框架方法（JQuery就是封装了复杂功能的框架）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自定义js框架</title><script src="js/itcast.js"></script></head><body><div id="div1">div1....</div><div id="div2">div2....</div><script>//1. 根据id获取元素对象//var div1 = document.getElementById("div1");//var div2 = document.getElementById("div2");var div1 = $("div1");var div2 = $("div2");//2.获取标签体内容alert(div1.innerHTML);alert(div2.innerHTML);</script></body></html>

7.2 JQuery 快速入门

 
1. 步骤：1. 下载JQuery* 版本说明：目前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. 使用JQuery：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JQuery快速入门</title><script src="js/jquery-3.3.1.min.js"></script>
</head>
<body><div id="div1">div1....</div><div id="div2">div2....</div>
<script>//使用JQuery获取元素对象var div1 = $("#div1");alert(div1.html());var div2 = $("#div2");alert(div2.html());
</script>
</body>
</html>

7.3 JQuery对象与JS对象区别和转换

 
3. JQuery对象和JS对象区别与转换1. JQuery对象在操作时，更加方便。2. JQuery对象和js对象方法不通用的.3. 两者相互转换jq -- > js : jq对象[索引] 或者 jq对象.get(索引)js -- > jq : $(js对象)4.代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JQuer对象和js对象的转换</title><script src="js/jquery-3.3.1.min.js"></script></head><body><div id="div1">div1....</div><div id="div2">div2....</div><script>//1. 通过js方式来获取名称叫div的所有html元素对象var divs = document.getElementsByTagName("div");alert(divs.length);//divs可以将其当做数组来使用//对divs中所有的div 让其标签体内容变为"aaa"for (var i = 0; i < divs.length; i++) {//divs[i].innerHTML = "aaa";$(divs[i]).html("ccc");}//2. 通过jq方式来获取名称叫div的所有html元素对象var $divs = $("div");alert($divs.length);//$divs也可以当做数组使用//对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式//$divs.html("bbb");// $divs.innerHTML = "bbb";$divs[0].innerHTML = "ddd";$divs.get(1).innerHTML = "eee";/*1. JQuery对象在操作时，更加方便。2. JQuery对象和js对象方法不通用的.3. 两者相互转换* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)* js -- > jq : $(js对象)*/</script></body></html>

7.4 JQuery选择器

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

7.4.1 基本操作学习

 
1. 事件绑定//1.获取b1按钮$("#b1").click(function(){alert("abc");});
2. 入口函数$(function () {});window.onload  和 $(function) 区别：* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉* $(function)可以定义多次的。
3. 样式控制：css方法// $("#div1").css("background-color","red");$("#div1").css("backgroundColor","pink");
4.代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定</title><script src="js/jquery-3.3.1.min.js"></script><script>// 给b1按钮添加单击事件/* window.onload = function(){//1.获取b1按钮$("#b1").click(function(){alert("abc");});}*//*   //jquery入口函数(dom文档加载完成之后执行该函数中的代码)$(function () {//1.获取b1按钮$("#b1").click(function(){alert("abc");});});*//* function fun1(){alert("abc");}function fun2(){alert("bcd");}window.onload = fun1;//window.onload = fun2;
*//* $(function(){alert(123);});$(function(){alert(234);});
*/$(function(){// $("#div1").css("background-color","red");$("#div1").css("backgroundColor","pink");});/*window.onload  和 $(function) 区别* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉* $(function)可以定义多次的。*/</script>
</head>
<body><div id="div1">div1....</div><div id="div2">div2....</div><input type="button" value="点我" id="b1">
</body>
</html>

7.4.2 选择器分类

7.4.2.1 基本选择器

 
1. 标签选择器（元素选择器）语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
5.示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基本选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function () {// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>$("#b1").click(function () {$("#one").css("backgroundColor","pink");});// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>$("#b2").click(function () {$("div").css("backgroundColor","pink");});// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>$("#b3").click(function () {$(".mini").css("backgroundColor","pink");});// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>$("#b4").click(function () {$("span,#two").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/><input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/><input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/><input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one       </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div><span class="spanone">class为spanone的span元素</span><span class="mini">class为mini的span元素</span><input type="text" value="zhang" id="username" name="username"></body>
</html>

7.4.2.2 层级选择器

 
1. 后代选择器语法： $("A B ") 选择A元素内部的所有B元素
2. 子选择器语法： $("A > B") 选择A元素内部的所有B子元素
3.示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>层次选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>$("#b1").click(function () {$("body div").css("backgroundColor","pink");});// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>$("#b2").click(function () {$("body > div").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/><input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one</div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one">class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div><span class="spanone">    span</span></body>
</html>

7.4.2.3 属性选择器

 
1. 属性名称选择器 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
3. 复合属性选择器语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
4.示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>属性过滤选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>$("#b1").click(function () {$("div[title]").css("backgroundColor","pink");});// <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>$("#b2").click(function () {$("div[title='test']").css("backgroundColor","pink");});// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>$("#b3").click(function () {$("div[title!='test']").css("backgroundColor","pink");});// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>$("#b4").click(function () {$("div[title^='te']").css("backgroundColor","pink");});// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>$("#b5").click(function () {$("div[title$='est']").css("backgroundColor","pink");});// <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>$("#b6").click(function () {$("div[title*='es']").css("backgroundColor","pink");});// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>$("#b7").click(function () {$("div[id][title*='es']").css("backgroundColor","pink");});});</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/><input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/><input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/><input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/><input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/><input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/><input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/><div id="one">id为one   div  </div><div id="two" class="mini"  title="test">id为two   class是 mini  div  title="test"<div  class="mini" >class是 mini</div></div><div class="visible" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" title="test02">class是 one    title="test02"<div  class="mini01" >class是 mini01</div><div  class="mini" style="margin-top:0px;">class是 mini</div></div><div class="visible" >这是隐藏的</div><div class="one"></div><div id="mover" >动画</div><input type="text" value="zhang" id="username" name="username"></body>
</html>

7.4.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）元素，固定写法
10.示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>基本过滤选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>$("#b1").click(function () {$("div:first").css("backgroundColor","pink");});// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>$("#b2").click(function () {$("div:last").css("backgroundColor","pink");});// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>$("#b3").click(function () {$("div:not(.one)").css("backgroundColor","pink");});// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>$("#b4").click(function () {$("div:even").css("backgroundColor","pink");});// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>$("#b5").click(function () {$("div:odd").css("backgroundColor","pink");});// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>$("#b6").click(function () {$("div:gt(3)").css("backgroundColor","pink");});// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>$("#b7").click(function () {$("div:eq(3)").css("backgroundColor","pink");});// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>$("#b8").click(function () {$("div:lt(3)").css("backgroundColor","pink");});// <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>$("#b9").click(function () {$(":header").css("backgroundColor","pink");});});</script></head><body>   <input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/><input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/><input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/><input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/><input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/><input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/><input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/><input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/><input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one  </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div></body>
</html>

7.4.2.5 表单过滤选择器

 
1. 可用元素选择器 语法： :enabled 获得可用元素
2. 不可用元素选择器 语法： :disabled 获得不可用元素
3. 选中选择器 语法： :checked 获得单选/复选框选中的元素
4. 选中选择器 语法： :selected 获得下拉框选中的元素
5.示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>表单属性过滤选择器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 180px;height: 180px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 50px;height: 50px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}#job{margin: 20px;}#edu{margin-top:-70px;}</style><script type="text/javascript">$(function () {// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>$("#b1").click(function () {$("input[type='text']:enabled").val("aaa");});// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>$("#b2").click(function () {$("input[type='text']:disabled").val("aaa");});// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>$("#b3").click(function () {alert($("input[type='checkbox']:checked").length);});// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>$("#b4").click(function () {alert($("#job > option:selected").length);});});</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/><input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/><input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/><input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/><br><br><input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1" ><input type="text" value="不可用值2" disabled="disabled"><input type="text" value="可用值2" ><br><br><input type="checkbox" name="items" value="美容" >美容<input type="checkbox" name="items" value="IT" >IT<input type="checkbox" name="items" value="金融" >金融<input type="checkbox" name="items" value="管理" >管理<br><br><input type="radio" name="sex" value="男" >男<input type="radio" name="sex" value="女" >女<br><br><select name="job" id="job" multiple="multiple" size=4><option>程序员</option><option>中级程序员</option><option>高级程序员</option><option>系统分析师</option></select><select name="edu" id="edu"><option>本科</option><option>博士</option><option>硕士</option><option>大专</option></select><br/><div id="two" class="mini" >id为two   class是 mini  div<div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div></body>
</html>

7.5 JQuery的DOM操作

7.5.1 内容操作

 
1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
3. val()： 获取/设置元素的value属性值
4.代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../js/jquery-3.3.1.min.js"></script><script>$(function () {// 获取myinput 的value值//var value = $("#myinput").val();//alert(value);//$("#myinput").val("李四");// 获取mydiv的标签体内容//var html = $("#mydiv").html();//alert(html);//$("#mydiv").html("<p>aaaa</p>");// 获取mydiv文本内容//var text = $("#mydiv").text();//alert(text);$("#mydiv").text("bbb");});</script></head><body><input id="myinput" type="text" name="username" value="张三" /><br /><div id="mydiv"><p><a href="#">标题标签</a></p></div></body>
</html>

7.5.2 属性操作

7.5.2.1 通用属性操作

 
1. 通用属性操作1. attr(): 获取/设置元素的属性2. removeAttr():删除属性3. prop():获取/设置元素的属性4. removeProp():删除属性* attr和prop区别？1. 如果操作的是元素的固有属性，则建议使用prop2. 如果操作的是元素自定义的属性，则建议使用attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>获取属性</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {//获取北京节点的name属性值var name = $("#bj").attr("name");//alert(name);//设置北京节点的name属性的值为dabeijing$("#bj").attr("name","dabeijing");//新增北京节点的discription属性 属性值是didu$("#bj").attr("discription","didu");//删除北京节点的name属性并检验name属性是否存在$("#bj").removeAttr("name");//获得hobby的的选中状态var checked = $("#hobby").prop("checked");alert(checked);//var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined});</script></head><body><ul><li id="bj" name="beijing" xxx="yyy">北京</li><li id="tj" name="tianjin">天津</li></ul><input type="checkbox" id="hobby"/></body>
</html>

7.5.2.2 对class属性操作

 
2. 对class属性操作1. addClass():添加class属性值2. removeClass():删除class属性值3. toggleClass():切换class属性* toggleClass("one"): * 判断如果元素对象上存在class="one"，则将属性值one删除掉。  如果元素对象上不存在class="one"，则添加4. css():5.代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>样式操作</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">.one{width: 200px;height: 140px;margin: 20px;background: red;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 40px;height: 40px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div .mini01{width: 40px;height: 40px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}/*待用的样式*/.second{width: 300px;height: 340px;margin: 20px;background: yellow;border: pink 3px dotted;float:left;font-size: 22px;font-family:Roman;}</style><script type="text/javascript">$(function () {//<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>$("#b1").click(function () {$("#one").prop("class","second");});//<input type="button" value=" addClass"  id="b2"/>$("#b2").click(function () {$("#one").addClass("second");});//<input type="button" value="removeClass"  id="b3"/>$("#b3").click(function () {$("#one").removeClass("second");});//<input type="button" value=" 切换样式"  id="b4"/>$("#b4").click(function () {$("#one").toggleClass("second");});//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>$("#b5").click(function () {var backgroundColor = $("#one").css("backgroundColor");alert(backgroundColor);});//<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>$("#b6").click(function () {$("#one").css("backgroundColor","green");});});</script></head><body><input type="button" value="保存"  class="mini" name="ok"  class="mini" /><input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/><input type="button" value=" addClass"  id="b2"/><input type="button" value="removeClass"  id="b3"/><input type="button" value=" 切换样式"  id="b4"/><input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/><input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/><h1>有一种奇迹叫坚持</h1><h2>自信源于努力</h2><div id="one">id为one </div><div id="two" class="mini" >id为two   class是 mini <div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini" >class是 mini</div><div  class="mini" >class是 mini</div></div><div class="one" >class是 one <div  class="mini01" >class是 mini01</div><div  class="mini" >class是 mini</div></div><span class="spanone">    span</span></body>
</html>

7.5.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)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>内部插入脚本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div .mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value="将反恐放置到city的后面"  id="b1"/>$("#b1").click(function () {//append//$("#city").append($("#fk"));//appendTo$("#fk").appendTo($("#city"));});// <input type="button" value="将反恐放置到city的最前面"  id="b2"/>$("#b2").click(function () {//prepend//$("#city").prepend($("#fk"));//prependTo$("#fk").prependTo($("#city"));});// <input type="button" value="将反恐插入到天津后面"  id="b3"/>$("#b3").click(function () {//after//$("#tj").after($("#fk"));//insertAfter$("#fk").insertAfter($("#tj"));});// <input type="button" value="将反恐插入到天津前面"  id="b4"/>$("#b4").click(function () {//before//$("#tj").before($("#fk"));//insertBefore$("#fk").insertBefore($("#tj"));});});</script></head><body><input type="button" value="将反恐放置到city的后面"  id="b1"/><input type="button" value="将反恐放置到city的最前面"  id="b2"/><input type="button" value="将反恐插入到天津后面"  id="b3"/><input type="button" value="将反恐插入到天津前面"  id="b4"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><ul id="love"><li id="fk" name="fankong">反恐</li><li id="xj" name="xingji">星际</li></ul><div id="foo1">Hello1</div></body>
</html>9. remove():移除元素对象.remove():将对象删除掉
10. empty():清空元素的所有后代元素。对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>删除节点</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script  src="../js/jquery-3.3.1.min.js"></script><style type="text/css">div,span{width: 140px;height: 140px;margin: 20px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}div.mini{width: 30px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}div.visible{display:none;}</style><script type="text/javascript">$(function () {// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>$("#b1").click(function () {$("#bj").remove();});// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>$("#b2").click(function () {$("#city").empty();});});</script></head><body><input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/><input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/><ul id="city"><li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li><li id="cq" name="chongqing">重庆</li></ul><p class="hello">Hello</p> how are <p>you?</p> </body>
</html>

7.6 JQuery 案例

7.6.1 案例一：隔行换色

 
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../../js/jquery-3.3.1.min.js"></script><script>//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow$(function () {//1. 获取数据行的奇数行的tr，设置背景色为pink$("tr:gt(1):odd").css("backgroundColor","pink");//2. 获取数据行的偶数行的tr,设置背景色为yellow$("tr:gt(1):even").css("backgroundColor","yellow");});</script></head><body><table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>0</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>1</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>2</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>

7.6.2 案例二：全选和全不选

 
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../../js/jquery-3.3.1.min.js"></script><script>//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可function selectAll(obj){//获取下边的复选框$(".itemSelect").prop("checked",obj.checked);}</script></head><body><table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr><th><input type="checkbox" οnclick="selectAll(this)" ></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>

7.6.3 案例三：QQ表情选择

 
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>QQ表情选择</title><script  src="../../js/jquery-3.3.1.min.js"></script><style type="text/css">*{margin: 0;padding: 0;list-style: none;}.emoji{margin:50px;}ul{overflow: hidden;}li{float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img{ cursor: pointer; }</style><script>//需求：点击qq表情，将其追加到发言框中$(function () {//1.给img图片添加onclick事件$("ul img").click(function(){//2.追加到p标签中即可。$(".word").append($(this).clone());});});</script>
</head>
<body><div class="emoji"><ul><li><img src="img/01.gif" height="22" width="22" alt="" /></li><li><img src="img/02.gif" height="22" width="22" alt="" /></li><li><img src="img/03.gif" height="22" width="22" alt="" /></li><li><img src="img/04.gif" height="22" width="22" alt="" /></li><li><img src="img/05.gif" height="22" width="22" alt="" /></li><li><img src="img/06.gif" height="22" width="22" alt="" /></li><li><img src="img/07.gif" height="22" width="22" alt="" /></li><li><img src="img/08.gif" height="22" width="22" alt="" /></li><li><img src="img/09.gif" height="22" width="22" alt="" /></li><li><img src="img/10.gif" height="22" width="22" alt="" /></li><li><img src="img/11.gif" height="22" width="22" alt="" /></li><li><img src="img/12.gif" height="22" width="22" alt="" /></li></ul><p class="word"><strong>请发言：</strong><img src="img/12.gif" height="22" width="22" alt="" /></p></div>
</body>
</html>

7.6.4 案例四：下拉列表选中条目左右移动

 
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script  src="../../js/jquery-3.3.1.min.js"></script><style>#leftName , #btn,#rightName{float: left;width: 100px;height: 300px;}#toRight,#toLeft{margin-top:100px ;margin-left:30px;width: 50px;}.border{height: 500px;padding: 100px;}</style><script>//需求：实现下拉列表选中条目左右选择功能$(function () {//toRight$("#toRight").click(function () {//获取右边的下拉列表对象，append(左边下拉列表选中的option)$("#rightName").append($("#leftName > option:selected"));});//toLeft$("#toLeft").click(function () {//appendTo   获取右边选中的option，将其移动到左边下拉列表中$("#rightName > option:selected").appendTo($("#leftName"));});});</script></head><body><div class="border"><select id="leftName" multiple="multiple"><option>张三</option><option>李四</option><option>王五</option><option>赵六</option></select><div id="btn"><input type="button" id="toRight" value="-->"><br><input type="button" id="toLeft" value="<--"></div><select id="rightName" multiple="multiple"><option>钱七</option></select></div></body>
</html>

8. JQuery 高级

8.1 动画——三种方式显示和隐藏元素

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

    2. 遍历1. js的遍历方式* for(初始化值;循环结束条件;步长)2. JQuery的遍历方式1. JQuery对象.each(callback)1. 语法：jquery对象.each(function(index,element){});* index:就是元素在集合中的索引* element：就是集合中的每一个元素对象* this：集合中的每一个元素对象2. 回调函数返回值：* true:如果当前function返回为false，则结束循环(break)。* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)2. $.each(object, [callback])3. for..of: jquery 3.0 版本之后提供的方式for(元素对象 of 容器对象)3. 事件绑定1. jquery标准的绑定方式* jq对象.事件方法(回调函数)；* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。* 表单对象.submit();//让表单提交2. on绑定事件/off解除绑定* jq对象.on("事件名称",回调函数)* jq对象.off("事件名称")* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑3. 事件切换：toggle* jq对象.toggle(fn1,fn2...)* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

    4. 案例1. 广告显示和隐藏广告的自动显示与隐藏

            <!--引入jquery--><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script>/*需求：1. 当页面加载完，3秒后。自动显示广告2. 广告显示5秒后，自动消失。分析：1. 使用定时器来完成。setTimeout (执行一次定时器)2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display3. 使用  show/hide方法来完成广告的显示*///入口函数，在页面加载完成之后，定义定时器，调用这两个方法$(function () {//定义定时器，调用adShow方法 3秒后执行一次setTimeout(adShow,3000);//定义定时器，调用adHide方法，8秒后执行一次setTimeout(adHide,8000);});//显示广告function adShow() {//获取广告div，调用显示方法$("#ad").show("slow");}//隐藏广告function adHide() {//获取广告div，调用隐藏方法$("#ad").hide("slow");}

         <!-- 下方正文部分 --><div id="content">正文部分</div></div></body></html>2. 抽奖<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script language='javascript' type='text/javascript'>/*分析：1. 给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性* 定义数组，存放图片资源路径* 生成随机数。数组索引2. 给结束按钮绑定单击事件1.1 停止定时器1.2 给大相框设置src属性*/var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg",];var startId;//开始定时器的idvar index;//随机角标$(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);//1. 给开始按钮绑定单击事件$("#startID").click(function () {// 1.1 定义循环定时器 20毫秒执行一次startId = setInterval(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);//1.2生成随机角标 0-6index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999//1.3设置小相框的src属性$("#img1ID").prop("src",imgs[index]);},20);});//2. 给结束按钮绑定单击事件$("#stopID").click(function () {//处理按钮是否可以使用的效果$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);// 1.1 停止定时器clearInterval(startId);// 1.2 给大相框设置src属性$("#img2ID").prop("src",imgs[index]).hide();//显示1秒之后$("#img2ID").show(1000);});});

     </head><body><!-- 小像框 --><div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/></div><!-- 大像框 --><divstyle="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/></div><!-- 开始按钮 --><inputid="startID"type="button"value="点击开始"style="width:150px;height:150px;font-size:22px"><!-- 停止按钮 --><inputid="stopID"type="button"value="点击停止"style="width:150px;height:150px;font-size:22px"></body></html>5. 插件：增强JQuery的功能1. 实现方式：1. $.fn.extend(object) * 增强通过Jquery获取的对象的功能  $("#id")2. $.extend(object)* 增强JQeury对象自身的功能  $/jQuery

9. AJAX

9.1 AJAX概念


1. 概念： ASynchronous JavaScript And XML   异步的JavaScript 和 XML
2. 异步和同步：客户端和服务器端相互通信的基础上* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术 [1]
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
提升用户的体验

异步和同步

9.2 AJAX 实现方式

9.2.1 JS实现方式（了解）

 
1. 原生的JS实现方式（了解）
//1.创建核心对象
var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立连接/*参数：1. 请求方式：GET、POST* get方式，请求参数在URL后边拼接。send方法为空参* post方式，请求参数在send方法中定义2. 请求的URL：3. 同步或异步请求：true（异步）或 false（同步）*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3.发送请求xmlhttp.send();//4.接受并处理来自服务器的响应结果//获取方式 ：xmlhttp.responseText//什么时候获取？当服务器响应成功后再获取//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。xmlhttp.onreadystatechange=function(){//判断readyState就绪状态是否为4，判断status响应状态码是否为200if (xmlhttp.readyState==4 && xmlhttp.status==200){//获取服务器的响应结果var responseText = xmlhttp.responseText;alert(responseText);}}

9.2.2 JQeury实现方式

 
2. JQeury实现方式
1. $.ajax()* 语法：$.ajax({键值对});//使用$.ajax()发送异步请求$.ajax({url:"ajaxServlet1111" , // 请求路径type:"POST" , //请求方式//data: "username=jack&age=23",//请求参数data:{"username":"jack","age":23},success:function (data) {alert(data);},//响应成功后的回调函数error:function () {alert("出错啦...")},//表示如果请求响应出现错误，会执行的回调函数dataType:"text"//设置接受到的响应数据的格式});
2. $.get()：发送get请求* 语法：$.get(url, [data], [callback], [type])* 参数：* url：请求路径* data：请求参数* callback：回调函数* type：响应结果的类型3. $.post()：发送post请求* 语法：$.post(url, [data], [callback], [type])* 参数：* url：请求路径* data：请求参数* callback：回调函数* type：响应结果的类型

10. Maven

11. JSON

11.1 JSON概念

 
1. 概念： JavaScript Object Notation        JavaScript对象表示法Person p = new Person();p.setName("张三");p.setAge(23);p.setGender("男");var p = {"name":"张三","age":23,"gender":"男"};json现在多用于存储和交换文本信息的语法进行数据的传输JSON 比 XML 更小、更快，更易解析。

11.2 JSON基本语法

 
2.1  语法基本规则
2.1.1 数据在键/值对中：json数据是由键值对构成的1.键用引号(单双都行)引起来，也可以不使用引号2.值的取值类型：1. 数字（整数或浮点数）2. 字符串（在双引号中）3. 逻辑值（true 或 false）4. 数组（在方括号中）   {"persons":[{},{}]}5. 对象（在花括号中） {"address":{"province"："陕西"....}}6. null
2.1.2 数据由逗号分隔：多个键值对由逗号分隔3.花括号保存对象：使用{}定义json 格式4.方括号保存数组：[]5.代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//1.定义基本格式var person = {"name": "张三", age: 23, 'gender': true};//获取name的值//var name = person.name;var name = person["name"];// alert(name);//alert(person);//2.嵌套格式   {}———> []var persons = {"persons": [{"name": "张三", "age": 23, "gender": true},{"name": "李四", "age": 24, "gender": true},{"name": "王五", "age": 25, "gender": false}]};// alert(persons);//获取王五值var name1 = persons.persons[2].name;// alert(name1);//2.嵌套格式   []———> {}var ps = [{"name": "张三", "age": 23, "gender": true},{"name": "李四", "age": 24, "gender": true},{"name": "王五", "age": 25, "gender": false}];//获取李四值//alert(ps);alert(ps[1].name);</script>
</head>
<body>
</body>
</html>

11.3 JSON获取数据

 
2. 获取数据:1. json对象.键名2. json对象["键名"]3. 数组对象[索引]4. 遍历//1.定义基本格式var person = {"name": "张三", age: 23, 'gender': true};var ps = [{"name": "张三", "age": 23, "gender": true},{"name": "李四", "age": 24, "gender": true},{"name": "王五", "age": 25, "gender": false}];//获取person对象中所有的键和值//for in 循环/* for(var key in person){//alert(key + ":" + person.key);这样的方式获取不行。因为相当于  person."name"alert(key+":"+person[key]);}*///获取ps中的所有值for (var i = 0; i < ps.length; i++) {var p = ps[i];for(var key in p){alert(key+":"+p[key]);}}

11.3 JSON数据和Java对象相互转换

11.3.1 JSON解析器

 
常见的解析器：Jsonlib，Gson，fastjson，jackson(SpringMVC内置的解析器)

11.3.2 JSON转为Java对象

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

11.3.3 Java对象转换JSON

 
2. Java对象转换JSON
2.1 jackson的使用步骤：1. 导入jackson的相关jar包
(jackson-annotations-2.2.3.jar\jackson-core-2.2.3.jar\jackson-databind-2.2.3.jar)2. 创建Jackson核心对象 ObjectMapper3. 调用ObjectMapper的相关方法进行转换

 
3. 转换方法：writeValue(参数1，obj):参数1：File：将obj对象转换为JSON字符串，并保存到指定的文件中Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中writeValueAsString(obj):将对象转为json字符串4. 注解：1. @JsonIgnore：排除属性——被排除属性的键值对就不会被转成json字符串2. @JsonFormat：属性值得格式化@JsonFormat(pattern = "yyyy-MM-dd")5. 复杂java对象转换：1. List：数组2. Map：对象格式一致

11.3.4 代码——Java对象&JSON 相互转换

 
1.Person类（Java对象）
package cn.itcast.domain;
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
public class Person {private String name;private int age ;private String gender;//@JsonIgnore // 忽略该属性@JsonFormat(pattern = "yyyy-MM-dd")private Date birthday;public Date getBirthday() {return birthday;}public void setBirthday(Date birthday) {this.birthday = birthday;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}@Overridepublic String toString() {return "Person{" +"name='" + name + '\'' +", age=" + age +", gender='" + gender + '\'' +'}';}
}

 
2.JacksonTest测试类：
package cn.itcast.test;
import cn.itcast.domain.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.io.FileWriter;
import java.util.*;
public class JacksonTest {//Java对象转为JSON字符串@Testpublic void test1() throws Exception {//1.创建Person对象Person p  = new Person();p.setName("张三");p.setAge(23);p.setGender("男");//2.创建Jackson的核心对象  ObjectMapperObjectMapper mapper = new ObjectMapper();//3.转换
/*
转换方法：writeValue(参数1，obj):参数1：File：将obj对象转换为JSON字符串，并保存到指定的文件中Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中writeValueAsString(obj):将对象转为json字符串*/String json = mapper.writeValueAsString(p);//{"name":"张三","age":23,"gender":"男"}//System.out.println(json);//{"name":"张三","age":23,"gender":"男"}//writeValue，将数据写到d://a.txt文件中//mapper.writeValue(new File("d://a.txt"),p);//writeValue.将数据关联到Writer中mapper.writeValue(new FileWriter("d://b.txt"),p);}@Testpublic void test2() throws Exception {//1.创建Person对象Person p = new Person();p.setName("张三");p.setAge(23);p.setGender("男");p.setBirthday(new Date());//2.转换ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(p);System.out.println(json);//{"name":"张三","age":23,"gender":"男","birthday":1530958029263}//{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}}@Testpublic void test3() throws Exception {//1.创建Person对象Person p = new Person();p.setName("张三");p.setAge(23);p.setGender("男");p.setBirthday(new Date());Person p1 = new Person();p1.setName("张三");p1.setAge(23);p1.setGender("男");p1.setBirthday(new Date());Person p2 = new Person();p2.setName("张三");p2.setAge(23);p2.setGender("男");p2.setBirthday(new Date());//创建List集合List<Person> ps = new ArrayList<Person>();ps.add(p);ps.add(p1);ps.add(p2);//2.转换ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(ps);// [{},{},{}]//[{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"张三","age":23,"gender":"男","birthday":"2018-07-07"}]System.out.println(json);}@Testpublic void test4() throws Exception {//1.创建map对象Map<String,Object> map = new HashMap<String,Object>();map.put("name","张三");map.put("age",23);map.put("gender","男");//2.转换ObjectMapper mapper = new ObjectMapper();String json = mapper.writeValueAsString(map);//{"name":"张三","age":23,"gender":"男"}System.out.println(json);//{"gender":"男","name":"张三","age":23}}//演示 JSON字符串转为Java对象@Testpublic void test5() throws Exception {//1.初始化JSON字符串（转义字符\用来转化双引号）String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";//2.创建ObjectMapper对象ObjectMapper mapper = new ObjectMapper();//3.转换为Java对象 Person对象Person person = mapper.readValue(json, Person.class);System.out.println(person);}}

11.4 案例——校验用户名是否存在

 
校验用户名是否存在
1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：1. $.get(type):将最后一个参数type指定为"json"2. 在服务器端设置MIME类型response.setContentType("application/json;charset=utf-8");

12. Redis

12.1 NoSQL简介

12.1.1 NoSQL概念

 
1. 概念： redis是一款高性能的NOSQL系列的非关系型数据库
1.1.什么是NOSQLNoSQL(NoSQL = Not Only SQL)，意即“不仅仅是SQL”，是一项全新的数据库理念，泛指非关系型的数据库。随着互联网web2.0网站的兴起，传统的关系数据库在应付web2.0网站，特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心，暴露了很多难以克服的问题，而非关系型的数据库则由于其本身的特点得到了非常迅速的发展。NoSQL数据库的产生就是为了解决大规模数据集合多重数据种类带来的挑战，尤其是大数据应用难题。

12.1.2 NOSQL和关系型数据库比较

 
1.1.1.  NOSQL和关系型数据库比较
NOSQL优点：1）成本：nosql数据库简单易部署，基本都是开源软件，不需要像使用oracle那样花费大量成本购买使用，相比关系型数据库价格便宜。2）查询速度：nosql数据库将数据存储于缓存之中，关系型数据库将数据存储在硬盘中，自然查询速度远不及nosql数据库。3）存储数据的格式：nosql的存储格式是key,value形式、文档形式、图片形式等等，所以可以存储基础类型以及对象或者是集合等各种格式，而数据库则只支持基础类型。4）扩展性：关系型数据库有类似join这样的多表查询机制的限制导致扩展很艰难。NOSQL缺点：1）维护的工具和资料有限，因为nosql是属于新的技术，不能和关系型数据库10几年的技术同日而语。2）不提供对sql的支持，如果不支持sql这样的工业标准，将产生一定用户的学习和使用成本。3）不提供关系型数据库对事务的处理。

关系型数据库和非关系型数据库对比：

    1.1.2.  非关系型数据库的优势：1）性能NOSQL是基于键值对的，可以想象成表中的主键和值的对应关系，而且不需要经过SQL层的解析，所以性能非常高。2）可扩展性同样也是因为基于键值对，数据之间没有耦合性，所以非常容易水平扩展。1.1.3.  关系型数据库的优势：1）复杂查询可以用SQL语句方便的在一个表以及多个表之间做非常复杂的数据查询。2）事务支持使得对于安全性能很高的数据访问要求得以实现。对于这两类数据库，对方的优势就是自己的弱势，反之亦然。1.1.4.   总结关系型数据库与NoSQL数据库并非对立而是互补的关系，即通常情况下使用关系型数据库，在适合使用NoSQL的时候使用NoSQL数据库，让NoSQL数据库对关系型数据库的不足进行弥补。一般会将数据存储在关系型数据库中，在nosql数据库中备份存储关系型数据库的数据

12.2 主流的NOSQL产品

 
1.2.主流的NOSQL产品•  键值(Key-Value)存储数据库相关产品： Tokyo Cabinet/Tyrant、Redis、Voldemort、Berkeley DB典型应用： 内容缓存，主要用于处理大量数据的高访问负载。 数据模型： 一系列键值对优势： 快速查询劣势： 存储的数据缺少结构化• 列存储数据库相关产品：Cassandra, HBase, Riak典型应用：分布式的文件系统数据模型：以列簇式存储，将同一列数据存在一起优势：查找速度快，可扩展性强，更容易进行分布式扩展劣势：功能相对局限• 文档型数据库相关产品：CouchDB、MongoDB典型应用：Web应用（与Key-Value类似，Value是结构化的）数据模型： 一系列键值对优势：数据结构要求不严格劣势： 查询性能不高，而且缺乏统一的查询语法• 图形(Graph)数据库相关数据库：Neo4J、InfoGrid、Infinite Graph典型应用：社交网络数据模型：图结构优势：利用图结构相关算法。劣势：需要对整个图做计算才能得出结果，不容易做分布式的集群方案。

12.3 Redis概念 & 应用场景 & 下载安装

 
1.3 什么是RedisRedis是用C语言开发的一个开源的高性能键值对（key-value）数据库，官方提供测试数据，50个并发执行100000个请求,读的速度是110000次/s,写的速度是81000次/s ，且Redis通过提供多种键值数据类型来适应不同场景下的存储需求，目前为止Redis支持的键值数据类型如下：1) 字符串类型 string2) 哈希类型 hash3) 列表类型 list4) 集合类型 set5) 有序集合类型 sortedset
1.3.1 redis的应用场景•   缓存（数据查询、短连接、新闻内容、商品内容等等）• 聊天室的在线好友列表• 任务队列。（秒杀、抢购、12306等等）• 应用排行榜•  网站访问统计• 数据过期处理（可以精确到毫秒•  分布式集群架构中的session分离

 
2. 下载安装1. 官网：https://redis.io2. 中文网：http://www.redis.net.cn/3. 解压直接可以使用：* redis.windows.conf：配置文件* redis-cli.exe：redis的客户端* redis-server.exe：redis服务器端

12.4 redis的数据结构 & 命令操作

 
1. redis的数据结构：redis存储的是：key,value格式的数据，其中key都是字符串，value有5种不同的数据结构value的数据结构：1) 字符串类型 string2) 哈希类型 hash ： map格式  3) 列表类型 list ： linkedlist格式。支持重复元素4) 集合类型 set  ： 不允许重复元素5) 有序集合类型 sortedset：不允许重复元素，且元素有顺序

 
2. 字符串类型 string1. 存储： set key value127.0.0.1:6379> set username zhangsanOK2. 获取： get key127.0.0.1:6379> get username"zhangsan"3. 删除： del key127.0.0.1:6379> del age(integer) 1
3. 哈希类型 hash1. 存储： hset key field value127.0.0.1:6379> hset myhash username lisi(integer) 1127.0.0.1:6379> hset myhash password 123(integer) 12. 获取： * hget key field: 获取指定的field对应的值127.0.0.1:6379> hget myhash username"lisi"* hgetall key：获取所有的field和value127.0.0.1:6379> hgetall myhash1) "username"2) "lisi"3) "password"4) "123"3. 删除： hdel key field127.0.0.1:6379> hdel myhash username(integer) 14. 列表类型 list:可以添加一个元素到列表的头部（左边）或者尾部（右边）1. 添加：1. lpush key value: 将元素加入列表左表2. rpush key value：将元素加入列表右边127.0.0.1:6379> lpush myList a(integer) 1127.0.0.1:6379> lpush myList b(integer) 2127.0.0.1:6379> rpush myList c(integer) 32. 获取：* lrange key start end ：范围获取127.0.0.1:6379> lrange myList 0 -11) "b"2) "a"3) "c"3. 删除：* lpop key： 删除列表最左边的元素，并将元素返回* rpop key： 删除列表最右边的元素，并将元素返回

 
5. 集合类型 set ： 不允许重复元素1. 存储：sadd key value127.0.0.1:6379> sadd myset a(integer) 1127.0.0.1:6379> sadd myset a(integer) 02. 获取：smembers key:获取set集合中所有元素127.0.0.1:6379> smembers myset1) "a"3. 删除：srem key value:删除set集合中的某个元素 127.0.0.1:6379> srem myset a(integer) 1
6. 有序集合类型 sortedset：不允许重复元素，且元素有顺序.每个元素都会关联一个
double类型的分数。redis正是通过分数来为集合中的成员进行从小到大的排序。1. 存储：zadd key score value127.0.0.1:6379> zadd mysort 60 zhangsan(integer) 1127.0.0.1:6379> zadd mysort 50 lisi(integer) 1127.0.0.1:6379> zadd mysort 80 wangwu(integer) 12. 获取：zrange key start end [withscores]127.0.0.1:6379> zrange mysort 0 -11) "lisi"2) "zhangsan"3) "wangwu"127.0.0.1:6379> zrange mysort 0 -1 withscores1) "zhangsan"2) "60"3) "wangwu"4) "80"5) "lisi"6) "500"3. 删除：zrem key value127.0.0.1:6379> zrem mysort lisi(integer) 17. 通用命令1. keys * : 查询所有的键2. type key ： 获取键对应的value的类型3. del key：删除指定的key value

12.5 redis的持久化

 
4. 持久化
4.1. redis是一个内存数据库，当redis服务器重启，获取电脑重启，数据会丢失，我们可以将redis内存中的数据持久化保存到硬盘的文件中。
4.2. redis持久化机制——两种机制（RDB和AOF）
4.2.1. RDB：默认方式，不需要进行配置，默认就使用这种机制* 在一定的间隔时间中，检测key的变化情况，然后持久化数据1. 编辑redis.windwos.conf文件#   after 900 sec (15 min) if at least 1 key changedsave 900 1#   after 300 sec (5 min) if at least 10 keys changedsave 300 10#   after 60 sec if at least 10000 keys changedsave 60 100002. 重新启动redis服务器，并在命令行指定配置文件名称
D:\JavaWeb2018\day23_redis\资料\redis\windows-64\redis-2.8.9>redis-server.exe redis.windows.conf   4.2.2. AOF：日志记录的方式，可以记录每一条命令的操作。可以每一次命令操作后，持久化数据1. 编辑redis.windwos.conf文件appendonly no（关闭aof） --> appendonly yes （开启aof）# appendfsync always ： 每一次操作都进行持久化appendfsync everysec ： 每隔一秒进行一次持久化# appendfsync no   ： 不进行持久化

12.6 Java客户端 Jedis

12.6.1 Jedis快速入门

 
5. Java客户端 Jedis
* Jedis: 一款java操作redis数据库的工具.
* 使用步骤：1. 下载jedis的jar包2. 使用//1. 获取连接Jedis jedis = new Jedis("localhost",6379);//2. 操作jedis.set("username","zhangsan");//3. 关闭连接jedis.close();

12.6.2 Jedis操作redis中的数据结构

 
* Jedis操作各种redis中的数据结构
1) 字符串类型 stringsetget//1. 获取连接Jedis jedis = new Jedis();//如果使用空参构造，默认值 "localhost",6379端口//2. 操作//存储jedis.set("username","zhangsan");//获取String username = jedis.get("username");System.out.println(username);//可以使用setex()方法存储可以指定过期时间的 key valuejedis.setex("activecode",20,"hehe");//将activecode：hehe键值对存入redis，并且20秒后自动删除该键值对//3. 关闭连接jedis.close();2) 哈希类型 hash ： map格式  hsethgethgetAll//1. 获取连接Jedis jedis = new Jedis();//如果使用空参构造，默认值 "localhost",6379端口//2. 操作// 存储hashjedis.hset("user","name","lisi");jedis.hset("user","age","23");jedis.hset("user","gender","female");// 获取hashString name = jedis.hget("user", "name");System.out.println(name);// 获取hash的所有map中的数据Map<String, String> user = jedis.hgetAll("user");// keysetSet<String> keySet = user.keySet();for (String key : keySet) {//获取valueString value = user.get(key);System.out.println(key + ":" + value);}//3. 关闭连接jedis.close();3) 列表类型 list ： linkedlist格式。支持重复元素lpush / rpushlpop / rpoplrange start end : 范围获取//1. 获取连接Jedis jedis = new Jedis();//如果使用空参构造，默认值 "localhost",6379端口//2. 操作// list 存储jedis.lpush("mylist","a","b","c");//从左边存jedis.rpush("mylist","a","b","c");//从右边存// list 范围获取List<String> mylist = jedis.lrange("mylist", 0, -1);System.out.println(mylist);// list 弹出String element1 = jedis.lpop("mylist");//cSystem.out.println(element1);String element2 = jedis.rpop("mylist");//cSystem.out.println(element2);// list 范围获取List<String> mylist2 = jedis.lrange("mylist", 0, -1);System.out.println(mylist2);//3. 关闭连接jedis.close();4) 集合类型 set  ： 不允许重复元素saddsmembers:获取所有元素//1. 获取连接Jedis jedis = new Jedis();//如果使用空参构造，默认值 "localhost",6379端口//2. 操作// set 存储jedis.sadd("myset","java","php","c++");// set 获取Set<String> myset = jedis.smembers("myset");System.out.println(myset);//3. 关闭连接jedis.close();
5) 有序集合类型 sortedset：不允许重复元素，且元素有顺序zaddzrange//1. 获取连接Jedis jedis = new Jedis();//如果使用空参构造，默认值 "localhost",6379端口//2. 操作// sortedset 存储jedis.zadd("mysortedset",3,"亚瑟");jedis.zadd("mysortedset",30,"后裔");jedis.zadd("mysortedset",55,"孙悟空");// sortedset 获取Set<String> mysortedset = jedis.zrange("mysortedset", 0, -1);System.out.println(mysortedset);//3. 关闭连接jedis.close();

12.6.3 jedis连接池： JedisPool

12.6.3.1 JedisPool 快速入门

 
* jedis连接池： JedisPool* 使用：1. 创建JedisPool连接池对象2. 调用方法 getResource()方法获取Jedis连接//0.创建一个配置对象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","heihei");//4. 关闭 归还到连接池中jedis.close();

12.6.3.2 jedis 连接池工具类

 
// 连接池工具类
public class JedisPoolUtils {/*  配置文件jedis.properties内容：host=127.0.0.1port=6379maxTotal=50maxIdle=10*/private static JedisPool jedisPool;static{//读取配置文件InputStream is = JedisPoolUtils.class.getClassLoader().getResourceAsStream("jedis.properties");//创建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")));//初始化JedisPooljedisPool = new JedisPool(config,pro.getProperty("host"),Integer.parseInt(pro.getProperty("port")));}/*** 获取连接方法*/public static Jedis getJedis(){return jedisPool.getResource();}}

使用jedis连接池工具类

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

12.7 案例

 
案例需求：1. 提供index.html页面，页面中有一个省份下拉列表2. 当 页面加载完成后 发送ajax请求，加载所有省份* 注意：使用redis缓存一些不经常发生变化的数据。* 数据库的数据一旦发生改变，则需要更新缓存。* 数据库的表执行 增删改的相关操作，需要将redis缓存数据情况，再次存入* 在service对应的增删改方法中，将redis数据删除。

13. Linux

13.1 Linux概述

 
1. Unix简介( 学习Linux之前先了解Unix )• Unix是一个强大的多用户、多任务操作系统。于1969年在AT&T的贝尔实验室开发。• UNIX操作系统是商业版，需要收费，价格比Microsoft Windows正版要贵一些。• UNIX的商标权由国际开放标准组织（The Open Group）所拥有。2. Linux简介• Linux是基于Unix的一种自由和开放源码的操作系统• Linux存在着许多不同的Linux版本，但它们都使用了Linux内核• Linux可安装在各种计算机硬件设备中，比如手机、平板电脑、路由器、台式计算机• 诞生于1991 年10 月5 日。是由芬兰赫尔辛基大学学生Linus Torvalds和后来加入的众多爱好者共同开发完成

Linux 的主要发行版本:

 
3. Linux的历史Linux最初是由芬兰赫尔辛基大学学生Linus Torvalds由于自己不满意教学中使用的MINIX操作系统， 所以在1990年底由于个人爱好设计出了LINUX系统核心。后来发布于芬兰最大的ftp服务器上。用户可以免费下载，所以它的周边的程序越来越多，Linux本身也逐渐发展壮大起来。之后Linux在不到三年的时间里成为了一个功能完善，稳定可靠的操作系统.
4. Linux系统的应用• 服务器系统Web应用服务器、数据库服务器、接口服务器、DNS、FTP等等； • 嵌入式系统路由器、防火墙、手机、PDA、IP 分享器、交换器、家电用品的微电脑控制器等等，• 高性能运算、计算密集型应用Linux有强大的运算能力。• 桌面应用系统• 移动手持系统

 
5. Linux的版本• Linux的版本分为两种：内核版本和发行版本• 内核版本是指在Linus领导下的内核小组开发维护的系统内核的版本号

Linux的主流版本：

13.2 Linux安装

 
视频链接：https://www.bilibili.com/video/BV1qv4y1o79t?p=512&spm_id_from=pageDriver&vd_source=60482f480b98c4a8ef39f39be38a8b56
1．虚拟机安装1.什么是虚拟机• 虚拟机：一台虚拟的电脑.• 虚拟机软件:    VmWare:收费的   VirtualBox:免费的    2.安装VmWare  • 参考《虚拟软件vmware安装.doc》2．CentOS的安装• 参考《CentOS6详细安装文档.doc》

13.3 Linux的远程访问

 
步骤：1．安装一个远程访问的软件:SecureCRT （安装包在资料中）2．连接Linux:需要录入linux的ip地址及用户名密码查看ip地址ifconfig

13.4 Linux的目录结构

13.5 Linux的常用命令

 
1．切换目录命令cd：cd app   切换到app目录cd ..   切换到上一层目录cd /    切换到系统根目录cd ~    切换到用户主目录cd -    切换到上一个所在目录* 使用tab键来补全文件路径

 
2．列出文件列表：ls ll ls(list)是一个非常有用的命令，用来显示当前目录下的内容。配合参数的使用，能以不同的方式显示目录内容格式：ls[参数] [路径或文件名]常用：ls     显示当前目录下的内容ls -a  显示所有文件或目录（包含隐藏的文件）ls -l  缩写成ll* 在linux中以 . 开头的文件都是隐藏的文件

 
3．创建目录(mkdir)和移除目录(rmdir)：mkdir(make directory)命令可用来创建子目录。mkdir app              在当前目录下创建app目录mkdir –p app2/test    级联创建aap2以及test目rmdir(remove directory)命令可用来删除“空”的子目录rmdir app    删除app目录rm -r directory_name 删除非空目录rmdir --ignore-fail-on-non-empty directory_name 删除非空目录

 
4．浏览文件
【cat  用于显示文件的内容】格式：cat[参数]<文件名>* cat yum.conf
【more】用于要显示的内容会超过一个画面长度的情况。按空格键显示下一个画面。回车显示下一行内容。按 q 键退出查看。* more yum.conf
【less】用法和more类似，不同的是less可以通过PgUp、PgDn键来控制。less yum.confPgUp 和 PgDn 进行上下翻页——也可以利用上下键进行查看【tail 用于显示文件后几行的内容】tail命令是在实际使用过程中使用非常多的一个命令用法:tail -10 /etc/passwd    查看后10行数据tail -f catalina.log    动态查看日志* ctrl+c 结束查看

 
5．文件操作：
【rm  删除文件】用法：rm [选项]... 文件...rm a.txt        删除a.txt文件  删除需要用户确认，y/nrm 删除不询问rm -f a.txt     不询问，直接删除rm 删除目录rm -r a         递归删除不询问递归删除（慎用）rm -rf  a       不询问递归删除rm -rf *        删除所有文件rm -rf /*       自杀（删除所有文件）
【cp 将文件从一处复制到另一处】cp(copy)命令可以将文件从一处复制到另一处一般在使用cp命令时将一个文件复制成另一个文件或复制到某目录时需要指定源文件名与目标文件名或目录。cp a.txt b.txt     将a.txt复制为b.txt文件cp a.txt ../       将a.txt文件复制到上一层目录中

 
【mv 移动或者重命名】mv a.txt ../       将a.txt文件移动到上一层目录中mv a.txt b.txt     将a.txt文件重命名为b.txt
【tar 打包或解压】tar命令位于/bin目录下，它能够将用户所指定的文件或目录打包成一个文件，但不做压缩。一般Linux上常用的压缩方式是选用tar将许多文件打包成一个文件，再以gzip压缩命令压缩成xxx.tar.gz(或称为xxx.tgz)的文件。常用参数：-c：创建一个新tar文件-v：显示运行过程的信息-f：指定文件名-z：调用gzip压缩命令进行压缩-t：查看压缩文件的内容-x：解开tar文件打包：tar –cvf xxx.tar ./*打包并且压缩：tar –zcvf xxx.tar.gz ./* 解压 tar –xvf xxx.tartar -zxvf xxx.tar.gz -C /usr/aaa  （大写的C——将解压结果放到指定目录）

 
【find 用于查找符合条件的文件】示例：find / -name “ins*”          查找文件名称是以ins开头的文件find / -name “ins*” –ls find / –user itcast –ls      查找用户itcast的文件find / –user itcast –type d –ls 查找用户itcast的目录find /-perm -777 –type d-ls 查找权限是777的文件

 
【grep 查找文件里符合条件的字符串】用法: grep [选项]... PATTERN [FILE]...示例：grep lang anaconda-ks.cfg  在文件中查找langgrep lang anaconda-ks.cfg –color 高亮显示6．其他常用命令【pwd】显示当前所在目录【touch】创建一个空文件* touch a.txt【clear/ crtl + L】清屏

13.6 Vi和Vim编辑器

 
1．Vim编辑器：在Linux下一般使用vi编辑器来编辑文件。vi既可以查看文件也可以编辑文件。三种模式：命令行、插入、底行模式。切换到命令行模式：按Esc键；切换到插入模式：按 i 、o、a键；i 在当前位置前插入I 在当前行首插入a 在当前位置后插入A 在当前行尾插入o 在当前行之后插入一行O 在当前行之前插入一行切换到底行模式：按 :（冒号）；更多详细用法，查询文档《Vim命令合集.docx》和《vi使用方法详细介绍.docx》打开文件：vim file退出：esc  :q修改文件：输入i进入插入模式保存并退出：esc:wq不保存退出：esc:q!三种进入插入模式：i:在当前的光标所在处插入o:在当前光标所在的行的下一行插入a:在光标所在的下一个字符插入快捷键：dd – 快速删除一行yy - 复制当前行nyy - 从当前行向后复制几行p - 粘贴R – 替换其他技巧：在编辑的时候可以利用:/搜索定位 如搜索:/8080 端口8080  2．重定向输出>和>>>  重定向输出，覆盖原有内容；>> 重定向输出，有追加功能；示例：cat /etc/passwd > a.txt  将输出定向到a.txt中cat /etc/passwd >> a.txt  输出并且追加ifconfig > ifconfig.txt
3．系统管理命令ps 正在运行的某个进程的状态ps –ef  查看所有进程ps –ef | grep ssh 查找某一进程ps -ef | grep java  查询名称中包含java的进程kill 2868  杀掉2868编号的进程kill -9 2868  强制杀死进程4．管道 |管道是Linux命令中重要的一个概念，其作用是将一个命令的输出用作另一个命令的输入。示例ls --help | more  分页查询帮助信息ps –ef | grep java  查询名称中包含java的进程ifconfig | morecat index.html | moreps –ef | grep aio

13.7 Linux的权限命令

 
1．文件权限r:对文件是指可读取内容 对目录是可以lsw:对文件是指可修改文件内容，对目录 是指可以在其中创建或删除子节点(目录或文件)x:对文件是指是否可以运行这个文件，对目录是指是否可以cd进入这个目录

 
2．Linux三种文件类型：普通文件： 包括文本文件、数据文件、可执行的二进制程序文件等。 目录文件： Linux系统把目录看成是一种特殊的文件，利用它构成文件系统的树型结构。  设备文件： Linux系统把每一个设备都看成是一个文件3．文件类型标识普通文件（-）目录（d）符号链接（l）* 进入etc可以查看，相当于快捷方式字符设备文件（c）块设备文件（s）套接字（s）命名管道（p）4．文件权限管理：chmod 变更文件或目录的权限。chmod 755 a.txt chmod u=rwx,g=rx,o=rx a.txt

13.8 Linux上常用网络操作

 
1．主机名配置hostname 查看主机名hostname xxx 修改主机名 重启后无效如果想要永久生效，可以修改/etc/sysconfig/network文件

 
2．IP地址配置ifconfig 查看(修改)ip地址(重启后无效)ifconfig eth0 192.168.12.22 修改ip地址如果想要永久生效    修改 /etc/sysconfig/network-scripts/ifcfg-eth0文件/etc/sysconfig/network-scripts/ifcfg-eth0文件参数：DEVICE=eth0 #网卡名称BOOTPROTO=static #获取ip的方式(static/dhcp/bootp/none)HWADDR=00:0C:29:B5:B2:69 #MAC地址IPADDR=12.168.177.129 #IP地址NETMASK=255.255.255.0 #子网掩码NETWORK=192.168.177.0 #网络地址BROADCAST=192.168.0.255 #广播地址NBOOT=yes #  系统启动时是否设置此网络接口，设置为yes时，系统启动时激活此设备。3．域名映射/etc/hosts文件用于在通过主机名进行访问时做ip地址解析之用相当于windows系统的C:\Windows\System32\drivers\etc\hosts文件的功能

 
4．网络服务管理service network status 查看指定服务的状态service network stop 停止指定服务service network start 启动指定服务service network restart 重启指定服务service --status–all 查看系统中所有后台服务netstat –nltp 查看系统中网络进程的端口监听情况5.防火墙设置防火墙根据配置文件/etc/sysconfig/iptables来控制本机的”出”、”入”网络访问行为。service iptables status 查看防火墙状态service iptables stop 关闭防火墙service iptables start 启动防火墙chkconfig  iptables off 禁止防火墙自启

13.9 Linux上软件安装

13.9.1 Linux安装软件的常见方式

 
1.二进制发布包软件已经针对具体平台编译打包发布，只要解压，修改配置即可
2.RPM包软件已经按照redhat的包管理工具规范RPM进行打包发布，需要获取到相应的软件RPM发布包，然后用RPM命令进行安装缺点：不会自动安装该软件依赖的那些软件包
3.Yum在线安装软件已经以RPM规范打包，但发布在了网络上的一些服务器上，可用yum在线安装服务器上的rpm软件，并且会自动解决软件安装过程中的库依赖问题优点：会自动安装该软件依赖的那些软件包
4.源码编译安装（需要网络的支撑）软件以源码工程的形式发布，需要获取到源码工程后用相应开发工具进行编译打包部署。

13.9.2 上传与下载工具

 
1.FileZilla

 
2.lrzsz可以使用yum安装方式安装 yum install lrzsz注意：必须有网络可以在crt中设置上传与下载目录

上传：

	点击添加、确定后上传

下载

 
3.sftp1.使用alt + p 组合键打开sftp窗口2.使用put 命令上传

    3.使用get命令下载默认下载位置在当前计算的的文档位置

13.9.3 在Linux上安装JDK

 
1.上传JDK到Linux的服务器* 上传JDK* 卸载open-JDK# 查看jdk版本java –version# 查看安装的jdk信息rpm -qa | grep java

    # 卸载jdkrpm -e --nodeps java-1.6.0-openjdk-1.6.0.35-1.13.7.1.el6_6.i686rpm -e --nodeps java-1.7.0-openjdk-1.7.0.79-2.5.5.4.el6.i686
2.在Linux服务器上安装JDK通常将软件安装到/usr/local直接解压就可以tar –xvf  jdk.tar.gz  -C 目标路径tar -xvf jdk-7u71-linux.tar.gz -C ./jdk
3.配置JDK的环境变量.配置环境变量：① vi /etc/profile② 在末尾行添加#set java environmentJAVA_HOME=/usr/local/jdk/jdk1.7.0_71CLASSPATH=.:$JAVA_HOME/lib.tools.jarPATH=$JAVA_HOME/bin:$PATHexport JAVA_HOME CLASSPATH PATH保存退出③source /etc/profile  使更改的配置立即生效

13.9.4 在Linux上安装Mysql

 
1.将mysql的安装文件上传到Linux的服务器将mysql的tar解压将系统自带的mysql卸载rpm –qa | grep mysql rpm -ivh MysQL-server-5.6.22-1.el6.i686.rpm

 
2.安装MYSQL服务端安装命令： rpm -ivh MySQL-server-5-2-1.el6.i686.rpm

 
上面的提示告诉我们root用户的密码第一次是随机生成的
它保存在/root/.mysql_secret中，第一次登录需要修改root密码

 
3.安装MYSQL客户端安装命令： rpm -ivh MysQL-client-5.6.1.el6.i686.rpm查看生成的root密码：cat /root/ .mysql_secret显示密码为：_aBE6Mjkn5bb4s1t尝试登陆mysql:mysql -uroot -p_aBE6Mjkn5bb4s1t报错:原因是没有启动mysql服务需要开启mysql服务:service mysql start登录后执行SQL操作报错原因是第一次操作mysql必须修改root用户的密码设置root用户的密码set password = password('root' );（设root为密码）4.关于mysql远程访问设置为远程用户开放访问权限：grant all privileges on *.* to 'root' @'%' identified by 'root';flush privileges;在linux中很多软件的端口都被”防火墙”限止，需要将防火墙关闭防火墙打开3306端口/sbin/iptables -I INPUT -p tcp --dport 3306 -j ACCEPT/etc/rc.d/init.d/iptables save/etc/init.d/iptables status学习阶段也可以直接将防火墙关闭service iptables stop;

13.9.5 在Linux上安装tomcat

 
1.Tomcat上传到linux上
2.将上传的tomcat解压
3.在tomcat/bin目录下执行 startup.sh（注意防火墙）
4.查看目标 tomcat/logs/catalina.out

13.9.6 在Linux上安装redis

 
1.安装gcc-c++redis是C语言开发安装redis需要先将官网下载的源码进行编译，编译依赖gcc环境。输入命令:   yum install gcc-c++输入y确认下载输入y确认安装安装 gcc 成功！
2.安装redis1.下载rediswget http://download.redis.io/releases/redis-3.0.4.tar.gz2.解压tar -xzvf redis-3.0.4.tar.gz3.编译安装切换至程序目录，并执行make命令编译：cd redis-3.0.4make执行安装命令make PREFIX=/usr/local/redis install  make install安装完成后，会在/usr/local/bin目录下生成下面几个可执行文件，它们的作用分别是：redis-server：Redis服务器端启动程序redis-cli：Redis客户端操作工具。也可以用telnet根据其纯文本协议来操作redis-benchmark：Redis性能测试工具redis-check-aof：数据修复工具redis-check-dump：检查导出工具
3.配置redis1.复制配置文件到/usr/local/redis/bin目录：cd redis-3.0.4cp redis.conf /usr/local/redis/bin4.启动redis1.进入redis/bin目录cd redis/bin2.启动redis服务端./redis-server redis.conf3.克隆新窗口，启动redis客户端./redis-cli

7.9.7 部署Java项目到Linux

 
1. 修改pom配置在pom.xml中添加<finalName> （指定打包后的文件名）修改jdk版本1.7

 
2. 修改项目2.1 druid.properties ：修改字符编码为utf-8

 
2.2 header.html : 改为相对路径跳转

    2.3 route_detail.html ：改为相对路径跳转

 
3. 使用package命令打包

 
4. 将travel.war上传到tomcat中的webapps目录cd tomcat/apache-tomcat-7.0.57/webapps使用rz命令上传traver.war包由于tomcat是启动状态，所以上传到webapps目录后，tomcat会自动将war包解压缩如果没有自动解压，可以重启tomcat也可以通过以下命令查看相关日志：1.克隆一个会话2.切换目录到logs下   cd /usr/local/tomcat/apache-tomcat-7.0.57/logs/3.查看日志文件catalina.outtail -f catalina.out6. 重启tomcat
7. 到出本地mysql数据，并导入linux中的mysql

13.10 linux命令积累

 
查看目录占用内存大小：  du -sh /data/logs/it-mailService-provider/
列出/data/logs/文件夹及其子文件夹下全部文件夹和文件的大小：du -ah /data/logs/

14. Nginx

14.1 Nginx简介

14.1.1 什么是Nginx

 
1.Nginx 是一款高性能的 http 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器
2.由俄罗斯的程序设计师伊戈尔·西索夫（Igor Sysoev）所开发
3.官方测试 nginx 能够支支撑 5 万并发链接，并且 cpu、内存等资源消耗却非常低，运行非常稳定

14.1.2 Nginx 应用场景

 
1、http 服务器。Nginx 是一个 http 服务可以独立提供 http 服务。可以做网页静态服务器。
2、虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。
3、反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群
可以使用 nginx 做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。

14.2 Nginx的安装与启动

14.2.1 Nginx安装前环境准备

 
1、重新准备一台虚拟机作为服务器。比如IP地址为192.168.177.129
2、需要安装 gcc 的环境yum install gcc-c++
3、安装第三方的开发包（ PCRE、zlib、OpenSSL）3.1 安装PCRE yum install -y pcre pcre-devel注：pcre-devel 是使用 pcre 开发的一个二次开发库。nginx 也需要此库PCRE(Perl Compatible Regular Expressions)是一个 Perl 库，包括 perl 兼容的正则表达式库nginx 的 http 模块使用 pcre 来解析正则表达式，所以需要在 linux 上安装 pcre 库3.2 安装zlibyum install -y zlib zlib-develzlib 库提供了很多种压缩和解压缩的方式，nginx 使用 zlib 对 http 包的内容进行 gzip所以需要在 linux 上安装 zlib 库3.3 安装OpenSSLyum install -y openssl openssl-develOpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及 SSL 协议，并提供丰富的应用程序供测试或其它目的使用。nginx 不仅支持 http 协议，还支持 https（即在 ssl 协议上传输 http），所以需要在 linux安装 openssl 库

14.2.2 Nginx下载&安装

 
1、Nginx下载nginx官方网站下载：http://nginx.org/我们课程中使用的版本是 1.8.0 版本。
2、Nginx安装第一步：把 nginx 的源码包nginx-1.8.0.tar.gz上传到 linux 系统第二步：解压缩tar zxvf nginx-1.8.0.tar.gz第三步：进入nginx-1.8.0目录   使用 configure 命令创建一个makeFile 文件，命令如下：./configure \--prefix=/usr/local/nginx \--pid-path=/var/run/nginx/nginx.pid \--lock-path=/var/lock/nginx.lock \--error-log-path=/var/log/nginx/error.log \--http-log-path=/var/log/nginx/access.log \--with-http_gzip_static_module \--http-client-body-temp-path=/var/temp/nginx/client \--http-proxy-temp-path=/var/temp/nginx/proxy \--http-fastcgi-temp-path=/var/temp/nginx/fastcgi \--http-uwsgi-temp-path=/var/temp/nginx/uwsgi \--http-scgi-temp-path=/var/temp/nginx/scgi执行后可以看到Makefile文件第四步：编译make第五步：安装make install3、知识点小贴士 一Makefile是一种配置文件， Makefile 一个工程中的源文件不计数，其按类型、功能、模块分别放在若干个目录中，makefile定义了一系列的规则来指定，哪些文件需要先编译，哪些文件需要后编译，哪些文件需要重新编译，甚至于进行更复杂的功能操作，因为 makefile就像一个Shell脚本一样，其中也可以执行操作系统的命令。
4、知识点小贴士 configure参数./configure \--prefix=/usr \                               指向安装目录--sbin-path=/usr/sbin/nginx \                 指向（执行）程序文件（nginx）--conf-path=/etc/nginx/nginx.conf \           指向配置文件--error-log-path=/var/log/nginx/error.log \   指向log--http-log-path=/var/log/nginx/access.log \   指向http-log--pid-path=/var/run/nginx/nginx.pid \         指向pid--lock-path=/var/lock/nginx.lock \           （安装文件锁定，防止安装文件被别人利用，或自己误操作。）--user=nginx \--group=nginx \--with-http_ssl_module \                       启用ngx_http_ssl_module支持（使支持https请求，需已安装openssl）--with-http_flv_module \                       启用ngx_http_flv_module支持（提供寻求内存使用基于时间的偏移量文件）--with-http_stub_status_module \               启用ngx_http_stub_status_module支持（获取nginx自上次启动以来的工作状态）--with-http_gzip_static_module \               启用ngx_http_gzip_static_module支持（在线实时压缩输出数据流）--http-client-body-temp-path=/var/tmp/nginx/client/ \ 设定http客户端请求临时文件路径--http-proxy-temp-path=/var/tmp/nginx/proxy/ \        设定http代理临时文件路径--http-fastcgi-temp-path=/var/tmp/nginx/fcgi/ \       设定http fastcgi临时文件路径--http-uwsgi-temp-path=/var/tmp/nginx/uwsgi \         设定http uwsgi临时文件路径--http-scgi-temp-path=/var/tmp/nginx/scgi \           设定http scgi临时文件路径--with-pcre                                           启用pcre库

14.2.3 Nginx启动与访问

 
注意：1、启动nginx 之前，上边将临时文件目录指定为/var/temp/nginx/client， 需要在/var  下创建此目录   mkdir /var/temp/nginx/client -p2、进入到Nginx目录下的sbin目录cd /usr/local/nginx/sbin输入命令启动Nginx./nginx启动后查看进程ps aux|grep nginx地址栏输入虚拟机的IP即可访问（默认为80端口——直接在浏览器输入IP即可访问）关闭 nginx：./nginx -s stop或者./nginx -s quit重启 nginx：1、先关闭后启动。2、刷新配置文件：./nginx -s reload

14.3 Nginx静态网站部署

 
1、静态网站的部署将/资料/静态页面/index目录下的所有内容 上传到服务器的/usr/local/nginx/html下即可访问 2、配置虚拟主机虚拟主机，也叫“网站空间”，就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器。虚拟主机技术极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代的一种新型经济形式。
2.1、端口绑定（1）上传静态网站：将/资料/静态页面/index目录上传至  /usr/local/nginx/index下将/资料/静态页面/regist目录上传至  /usr/local/nginx/regist下（2）修改Nginx 的配置文件：vim /usr/local/nginx/conf/nginx.confserver {listen       81;            # 监听的端口server_name  localhost;     # 域名或iplocation / {             # 访问路径配置root   index;           # 根目录index  index.html index.htm;        # 默认首页}error_page   500 502 503 504  /50x.html;# 错误页面location = /50x.html {root   html;}}server {listen       82;         # 监听的端口server_name  localhost;  # 域名或iplocation / {          # 访问路径配置root   regist;       # 根目录index  regist.html;  # 默认首页}error_page   500 502 503 504  /50x.html;# 错误页面location = /50x.html {root   html;}    }（3）访问测试：地址栏输入http://192.168.177.129/:81 可以看到首页面地址栏输入http://192.168.177.129/:82 可以看到注册页面（4）补充：editplus的使用：当修改内容比较多时，vim命令的方式很不方便可以通过editplus连接服务器，对相应文件进行编辑editplus连接服务器操作步骤如下：

<1>	<2>	<3>
<4>	<5>	<6>
修改完后按Ctrl+C保存	点击OK完成修改

 
2.2 域名绑定什么是域名：域名（Domain Name），是由一串用“点”分隔的字符组成的Internet上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置，地理上的域名，指代有行政自主权的一个地方区域）。域名是一个IP地址上有“面具” 。域名的目的是便于记忆和沟通的一组服务器的地址（网站，电子邮件，FTP等）。域名作为力所能及难忘的互联网参与者的名称。域名按域名系统（DNS）的规则流程组成。在DNS中注册的任何名称都是域名。域名用于各种网络环境和应用程序特定的命名和寻址目的。通常，域名表示互联网协议（IP）资源，例如用于访问因特网的个人计算机，托管网站的服务器计算机，或网站本身或通过因特网传送的任何其他服务。世界上第一个注册的域名是在1985年1月注册的。

 
域名级别：（1）顶级域名顶级域名又分为两类：例如：baidu.com一是国家顶级域名（national top-level domainnames，简称nTLDs），200多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是cn，美国是us，日本是jp等；二是国际顶级域名（international top-level domain names，简称iTDs），例如表示工商企业的 .Com .Top，表示网络提供商的.net，表示非盈利组织的.org，表示教育的.edu，以及没有限制的中性域名如.xyz等。大多数域名争议都发生在com的顶级域名下，因为多数公司上网的目的都是为了赢利。但因为自2014年以来新顶级域名的发展，域名争议案件数量增长幅度越来越大[5]  。为加强域名管理，解决域名资源的紧张，Internet协会、Internet分址机构及世界知识产权组织（WIPO）等国际组织经过广泛协商， 在原来三个国际通用顶级域名：（com）的基础上，新增加了7个国际通用顶级域名：firm（公司企业）、store（销售公司或企业）、Web（突出WWW活动的单位）、arts（突出文化、娱乐活动的单位）、rec (突出消遣、娱乐活动的单位）、info(提供信息服务的单位）、nom(个人），并在世界范围内选择新的注册机构来受理域名注册申请。（2）二级域名例如.top，com，edu，gov，net等。二级域名是指顶级域名之下的域名，在国际顶级域名下，它是指域名注册人的网上名称，例如 ibm，yahoo，microsoft等；在国家顶级域名下，它是表示注册企业类别的符号，（3）三级域名例如：item.map.baidu.com三级域名用字母（ A～Z，a～z，大小写等）、数字（0～9）和连接符（－）组成， 各级域名之间用实点（.）连接，三级域名的长度不能超过20个字符。如无特殊原因，建议采用申请人的英文名（或者缩写）或者汉语拼音名 （或者缩写） 作为三级域名，以保持域名的清晰性和简洁性。

  域名与IP绑定：一个域名对应一个 ip 地址，一个 ip 地址可以被多个域名绑定。本地测试可以修改 hosts 文件（C:\Windows\System32\drivers\etc）可以配置域名和 ip 的映射关系，如果 hosts 文件中配置了域名和 ip 的对应关系，不需要走dns 服务器。192.168.177.129 www.hmtravel.com192.168.177.129 regist.hmtravel.com做好域名指向后，修改nginx配置文件   server {listen       80;server_name  www.hmtravel.com;location / {root   cart;index  cart.html;}}server {listen       80;server_name  regist.hmtravel.com;location / {root   search;index  search.html;}}执行以下命令，刷新配置[root@localhost sbin]# ./nginx -s reload测试：地址栏输入http://www.hmtravel.com/

14.4 Nginx反向代理

14.4.1 反向代理简介

 
1、反向代理反向代理（Reverse Proxy）方式是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。

正向代理: 正向代理是针对你的客户端
反向代理: 反向代理是针对服务器的——反向代理代理服务端

14.4.2 配置反向代理

 
1、配置反向代理-准备工作（1） 将travel案例部署到tomcat中（ROOT目录），上传到服务器（2）启动TOMCAT，输入网址http://192.168.177.129:8080 可以看到网站首页2、配置反向代理（1）在Nginx主机修改 Nginx配置文件upstream tomcat-travel{server 192.168.177.129:8080;  #被代理服务器的IP和端口}server {listen       80;               # 监听的端口server_name  www.hmtravel.com; # 域名或iplocation / {                # 访问路径配置# root   index;            # 根目录proxy_pass http://tomcat-travel;index  index.html index.htm; # 默认首页}}（2）重新启动Nginx 然后用浏览器测试：http://www.hmtravel.com（此域名须配置域名指向）

14.5 负载均衡

14.5.1 什么是负载均衡

 
1、负载均衡： 建立在现有网络结构之上，它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。负载均衡，英文名称为Load Balance，其意思就是分摊到多个操作单元上进行执行，例如Web服务器、FTP服务器、企业关键应用服务器和其它关键任务服务器等，从而共同完成工作任务。

14.5.2 配置负载均衡

 
2、配置负载均衡-准备工作（1）将刚才的存放工程的tomcat复制三份，在tomcat的配置文件conf/server.xml中修改端口分别为8080 ，8081，8082 （2）分别启动这三个tomcat服务（3）为了能够区分是访问哪个服务器的网站，可以在首页标题加上标记以便区分
视频地址：
https://www.bilibili.com/video/BV1qv4y1o79t?p=545&spm_id_from=pageDriver&vd_source=60482f480b98c4a8ef39f39be38a8b56

将刚才的存放工程的tomcat复制三份

 
3、配置负载均衡修改 Nginx配置文件：upstream tomcat-travel {server 192.168.177.129:8080; #被代理服务器的IP和端口server 192.168.177.129:8081;server 192.168.177.129:8082;}server {listen       80;                     # 监听的端口server_name  www.hmtravel.com;       # 域名或iplocation / {                      # 访问路径配置# root   index;                  # 根目录proxy_pass http://tomcat-travel;index  index.html index.htm;     # 默认首页}error_page   500 502 503 504  /50x.html; # 错误页面location = /50x.html {root   html;}}

   地址栏输入http:// www.hmtravel.com /  刷新观察每个网页的标题，看是否不同。经过测试，三台服务器出现的概率各为33.3333333%，交替显示如果其中一台服务器性能比较好，想让其承担更多的压力，可以设置权重。比如想让NO.1出现次数是其它服务器的2倍，则修改配置如下：upstream tomcat-travel {server 192.168.177.129:8080;server 192.168.177.129:8081 weight=2;server 192.168.177.129:8082;}经过测试，每刷新四次，有两次是8081

说明：本内容整理自B站黑马程序员Java web课程视频及文档>>B站黑马程序员Java web课程视频

JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx相关推荐

Spring MVC Controller与jquery ajax请求处理json
在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: var cmd = {orders:[{"storeId&q ...
07【Listener、Ajax、Json】
文章目录 07[Listener.Ajax.Json] 一.监听器 1.1 监听器的类别 1.1.1 监听域对象 1.1.2 监听属性 1.3.3 监听session对象状态 1.2 监听案例 1.2 ...
基于javaweb的宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql)
基于javaweb的宠物商城带后台管理系统(java+ssm+jsp+jquery+ajax+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/id ...
DW-CHEN的Java点滴记录JavaWeb之HTTP协议/Servlet/Cookie/Session/JSP/EL/JSTL/Filter/Listener
JavaEE规范 JavaEE(Java Enterprise Edition):Java企业版,早期叫J2EE(J2EE的版本从1.0到1.4结束):现在Java版本从JavaEE 5开始 Java ...
《Go语言圣经》学习笔记第四章复合数据类型
<Go语言圣经>学习笔记第四章复合数据类型目录数组 Slice Map 结构体 JSON 文本和HTML模板注:学习<Go语言圣经>笔记,PDF点击下载,建议看书. ...
花书笔记：第07章深度学习中的正则化
花书笔记:第07章深度学习中的正则化 7.1 参数范数惩罚参数范数惩罚 Ω ( θ ) \Omega(\theta) Ω(θ) α ∈ [ 0 , ∞ ) \alpha \in [0,\infty ...
MySQL笔记：第07章_InnoDB数据存储结构
第07章_InnoDB数据存储结构 1.数据库的存储结构:页 1.1磁盘与内存交互基本单位:页 1.2页结构概述 1.3页的大小 1.4页的上层结构 2.页的内部结构第1部分:File Header ...
【javaweb笔记1】自用
javaweb笔记一.tomcat 安装 1. 官网下载 2.安装 3.卸载 4.启动 5.控制台中文乱码 6.闪退 7.IDEA使用tomcat的maven插件 7.IDEA不使用插件配置 mav ...
JavaWeb笔记-备份下
JavaWeb笔记-备份下 html 简介: 超文本标记语言 Hyper Text Markup Language 网页语言超文本:超出文本的范畴,使用html可以轻松实现标记:html所有操作都 ...

JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx

JavaWeb笔记：第07章 MVC |EL |JST |Filter |Listener |JQuery |AJAX |Maven |JSON |Redis |Linux |Nginx

1. MVC 开发模式

2. EL表达式

2.1 概念 & 作用 & 语法

2.2 EL表达式的功能及使用

2.2.1 功能一：运算

2.2.2 功能二：获取值

3.3 EL表达式中的隐式对象

3. JSTL

3.1 JSTL概念 & 作用 & 使用

3.2 常用的JSTL标签—— if | choose | foreach

3.2.1 if标签

3.2.2 choose标签

3.2.3 foreach标签

3.3 案例练习

4. 三层架构：软件设计架构

4.1 概念 & 示意图

4.2 案例：用户信息列表展示

5. Filter：过滤器

5.1 概念 & 快速入门

5.2 Filter过滤器细节

5.3 Filter过滤器案例

5.3.1 案例一 ：登录验证

5.3.2 案例二 ：敏感词汇过滤

5.3.2.1 需求 & 分析

5.3.2.2 知识点补充——代理模式

5.3.2.3 代理模式例程

5.3.2.4 敏感词过滤代码

6. Listener：监听器

6.1 概念 & ServletContextListener接口

6.2 Listener 代码

7. JQuery 基础

7.1 JQuery 概念

7.2 JQuery 快速入门

7.3 JQuery对象与JS对象区别和转换

7.4 JQuery选择器

7.4.1 基本操作学习

7.4.2 选择器分类

7.4.2.1 基本选择器

7.4.2.2 层级选择器

7.4.2.3 属性选择器

7.4.2.4 过滤选择器

7.4.2.5 表单过滤选择器

7.5 JQuery的DOM操作

7.5.1 内容操作

7.5.2 属性操作

7.5.2.1 通用属性操作

7.5.2.2 对class属性操作

7.5.3 CRUD操作

7.6 JQuery 案例

7.6.1 案例一：隔行换色

7.6.2 案例二：全选和全不选

7.6.3 案例三：QQ表情选择

7.6.4 案例四：下拉列表选中条目左右移动

8. JQuery 高级

8.1 动画——三种方式显示和隐藏元素

9. AJAX

9.1 AJAX概念

9.2 AJAX 实现方式

9.2.1 JS实现方式（了解）

9.2.2 JQeury实现方式

10. Maven

11. JSON

11.1 JSON概念

11.2 JSON基本语法

11.3 JSON获取数据

11.3 JSON数据和Java对象相互转换

11.3.1 JSON解析器

11.3.2 JSON转为Java对象

11.3.3 Java对象转换JSON

11.3.4 代码——Java对象&JSON 相互转换

11.4 案例——校验用户名是否存在

12. Redis

12.1 NoSQL简介

12.1.1 NoSQL概念

12.1.2 NOSQL和关系型数据库比较

12.2 主流的NOSQL产品

12.3 Redis概念 & 应用场景 & 下载安装

12.4 redis的数据结构 & 命令操作

5.3.1 案例一：登录验证

5.3.2 案例二：敏感词汇过滤