JavaSE_五个月学习笔记_第二阶段_CSS/HTML/JS/Serverlet

已于 2022-02-22 14:48:18 修改
阅读量725 收藏 3
点赞数
文章标签： html 前端 javascript
于 2021-12-27 17:31:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d_xia/article/details/122176903
版权

HTML篇

Day、基础标签

1、基础

 html 网页的根标签
            head 网页头部标签
                title 网页标题
            body 网页内容
                h1~h6   标题标签，数字越大，字体越小
                p       段落标签
                   空格
                br      换行标签，为单标签
                img     图片标签，src属性为图片路径，width属性为图片宽度，height为图片高度
                a       超链接标签，href属性为链接地址，如果需要访问外部服务器，则需要添加 http 或者 https 协议
                                    name属性为定位属性，定位的 a 标签通过  href="#name值" 进行锚链接定位

            块级标签(自带换行符):h1~h6,p
            行级标签(不带换行符):img,a

2、表单

form:表单
            action 属性值为表单提交数据的服务器路径
                   以 name值 = value值 的形式提交数据
         input:type="text"      为文本输入框 value为输入框的值 placeholder为提示语句 name为提交数据的key
               type="username"  为加密文本输入框
               type="radio"     为单选框，多个单选框同一个 name 属性值，只允许有一个单选框被选中
                                checked="checked" 为默认选中状态
               type="checkbox"  为多选框
               type="hidden"    为隐藏框
               type="submit"    为提交按钮，提交表单数据
               type="reset"     为重置按钮，重置表单数据
               type="button"    为空白按钮，可以添加操作
                                通过 value 改变按钮上的文字
         select 为下拉框
               option 标签为下拉框选项
               selected="selected" 为下拉框默认选中

3、列表

无序列表:ul-li
                默认为实心圆
                通过改变 ul 标签的 type 属性改变标记
                circle 属性值为空心圆
                square 属性值为实心方块

            有序列表:ol-li
                默认为阿拉伯数字
                通过改变 ol 标签的 type 属性改变标记
                A 属性值为大写英文字母
                a 属性值为小写英文字母
                I 属性值为大写罗马数字
                i 属性值为小写罗马数字

            自定义列表:dl-dt、dd
                dl 为外部标签
                dt 为一级标签
                dd 为二级标签

4、表格

 table 表格
                border 属性为外边框的粗细，当 border 属性没有时所有的 tr 和 td 都没没有边框

                thead 表格头部
                tbody 表格主体
                tfoot 表格尾部

                tr 行
                td 列
                    被合并的单元格需要删除
                    属性: rowspan:行合并（上下居中）
                    属性: colspan:列合并
                    属性:style="text-align: center" 内容左右居中
                th 列 内容加粗且居中

Day02、选择器、定位

1、定位

1、基本选择器优先级别:
                id 选择器 > 类选择器 > 标签选择器 > 通配符选择器
2、其它悬着器
	属性选择器、 p[name='p1'][class]{
            color: red;
        }
	派生选择器： /*选中 ul 标签里的 li 标签*/
        ul li{
            color: red;
        }
	锚伪类选择器:
	 /*鼠标悬停*/
        a:hover{
            font-size: 30px;
        }
        /*点击状态*/
        a:active{
            color: aquamarine;
        }
        /*未访问*/
        a:link{
            color: red;
        }
        /*已经访问*/
        a:visited{
            color: blue;
        }
      相邻选择器：li+li{
            color: pink;
        }
        搭配选择器
        li+li[class="li"]{
            color: orange;
        }

2、样式

优先级别：
                内联样式 > 外部样式&内部样式

                内部样式和外部样式优先级别一样
                后加载覆盖前加载

3、边距

  • 内边距离：paddi
  • 外边距：margin
  • 边框：border

4、定位

1、相对定位

  • 相对定位：
    • 相对于原有的位置发生移动改变，保留原有的位置不变
  • 关键字以及值：position: relative;

2、绝对定位

  • 绝对定位:

    • 相对于拥有 position 属性的父标签进行定位移动，
      如果父标签没有 position 属性则继续往上寻找，
      直到找到 body 位置,相对 body 标签进行定位移动
      不保留原有的位置

  • 关键字：position: absolute;

3、浮动定位

  • 关键字：float: left;
  • 说明：float属性指定一个盒子（元素）是否应该浮动。
  • 清除浮动
    • /*清除浮动状态*/ #clear{ clear: both; }

Day03、基本语法、运算、对象、DOM操作

1、基本语法

1.1变量
/*先定义再赋值
        *   var 能够重复定义
        *   let 不允许重复定义
        *   const 定义的变量为常量
        *
        *   JS 的变量在定义的时候是没有数据类型，在赋值的时候决定数据类型，
        *   JS的变量能接受任何数据类型
        * */
1.2运算符
 /*
        *   在 JS 中 string 类型的数值与 number 类型数据进行运算
        *   "+" 为拼接，其他运算符直接进行运算
        *   string 类型非数值的数据与 number 类型进行非"+"运算
        *   结果为 NaN
        * */
/*
        *   ==  是比较内容
        *   === 既比较内容又比较类型
        * */

1.3分支语句
/*
            true:非""字符串,非0的数值
            false:"",0,null,undefined,NaN
        */

1.4函数
/*函数中的形参不需要定义*/
        /*function method01(num1,num2) {
            console.log("函数1"+num1+num2);
        }
        /!*函数没有重载，只有覆盖*!/
        function method01(num1,num2,num3){
            console.log("函数1"+num1+num2+num3);
        }*/

        /*内置关键词:arguments*/
1.5数组
 /*for-in中会自动跳过 undefined 的元素*/

2、Js对象

 <title>函数创建对象</title>
<script>
        /*类似 Java 的构造方法*/
        function User(username, password) {
            /*对象里的属性*/
            this.username = username;
            this.password = password;
            /*对象里的函数*/
            this.method = function () {
                console.log('对象里的函数');
            }
        }
        let user = new User("zs",1123456);
        console.log(user.username+":"+user.password);
        user.method();
    </script>
    
 <title>Object创建对象</title>
<script>
        let obj = new Object();
        /*给对象添加属性*/
        obj.name = '晓晴';
        obj.sex = '女';
        /*给对象添加函数*/
        obj.method01 = function () {
            console.log("obj的函数");
        };

        console.log(obj.name+":"+obj.sex);
        obj.method01();
    </script>

<title>json格式对象</title>
    <script>
        /*
        * {name:'zs',age:18};
        * */
        let json = {
            name:'zs',
            age:18,
            method01:function () {
                console.log("json对象");
            }
        };
        console.log(json.name+":"+json.age);
        json.method01();
    </script>

3、DOM操作

3.1、获取元素对象

 <script>
        //1.根据id获取标签对象
        let id = document.getElementById("div1");
        console.log(id);

        //2.根据class属性值获取标签对象
        let className = document.getElementsByClassName("div2")[0];
        console.log(className);

        //3.根据name属性值获取标签对象
        let name = document.getElementsByName("div3")[0];
        console.log(name);

        //4.根据标签名获取标签对象
        let div = document.getElementsByTagName("div")[0];
        console.log(div);
    </script>

3.2、修改元素内容

