.bootostrap
1. 栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<!--
使用栅格系统
前提需要有一个布局容器:大的div里面指定boostrap的class属性
class="container":占用固定宽度并可以响应式
class="container-fluid":占用整个宽度100%(全部视图)
栅格系统:
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局
一行可以指定多少列(一行最多12列)
class="col-设备编号-列数"
设备编号
xs 超小屏幕(手机端) <768px
sm 小屏幕(平板电脑) >=768px
md 中等屏幕(普通桌面显示器) ≥992px
lg 大屏幕 (桌面显示器) >=1200px
-->
<!--导入全局样式文件-->
<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>
<!--定义一个布局容器
container-fluid:支持流式布局
-->
<div class="container-fluid">
<!--
定义一行:class="row"
-->
<div class="row">
<div class="col-md-4" style="border: 1px solid #000">logo部分</div>
<div class="col-md-4" style="border: 1px solid #000">导航部分</div>
<div class="col-md-4" style="border: 1px solid #000">超链接</div>
</div>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<hr/>
<!--手机屏幕,平板.桌面显示器-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
</div>
</body>
</html>
2. 表格样式
<!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>
<!--
boostrap提供的表格全局样式
class="table" 默认样式
class="table-stripe" 斑马条纹样式
class="table-bordered" 带边框的表格
class="table-hover"鼠标悬浮有颜色标记
class="table-condensed"紧缩表格
-->
</head>
<body>
<!--响应式表格
class="table-responsive"
-->
<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>
<!--
表格样式里面提供状态的属性:
class="info/danger/sucess/..."
-->
<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. 按钮样式
<!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/>
<!--
预定义样式的按钮。
btn btn-primary:首选项的按钮
btn btn-success: 成功标志的按钮
btn btn-info:普通信息按钮
btn btn-warning: 警告按钮(颜色---一种暖色)
btn btn-danger: 危险按钮
-->
<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. 导航条和下拉菜单
<!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>
<!--
class="dropdown" :下单触发器以及下列选项都会包含在属性中
-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
用户管理
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">添加用户</a></li>
<li><a href="#">删除用户</a></li>
<li><a href="#">查询用户</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<hr/>
<!--
按钮式下列菜单:将所有的按钮放在 class="btn-group" (按钮组,点击按钮,触发下拉菜单)
-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<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>
</div>
<hr/>
<!--nav元素: 导航条组件-->
<nav class="navbar navbar-default">
<!--创建页面布局容器-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!--前部分导航条
class="navbar-header"
-->
<div class="navbar-header" style="background-color: #0f0f0f">
<!--超链接
navbar-brand
-->
<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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
6. 分页组件
<!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>
<!--分页组件-->
<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>
</body>
</html>
7.内置js插件-轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<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="img/1.jpg" alt="第一张图片">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/2.jpg" alt="第二种图片">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/3.jpg" 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>
</body>
</html>
十九. 后台登录 加入验证码 HttpSession
-
(1)接收参数
-
(2)校验验证码
用户输入的验证和服务器产生的验证码是否一致,不一致,提示"错误信息" -
(3)调用业务接口,进行登录
-
(4)进行判断
错误信息提示 -
(5)如果都一致,需要将管理员实体存在session域中请求转发到后台主页admin_index.jsp
1. 管理员实体类
public class Admin {
/* id INT PRIMARY KEY AUTO_INCREMENT,
adminname VARCHAR(20),
adminpassword VARCHAR(20)*/
private String adminname ;
private String adminpassword ;
public String getAdminname() {
return adminname;
}
public void setAdminname(String adminname) {
this.adminname = adminname;
}
public String getAdminpassword() {
return adminpassword;
}
public void setAdminpassword(String adminpassword) {
this.adminpassword = adminpassword;
}
public Admin(String adminname, String adminpassword) {
this.adminname = adminname;
this.adminpassword = adminpassword;
}
public Admin() {
}
@Override
public String toString() {
return "Admin{" +
"adminname='" + adminname + '\'' +
", adminpassword='" + adminpassword + '\'' +
'}';
}
}
2. 管理业务接口(AdminService)
public interface AdminService {
/**
* 判断登录是否成功
* @param name 管理名称
* @param password 密码
* @return 如果true,则登录成功;否则,失败!
*/
boolean isLogin(String name,String password) ;
3. 管理业务接口实现(AdminServiceImpl)
- 调用数据接口
- 通过用户名获取用户
- 判断用户的密码和登录是否一致,如果一致,返回true,否则,返回false
public class AdminServiceImpl implements AdminService {
@Override
public boolean isLogin(String name, String password) {
//调用数据接口
AdminDao adminDao = new AdminDaoImpl() ;
Admin admin = adminDao.findAdminByName(name);
//判断是否为null
if(admin!=null){
//获取当前密码
if(admin.getAdminpassword().equals(password)){
//密码一致
return true ;
}
}
return false;
}
}
4. 管理员数据接口(AdminDao)
public interface AdminDao {
/**
* 根据管理名称获取管理实体
* @param name 管理员名称
* @return 返回指定管理员实体
*/
Admin findAdminByName(String name) ;
}
5.管理员数据接口实现(AdminDaoImpl)
public class AdminDaoImpl implements AdminDao {
@Override
public Admin findAdminByName(String name) {
try {
//创建QueryRunner对象
QueryRunner qr = new QueryRunner(DruidJdbcUtils.getDataSource()) ;
//sql
String sql = "select * from admin where adminname = ?" ;
Admin admin = qr.query(sql, new BeanHandler<Admin>(Admin.class), name);
return admin;
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}
}
6.验证码(CheckCodeServlet)
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
//服务器通知浏览器不要缓存
response.setHeader("pragma","no-cache");
response.setHeader("cache-control","no-cache");
response.setHeader("expires","0");
//在内存中创建一个长80,宽30的图片,默认黑色背景
//参数一:长
//参数二:宽
//参数三:颜色
int width = 80;
int height = 30;
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics g = image.getGraphics();
//设置画笔颜色为灰色
g.setColor(Color.GRAY);
//填充图片
g.fillRect(0,0, width,height);
//产生4个随机验证码,12Ey
String checkCode = getCheckCode();
//将验证码放入HttpSession中 //存储在服务器端
request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
//设置画笔颜色为黄色
g.setColor(Color.YELLOW);
//设置字体的小大
g.setFont(new Font("黑体",Font.BOLD,24));
//向图片上写入验证码
g.drawString(checkCode,15,25);
//将内存中的图片输出到浏览器
//参数一:图片对象
//参数二:图片的格式,如PNG,JPG,GIF
//参数三:图片输出到哪里去
ImageIO.write(image,"PNG",response.getOutputStream());
}
/**
* 产生4位随机字符串
*/
private String getCheckCode() {
String base = "0123456789ABCDEFGHIGKLMNabcdefghigklmn";
int size = base.length();
Random r = new Random();
StringBuffer sb = new StringBuffer();
for(int i=1;i<=4;i++){
//产生0到size-1的随机值
int index = r.nextInt(size);
//在base字符串中获取下标为index的字符
char c = base.charAt(index);
//将c放入到StringBuffer中去
sb.append(c);
}
return sb.toString();
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request,response);
}
}
7.定时刷新(refresh)
@WebServlet("/refreshDemo")
public class RefreshServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//用户发送请求http://localhost:8080/Maven_response_war_exploded/refreshDemo
//给浏览器设置响应头refresh
// response.setHeader("refresh","3"); //定时刷新 : 对应值 3:3秒(秒数)
//System.out.println("定时刷新成功...");
response.setHeader("refresh","3;/Maven_response_war_exploded/login.jsp");
System.out.println("定时跳转成功...");
}
}
8.数据库连接池工具(DruidJdbcUtils)
public class DruidJdbcUtils {
//成员变量位置
private static DataSource ds ;
//为了保证线程安全:每一线程使用自己的Connection (张三/李四)
private static ThreadLocal<Connection> t1 = new ThreadLocal<>() ; //提供线程的局部变量保存连接对象
//构造方法私有化
private DruidJdbcUtils(){}
//静态代码块
static{
try {
//读取数据库连接池的配置文件----->通过DruidDataSourceFactory工厂类创建DataSource
//创建一个属性集合列表
Properties prop = new Properties() ;
//读取druid.properties
InputStream inputStream = DruidJdbcUtils.class.getClassLoader().
getResourceAsStream("test.properties");
//将资源文件所在的输入流加载列表中
prop.load(inputStream);
ds = DruidDataSourceFactory.createDataSource(prop); //底层子实现类:DruidDataSource
System.out.println("数据源获取成功");
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
//提供静态方法:单独获取数据源
public static DataSource getDataSource(){
return ds ;
}
//获取连接对象Connection静态功能
public static Connection getConnection(){
//从ThreadLocal中获取局部变量的副本:Connection
/**
* public T get() :从线程中获取局部变量的副本!
*/
Connection conn = null ;
try {
conn = t1.get();
if(conn==null){
//如果空,需要从数据库的连接池中获取连接对象
conn = ds.getConnection();
//获取到之后,每一线程执行自己的Connection
//将获取到的连接对象 绑定到当前线程中
t1.set(conn);
}
//如果不为空,说明ThreadLocal线程中已经存在Connection
return conn ; //
} catch (SQLException e) {
e.printStackTrace();
}
return null ;
}
//关闭(释放资源)资源
public static void close(ResultSet rs, Statement stmt, Connection conn) {
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(stmt!=null){
try {
stmt.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(conn!=null){
try {
conn.close();
//关闭之后,归还到连接池中,需要从当前线程中解绑
t1.remove();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close( Statement stmt,Connection conn) {
close(null,stmt,conn);
}
//事务管理代码 --- 加入
public static void main(String[] args) {
// DataSource ds = DruidJdbcUtils.getDataSource();
//System.out.println(ds);
Connection connection = DruidJdbcUtils.getConnection();
System.out.println(connection);
}
}
9.管理员登录后台(admin_login)
@WebServlet("/admin_login")
public class AdminLogin extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//处理乱码:post/响应乱码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//先处理验证码: 验证码存储在服务器端HttpSession
//获取前提的参数
String adminname = request.getParameter("adminname");
String adminpassword = request.getParameter("adminpassword");
//获取验证码
String code = request.getParameter("code");
//获取服务器端存储验证码
//服务器端:
//request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
//获取session
HttpSession session = request.getSession();
//从session域获取CHECKCODE_SERVER绑定的内容
String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
//一次性验证:
//使用完毕之后,应该将上一次的服务器端段的验证码删除
session.removeAttribute("CHECKCODE_SERVER");
//判断前台输入的验证码和服务器端存储的验证码是否一致
if( !code.equalsIgnoreCase(checkcode_server) || code==null){
//给request域中存储一个信息
request.setAttribute("msg","验证码错误");
//请求转发到admin_login.jsp
request.getRequestDispatcher("/admin/admin_login.jsp").forward(request,response);
}
//调用业务接口
AdminService adminService = new AdminServiceImpl() ;
boolean flag = adminService.isLogin(adminname, adminpassword);
//封装管理员数据
Admin admin = new Admin(adminname,adminpassword) ;
if(flag){
//登录成功
//将我们的Admin实体 存储session域中
session.setAttribute("admin",admin);
//跳转主页
request.getRequestDispatcher("/admin/admin_index.jsp").forward(request,response);
}else{
request.setAttribute("msg","登录失败");
request.getRequestDispatcher("/admin/admin_login.jsp").forward(request,response);
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
10.配置文件
url=jdbc:mysql://localhost:3306/mysqldp
driverClassName=com.mysql.jdbc.Driver
username=root
password=root
initialSize=5
maxActive=10
maxWait=3000
11. 管理员登录页面(admin_login.jsp)(jquery)
触发点击事件(jquery)
<html>
<head>
<title>管理员的登录页面</title>
<%--css样式文件--%>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<%--核心bootstrap的js文件--%>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<style>
/* #divTip{
margin: auto;
}*/
#tip{
color: red;
font-size: 15px;
text-align: center;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="container-fluid" style="border: 1px solid #000; width: 500px;height:auto;margin-top: 150px">
<div>
<p style="text-align: center;color: #3c763d">后台管理系统</p>
</div>
<%--提交后台地址--%>
<form class="form-horizontal" action="${pageContext.request.contextPath}/admin_login" method="post">
<div class="form-group" >
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="adminname" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="adminpassword" placeholder="请输入密码">
</div>
</div>
<%--验证码--%>
<div class="form-group">
<label for="code" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-10">
<input type="text" name="code" id="code">
<%--原生js方式获取img标签对象--%>
<%--<img id="img1" onclick="btn_img()" src="${pageContext.request.contextPath}/checkCodeServlet" style="margin-top: 5px" />--%>
<img id="img1" src="${pageContext.request.contextPath}/checkCodeServlet" />
</div>
<div id="divTip">
<font id="tip">${msg}</font>
</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">Sign in</button>
</div>
</div>
</form>
</div>
</body>
<script>
//触发点击事件 :Jquery
//$(function()){}------>替代了$(document).ready(function(){}
$(function () { // Jquery页面载入事件(将body中的内容加载完毕) ----原生js: onload事件
// alert("页面载入事件触发了...");
//Jquery的选择器
//id选择器/ class选择器 /element(标签选择器)
//获取id="img1"的这个标签对象(Jq对象)
$("#img1").click(function () { //并且添加点击事件
// alert("点击图片图片触发单击点击事件")
//new Date().getTime()获取当前系统时间毫秒值
this.src= "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime() ;
}) ;
}) ;
/* //原生Js的写法
function btn_img() {
var img = document.getElementById("img1");
//图片缓冲:内存中:需要让地址每次从内存获取图片本身数据,不是之前的数据
//Date():Js日期对象: 当前系统时间
img.src="${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime() ;
}*/
</script>
</html>
12.框架(admin_index.jsp)
<frameset rows="10%,*,10%">
<frame src="${pageContext.request.contextPath}/admin/header.jsp" />
<frameset cols="15%,*">
<frame src="${pageContext.request.contextPath}/admin/menu.jsp" />
<frame src="${pageContext.request.contextPath}/admin/main.jsp" />
</frameset>
<frame src="${pageContext.request.contextPath}/admin/foot.jsp" />
</frameset>
1. 左边菜单栏(menu.jsp)
<html>
<head>
<title>左边菜单页面</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet"/>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
用户管理 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">查询所有用户</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
</body>
</html>
2.顶部菜单栏(header.jsp)
<html>
<head>
<title>Title</title>
</head>
<body>
<%--
--%>
<c:if test="${empty admin}">
<a href="#">登录</a>
<a href="#">个人中心</a>
</c:if>
<c:if test="${ not empty admin}">
欢迎,${admin.adminname}登录
<a href="#">[退出]</a>
</c:if>
</body>
</html>
3.中间菜单栏(main.jsp)
<html>
<head>
<title>中间页面</title>
</head>
<body>
</body>
</html>
4.底部菜单栏(foot.jsp)
<html>
<head>
<title>Title</title>
</head>
<body>
<center>
xxx公司版权所有 <sup>©</sup> 2021-8-30-2022-8-30
</center>
</body>
</html>
二十.重定向
1.请求转发和重定向的区别
(1)地址栏是否有变化
请求转发没有变化
重定向:最终访问静态资源/动态资源文件,有明显变化(2)是否能够访问WEB-INF的资源文件
请求转发是可以访问的
重定向404:访问不了(3)开发过程中使用,如果在jsp上面有业务数据需求的话
需要使用请求转发;整个过程request对象一致
如果仅仅是完成页面跳转,没有业务需求的话,直接可以重定向(4)是否能跨工程访问外部的资源文件
重定向可以,请求转发只能访问本工程下的资源
@WebServlet("/responseDemo")
public class ResponseServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws javax.servlet.ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//重定向
//当前用户发送请求
//http://localhost:8080/Maven_response_war/responseDemo
//给request域中存储一个数据
// request.setAttribute("msg","hello"); :刚才重定向后面jsp页面拿不到数据,所以两次请求的request不相同!
//解析路径:给服务端程序添加一个响应头location
//public void setHeader(String name, String value)
//服务器此时就会将这个响应头携带给浏览器
//response.setHeader("location",request.getContextPath()+"/response.jsp");
//并且添加一个响应状态码 302状态码:进一步请求
// public void setStatus(int sc)
//response.setStatus(302);
//location+302:重定向的原理
//简写格式
//public void sendRedirect(String location) throws IOException
// response.sendRedirect(request.getContextPath()+"/response.jsp");
//response.sendRedirect(request.getContextPath()+"/WEB-INF/msg.jsp");
/*
* 重定向访问外部web工程的资源文件
* */
response.sendRedirect("/Maven_dev_02_war/index.jsp");
System.out.println("重定向成功");
}
}
二十一.JSON
1.Json(JavaScript Object Notation)(JS对象简谱)
-
是一种数据交互格式
-
使用json可以表示一个数据或者存储数据
通用格式:
- 普通字符串/数组/复杂数据:json嵌套
{“key”:value}
var user = {“username”:“张三”,“age”:20} ;
2.Json格式(普通字符串/列表/Map)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json数据</title>
<script>
//Json:js对象---来描述数据/存储数据(交互格式)
//语法规则:{"key":value}
//普通字符串格式
//定义一个json对象
var user = {"name":"张三","age":20,"address":"西安市"} ;
//获取name对应的值
//方式1:json对象['key'] 获取value值
//var name = user['name'] ;
//方式2:json对象.key--->获取value值(推荐使用)
var name = user.name;
var age = user.age ;
// alert(name) ;
document.write("name:"+name+",age:"+age+",address:"+user.address) ;
document.write("<hr/>") ;
//其他格式
//列表格式 [{},{},{},{},{}....]
var users = [
{"name":"马三奇","age":20,"gender":"男","address":"西安市"},
{"name":"文章","age":35,"gender":"男","address":"西安市"},
{"name":"高圆圆","age":42,"gender":"女","address":"北京市"},
{"name":"鲁班7号","age":18,"gender":"男","address":"咸阳市"}
] ;
//获取高圆圆这个信息
//访问方式:json对象[索引值(0开始)].key; 获取value
var name = users[2].name ;
var age = users[2].age ;
var gender = users[2].gender ;
var address = users[2].address ;
document.write("姓名是:"+name+",年龄是:"+age+",性别是:"+gender+",地址是:"+address) ;
document.write("<hr/>") ;
//类似于Map的方式
//复杂的数据格式
/**
* class User{
*
* //用户有哪些账户
* List<Acccount> list ;
* }
*
*
*
*/
var jsonStr = {
"persons":
//key
//value :List列表 类似于 List<User>
[
// {"name":"马三奇","age":20,"gender":"男","accounts":[{"accountid":"1","acountname":"account1"}]},
{"name":"马三奇","age":20,"gender":"男","address":"西安市"},
{"name":"文章","age":35,"gender":"男","address":"西安市"},
{"name":"高圆圆","age":42,"gender":"女","address":"北京市"},
{"name":"鲁班7号","age":18,"gender":"男","address":"咸阳市"},
]
} ;
//访问 {"name":"马三奇","age":20,"gender":"男","address":"西安市"},
var name = jsonStr.persons[0].name ;
var age = jsonStr.persons[0].age ;
var gender = jsonStr.persons[0].gender ;
var address = jsonStr.persons[0].address ;
document.write("姓名是:"+name+",年龄是:"+age+",性别是:"+gender+",地址是:"+address) ;
</script>
</head>
<body>
</body>
</html>
3.Json遍历
<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>
4. 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…)
原生Ajax操作步骤
1.创建web客户端的代理对象
2.代理对象建立连接
3.发送请求
4.服务器将响应数据携带代理对象,-----响应客户端
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax操作步骤</title>
<script>
//1)创建web客户端的代理对象
var xmlhttpRequest;
if (window.XMLHttpRequest) {
//Chrom、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。
xmlhttpRequest = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2)代理对象建立连接
/**
* open(method, url, async)
* method:string--- 提交方式(get/post)
* url:string---访问服务器url接口地址
* get提交 :url接口地址?参数名称1=参数值1&参数名称2=参数值2... +send()
* post提交:url接口地址 +send(参数名称1=参数值1&参数名称2=参数值2..)
*
* async:boolean---是否异步提交 默认值就是true(异步提交)
*/
// xmlhttpRequest.open("get","ajaxServlet?username=tom",true) ;//参数3可以省略不写,默认就true
xmlhttpRequest.open("post","ajaxServlet",true) ;//参数3可以省略不写,默认就true
//3)发送请求
/**
*
*
* post请求:
* 设置请求头setRequestHeader(header, value)
* send(stirng:参数):支持json格式
*/
// xmlhttpRequest.send(); //默认发送get请求
/*xmlhttpRequest.setRequestHeader("Content-type","applocation/json") ;
xmlhttpRequest.send(JSON.stringify({"username:":"zhangsan","age":20})) ;*/ //es5语法
//设置post请求头
// Content-type:请求内容类型
xmlhttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded") ;
xmlhttpRequest.send("fname=Henry&lname=Ford") ;//key1=value1&key2=value2...
//4)服务器将响应数据携带代理对象,-----响应客户端
//onreadystatechange:准备响应的就绪状态
xmlhttpRequest.onreadystatechange=function () {
//需要考虑两个属性
//readyState
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 正在处理请求
//4: 请求已完成且响应已就绪
//status:响应的状态码 :200
if(this.readyState==4 && this.status==200){
//接收响应数据
var content = this.responseText ; //接收服务器响应过来的文本内容
// 响应格式:支持json/html/xml
alert(content) ;
//自定义函数:function 方法名()
}
} ;
</script>
</head>
<body>
</body>
</html>
5. Jquery_ajax
接收 Jquery 的 ajax 方式的参数
@WebServlet("/JqAjaxServlet")
public class MyJqueryAjaxServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//接收参数
String username = request.getParameter("name");
System.out.println(username);
//调用业务接口
//响应给客户端
response.getWriter().write("数据已经收到");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
}
方式一 :
<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>
方式二 :
<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>
方式三 :
<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>
二十二. Linux的基本命令
我在哪 pwd:查看当前目录位置
去哪 cd:change Directory :切换目录
cd /目录名字:进入某个文件中
ls:罗列当前目录下文件或者其他目录名称
ll -a:罗列文件或者文件夹的详情信息
clear:清屏命令
1.Git
Git的三个区
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOVfBo8H-1630742190654)(图片1/QQ浏览器截图20210904140230.png)]
2. Git的常用命令
git init : 在当前某个目录中 初始化本地库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rgtBs5Jo-1630742190656)(图片1/QQ浏览器截图20210904140726.png)]
git add [filename] 将当前文件添加暂存区中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V4ccVxia-1630742190658)(图片1/QQ浏览器截图20210904140834.png)]
git status [filename]: 查看当前文件状态:暂存区
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qfof3we3-1630742190660)(图片1/QQ浏览器截图20210904140951.png)]
git commit -m “提交的注释文字” [filename] : 将暂存区中的文件提交本地库中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fF08uq9i-1630742190663)(图片1/QQ浏览器截图20210904141134.png)]
全局签名信息:只是代表开发人员的身份信息(邮箱和名字随便起)
git config --global user.email “you@example.com”
git config --global user.name “Your Name”
默认位置:C:\Users\Administrator
.gitcnofig:全局签名信息
[user]
email = you@example.com
name = Your Name
创建分支以及查看所有分支
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CJkYOxv9-1630742190670)(图片1/QQ浏览器截图20210904143823.png)]
切换分支 :一般开发人员需要有自己的分支 ,在自己的分支上开发!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kduarh7H-1630742190671)(图片1/QQ浏览器截图20210904143910.png)]
主分支进行添加远程仓库
需要在gitee/githup建立远程仓库
https://gitee.com/zhangyangyangzhang/my-code.git 地址比较长
给地址起一个别名
git remote add 别名(origin) url地址(https://gitee.com/zhangyangyangzhang/my-code.git)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-91Dwuq1I-1630742190672)(图片1/QQ浏览器截图20210904144122.png)]
将本地库的代码推送到远程仓库
git push -u 远程仓库别名 分支名称(主分支/其他分支名称);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dd8zrgWq-1630742190672)(图片1/QQ浏览器截图20210904144256.png)]
其他开发人员从远程库中代码克隆下来
git clone 仓库地址
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vAgQQeSb-1630742190673)(图片1/QQ浏览器截图20210904144432.png)]
另外开发人员将更新代码拉取
git pull -u origin 分支名称
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fx43gTyu-1630742190674)(图片1/QQ浏览器截图20210904144640.png)]
3.Git版本控制工具的开发流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KCJTacT7-1630742190675)(图片1/QQ浏览器截图20210904145021.png)]
4. idea中使用Git的步骤
1.将当前项目初始化本地库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I4v30C6A-1630742190676)(图片1/QQ浏览器截图20210904145243.png)]
2. 先设置提交的忽略文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xUDdAgfA-1630742190677)(图片1/QQ浏览器截图20210904145410.png)]
3. 将当前项目下的所有文件都添加到暂存区中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WPXMKvmW-1630742190678)(图片1/QQ浏览器截图20210904145610.png)]
4. 将当前项目提交到本地库中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aYFMlJFl-1630742190678)(图片1/QQ浏览器截图20210904145813.png)]
5. 将本地库中的项目推送到远程库中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x7qwELAH-1630742190680)(图片1/QQ浏览器截图20210904145930.png)]
6. 将本地库推送远程库_设置远程库的地址
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oEZLGlXK-1630742190681)(图片1/QQ浏览器截图20210904150133.png)]
7. 团队协作开发流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gZ5nryir-1630742190681)(图片1/QQ浏览器截图20210904150326.png)]
二十三.过滤器(Filter)
web 三大组件之一
1. 过滤器的生命周期
初始化
init(FilterConfig config):默认的初始化时机:web容器启动时被创建
参数FilterConfig:过滤器的初始化配置信息
过滤完成的任务
doFilter(ServletRequest req, ServletResponse resp, FilterChain chain)
参数1:
req:请求
参数2:
resp:响应对象
将req和resp:转成子接口HttpServletRequest / HttpServletResponse
参数3:FilterChain:过滤链 接口
自己过滤链的规则
完成过滤任务后,方行到服务器端,准备响应
过滤终止(死亡)
public void destroy() :服务器正常关闭,过滤器销毁…
public class MyFirstFilter implements Filter {
String encoding ;
//无参构造方法
public MyFirstFilter(){
System.out.println("过滤器对象被创建了....");
}
public void init(FilterConfig config) throws ServletException {
System.out.println("MyFirstFilter.init()方法====>被调用了....");
encoding = config.getInitParameter("encoding");
System.out.println(encoding);
}
//过滤任务
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
HttpServletRequest request = (HttpServletRequest) req;
String method = request.getMethod();
System.out.println(method);
System.out.println("MyFirstFilter.doFilter()方法=====>被调用了");
chain.doFilter(req, resp);//放行...
//获取请求对象
HttpServletResponse response = (HttpServletResponse) resp;
response.setContentType("text/html;charset='"+encoding+"'");
response.getWriter().write("响应成功");
}
public void destroy() {
System.out.println("MyFirstFilter.destory()====>被调用了...");
}
}
2. 过滤器的属性
属性 | 属性意思 |
---|---|
String[] urlPatterns() | 拦截的路径 |
String filterName() | 给过滤器设置名称:默认当前类名 (不需要书写) |
String[] value() | 设置拦击路径:如果是指定一个属性并且 value属性,value省略不写 |
DispatcherType[] dispatcherTypes () | 配置拦截的链路规则 |
DispatcherType.REQUEST | 直接请求拦截 (默认值) |
DispatcherType.FOWARD | 请求转发拦截 |
DispatcherType.INCLUDE | 包含指定的路径的时候拦截 |
WebInitParam[] initParams() | 配置过滤器的初始化参数 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UUDHJkH-1630742190682)(图片1/QQ浏览器截图20210904153757.png)]
3. 邮件激活的流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dOWbRTMe-1630742190682)(图片1/QQ浏览器截图20210904154508.png)]
用户激活的流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RilxjvcG-1630742190683)(图片1/QQ浏览器截图20210904154647.png)]
二十四. Cookie
- 1)创建Cookie对象
- 2)后台提示
- 3)将cookie信息通过响应对象携带给浏览器存储起来
- 4)当前浏览器下一次请求服务器 时候:就会将cookie的信息添加请求头
@WebServlet("/cookieDemo1")
public class CookieDemo extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//1)创建Cookie对象
//Cookie(String name, String value)
Cookie cookie = new Cookie("username","gaoyuanyuan") ;
Cookie cookie2 = new Cookie("time","dataTime") ;
//2)后台提示
System.out.println("创建cookie完毕");
//3)将cookie信息通过响应对象携带给浏览器存储起来
//给第一个cookie对象设置有效期
cookie.setMaxAge(60*60*24*7);//秒 7天
response.addCookie(cookie);
response.addCookie(cookie2);
/**
* 3)原理:
* 设置响应头:Set-Cookie: username=gaoyuanyuan 后面cookie的内容
*/
response.getWriter().write("cookie已经携带给浏览器");
//4)当前浏览器下一次请求服务器 时候:就会将cookie的信息添加请求头
//request header
//Cookie:key=value&key=value...
//public Cookie[] getCookies()
Cookie[] cookies = request.getCookies();
if(cookies!=null){
//存在
//遍历cookie数组
for(Cookie c : cookies){
//通过cookie对象获取名称以及内容
String cookieName = c.getName();
String cookieValue = c.getValue();
System.out.println(cookieName+"="+cookieValue);
}
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
}
Cookie会话管理的使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luQCg1NW-1630742190684)(图片1/QQ浏览器截图20210904155322.png)]