java2106第九周总结

本周总结

一、bootstrap

1、栅格系统

前提需要有一个布局容器:大的div里面指定bootstrap的class属性
class=“container”:占用固定宽度并可以响应式
class=“container-fluid”:占用整个宽度100%(全部视图)
栅格系统:用于通过一系列的行(row)和列(column)的组合来创建页面布局
一行可以指定多少列(一行最多12列)
class=“col-设备编号-列数”

设备编号

  xs      超小屏幕    (手机端)        <768px

   sm      小屏幕(平板电脑)           >=768px

 md      中等屏幕(普通桌面显示器)   ≥992px

   lg      大屏幕 大桌面显示器      >=1200p

2、表格样式

boostrap提供的表格全局样式
class=“table” 默认样式
class=“table-stripe” 斑马条纹样式
class=“table-bordered” 带边框的表格
class="table-hover"鼠标悬浮有颜色标记
class="table-condensed"紧缩表格
响应式表格
class=“table-responsive”
表格样式里面提供状态的属性:
class=“info/danger/sucess/…”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格样式</title>
    <!--导入全局样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入jq文件-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--导入核心boostrap的js文件-->
    <script src="js/bootstrap.min.js"></script>
   
</head>
<body>
<div  class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed" >
        <tr>
            <th>用户名称</th>
            <th>网名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
        <tr class="danger">
            <td>高圆圆</td>
            <td>杨桃</td>
            <td>42</td>
            <td></td>
            <td>西安市</td>
        </tr>
        <tr class="info">
            <td>高圆圆2</td>
            <td>杨桃2</td>
            <td>30</td>
            <td></td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>文章</td>
            <td>撒谎大师</td>
            <td>42</td>
            <td></td>
            <td>西安市</td>
        </tr>
        <tr>
            <td>高圆圆</td>
            <td>杨桃</td>
            <td>42</td>
            <td></td>
            <td>西安市</td>
        </tr>

    </table>
</div>

</body>
</html>

3、表单样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入全局样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入jq文件-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--导入核心boostrap的js文件-->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<!--<form>
    用户名:<input type="text" />
</form>-->
<h3>基本表单实例</h3>
<!--

-->
<form>
    <!--
        表单里面样式
                class="form-group"  :让label和input标签或者下列菜单进行更好的排列
                labe元素:指定输入要输入的内容
                class="form-control" 在input或者下列菜单select/textarea 使用居多,让当前视图占width1 00%

    -->
<div class="form-group">
    <label for="email">用户名</label>
    <input type="email" class="form-control" id="email" placeholder="请输入用户名">
</div>
<div class="form-group">
    <label for="pwd">Password</label>
    <input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
<div class="form-group">
    <label for="file">上传文件</label>
    <input type="file" id="file">
</div>
<div class="checkbox">
    <label>
        <input type="checkbox"> remember me
    </label>
</div>
<!--和input标签 type="submit"-->
    <!--class="btn默认按钮样式"-->
    <input type="submit" class="btn-success" value="登录"  />
</form>

<hr/>

<!--内联表单样式-->
<!--
    form-inline :让表单内容其内容左对齐
-->
<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">模糊查询用户名</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入用户名包含的内容">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">模糊查询邮箱</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入邮箱包含的内容">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<hr/>

<h3>水平排列表单</h3>
<!--
    class="form-horizontal":将label元素以及input进行水平布局
-->
<form class="form-horizontal">
    <div class="form-group">
        <label for="username" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10"> <!--针对小屏幕:平板进行适配-->
            <input type="email"  id="username" placeholder="请输入用户名">
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" id="password" placeholder="请输入密码">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
</body>
</html>

4、按钮样式

class =“btn btn-default”:默认的按钮样式
预定义样式的按钮

        btn btn-primary:首选项的按钮
        btn btn-success: 成功标志的按钮
        btn btn-info:普通信息按钮
        btn btn-warning: 警告按钮(颜色---一种暖色)
        btn btn-danger: 危险按钮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入全局样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <!--导入jq文件-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!--导入核心boostrap的js文件-->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<!--class ="btn btn-default":默认的按钮样式-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<hr/>

<input type="button"  class="btn btn-default" value="默认样式按钮" />
<button class="btn btn-primary">预定义之首选项的按钮</button>
<button class="btn btn-success">预定义之成功的按钮</button>
<button class="btn btn-info">预定义之普通信息</button>
<button class="btn btn-warning">预定义之警告</button>
<button class="btn btn-danger">预定义之危险按钮</button>

<hr/>

<!--导入三张图片
    class="img-responsive":支持响应式布局
-->
<img src="img/c_0005.jpg"  class="img-responsive img-circle"><br/>
<img src="img/c_0006.jpg" class="img-responsive img-circle"><br/>
<img src="img/c_0007.jpg" class="img-responsive img-circle">

</body>
</html>

5、下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

class=“dropdown” 下拉菜单触发器以及下列选项都会包含在属性中
按钮组
在这里插入图片描述

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