<script>
        function btn() {
            //1.获取标签对象
            let div = document.getElementsByTagName("div")[0];
            //2.改变标签内容
            //innerText 以纯文本形式覆盖原内容
            div.innerText = '<h1>赶紧行动起来</h1>';
            //innerHTML 会解析标签
           // div.innerHTML='<h1>我就在教你做事</h1>';
        }
</script>
<body>
    <div>我的天使呢？</div>
    <!--onclick属性为点击事件-->
    <input type="button" value="change" onclick="btn()">
</body>

3.3、修改标签属性

 <script>
        function btn() {
            //1.获取标签对象
            let input = document.getElementsByTagName("input")[0];
            //2.改变属性
            input.type = 'checkbox';
        }
    </script>
</head>
<body>
    单选框:<input type="radio"><br/>
    <input type="button" value="change" onclick="btn()">
</body>

3.4、修改元素样式

<script>
        let flag = true;
        function btn() {
            let img = document.getElementById("img");
            let input = document.getElementsByTagName("input")[0];
            if(flag){
                //改变图片的样式，隐藏图片
                img.style.visibility = 'hidden';
                //改变按钮的value值
                input.value = '显示';
                flag = false;
            }else{
                //改变图片的样式，显示图片
                img.style.visibility = 'visible';
                input.value = '隐藏';
                flag = true;
            }
        }
    </script>
</head>
<body>
    <input type="button" value="隐藏" onclick="btn()"><br/>
    <img src="../img/tghlx.jpg" id="img">
</body>

3.5、添加元素

 <script>
        function btn() {
            //1.创建元素
            let img = document.createElement("img");
            //2.添加 src 属性
            img.src = "../img/cls.jpg";
            //3.把元素添加到指定标签中
            document.getElementsByTagName("body")[0].appendChild(img);
        }
    </script>
</head>
<body>
    <input type="button" value="添加" onclick="btn()"><br/>
    <img src="../img/cls.jpg">
</body>

Day04、Servlet

1、Tomcat部署

  • 1.1 修改 Tomcat 里 bin 目录的 catalina.bat 文件在 setlocal 上添加:
    set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_241\bin
    set JRE_HOME=C:\Program Files\Java\jdk1.8.0_241\jre

  • 1.2 配置环境变量
    新建
    CATALINA_BASE:E:\tools\apache-tomcat-8.5.30 (tomcat路径)
    CATALINA_HOME:E:\tools\apache-tomcat-8.5.30 (tomcat路径)
    编辑:
    path:%CATALINA_BASE%\bin;%CATALINA_HOME%\bin

  • 1.3 验证 Tomcat 服务器是否配置成

    • 1.3.1 打开 Tomcat 里 bin 目录下的 startup.bat 文件启动服务器
    • 1.3.2 通过浏览器访问 http://localhost:8080

  • 1.4 idea 的项目配置上 Tomcat
    Run – Edit Configuretions… – “+” – Tomcat Service – local
    Application Server – Configure… – 添加 Tomcat 路径
    Deployment – “+” – Artifact
    Application Context – 添加项目名 URL:服务器启动成功，项目发布成功后会自动打开浏览器访问 URL 指定的路径

  • 1.5 启动 idea 项目
    1.5.1 启动 Tomcat 服务器
    1.5.2 服务器启动后，项目发布到服务器中
    1.5.3 打开指定浏览器，访问默认 URL 地址

2、Servlet 配置

  • 2.1 项目环境添加 Tomcat
    File – Project Strt… – Modules – Dependencies – “+” – Library – Tomcat
  • 2.2 添加前端页面
  <form action="Hello">
                数据:<input type="text" name="data"><b/>
                <input type="submit">
          </form>
  • 2.3 创建 Servlet 类型
    2.3.1 创建 HelloServlet 类继承 HttpServlet 类
    2.3.2 重写 service(HttpServletRequest request, HttpServletResponse response)
    HttpServletRequest – 请求对象
    HttpServletResponse – 响应对象
    2.3.3 解决响应乱码
    response.setContentType(“text/html;charset=utf-8”);
    2.3.4 获取前端提交的表单数据
    String data = request.getParameter(“data”);
    2.3.5 响应前端
    response.getWriter().write(“响应前端”);
    -2.4 配置 web.xml (前端控制器)
 <servlet>
            <servlet-name>Hello</servlet-name>
            <servlet-class>com.qf.ran.servlet.HelloServlet</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>Hello</servlet-name>
            <url-pattern>/Hello</url-pattern>
        </servlet-mapping>

解释参考参考

@WebServlet("/CheckServlet")//这样些就不用在文件控制器里写了，但前提是前边不能有name@WebServlet(name="/CheckServlet"),有name的话前端控制器依然需要写

  • 2.5 热部署
    File – settings – Compiler – Build project automatically(勾选)
    使用 debugger 启动项目

3.Servlet 生命周期

  • 3.1 Servlet 单例多任务模式
  • 3.2 客户端发送请求，请求到达服务器，根据请求到达服务器对应的项目的 web.xml 配置文件，
    根据 web.xml 的配置信息，找到对应的 Servlet 类，
    初次请求会调用无参构造方法创建 Servlet 类的对象，再执行 init() 进行初始化，
    再执行 service() ，会根据请求的提交方式执行对应的 doGet() 或者 doPost(),
    进行服务器的业务处理并响应客户端,当 Servlet 被销毁的时候会执行 destroy()，
    但不是初次请求，直接执行 service() ,根据请求的提交方式执行对应的 doGet() 或者 doPost(),
    销毁时执行 destroy()

4.表单提交方式

表单的提交方式由 form 标签的 method 属性值决定

  • 4.1
    get:默认的提交方式,
    提交数据会显示在 url 地址上，相对不安全
    提交的数据有限(4kb),只能提交字符串
    效率相对较高

  • 4.2
    post:数据存放在请求体的请求头中，相对安全
    提交的数据无限制，能接受任意类型的数据
    效率相对较低

    解决 post 请求提交数据乱码问题:req.setCharacterEncoding("utf-8");

5.注册功能

  • 5.1 搭建注册页面，表单提交方式为 post
  • 5.2 创建 RegisterServlet 类，重写 doPost()
  • 5.3 创建 User 实体类
  • 5.4 创建 UserDB 数据库，并添加默认用户数据
  • 5.5 RegisterServlet 类的 doPost() 编写注册功能
  • 5.6 配置 web.xml

6、登录功能

  • 6.1 搭建登录页面
  • 6.2 创建 LoginServlet 类，重写 doGet()
  • 6.3 编写登录功能
  • 6.4 配置 web.xml

web.xml文件

Day05、Servlet细节整合

1.Servlet 的整合

  • 1.1 创建 UserServlet ，添加注解@WebServlet("/UserServlet")
  • 1.2 前端页面发送的注册和登录请求添加 action=“功能”
  • 1.3 UserServlet 根据不同的业务请求调用对应的方法
  • 1.4 登录功能针对用户名和密码错误进行不同的响应

2.JSP:在 html 页面上编写 java 代码，本质上是 Servlet

  • 2.1 <% 编写java代码 %>
  • 2.2 <%= 展示java代码 %>
  • 2.3 EL 表达式${} – 会默认从作用域中获取数据

