week_09_Bootstrap,后台登录,Json,Ajax,Git

最新推荐文章于 2021-09-30 14:02:03 发布

谁家跑出来的小黑

最新推荐文章于 2021-09-30 14:02:03 发布

阅读量687

点赞数

分类专栏：总结文章标签： ajax bootstrap json

本文链接：https://blog.csdn.net/weixin_49433620/article/details/120002005

版权

总结专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Bootstrap

栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局
一行可以指定多少列(一行最多12列)
class=“col-设备编号-列数”

设备	范围大小
xs(超小屏幕)(手机端)	<768px
sm(小屏幕)(平板电脑)	>=768px
md(中等屏幕)(普通桌面显示器)	>=992px
lg(大屏幕)(大桌面显示器)	>=1200px

使用栅格系统

前提需要有一个布局容器:大的div里面指定boostrap的class属性
class=“container”:占用固定宽度并可以响应式
class=“container-fluid”:占用整个宽度100%(全部视图)

 <!--导入全局样式文件-->
    <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>

Bootstrap样式

表格样式

boostrap提供的表格全局样式

class=“table” 默认样式
class=“table-stripe” 斑马条纹样式
class=“table-bordered” 带边框的表格
class="table-hover"鼠标悬浮有颜色标记
class="table-condensed"紧缩表格

<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="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>

表单样式

class=“form-group” :让label和input标签或者下列菜单进行更好的排列
labe元素:指定输入要输入的内容
class=“form-control” 在input或者下列菜单select/textarea 使用居多,让当前视图占width100%
form-inline :让表单内容其内容左对齐
class=“form-horizontal”:将label元素以及input进行水平布局

<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>

按钮样式_图片

class =“btn btn-default”:默认的按钮样式
btn btn-primary：首选项的按钮
btn btn-success: 成功标志的按钮
btn btn-info:普通信息按钮
btn btn-warning: 警告按钮(颜色—一种暖色)
btn btn-danger: 危险按钮
class=“img-responsive”:支持响应式布局

<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>

Bootstrap组件

下拉菜单/导航条

下拉菜单

class=“dropdown” :下单触发器以及下列选项都会包含在属性中
按钮式下列菜单:将所有的按钮放在 class=“btn-group” (按钮组,点击按钮,触发下拉菜单)

导航条

nav元素: 导航条组件
class=“navbar-header”:前部分导航条
navbar-brand:超链接

<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>

分页组件

aria-label=“Page navigation”:分页组件

<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">&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>

</body>
</html>

内置js插件_轮播图

<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

管理员实体(Admin)

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 + '\'' +
                '}';
    }
}

管理接口(AdminService)

boolean isLogin(Admin admin) ;

public interface AdminService {
    /**
     * 判断登录是否成功
     * @param name  管理名称
     * @param password  密码
     * @return  如果true,则登录成功;否则,失败!
     */
    boolean isLogin(String name,String password) ;
}

管理员业务接口实现(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;
    }
}

管理员数据接口(AdminDao)

Admin selectAdmin(String name);

public interface AdminDao {

    /**
     * 根据管理名称获取管理实体
     * @param name 管理员名称
     * @return 返回指定管理员实体
     */
    Admin findAdminByName(String name) ;
}

管理员接口实现层(AdminDaoImpl)

dbUtils基本操作
查询实体

public class AdminDaoImpl implements AdminDao {
    @Override
    public Admin findAdminByName(String name) {
        try {
            //创建QueryRunner对象
            QueryRunner qr = new QueryRunner(JdbcUtils.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;
    }
}

验证码(CheckCodeServlet)

通过java语言获取绘制图片

@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);
	}
}

管理员登录后台(AdminLogin)

@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);
    }
}

数据库连接池工具类(JdbcUtils)

public class JdbcUtils {

    //成员变量位置
    private  static DataSource ds ;
    //为了保证线程安全:每一线程使用自己的Connection (张三/李四)
    private static ThreadLocal<Connection>  t1 = new ThreadLocal<>() ; //提供线程的局部变量保存连接对象



    //构造方法私有化
    private JdbcUtils(){}