6、导航条

导航条的可访问性
务必使用 < nav> 元素,或者,如果使用的是通用的 < div> 元素的话,务必为导航条设置 role=“navigation” 属性,这样能够让使用辅助设备的用户明确知道这是一个导航区域。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

7、分页组件

在这里插入图片描述

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

8、轮播图

在这里插入图片描述

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

二、重定向

. 重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向)
location+302:重定向的原理

请求转发与重定向的区别:
1)地址栏是否有变化
请求转发没有变化
重定向:最终访问静态资源/动态资源文件,有明显变化
2)是否能够访问WEB-INF的资源文件
请求转发可以访问,重定向404访问不了
3)开发过程中使用,如果在jsp上面有业务需求的话,需要使用请求转发;整个过程request对象一致
如果仅仅是完成页面跳转,没有业务需求的话,直接可以重定向
4)是否能跨工程访问外部的资源文件
重定向可以,请求转发只能访问本工程下的资源文件

三、json

JavaScript Object Notation, JS 对象简谱 (是一种数据交互格式)
使用json可以表示一个数据或者存储数据

语法规则:{“key”:value}
方式1:json对象[‘key’] 获取value值
var name = user[‘name’] ;
方式2:json对象.key—>获取value值(推荐使用)
var name = user.name;
var age = user.age ;

其他格式:
列表格式 [{},{},{},{},{}…]

Json遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json_遍历.</title>
    <script>
        //定义json格式
        var users = [
            {"name":"马三奇","age":20,"gender":"男","address":"西安市"},
            {"name":"文章","age":35,"gender":"男","address":"西安市"},
            {"name":"高圆圆","age":42,"gender":"女","address":"北京市"},
            {"name":"鲁班7号","age":18,"gender":"男","address":"咸阳市"}
        ] ;

            //如何遍历呢?
            //获取到每一个user[索引值](类似于实体)
            //for-in语句   遍历数组/自定义对象/json对象
            for(var x in users){
                //alert(x) ;
                //document.write(u[x].name+"---"+u[x].age+"---"+u[x].gender+"---"+u[x].address)
              document.write(users[x].name+"---"+users[x].age+"---"+
                  users[x].gender+"----"+users[x].address+"<br/>") ;
            }
    </script>
</head>
<body>

</body>
</html>

四 、Ajax

原生Ajax的特定的方法和属性
onreadystatechange 准备响应状态
readyState 4 : 请求完成,响应就绪
status 200 : 响应的状态码 成功响应
responseText :服务器响应过来的数据
代理对象发送post请求的时候必须指定头"Content-type"
固定写法: xmlhttpRequest.setRequestHeader(“Content-type”,
“application/x-www-form-urlencoded”) ;
代理对象.send(string文本:实体参数 key=value&key2=value2…)

1、ajax方式1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
           alert("页面载入") ;
            $("#username").blur(function () {
                //定义Jquery变量
                var $this  = $("#username") ; //Jquery变量:  var  $变量名
                //alert("触发失去焦点");
                var username =  $this.val(); //Jquery获取标签的默认值:val()                 原生js:document.getElementById("id属性值").value
                                            //Jquery获取标签的文本内容html("xx")               原生js::document.getElementById("id属性值") .innerHTML="xx"

                //this:Jquery对象:打点访问属性/访问方法---->定义Jquery变量进行接收
              //  alert(username) ;
                 $.ajax({
                        //url:请求的后台接口地址
                     url: "http://localhost:8080/Json_Ajax_Filter_war_exploded/JqAjaxServlet",
                     type: "get",//请求后台的提交方式,弱不写,就是get
                     data: "{'username':"+username+"}", //get提交或则post:指定json数据或者 key=value&key2=value&...

                     //"<a href='""'>"
                     success: function (data) {//响应的成功的回调函数
                         alert(data) ;
                     },
                     error:function (data) {//响应失败的回调函数
                         alert(data) ;
                     },
                     contentType:"application/x-www-form-urlencoded",//请求头
                     dataType:"text"    //响应的文本内容
                 }) ;
            });
        });
    </script>
</head>
<body>

用户名:<input type="text" placeholder="请输入用户名" id="username" />
</body>
</html>

2、方式2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery的ajax方式2</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>

        $(function(){
           alert("页面载入") ;
            $("#username").blur(function () {
                //定义Jquery变量
                var $this  = $("#username") ; //Jquery变量:  var  $变量名
                //alert("触发失去焦点");
                var username =  $this.val(); //Jquery获取标签的默认值:val()                 原生js:document.getElementById("id属性值").value
                                            //Jquery获取标签的文本内容html("xx")               原生js::document.getElementById("id属性值") .innerHTML="xx"

                //get提交
                //$.get(url, [data], [callback], [type])
                //参数1:请求后台接口地址
                //参数2:携带参数数据,支持json
                //参数3:回调函数:服务器响应过来的数据
                //参数4:服务器响应过来的数据"json","text"..."html","xml"

                //get提交:参数提交地址上
                $.get("JqAjaxServlet?name="+username+"",function(data){
                    alert(data) ;
                },
                "text") ;
            });
        });
    </script>