3.转发和重定向

  • -转发:页面跳转，一次请求，请求不改变，服务器请求
    request.getRequestDispatcher(“转发页面”).forward(request,response);

  • 重定向:页面跳转，二次请求，请求改变，客户端请求
    response.sendRedirect(“userIndex.jsp”);

/**转发代码
 //把数据存放到请求作用域
            request.setAttribute("msg1","用户名不存在");
            request.getRequestDispatcher("login.jsp").forward(request,response);
//对应转发端获取代码的方法
${msg2}

/***重定向
 //页面跳转  --  重定向
        response.sendRedirect("userIndex.jsp");

页面跳转的几种方法，
1、重定向response.sendRedirect(“userIndex.jsp”);
2、响应前端添加script,用locaton.href 携带数据跳转

response.getWriter().write("<script>" +
                "alert('修改成功');" +
                "location.href='UserServlet?action=logout'</script>");

4.三大作用域

  • request:请求级别的作用域 – 请求不改变，数据不丢失，请求改变数据丢失 【针对同一次请求，一般存放提示信息】
  • session:会话级别的作用域 – 会话不关闭数据不丢失，每个用户一份session作用域【针对同一次会话，一般存放用户信息】
  • servletContext:服务器级别的作用域 – 服务器不关闭，数据不丢失【针对同一个web项目/web应用】
/**request书写
		//获得数据
        String username = request.getParameter("username");//获取单个值
     	 String[] hobbies = request.getParameterValues("hobbies");//获取数组
  		//


/** 获取服务端的验证码 --  全局中获取servletContext
		//获取方法
		String serverCode = (String)getServletContext().getAttribute("serverCode");
       //设置方法
       getServletContext().setAttribute("aa",1);

/**session
		//	session中获取
String serverCode = (String)request.getSession().getAttribute("serverCode");
//session中设置
 //记录用户登录状态
        request.getSession().setAttribute("id",user.getId());

5、其它

  • get提交方式表单数据会覆盖请求的数据
 <form action="UserServlet?**action=login**">//会被覆盖
        用户名:<input type="text" name="username"><%--<%= msg==null?"":msg %>--%>${msg1}<br/>
        密码:<input type="password" name="password">${msg2}<br/>
        验证码:<input type="text" name="code"><img src="CheckServlet">${msg3}<br/>
        <input type="submit" value="登录">
        <input type="reset">
    </form>

//解决办法是
 <form action="UserServlet">
        <input type="hidden" name="action" value="login">//这里加一行
        用户名:<input type="text" name="username"><%--<%= msg==null?"":msg %>--%>${msg1}<br/>
        密码:<input type="password" name="password">${msg2}<br/>
        验证码:<input type="text" name="code"><img src="CheckServlet">${msg3}<br/>
        <input type="submit" value="登录">
        <input type="reset">
    </form>
  • HTTP常见状态码参考，4开头一般是客户端问题，5开头一般是服务器问题

Day06、cookies、免登录

1、免登录（后端cookies）

  • 1.1 在 login.jsp 添加免登录勾选框

  • 1.2 在 UserServlet 中 login() 获取勾选框状态，根据状态判断是否被勾选，如果被勾选则把用户 id 存储到 cookie 中

  • 1.3 在 login.jsp 通过 request 获取 cookie 数组，遍历并判断是否保存了 id，如果保存了则重定向到 userIndex.jsp 页面

  • 后端创建、删除步骤

//创建cookie对象
Cookie cookie = new Cookie("id",user.getId()+"");
  //设置cookie的有效时间
  cookie.setMaxAge(60*60);
  //通过响应添加cookie
  response.addCookie(cookie);
//后端删除cookie

 //删除cookie
        Cookie cookie = new Cookie("id","");
        cookie.setMaxAge(0);
        response.addCookie(cookie);

2.注销

  • 2.1 用户登录功能里登录成功后把用户 id 添加到 session 中
  • 2.2 用户首页添加注销按钮 – 发送请求(action=logout)给服务器
  • 2.3 UserServlet 添加 logout() – 删除 cookie ,删除 session 中的 id ,跳转到登录页面

3、修改密码

  • 3.1 用户首页添加修改密码超链接 – 页面跳转(rePassword.jsp)

  • 3.2 添加 rePassword.jsp 页面 – 表单提交发送请求(action=rePassword)到服务器

    • 3.3 UserServlet 添加 rePassword()
    • 3.3.1 获取请求中旧密码和新密码
    • 3.3.2 从 session 获取 id ，根据 id 获取数据库中的用户对象
    • 3.3.3 判断旧密码是否正确
    • 3.3.4 错误则提示，正确把原密码修改成新密码
    • 3.3.5 响应前端 – 警告框显示修改成功，并发送注销的请求到UserServlet

  • 4.展示所有数据

  • 4.1 用户首页添加展示所有用户数据的超链接 – 发送请求(action=getList)给服务器

  • 4.2 UserServlet 添加 getList() – 把集合存放到请求作用域，转发到 userList.jsp

  • 4.3 添加 userList.jsp 通过 JSTL 标签库遍历数据

    • 4.3.1 添加 JSTL jar包
    • 4.3.2 页面导入 JSTL 标签库
      <%@taglib prefix=“c” uri=“http://java.sun.com/jsp/jstl/core” %>
    • 4.3.3 通过 <c: forEach items=“集合” var=“循环值”> 遍历数据

4、JavaEE中的request用法

参考
图片图解

Day08、servlet过滤器

1、信息回显

  • 1.1 用户展示列表添加编辑功能 – 发送请求(updateInit)并携带数据(被修改的用户id)

  • 1.2 UserServlet 添加 updateInit()

    • 1.2.1 获取前端发送的用户 id
    • 1.2.2 根据 id 从数据库中获取用户对象
    • 1.2.3 把用户对象的爱好数组属性转换成爱好字符串属性
    • 1.2.4 响应前端 – 把用户对象存放到请求中并转发到 update.jsp

  • 1.3 导入 JSTL 函数库

 <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
  • 1.4 通过 EL 表达式和 JSTL 函数库 获取用户信息并回显

2.修改

  • 2.1 update.jsp 把 id 和 password 添加到隐藏域
  • 2.2 表单发送请求到 UserServlet – 请求信息(update)
  • 2.3 UserServlet 添加 update()
    • 2.3.1 获取前端数据
    • 2.3.2 判断用户名是否重复
    • 2.3.2.1 User 类添加包含 id 的有参构造方法
    • 2.3.2.2 遍历数据库的用户对象判断用户名是否重复(根据 id 去除被修改用户的对象)
    • 2.3.2.3 当用户名重复时，封装已修改好的用户数据和提示信息存放到请求作用域并转发回 update.jsp
    • 2.3.3 for 循环遍历数据库对象并修改用户信息
    • 2.3.4 修改成功进行弹窗提示并发送请求到 UserServlet，action 为 getList 返回 userList.jsp

3.过滤器

  • 3.1 生命周期
 构造方法 -> 初始化方法 -> 过滤方法 -> 销毁方法
  • 3.2 构造方法和初始化方法是在项目部署到服务器的时候执行
  • 3.3 过滤器创建对象、初始化和销毁与 web.xml 的配置无关
web.xml配置
     version="4.0">
    <filter>
        <filter-name>LoginFilter</filter-name>
        <filter-class>com.qf.ran.File.LoginFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>LoginFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
放行关键字  chain.doFilter(request,response);

//获取请求路径的数据
        String uri = request.getRequestURI();
        String action = request.getParameter("action");
//获取url
```x



 - 3.4 过滤器的过滤方法与 web.xml 的配置顺序一致

##  4.登录过滤器

 - 4.1 创建 BaseFilter 类实现 Filter 接口 重写 init() 和 destroy()
 - 4.2 创建 LoginFilter 类继承 BaseFilter 重写 doFilter()
 - 4.2.1 强转请求和响应
	 - 4.2.2 处理乱码
	 - 4.2.3 获取 uri 地址和 action 值
	 - 4.2.4 根据 uri 地址和 action 值决定是否放行     --  未登录前放行
	 - 4.2.5 获取 session 中的 id 决定是否放行         --  登录后放行
	 - 4.2.6 不可放行的则跳转到 login.jsp
 - 4.3 配置 web.xml

##  5、其他

 - 转换数据类型，想到可以使用它对应的包装类进行转换
 - 代码解释

//2、处理乱码问题
request.setCharacterEncoding(“utf-8”)；//处理的事post请求问题
response.setContentType(“text/html;charset=utf-8”);//处理的事get请求的问题
``

Day09、文件的上传与下载

1.文件上传

  • 1.1 表单提交方式必须为 post 请求，表单添加属性 enctype=“multipart/form-data”
 <form action="UploadServlet" method="post" enctype="multipart/form-data">
  • 1.2 添加 jar 包
  • 1.3 解析请求数据，根据数据是否为文本还是二进制文件进行操作
//1.创建一个磁盘工厂对象
        DiskFileItemFactory factory = new DiskFileItemFactory();
        //2.实例化上传对象，通过构造方法传递工厂对象
        ServletFileUpload upload = new ServletFileUpload(factory);
        //3.通过上传对象解析请求中的二进制数据
        List<FileItem> list = upload.parseRequest(request);
for (FileItem fileItem:list) {

            //5.判断是否为非表单文本数据
            if(!fileItem.isFormField()){
                //6.获取输入流
                is = fileItem.getInputStream();
                //发布项目/img
                String path = getServletContext().getRealPath("img");
                File file = new File(path);
                if(!file.exists()){
                    file.mkdirs();
                }
  • 1.4 通过 UUID 或者以时间为目录格式解决文件重名问题
//改变文件名
                UUID uuid = UUID.randomUUID();
                fileName = uuid.toString()+"_"+fileItem.getName();
  • 1.5 通过 IO 流进行二进制文件的拷贝
//6.获取输入流
                is = fileItem.getInputStream();
                
//7.创建输出流
                fos = new FileOutputStream(new File(path,fileName));
                //8.拷贝
                byte[] b = new byte[1024];
                int len;
                while((len = is.read(b)) != -1){
                    fos.write(b,0,len);
                }
  • 1.6 fileItem.getFieldName() 获取 input 标签的 name 属性值
fileItem.getFieldName()
  • fileItem.getString(“utf-8”) 获取 input 标签的 是 value 属性值
fileItem.getFieldName(),fileItem.getString("utf-8")
  • 1.7 存放到 map 中，通过工具类 BeanUtils 把 map 中的数据转存到 User 对象中
 //把 name=value 存放到 map 对象中
                if(!map.containsKey(fileItem.getFieldName())){
                    //{hobbies=sing}
                    map.put(fileItem.getFieldName(),fileItem.getString("utf-8"));
                }else{
                    //旧的value   --  sing
                    String value = map.get(fileItem.getFieldName());
                    //{hobbies=sing,jump}
                    map.put(fileItem.getFieldName(),value+","+fileItem.getString("utf-8"));
                }

 //把 map 的 key 和 user 的属性对应上，value 值赋值给对应的属性
        BeanUtils.populate(user,map);

2、下载

  • 2.1 客户端发送要下载文件的文件名到服务器
<a href="DownloadServlet?fileName=${user.imgUrl}">下载图片</a><br/>
  • 2.2 服务器获取文件名并设置响应头
 //设置响应头
        response.setHeader("Content-disposition","attachment;fileName="+fileName);
  • 2.3 使用 IO 流进行数据传输
//2.获取输入流对象
        FileInputStream fis = new FileInputStream(new File(getServletContext().getRealPath("img"), fileName));
        //3.获取输出流对象
        ServletOutputStream os = response.getOutputStream();
         /*//拷贝
        byte[] b = new byte[1024];
        int len;
        while((len = fis.read(b)) != -1){
            os.write(b,0,len);
        }*/
        IOUtils.copy(fis,os);//这段代替上面的那段

