JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）
JavaEE学习日志（四十六）
使用bootstrap实现简单的商城前端页面
要求：使用栅格系统进行布局，并在头部实现简单的响应式
电脑屏幕显示
平板屏幕显示
手机屏幕显示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>黑马商城</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--
整体布局：所有内容，放在一个容器中
-->
<div class="container">
<!--
页面头部，logo，正品，登陆注册
一行：4 4 4占比
-->
<div class="row">
<div class="col-md-4 col-xs-6 col-sm-6">
<img src="img/logo2.png" />
</div>
<!--实现响应式效果，到达手机屏幕（超小）则隐藏-->
<div class="col-md-4 hidden-xs hidden-sm">
<img src="img/header.png" />
</div>
<div class="col-md-4 col-xs-6 col-sm-6" style="text-align: center;">
<br>
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--反色导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</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="#">手机数码 <span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">电脑办公</a>
</li>
<li>
<a href="#">家具家电</a>
</li>
<li>
<a href="#">户外运动</a>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="输入商品名">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--反色导航条结束-->
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li style="background: #222222;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li style="background: #222222;" data-target="#carousel-example-generic" data-slide-to="1"></li>
<li style="background: #222222;" 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>
<!--轮播图结束-->
<!--
热门商品+图
1行，12列
-->
<div class="row" style="margin-top: 10px;">
<div class="col-md-12" style="font-size: 25px; padding-left: 20px;">
热门商品<img src="img/title2.jpg">
</div>
</div>
<!--
商品展示区域
一行，2，10
-->
<div class="row">
<div class="col-md-2">
<img src="img/big01.jpg" height="420" width="200">
</div>
<!--再次划分，分为两个行
第一行：6，2，2，2
第二行：2，2，2，2，2，2
-->
<div class="col-md-10">
<div class="row" style="margin-left: 10px;">
<div class="col-md-6">
<img src="img/middle01.jpg" />
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
</div>
<div class="row" style="margin-left: 10px;">
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
</div>
</div>
</div>
<!--
宠物粮食广告
-->
<div class="row">
<div class="col-md-12">
<img src="img/ad.jpg">
</div>
</div>
<!--
热门商品+图
1行，12列
-->
<div class="row" style="margin-top: 10px;">
<div class="col-md-12" style="font-size: 25px; padding-left: 20px;">
热门商品<img src="img/title2.jpg">
</div>
</div>
<!--
商品展示区域
一行，2，10
-->
<div class="row">
<div class="col-md-2">
<img src="img/big01.jpg" height="420" width="200">
</div>
<!--再次划分，分为两个行
第一行：6，2，2，2
第二行：2，2，2，2，2，2
-->
<div class="col-md-10">
<div class="row" style="margin-left: 10px;">
<div class="col-md-6">
<img src="img/middle01.jpg" />
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
</div>
<div class="row" style="margin-left: 10px;">
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
<div class="col-md-2" style="text-align: center;">
<img src="img/small03.jpg" />
<br />冬瓜
<br /><span style="color: red;">$299</span>
</div>
</div>
</div>
</div>
<!--
底部广告
1行12列
-->
<div class="row">
<div class="col-md-12" style="margin-top: 5px;">
<img src="img/footer.jpg" width="1170">
</div>
</div>
<!--
超链接
-->
<div class="row" style="text-align: center;margin-top: 5px;">
<div class="col-md-12">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">服务声明</a>
<a href="#">法律声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016
</div>
</div>
<br />
<br />
<br />
</div>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
单例设计模式
设计模式：
- 在软件开发当中，遇到各种问题，前人就把他汇总处理
- 基于面向对象思想
- java中23种设计模式
单例设计模式：保证一个类的对象，在内存中具有唯一性
单例设计模式：饿汉式
运行一个类，必须进入内存中的方法区，进入后，会立刻初始化自己的静态成员。
例如：
类Single对象想要具有唯一性
实现步骤：
- 私有构造方法
- 自己创建自己类的对象（静态）
- 提供一个公共的访问方式，方法（静态）
public class Single {
//私有构造
private Single(){}
//自己创建自己类的对象
private static Single s = new Single();
//定义方法，返回创建的对象
public static Single getInstance(){
return s;
}
}
此时创建的Single对象，都是同一个
public class test {
public static void main(String[] args) {
//获取Single类的对象，方法getInstance();
Single s = Single.getInstance();
System.out.println(s);//@7291c18f
Single s1 = Single.getInstance();
System.out.println(s);//@7291c18f
Single s2 = Single.getInstance();
System.out.println(s);//@7291c18f
}
}
单例设计模式：懒汉式
懒汉式：对象延迟加载
实现步骤：
- 私有构造方法
- 自己创建自己类的变量，不创建对象
- 提供一个公共的访问方式，方法
public class Single {
//私有构造
private Single() {
}
//自己创建自己类的变量，不创建对象
private static Single s = null;
//定义方法，返回创建的对象
public static Single getInstance() {
//判断变量s是不是null
if (s == null) {
s = new Single();
}
return s;
}
}
但会出现一个线程安全问题，可能会因为线程安全问题而导致对象不唯一
优化代码：
public class Single {
//私有构造
private Single() {
}
//自己创建自己类的变量，不创建对象
private static Single s = null;
//定义方法，返回创建的对象
//保证多线程运行的安全问题，同步
//同步方法，只能被一个线程调用
public static synchronized Single getInstance() {
//判断变量s是不是null
if (s == null) {
s = new Single();
}
return s;
}
}
简单工厂设计
工厂是创建对象的，创建对象，需要就下订单（传递参数）。
代码示例：
Animal类
public abstract class Animal {
public abstract void eat();
}
Cat类
public class Cat extends Animal {
@Override
public void eat() {
System.out.println("吃鱼~~");
}
}
Dog类
public class Dog extends Animal {
@Override
public void eat() {
System.out.println("啃骨头~~~~");
}
}
工厂类，专门生产动物
public abstract class Factory {
/*
工厂类，定义方法，创建动物对象
下订单-->方法的参数
*/
public static Animal getInstance(String s){
if("cat".equals(s)){
return new Cat();
}
if("dog".equals(s)){
return new Dog();
}
return null;
}
}
测试类，通过工厂获取需要的动物
public class Test {
public static void main(String[] args) {
//工厂类的方法，获取对象
Animal dog = Factory.getInstance("dog");
dog.eat();
Animal cat = Factory.getInstance("cat");
cat.eat();
}
}
模板方法设计
解决问题：功能有的知道，有的不知道
解决方法：不知道的部分对外暴露出去（方法），等待子类延迟实现
代码示例：需要不同格式的日期输出，不同的格式通过不同的子类去实现
父类
public abstract class Template {
/*
功能有的知道，有的不知道
不知道的部分：对外暴露出去（方法），等待子类延迟实现
*/
public void format(){
template();
}
public abstract void template();
}
子类实现
public class SubTemplate extends Template {
@Override
public void template() {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
String str = sdf.format(new Date());
System.out.println(str);
}
}
测试类：父类调用子类方法
public class Test {
public static void main(String[] args) {
Template t = new SubTemplate();
t.format();
}
}
4980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
