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() {}@Overridepublic 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 {@Overridepublic boolean isLogin(String name, String password) {//调用数据接口AdminDao adminDao = new AdminDaoImpl() ;Admin admin = adminDao.findAdminByName(name);//判断是否为nullif(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 {@Overridepublic Admin findAdminByName(String name) {try {//创建QueryRunner对象QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource()) ;//sqlString 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个随机验证码，12EyString 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);//获取sessionHttpSession 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.jsprequest.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.propertiesInputStream 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线程中已经存在Connectionreturn 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;   获取valuevar 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, IE5xhttp = 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可以省略不写,默认就truexmlhttpRequest.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:响应的状态码 :200if(this.readyState==4 && this.status==200){//接收响应数据var content = this.responseText ; //接收服务器响应过来的文本内容//  响应格式:支持json/html/xmlalert(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",//请求后台的提交方式,弱不写,就是getdata: "{'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);}
}

week_09_Bootstrap,后台登录,Json,Ajax,Git相关推荐

json 取值判断_对应后台传json ajax 获取值判断
第一种: java :AJAXUtil.success(response,"{\"msg\":\"notsucess_start\"}"); ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
c#实现ajax通信：向后台发送JSON字符串，接收响应字符串，并转换为对象
全栈工程师开发手册 (作者:栾鹏) c#教程全解 c#实现ajax通信,通过向服务器后台发送json数据,接收响应数据提交给前台. 其中包含两个主要函数,发送数据,接收响应数据的Http请求响应函数. ...
【看板】ajax动态获取后台传来json数据，加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
前台传json ajax,ajax使用json数组------前端往后台发送json数组及后台往前端发送json数组...
1.引子 2.前端往后台传输json数据 JSON.stringify()方法将json对象转为字符串形式.如果不使用**JSON.stringify()**方法,后台的java代码将不能获得json ...
45 大事件项目 =＞ [01] 后台管理项目ajax练习
目标利用Git管理大事件项目代码安装并且使用 Live Server插件学会查阅layui文档绘制出登录注册页面结构添加表单元素自定义验证规则查阅接口文档完成登录注册功能知道iframe ...
Ajax基础,JSON,Ajax进阶
Ajax 一.Ajax基础 (一)Ajax简介概念:Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指 ...
04 | 后台登录：基于账号密码的登录方式(上)
你好, 我是程序猿零壹. 在上一篇文章如何快速部署一个基于laravel框架开发的网站中,我们一起使用laravel框架快速部署了一个网站.但是目前网站上只有一个默认的页面,显得有点孤单寂寞冷,是时候 ...
MVC使用EF实现后台登录首页以及列表增删改查
数据库设计 CREATE DATABASE [InfoManagerSystem] GO USE [InfoManagerSystem] GO /****** Object: Table [dbo]. ...

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

Bootstrap

栅格系统

Bootstrap样式

表格样式

表单样式

按钮样式_图片

Bootstrap组件

下拉菜单/导航条

分页组件

内置js插件_轮播图

后台登录_加入验证码_使用HttpSession

管理员实体(Admin)

管理接口(AdminService)

管理员业务接口实现(AdminServiceImpl)

管理员数据接口(AdminDao)

管理员接口实现层(AdminDaoImpl)

验证码(CheckCodeServlet)

管理员登录后台(AdminLogin)

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

配置文件jdbc.properties

框架(admin_index.jsp)

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

左边菜单页面(menu.jsp)

顶部页面(header.jsp)

中间页面(main.jsp)

底部页面(foot.jsp)

定时刷新(refresh)

重定向

请求转发和重定向的区别

Json(JavaScript Object Notation)(JS对象简谱)

Json格式(普通字符串/列表/Map)

Json遍历

Ajax

原生Ajax的特定的方法和属性

原生Ajax操作步骤

Jquery_ajax的方式

方式1

方式2

方式3

Linux的基本命令

Git

git三个区

git常用命令

git init

git add [filename]

git status [filename]

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

全局签名信息

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

主分支进行添加远程仓库

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

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

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

idea中使用git(步骤)

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

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

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

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

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

6.设置远程库的地址

过滤器(Filter)

过滤器生命周期

过滤器属性

Cookie

week_09_Bootstrap,后台登录,Json,Ajax,Git相关推荐

最新文章

热门文章