Day10 Boostrap

Day11 Mysql

1、DDL

DDL:数据定义语言
	创建、删除、修改、查询数据库,表和字段
	show、create、alter、drop

查看所有数据库
	show databases;
创建数据库
	create database 库名;
	create database 库名 character set utf8;
删除数据库
	drop database 库名;
使用指定数据库
	use 库名;
展示当前数据库的所有数据表
	show tables;
创建表
	create table 表名(字段名1 字段类型1,字段名2 字段类型2,字段名2 字段类型2);
删除表
	drop table 表名;
查看表结构
	desc 表名;
修改表名
	rename table 旧表名 to 新表名;
添加字段
	alter table 表名 add 字段名 字段类型;
修改字段类型
	alter table 表名 modify 字段名 新字段类型;
修改字段名
	alter table 表名 change 旧字段名 新字段名 新字段类型;
删除字段
	alter table 表名 drop 字段名;
修改表的编码格式
	alter table 表名 character set utf8;
查看当前正在使用的数据库
	select database();

2、DML

DDL:数据定义语言
	创建、删除、修改、查询数据库,表和字段
	show、create、alter、drop

查看所有数据库
	show databases;
创建数据库
	create database 库名;
	create database 库名 character set utf8;
删除数据库
	drop database 库名;
使用指定数据库
	use 库名;
展示当前数据库的所有数据表
	show tables;
创建表
	create table 表名(字段名1 字段类型1,字段名2 字段类型2,字段名2 字段类型2);
删除表
	drop table 表名;
查看表结构
	desc 表名;
修改表名
	rename table 旧表名 to 新表名;
添加字段
	alter table 表名 add 字段名 字段类型;
修改字段类型
	alter table 表名 modify 字段名 新字段类型;
修改字段名
	alter table 表名 change 旧字段名 新字段名 新字段类型;
删除字段
	alter table 表名 drop 字段名;
修改表的编码格式
	alter table 表名 character set utf8;
查看当前正在使用的数据库
	select database();

3、DQL:数据查询语言

DQL:数据查询语言

别名:as									--	可以省略不写
排序:order by							--	默认从小到大,asc为升序,desc为降序
限制查询:limit ?,?						--	第一个?为偏移量,第二个?为查询量
内置函数:avg()、count()、min()、max()
分组查询;group by						--	having 是在分组查询的结果出来进行筛选
去重:distinct							
模糊查询:like							--	左%代表以某个结尾，右%代表以某个开头，
											前后都有%代表包含某个