</head>
<body>

用户名:<input type="text" placeholder="请输入用户名" id="username" />
</body>
</html>

3、方式3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery_ajax的方式3</title>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>

        $(function(){
           alert("页面载入") ;
            $("#username").blur(function () {
                //定义Jquery变量
                var $this  = $("#username") ; //Jquery变量:  var  $变量名
                //alert("触发失去焦点");
                var username =  $this.val(); //Jquery获取标签的默认值:val()                 原生js:document.getElementById("id属性值").value
                                            //Jquery获取标签的文本内容html("xx")               原生js::document.getElementById("id属性值") .innerHTML="xx"
                //get提交
                //$.post(url, [data], [callback], [type])
                //参数1:请求后台接口地址
                //参数2:携带参数数据,支持json
                //参数3:回调函数:服务器响应过来的数据
                //参数4:服务器响应过来的数据"json","text"..."html","xml"

                //post提交:可以书写json/key=value&key2=value2....
                $.get("JqAjaxServlet",{name:username},function(data){

                    alert(data) ;
                },
                "text") ;
            });
        });
    </script>
</head>
<body>

用户名:<input type="text" placeholder="请输入用户名" id="username" />
</body>
</html>

五、git

1、Linux的基本命令

我在哪 pwd:查看当前目录位置
去哪 cd:change Directory :切换目录
cd /目录名字:进入某个文件中
ls:罗列当前目录下文件或者其他目录名称
ll -a:罗列文件或者文件夹的详情信息
clear:清屏命令

2、git常用命令

git init :在当前某个目录中 初始化本地库
在当前目录中会生成.git文件夹: 存储当前版本信息以及默认配置信息
在这里插入图片描述
git add [filename] 将当前文件添加暂存区中
在这里插入图片描述
git status [filename]:查看当前文件状态:暂存区
new File: HelloGit.java:绿色标记:已经成功添加到暂存区中,如果红色标记,没有添加暂存区,是没有
办法直接去提交本地库

在这里插入图片描述
git commit -m “提交的注释文字” [filename]: 将暂存区中的文件提交本地库中
前提提交:必须要设置用户的签名信息: 一般提示:设置全局签名信息
在这里插入图片描述
全局签名信息:只是代表开发人员的身份信息(邮箱和名字随便起)
git config --global user.email “you@example.com”
git config --global user.name “Your Name”
默认位置:C:\Users\Administrator
.gitcnofig:全局签名信息
[user]
email = Kuke@163.com
name = Kuke
在这里插入图片描述
创建分支以及查看所有分支
创建分支的原理:创建一个指针
在这里插入图片描述
切换分支 :一般开发人员需要有自己的分支 ,在自己的分支上开发!
在这里插入图片描述
主分支进行添加远程仓库
需要在gitee/githup建立远程仓库
https://gitee.com/zhangyangyangzhang/my-code.git 地址比较长
给地址起一个别名
git remote add 别名(origin) url地址(https://gitee.com/zhangyangyangzhang/my-code.git)
在这里插入图片描述
将本地库的代码推送远程仓库
git push -u 远程仓库别名 分支名称(主分支/其他分支名称);
在这里插入图片描述
其他开发人员将远程仓库代码克隆下来
git clone 仓库地址
在这里插入图片描述
另外开发人员将更新代码拉取
git pull -u origin 分支名称
在这里插入图片描述

六 、过滤器Filter

1、Filter的xml配置使用

<filter>
    <filter-name>MyFirstFilter</filter-name>
    <filter-class>com.qf.filter.MyFirstFilter</filter-class>
    <init-param>
    	<param-name>encoding</param-name>
    	<param-value>utf-8</param-value>
    </init-param>
</filter>
<!--
    过滤器的映射配置信息
-->
<filter-mapping>
    <filter-name>MyFirstFilter</filter-name>
    <!--过滤路径-->
    <url-pattern>/资源文件</url-pattern>
</filter-mapping>

2、Filter的注解方式

/**
配置初始化参数

  • @WebFilter(initParams ={@WebInitParam(name = “encoding”,value = “utf-8”)})
  •  常用属性:
    
  •        String[] urlPatterns():拦截的路径
    
  •        String filterName():给过滤器设置名称:默认当前类名 (不需要书写)
    
  •        String[] value() :设置拦击路径:如果是指定一个属性并且 value属性,value省略不写
    
  •       DispatcherType[] dispatcherTypes ():配置拦截的链路规则
    
  •              DispatcherType.REQUEST:直接请求拦截 (默认值)
    
  •              DispatcherType.FOWARD:请求转发拦截
    
  •              DispatcherType.INCLUDE:包含指定的路径的时候拦截
    

*/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值