本周总结
一、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">«</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">»</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:包含指定的路径的时候拦截
*/