查询student表中所有数据
	select * from student where is_delete =1;
查询student表指定id为1的数据
	select * from student where id =1 and is_delete=1;
查询id为1的学生名字		--	as 后面为别名
	select username as '名字' from student where id = 1;
	select username '名字' from student where id = 1;
查询student表中所有的数据，按年龄从小到大排序输出
	select * from student order by age asc;
查询student表中所有的数据，按年龄从大到小排序输出
	select * from student order by age desc;
查询student表中所有is_delete为1的数据，按年龄从大到小排序输出
	select * from student where is_delete = 1 order by age desc;
查询student表中前3条数据
	select * from student where id <=3;
	select * from student limit 0,3;
查询student表中所有学生的平均年龄
	select avg(age) '平均年龄' from student;
统计student表中学生的个数
	select count(*) from student;
统计student表中成年学生的个数
	select count(*) from student where age >=18;
统计student表中拥有password属性的数据条数
	select count(password) from student;
统计student表中不同性别的学生各有多少人
	select sex,count(sex) '个数' from student group by sex;
统计student表中不同性别的成年学生各有多少人
	select sex,count(sex) '个数' from student where age >= 18 group by sex;
统计student表中不同性别的成年学生中超过4个的性别个数
	select sex,count(sex) '个数' from student where age >= 18 group by sex having count(sex) > 4;
统计student表中不重名的数据个数			--	子查询
	select count(s.username) from (select distinct username from student) s;
查询student表中以z开头的名字
	select * from stduent where username like 'z%';
查询student表中高于平均年龄的学生信息	--	子查询
	select * from student where age >(select avg(age) from student);
	

create table c_class(
	id int(3) comment '班级编号',
	class_name varchar(8) comment '班级名',
	class_num int(3) comment '班级人数',
	is_delete int(1) comment '是否删除'
);
insert into c_class values(1,'2201',4,1),(2,'2202',3,1),(3,'2203',3,1),(4,'2204',3,1);

查询所有学生信息，展示学生id，学生名，班级名	--	条件查询
	select s.id,s.username,c.class_name from student s,c_class c where s.c_id = c.id;
内连接
	select s.id,s.username,c.class_name from student s inner join c_class c on s.c_id = c.id;

外连接	--	左连接，以左边为主，把左边的所有数据都显示
	select s.id,s.username,c.class_name from student s left join c_class c on s.c_id = c.id;
外连接	--	右连接，以右边为主，把右边的所有数据都显示
	select s.id,s.username,c.class_name from student s right join c_class c on s.c_id = c.id;

Day12 mysql(下)

1、DCL:数据控制语言

DCL:数据控制语言	
		--	定义数据库的访问权限和安全级别

创建新的用户
	create user 'jiang'@'localhost' identified by '123';
赋予权限
	grant select,insert on 2109_test.* to 'jiang'@'localhost';
删除用户
	drop user 'jiang'@'localhost';
查看所有用户
	select user from mysql.user;
创建用户的同时赋予权限
	grant select,delete on *.* to 'jiang'@'localhost' identified by '123';
移除用户权限		--	需要用户重新登录
	revoke delete on *.* from 'jiang'@'localhost';

2、视图-- 虚拟的数据表

#视图		--	虚拟的数据表

#创建视图
create or replace view Myview as 
select id,username,age,is_delete from user where age > 18 
with check option;
#检查操作项是否合理

#查看视图
select * from myView;

#修改视图可见的数据
update myView set is_delete = 0 where id= 4;

#修改视图不可见的数据		--	不可修改 
update myView set money = money+1000000 where id = 1;

#修改视图可见数据为不可见的数据			--	添加 with check option 则不可修改
update myView set age = 10 where id= 2;



#多表查询结果保存为视图
create view Myview2 as 
select s.id,s.username,c.class_name from student s inner join c_class c on s.c_id = c.id; 

#查看多表结果视图
select * from myview2;

3、约束

#索引
#主键约束						--	不能为null，不可重复
#添加主键						--	表未创建的时候
	create table person(id int(3) primary key);
#添加主键						--	表存在的情况
	alter table person modify id int(3) primary key;
#添加主键并自增长		--	表未创建的时
	create table person(
			id int(3) primary key auto_increment,
			username varchar(8)
	)
#添加数据
	insert into person(username) values('aaz');

#唯一约束		--	不可重复
#unique
#非空约束		--	不能为空

#唯一约束添加
	ALTER TABLE person ADD UNIQUE(username);
#查看表结构
	desc person;

#模糊查询
	#索引失效
	select * from person where username like '%z';
	#索引失效
	select * from person where username like '%z%';
	#索引有效
	select * from person where username like 'z%';



#外键约束		--	必须在创表的时候添加 或添加外键字段数据能够匹配对应表的字段(主键)数据
alter table student add constraint my_id 
foreign key(c_id) 
references c_class(id);

#添加student数据，c_id为c_class表中没有id		--	无法添加
	insert into student(id,username,c_id) values(11,'zs',5);

#添加student数据，c_id为c_class表中有的id
	insert into student(id,username,c_id) values(11,'zs',4);

#删除外键所在的表数据
	delete from student where id = 11;

#删除约束对应的表数据		--	无对应数据时可以删除
	delete from c_class where id = 3;

#删除外键
	alter table student drop foreign key my_id;



#触发器		--	new 代表新增数据的表
create trigger myTrigger after insert on student 
for each row 
update c_class set class_num = class_num+1 where id = new.c_id;

#插入数据到student表中
insert into student(id,username,c_id) values(11,'zs',3);

4、事务

#事务

#添加 student 表中的数据
#更新 c_class 表中的数据

#开启事务
start transation;

#提交事务
commit;

#回滚事务
rollback;

#事务的特性:原子性，一致性，隔离性，持久性

#事务的状态
#脏读:当一条线程中的事务读取到另一条线程事务未提交的 update、delete 数据
#不可重复读:当一条线程中的事务读取到另一条线程中事务已提交的 update、delete 数据
#虚读(幻读):当一个线程中的事务读取到另一个线程已提交的 insert 数据

#事务的隔离级别
#1.read uncommitted:脏读、不可重复读、虚读都有可能会发生
#2.read committed:避免了脏读，不可重复读、虚读有可能发生
#3.repeatable read:避免了脏读、不可重复读,虚读有可能发生
#4.serializable:避免脏读、不可重复读、虚读

#设置隔离级别:
	set transaction isolation level 隔离级别;

05_函数和存储过程

#函数				--	必须要有返回值，可以嵌套到 sql 语句中
create function fun1(
	x int(10),
	y int(10)
) 
returns int 
begin 
	return x+y;
end;

#调用函数
select * from student where id = fun1(1,2);




#存储过程		--	不能嵌套到 sql 语句中，提高 sql 语句的复用性
insert into student(id,username) values(20,'aop');

#创建存储过程
create procedure pro1(
	in p_id int(3),
	in p_name varchar(8)
) 
begin
	insert into student(id,username) values(p_id,p_name);
end;

#调用存储过程
call pro1(21,'ioc');

Day13、JDBC(上)