    //静态代码块
    static{
        try {
            //读取数据库连接池的配置文件----->通过DruidDataSourceFactory工厂类创建DataSource
            //创建一个属性集合列表
            Properties prop = new Properties() ;
            //读取druid.properties
            InputStream inputStream = JdbcUtils.class.getClassLoader().
                    getResourceAsStream("jdbc.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 = JdbcUtils.getConnection();
        System.out.println(connection);
    }*/
}

配置文件jdbc.properties

driverClassName=com.mysql.cj.jdbc.Driver

url=jdbc:mysql://localhost:3306/racemall?

characterEncoding=utf8&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true

username=root

password=123456

initialSize=5

maxActive=10

maxWait=3000

框架(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>

管理员登录页面(admin_login.jsp)(Jquery)

触发点击事件 :Jquery
页面在载入事件:需要将body的内容全部加载完毕

<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>

左边菜单页面(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>

顶部页面(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>

中间页面(main.jsp)

<html>
<head>
    <title>中间页面</title>
</head>
<body>

</body>
</html>

底部页面(foot.jsp)

<html>
<head>
    <title>Title</title>
</head>
<body>
<center>
    xxx公司版权所有 <sup>&copy;</sup> 2021-8-30-2022-8-30
</center>
</body>
</html>

定时刷新(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("定时跳转成功...");
    }
}

重定向

请求转发和重定向的区别

(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(JavaScript Object Notation)(JS对象简谱)

是一种数据交互格式
使用json可以表示一个数据或者存储数据

通用格式:

普通字符串/数组/复杂数据:json嵌套
{“key”:value}
var user = {“username”:“张三”,“age”:20} ;

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>

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>

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>

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);
    }
}

方式1

<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

<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

<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:清屏命令

Git

git三个区

本地仓库
暂存区
远程仓库

git常用命令

git init

在当前某个目录中初始化本地库

git add [filename]

将当前文件添加暂存区中

git status [filename]

查看当前文件状态:暂存区

git commit -m “提交的注释文字” [filename]

将暂存区中的文件提交本地库中

全局签名信息

只是代表开发人员的身份信息(邮箱和名字随便起)

创建分支以及查看所有分支

在这里插入图片描述

主分支进行添加远程仓库

在这里插入图片描述

将本地库的代码推送远程仓库

在这里插入图片描述

其他开发人员将远程仓库代码克隆下来

在这里插入图片描述

另外开发人员将更新代码拉取

在这里插入图片描述

idea中使用git(步骤)

1.将当前项目初始化本地库

请添加图片描述

2.先设置提交的忽略文件

请添加图片描述

3.将当前项目下的所有文件都添加到暂存区中

请添加图片描述

4.将当前项目提交本地库中

请添加图片描述

5.将本地库的项目推送远程库

请添加图片描述

6.设置远程库的地址

请添加图片描述

过滤器(Filter)

Web三大组件之一

过滤器生命周期

初始化
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()====>被调用了...");
    }
}

过滤器属性

属性名字	属性意思
String[] urlPatterns()	拦截的路径
String filterName()	给过滤器设置名称:默认当前类名 (不需要书写)
String[] value()	设置拦击路径:如果是指定一个属性并且 value属性,value省略不写
DispatcherType[] dispatcherTypes ()	配置拦截的链路规则
DispatcherType.REQUEST	直接请求拦截 (默认值)
DispatcherType.FOWARD	请求转发拦截
DispatcherType.INCLUDE	包含指定的路径的时候拦截
WebInitParam[] initParams()	配置过滤器的初始化参数

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);
    }
}

谁家跑出来的小黑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
week_09_Bootstrap,后台登录,Json,Ajax,Git

Bootstrap栅格系统栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局一行可以指定多少列(一行最多12列)class=“col-设备编号-列数”设备范围大小xs(超小屏幕)(手机端)<768pxsm(小屏幕)(平板电脑)>=768pxmd(中等屏幕)(普通桌面显示器)>=992pxlg(大屏幕)(大桌面显示器)>=1200px使用栅格系统前提需要有一个布局容器:大的div里面指定bo
复制链接

扫一扫