1、jdbc连接步骤以及传统方式的增删查改

package com.qf.ran.jdbc;

import com.qf.ran.entity.User;
import com.qf.ran.utils.DBUtils;
import org.junit.Test;

import java.sql.*;
import java.util.ArrayList;
import java.util.List;

/**
 * @author Ran
 * @since JDK 1.8
 */
public class CRUD {

    /**
     * 插入数据 --  更新操作
     */
    @Test
    public void testInsertUser() {
        Connection connection = null;
        Statement statement = null;
        try {
            connection = DBUtils.getConnection();
            /*//1.加载驱动
            Class.forName("com.mysql.jdbc.Driver");
            //2.通过 DriverManager 获取连接对象
            connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/2109_test", "root", "root");*/
            //3.通过连接对象创建 Statement 对象
            statement = connection.createStatement();
            //4.通过 Statement 对象执行sql语句并返回结果集
            int rSet = statement.executeUpdate("insert into user(username,password,sex,hobbiesStr,addrs) " +
                    "values('aa','123','男','jump,rap','guangdong')");
            System.out.println("影响行数:"+rSet);
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //5.关闭资源
            DBUtils.closeAll(statement,connection);
        }
    }

    @Test
    public void testQueryUser(){
        Connection connection = null;
        Statement statement = null;
        ResultSet rSet = null;
        try {
            connection = DBUtils.getConnection();
            //1.加载驱动
            /*Class.forName("com.mysql.jdbc.Driver");
            //2.通过 DriverManager 获取连接对象
            connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/2109_test","root","root");*/
            //3.通过 connection 对象创建 Statement 对象
            statement = connection.createStatement();
            //4.通过 Statement 对象执行 sql 语句并返回结果集
            rSet = statement.executeQuery("select * from user where is_delete = 1");
            //5.获取结果集的数据
            List<User> list = new ArrayList();
            User user;
            while(rSet.next()){
                //1.根据字段名获取字段数据
                /*int id = rSet.getInt("id");
                String username = rSet.getString("username");
                String password = rSet.getString("password");
                String sex = rSet.getString("sex");
                String hobbiesStr = rSet.getString("hobbiesStr");
                String addrs = rSet.getString("addrs");
                String imgUrl = rSet.getString("imgUrl");
                int is_delete = rSet.getInt("is_delete");*/

                //2.根据字段列数获取字段数据
                int id = rSet.getInt(1);
                String username = rSet.getString(2);
                String password = rSet.getString(3);
                String sex = rSet.getString(4);
                String hobbiesStr = rSet.getString(5);
                String addrs = rSet.getString(6);
                String imgUrl = rSet.getString(7);
                int is_delete = rSet.getInt(8);
                user = new User(id,username,password,sex,hobbiesStr,addrs,imgUrl,is_delete);
                list.add(user);
            }
            list.forEach(item -> System.out.println(item));
        }catch (SQLException e) {
            e.printStackTrace();
        }finally {
            //关闭资源
            DBUtils.closeAll(rSet,statement,connection);
        }

    }
}

2、JDBC第二种增删查改的方式（通过prepareStatement预处理）

  • 操作步骤
    • 1、通过连接对象提前将sql代码放入，并用“？”来代替作为占位符
      • connection.prepareStatement
    • 2、赋予前面参数值
      • ps.setString(第几个展位符,参数)
    • 3、不同的sql操作返回不同的值
      • rSet = ps.executeUpdate();//更新返回整数，代表着有几条操作结过成功
      • rSet = ps.executeQuery()//返回的事集合，遍历使用next()遍历
package com.qf.ran.dao.impl;

import com.qf.ran.dao.UserDao;
import com.qf.ran.entity.User;
import com.qf.ran.utils.DBUtils;

import java.sql.*;
import java.util.List;

/**
 * @author Ran
 * @since JDK 1.8
 */
public class UserDaoImpl implements UserDao {
    @Override
    public int addUser(User user) {
        Connection connection = null;
        //Statement statement = null;
        PreparedStatement ps = null;
        int rSet = 0;
        try {
            //获取连接对象
            connection = DBUtils.getConnection();
            //获取操作对象
            //statement = connection.createStatement();
            //执行SQL语句
            /*rSet = statement.executeUpdate("insert into user(username,password,sex,hobbiesStr,addrs) " +
                    "values('" + user.getUsername() + "','"
                    + user.getPassword() + "','"
                    + user.getSex() + "','"
                    + user.getHobbiesStr() + "','"
                    + user.getAddrs() + "')");*/
            ps = connection.prepareStatement(
                    "insert into user(username,password,sex,hobbiesStr,addrs) values(?,?,?,?,?)");
            ps.setString(1,user.getUsername());
            ps.setString(2,user.getPassword());
            ps.setString(3,user.getSex());
            ps.setString(4,user.getHobbiesStr());
            ps.setString(5,user.getAddrs());
            rSet = ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtils.closeAll(ps,connection);
        }
        return rSet;
    }

    @Override
    public int updateUser(User user) {
        return 0;
    }

    @Override
    public int deleteUser(int id) {
        return 0;
    }

    @Override
    public List<User> getList() {
        return null;
    }

    @Override
    public int checkUsername(String username) {
        return 0;
    }

    @Override
    public int checkUser(String username, String password) {
        Connection connection = null;
        PreparedStatement ps = null;
        ResultSet rSet = null;
        int num = 0;
        try {
            //获取连接对象
            connection = DBUtils.getConnection();
            //通过连接对象预处理sql语句并返回预处理对象    --  ?为占位符
            ps = connection.prepareStatement("select count(*) from user where is_delete=1 and username=? and password=?");
            //给占位符进行赋值
            ps.setString(1,username);
            ps.setString(2,password);
            //执行sql语句并返回结果集
            rSet = ps.executeQuery();
            if(rSet.next()){
                //根据字段名获取字段数据
                //num = rSet.getInt("count(*)");
                num = rSet.getInt(1);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtils.closeAll(rSet,ps,connection);
        }
        return num;
    }

    /*@Override
    public int checkUser(String username, String password) {
        Connection connection = null;
        Statement statement = null;
        ResultSet rSet = null;
        int num = 0;
        try {
            //获取连接对象
            connection = DBUtils.getConnection();
            //获取操作对象
            statement = connection.createStatement();
            //执行SQL语句
            rSet = statement.executeQuery(
                    "select count(*) from user where is_delete = 1 and username='"+username+"' and password='"+password+"'");
            if(rSet.next()){
                //根据字段名获取字段数据
                //num = rSet.getInt("count(*)");
                num = rSet.getInt(1);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtils.closeAll(statement,connection);
        }
        return num;
    }*/
}

3、文件配置

 //加载配置文件
            Properties properties = new Properties();
            //从配置文建目录中加载配置文件，如果没有配置文件则在src获取
            properties.load(Utiles.class.getClassLoader().getResourceAsStream("jdbc.properties"));
            //获取文件中的属性
            classPath = properties.getProperty("classpath");

4、其他

  • Dao层：操作数据库
  • Test:测试文件，测试文件的路径要和Dao层一致

Day14、MVC

1、分页

1.1 查询语言需要进行限制查询limit
    1.2 当前页             --  currentPage     --  前端发送
    1.3 每页展示数据量     --  pageSize        --  后端决定
    1.4 总数据量           --  totalCount      --  数据库查询获取
    1.5 总页数             --  pageCount       --  totalCount%pageSize == 0 ? totalCount/pageSize : totalCount/pageSize+1
    1.6 每页展示的数据     --  list            --  数据库查询,进行限制查询 limit ?,?

2、MVC模式

 M:model         --  对应的组件是javaBean
    V:view          --  对应的是 JSP 和 HTML 页面
    C:controller    --  对应的 servlet

3、三层架构

表示层          -- JSP或者是HTML
    业务逻辑层      -- service
    数据访问层      -- dao

4、三层架构的具体思路是

  • 先写Dao层，测试dao层是否正常
    • impl包下的实现接口，和一个接口，对于service请求将方法设置成值返回，以及dao层可以用另外的类，对请求进行封装
    • service层一般是需要创建一个dao类的方法，方便从dao层中拿数据
  • 第二写service层，测试service是否正常
    • impl包下的实现接口，和一个接口
    • 与dao层与controller层交互
    • 实现业务，与controller拥有同样的方法，一个业务一个功能
    • controller一般是需要创建一个service类的方法，方便从service层中拿数据
  • 第三层写controller层
    • 于前端进行交互，前端的请求与响应，

Day15.DBM

1、对dao层进行封装

2、dao层进行封装

3、感觉

  • dao层

4、其他

  • 可变参数只能在参数的最后一个，可变参数的书写格式public static int common(String sql,Object ... obj){

Day16.JQury

要点说明
要点1：$(function () {})相当于js原生框架中的onload = functiont(){}，优先加载
要点2：jquery中函数中只有一个值表示为读取，两个参数为，写入

1、选择器

基本选择器

  • Qery的选择器没有优先级别，只跟加载顺序有关
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            //JQery的选择器没有优先级别，只跟加载顺序有关

            //1.通配符选择器
            $("*").css("color","red");
            //2.标签选择器
            $("h1").css("color","green");
            //3.类选择器
            $(".h1_class").css("color","blue");
            //4.id选择器
            $("#h1_id").css("color","yellow");
        })
    </script>
</head>
<body>
    <h1 class="h1_class">有道无术</h1>
    <h1 id="h1_id">术尚可求</h1>
    <h1>有术无道</h1>
    <span>止于术</span>
</body>
</html>

层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            //1.子代选择器
            //$("#parent_1 > div").css("color","red");
            //2.后代选择器
            //$("#parent_1 div").css("color","blue");
            //3.相邻选择器
            //$("div+div").css("color","green");
            //4.同层次选择器
            $(".boss ~ .boss").css("color","yellow");
        })
    </script>
</head>
<body>
    <div id="parent_1">
        老板
        <div class="boss">赵老板</div>
        <div id="llb" class="boss">
            梁老板
            <div>梁老大</div>
            <div>梁二哥</div>
            <div>梁山</div>
        </div>
        <div class="boss">黄老板</div>
        <div>李老板</div>
        <h1>陈老板</h1>
    </div>
    <div>
        隔壁老王
        <div class="boss">王老大</div>
        <div class="boss">王二哥</div>
        <div>王老吉</div>
    </div>
</body>
</html>

过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤选择器</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        //原生js
        /*onload = function () {
            var div = document.getElementsByTagName("div")[0];
            div.style.color = 'red';
        }*/

        $(function () {
            //选中第一个
            //$("div:first").css("color",'blue');
            //选中最后一个
            //$("div:last").css("color",'blue');
            //选中第二个div，索引为1
            $("div:eq(1)").css("color",'blue');
        })
    </script>
</head>
<body>
    <div>有道无术</div>
    <div>术尚可求</div>
    <div>有术无道</div>
    <div>止于术</div>
</body>
</html>

2、节点操作

修改节点内容

<head>
    <meta charset="UTF-8">
    <title>修改节点内容</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            $("div").click(function () {
                //等同innerText;
                //$(this).text("<h1>术尚可求</h1>");
                //等同innerHTML
                $(this).html("<h1>天网恢恢</h1>")
            })
        })
    </script>
</head>
<body>
    <div>有道无术</div>
</body>

修改节点属性

<head>
    <meta charset="UTF-8">
    <title>改变节点属性</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            $("input:first").click(function () {
                var src = $("img:eq(0)").attr("src");
                //判断src值是否以img10.jpg结尾
                if(src.endsWith("img10.jpg")){
                    $("img:eq(0)").attr("src","../asserts/img/pcj.jpg");
                }else{
                    $("img:eq(0)").attr("src","../asserts/img/img10.jpg");
                }
            })
        })
    </script>
</head>
<body>
    <input type="button" value="change"><br/>
    <img src="../asserts/img/img10.jpg">
</body>

修改节点样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        function btn() {
            //改变高度或者宽度，宽度或者高度等比改变
            //$("#img").css("height","500px");
            //$("#img").css("width","800px");

            //宽度比例相对于父容器的宽度发生改变
            //$("#img").css("width","100%");
            //高度比例也是相对于父容器的高度发生改变，但是如果父容器为body标签，高度比例则不变
            $("#img").css("height","100%");
        }

        //当标签存在指定的class值时则删除，不存在则添加
        $(function () {
            $("#input").click(function () {
                //函数的参数为标签的 class 值
                $("#img").toggleClass("img");
            })
        })
    </script>
    <style type="text/css">
        .img{
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <!--<input type="button" value="change" onclick="btn()"><br/>-->
    <input type="button" value="change" id="input"><br/>
    <div style="height: 200px;width: 900px">
        <img src="../asserts/img/mezh.jpg" id="img" class="img">
    </div>
</body>

节点的添加和删除

head>
    <meta charset="UTF-8">
    <title>节点的添加和删除</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            $("#add").click(function () {
                let img = $("<img src='../asserts/img/pcj.jpg'>");
                /*let img = document.createElement("img");
                img.src = "../asserts/img/pcj.jpg";*/
                //添加到指定的父标签中，末尾追加
                //$("body").append(img);
                //添加到指定节点前
                //img.insertBefore($(this));
                //添加到指定节点后
                img.insertAfter($(this));
            })

            $("#del").click(function () {
                $("img:eq(0)").remove();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="add" id="add">
    <input type="button" value="del" id="del"><br/>
    <img src="../asserts/img/pcj.jpg"><br/>
</body>

节点遍历

head>
    <meta charset="UTF-8">
    <title>节点的遍历</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        /*onload = function () {
            let img = document.getElementsByTagName("img");
            for (let i = 0; i < img.length; i++) {
                img[i].onclick = function () {
                    //改变当前标签
                    //img[i].src = "../asserts/img/dqwj.jpg";
                    //改变所有标签
                    for (let j = 0; j < img.length; j++) {
                        img[j].src = "../asserts/img/dqwj.jpg";
                    }
                    //改变所有标签    --  不可行
                    //img.src = "../asserts/img/dqwj.jpg";
                }
            }
        }*/

        $(function () {
            $("img").each(function () {
                $(this).click(function () {
                    //改变当前标签
                    //$(this).attr("src","../asserts/img/dqwj.jpg");
                    //改变所有标签
                    $("img").attr("src","../asserts/img/dqwj.jpg");
                })
            })
        })
    </script>
</head>
<body>
    <img src="../asserts/img/dqwj.jpg">
    <img src="../asserts/img/dqwj.jpg">
    <img src="../asserts/img/dqwj.jpg">
</body>

3、事件

  • 事件的冒泡以及解决办法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡机制</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            $("#parent").click(function () {
                alert("parent");
            })
            /*$('#child').click(function () {
                alert("child");
            })*/

            //停止冒泡
            /*$('#child').click(function () {
                alert("child");
                return false;
            })*/
            $('#child').click(function (obj) {
                alert("child1");
                //停止冒泡
                obj.stopPropagation();
            })
        })
    </script>
</head>
<body>
    <div id="parent">
        <h1>有道无术</h1>
        <div id="child">术尚可求</div>
        <div>有术无道</div>
        <h1>止于术</h1>
    </div>
</body>
</html>

事件的绑定与解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间的绑定与解绑</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            //给绑定按钮添加点击事件
           /*$("#bind").click(function () {
               //给 id 为 h1 的标签添加点击事件
               $("#h1").bind("click",function () {
                   alert("点击事件");
               })
           });*/

            //给绑定按钮添加点击事件
            /*$("#bind").click(function () {
                //给 id 为 h1 的标签添加多个事件，执行同一个函数
                $("#h1").bind("click mouseout",function () {
                    alert("事件");
                })
            })*/

            //给绑定按钮添加点击事件
            $("#bind").click(function () {
                //不同事件执行不同函数
                $("#h1").bind({
                    "click":function () {
                        alert("点击事件");
                    },
                    "mouseout":function () {
                        alert("鼠标移出事件");
                    }
                })
            })

            //给解绑按钮添加点击事件
            $("#unbind").click(function () {
                //解绑指定单个事件
                //$("#h1").unbind("click");
                //解绑多个事件
                //$("#h1").unbind("click mouseout");
                //解绑所有事件
                $("#h1").unbind();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="绑定" id="bind">
    <input type="button" value="解绑" id="unbind"><br/>
    <h1 id="h1">事件驱动</h1>
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script src="../asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
            let count1 = 0;
            let count2 = 0;
            //监听所有按键
            $("#text").keydown(function () {
                $("#span1").text(++count1);
            });
            //监听字母、数字、符号、空格、回车
            $("#text").keypress(function () {
               $("#span2").text(++count2);
            })
        })
    </script>
</head>
<body>
    输入:<input type="text" id="text"><br/>
    keydown:<span id="span1">0</span><br/>
    keypress:<span id="span2">0</span>
</body>
</html>

Day17、ajax

1、异步和同步

  • 异步：不用等待
  • 同步：需要等待，一个线程借宿后才能轮到下一个线程进行执行

2、ajax的作用

  • 实现局部刷新

3、ajax的书写步骤

 AJAX异步刷新技术
            1.创建 XMLHttpRequest 对象
            2.通过对象发送请求到引擎
            3.AJAX引擎把请求发送到对应的服务器
            4.服务器处理请求并响应回 AJAX 引擎
            5.AJAX 引擎根据响应状态进行处理(事件驱动)

4、ajax两种版本的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script src="asserts/plugins/JQuery/jquery-2.1.1.min.js"></script>
    <script>
        /*
            AJAX异步刷新技术
            1.创建 XMLHttpRequest 对象
            2.通过对象发送请求到引擎
            3.AJAX引擎把请求发送到对应的服务器
            4.服务器处理请求并响应回 AJAX 引擎
            5.AJAX 引擎根据响应状态进行处理(事件驱动)

        */
        /**原生js的ajax*/
        /*onload = function () {
            var username = document.getElementById("username");
            var span = document.getElementsByTagName("span")[0];
            //失去焦点事件
            username.onblur = function () {
                //1.创建对象
                let xhr = new XMLHttpRequest();
                //2.发送请求到服务器
                xhr.open("GET","UserController?action=checkUsername&username="+username.value,true);
                xhr.send();
                //3.获取后端响应的数据
                //事件驱动
                xhr.onreadystatechange = function () {
                    //判断状态码和响应码
                    if(this.readyState == 4 && this.status == 200){
                        //获取后端响应数据
                        let respStatus = xhr.responseText;
                        if(respStatus == 200){
                            span.innerHTML = "<font color='green'>用户名可用</font>"
                        }else{
                            span.innerHTML = "<font color='red'>用户名重复</font>"
                        }
                    }
                }
            }
        }*/
			/**jquery版本的ajax*/
        $(function () {
            $("#button_id").click(function () {
                /*//请求地址
                let url ="/AJAX/UserController";
                //请求发送的数据
                let data = {
                    action:'checkUsername',
                    username:$("#username").val()
                }
                //回调函数中的 respData 是响应的数据
                $.get(url,data,function (respData) {
                    if(respData == 200){
                        $("span:eq(0)").html("<font color='green'>用户名可用</font>");
                    }else{
                        $("span:eq(0)").html("<font color='red'>用户名重复</font>");
                    }
                })*/

                //发送ajax请求
                $.ajax({
                    //请求地址
                    url:"/AJAX/UserController",
                    //请求数据
                    data:{
                        action:'checkUsername',
                        username:$("#username").val()
                    },
                    //提交方式
                    type:'get',
                    //是否为异步 --  默认为true
                    //async:true,
                    //响应数据的格式
                    //dataType:'json',
                    //成功回调
                    success:function (respData) {
                        if(respData == 200){
                            $("span:eq(0)").html("<font color='green'>用户名可以用</font>");
                        }else{
                            $("span:eq(0)").html("<font color='red'>用户名已存在</font>");
                        }
                    },
                    //失败时回调
                    error:function (respData) {

                    },
                    //一定执行
                    complete:function () {
                        alert("complete");
                    }
                })
            })


            $("#province").change(function () {
                $.ajax({
                    url:"/AJAX/UserController",
                    data:{
                        action:"getCity",
                        province:$("#province").val()
                    },
                    //响应数据为json格式数据
                    dataType:'json',
                    success:function (respData) {
                        let option;
                        for (let i = 0; i < respData.value.length; i++) {
                            option += "<option value='"+respData.value[i]+"'>"+respData.body[i]+"</option>";
                        }
                        $("#city").html(option);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" id="username"><span></span><br/>
        密码:<input type="text" name="password" id="password"><br/>
        地址:<select id="province">
                <option >---请选择省份---</option>
                <option value="guangdong">广东</option>
                <option value="guangxi">广西</option>
            </select>
            <select id="city">
                <option>--请选择城市---</option>
            </select><br/>
        <input type="button" value="注册" id="button_id">
    </form>
</body>
</html>

Day18、学生管理系统1，学生登录

01、项目开发流程

  • 需求分析
    • 分析需求是否可行
    • 分析主要需求跟次要需求
  • 技术选型与数据库分析
    • Mysql+Servlet
    • 分析数据表
  • 3、搭建架构划分职责
  • 4、连接接口开发
  • 5、测试
  • 6、上线
  • 7、维护与版本迭代

02、雷雨

d_xia
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值