前后端分离---响应式布局---bootstrap网页开发
一、响应式布局定义
定义：
响应式布局：简单来说就是根据浏览设备不同，自动改变布局，图片，文字效果等。。不会影响用户浏览体验。
响应式网页必须要注意的事情：
- 不能固定元素的宽度，必须是流式布局 (默认文档流 + 浮动)；
- 文字和图片随着容器的大小改变；
- 媒体查询技术；
- 过于复杂的页面不适合响应式；
媒体查询：css3
media 媒体 浏览网页的设备 screen (pc / pad / phone )
media Query 媒体查询 ：可以根据当前的浏览设备的不同（包括尺寸、方向）有选择性的执行一部分css样式，忽略其他样式。
浏览设备的定义：
- pc >= 992 大屏 一行显示4个div(200*200);
- 768 <= pad <= 991 中屏 一行显示2个div(h：200);
- phone <= 767 小屏 一行显示一个div(h-200);
css样式中的注意要点：
- cursor: pointer; 点击按钮 手型
- float: left; 向左浮动
- 待续
二、bootstrap框架
bootstrap封装好很多常用的样式，只需要调用类名，但是项目中，对于很多样式，需要自己手写和媒体查询。
注意：导入四个包的时候顺序不能乱
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js">script>
<script src="js/popper.min.js">script>
<script src="js/bootstrap.min.js">script>
（1）bootstrap支持四种分辨率：
- 大屏幕lg (>=1200px)；
- 中等屏幕md (>=992px)；
- 小屏幕sm (>=768px)；
- 超小屏幕xs (<768px)；
bootstrap默认字体大小 0.25rem (1 rem = 16px );
button样式：与 btn 混用；
- btn-primary 主要的 蓝色；
- btn-success 绿色；
- btn-warning 黄色；
- btn-outline-success 透明绿色；
<div class="container">
<h1>按钮相关的样式h1>
<button class="btn btn-primary">按钮button>
<input type="button" value="成功" class="btn btn-success">
<a href="" class="btn btn-info">信息a>
<button class="btn btn-danger">按钮button>
<button class="btn btn-dark">按钮button>
<button class="btn btn-light">按钮button>
<button class="btn btn-outline-danger">按钮button>
<button class="btn btn-outline-secondary">按钮button>
<button class="btn btn-outline-success">按钮button>
<button class="btn btn-outline-warning">按钮button>
<hr />
<button class="btn btn-outline-success btn-lg">按钮button>
<button class="btn btn-outline-success btn-block">按钮button>
<button class="btn btn-outline-success btn-sm">按钮button>
div>
（2）图片样式：
- rounded 0.25rem圆角；
- rounded-circle 圆角50% -圆形图片；
- img-thumbnail 缩略图 有一圈边框；
- img-fluid 响应式图片 图片会缩放 不会超过原始大小；
<h1>图片相关的样式h1>
<img src="img/1.png" class="rounded">
<img src="img/2.png" class="rounded-circle">
<img src="img/3.png" class="img-thumbnail">
<img src="img/3.png" class="img-fluid">
（3）文字样式：
- text-danger/warning/success/info 文本颜色；
- text-uppercase/lowercase 大小写；
- text-capitalize 首字母大写；
- font-weight-normal/light/weight 正常/加细/加粗；
- .h1 - .h6 不同字体；
- text-left/right/center/justify 文字水平对齐方式 左 右 中 两端 对齐；
<div class="text-danger text-capitalize font-weight-normal text-left">lorem ipsum dolor sit amet,consectetur adipisicing elit.
blanditiis cum esse et facere iste reiciendis reprehenderit?
Assumenda, eum fugit id incidunt maiores nostrum numquam, odit officiis omnis quae quisquam suscipit?div>
（4）列表相关：
- list-unstyled 去掉小圆点 左内边距清零；
- list-group 列表组(放在ol ul) list-group-item 列表项(放在li) list-group-item-warning/dangger/success 列表项颜色；
- acive 激活项 disabled 禁用项
<h1>列表相关h1>
<ul class="list-unstyled list-group">
<li class="list-group-item-danger list-group-item disabled">111li>
<li class="list-group-item-danger list-group-item">222li>
<li class="list-group-item-danger list-group-item">333li>
<li class="list-group-item-danger list-group-item">444li>
<li class="list-group-item-danger list-group-item active">555li>
ul>
（5）表格样式：
- table 对table本身和后代的布局
- table-bordered 为自己和后代添加边框线
- table-primary/success/info… 表格颜色
- table-striped 隔行变色
- table-hover 鼠标悬停变色
- table-responsive 响应式表格 写在table的父元素上
<div class="container table-responsive">
<h1>表格相关h1>
<table class="table table-bordered table-hover">
<tr class="table-primary">
<td>序号td>
<td>名称td>
<td>类型 td>
tr>
<tr>
<td>1001td>
<td>javatd>
<td>javatd>
tr>
<tr>
<td>1002td>
<td>web前端td>
<td>web前端td>
tr>
<tr>
<td>1003td>
<td>软件体系结构td>
<td>软件工程td>
tr>
table>
div>
（6）边框类型：
- border 基本类 border-0 清楚边框
- border-info/success 边框颜色
- border-left/top/right/button 单边设置
- border-left-0 单边消除
<h1>边框相关h1>
<div class="border border-info border-left-0">1111111111111111111div>
<div class="border ">2222222222222222222div>
（7）浮动类型：
- float-xl/md/sm/lg-left/right/none 响应式浮动
- clearfix 清除浮动 写在父元素上
<h1>浮动相关样式h1>
<div class="border float-lg-left float-md-right">1111111111111111111div>
<div class="border float-lg-left float-md-right">2222222222222222222div>
（8）显示与隐藏：
- visible 显示
- invisible 隐藏
- bg-primary/warning…背景色
- rounded 圆角 0.25rem
- rounded-0 去掉圆角
- rounded-top 上左+上右
- rounded-left/bottom/right 上左+下左/下左+下右+上右+下右
- m-auto 水平居中
<h1>显示与隐藏h1>
<div class="visible bg-danger rounded">3333333333div>
<div class="invisible">4444444444div>
（9）内外边距：
- m-auto 水平居中
- m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5 对应0/0.25/0.5/1/1.5/3 外边距
- p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 对应0/0.25/0.5/1/1.5/3 内边距
- *表示xl/lg/md/sm
<h1>内外边距h1>
<div class="m-auto">5555555555555555555div>
（10）尺寸相关：
- w-25/50/75/100 宽度 25%/50%/75%/100%
- h-25/50/70/100 高度 25%/50%/75%/100%
（11）栅格布局：重要：
- 必须要放在.container 或者.containner-fluid 中；
- 每一行都是一个row
- 在row中声明col 占份 一row有12col
- row 的直接子元素只能是col
- col 没有份额，一行可以超过12个，并且是平均分配宽度
- 可以用在响应式布局中；
<body>
<div class="container">
<div class="row">
<div class="col-4">1div>
<div class="col-4">2div>
<div class="col-4">3div>
div>
<div class="row">
<div class="col-3">1div>
<div class="col-6">2div>
<div class="col-3">3div>
div>
<div class="row">
<div class="col-2">1div>
<div class="col-8">2div>
<div class="col-2">3div>
div>
<div class="row">
<div class="col-3">1div>
<div class="col-3">2div>
<div class="col-3">3div>
<div class="col-3">4div>
div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">1div>
<div class="col-lg-3 col-md-6 col-sm-12">2div>
<div class="col-lg-3 col-md-6 col-sm-12">3div>
<div class="col-lg-3 col-md-6 col-sm-12">4div>
div>
<div class="row">
<div class="col-2">
<div class="row">
<div class="col-12">豆蔻年华div>
<div class="col-12">花样青春div>
<div class="col-12">而立之年div>
<div class="col-12">玫瑰岁月div>
div>
div>
<div class="col-8">
<div class="row">
<div class="col-3"><img src="img/1.png" alt="">div>
<div class="col-3"><img src="img/1.png" alt="">div>
<div class="col-3"><img src="img/1.png" alt="">div>
<div class="col-3"><img src="img/1.png" alt="">div>
div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ab consectetur debitis dolores dolorum eos et labore magni, nam,
nobis numquam odio quo saepe sed sequi, sunt totam voluptate. Aliquam, soluta.
div>
<div class="col-2">
<div class="row">
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Asperiores dolorem dolorum eveniet exercitationem,
ipsa molestias necessitatibus nobis placeat, quo rerum sed sint voluptates voluptatum.
Dicta libero nihil omnis quaerat tenetur!
div>
div>
div>
div>
div>
body>
（12）列偏移：
- offset-n 可以指定该列以及后面列向右偏移 n 个份；
- 可以运用响应式偏移；
<div class="container">
<h1>列偏移h1>
<div class="row">
<div class="col-3">第一列div>
<div class="col-3 offset-6">第二列div>
div>
div>
（13）表单样式：
- form-inline 内联表单 水平方向(弹性布局)
- form-group 堆叠表单 垂直方向
- form-control input的基本样式 (块级、圆角、边框等)
- 父元素：form-check 相对定位，让子元素以父元素进行偏移/定位
- 子元素：form-check-input 绝对定位，和form-check配合使用
<h1>表单h1>
<form action="" class="form-group">
<div class="row">
<div class="col-2">用户名：div>
<div class="col-8">
<input type="text" class="form-control">
div>
<div class="col-2">用户名包含字母数字3-8位div>
div>
<div class="row">
<div class="col-2">密码：div>
<div class="col-8">
<input type="password" class="form-control">
div>
<div class="col-2">密码包含字母数字3-8位div>
div>
<div class="row">
<div class="col-1 offset-5">
<button class="btn btn-outline-success">登录button>
div>
<div class="col-1">
<button class="btn btn-outline-danger">取消button>
div>
div>
form>
（14）下拉菜单：
- dropdown-toggle 追加一个倒三角形
- dropdown-menu 隐藏菜单选项
- data-toggle=“dropdown” 给button添加一个自定义属性，构成下拉菜单 作用：点击按钮激发事件，事件激发调用函数
- 配合 ul 列表使用
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">下拉菜单button>
<div class="dropdown-menu">
<ul class="list-group">
<li class="list-group-item"><a href="#">菜单1a>li>
<li class="list-group-item"><a href="#">菜单1a>li>
<li class="list-group-item"><a href="#">菜单1a>li>
<li class="list-group-item"><a href="#">菜单1a>li>
<li class="list-group-item"><a href="#">菜单1a>li>
ul>
div>
div>
（15）按钮组：
- btn-group 水平按钮组
- btn-group-vertical 垂直按钮组
- btn-group-sm … 调整按钮组大小
<h1>垂直按钮组h1>
<div class="btn-group-vertical btn-group-sm">
<button class="btn btn-danger">西蓝花炒肉button>
<button class="btn btn-warning">西蓝花凉拌button>
<button class="btn btn-info">水煮西蓝花button>
<button class="btn btn-primary">白炒西蓝花button>
div>
<h1>默认按钮组h1>
<div class="btn-group">
<button class="btn btn-danger">西蓝花炒肉button>
<button class="btn btn-warning">西蓝花凉拌button>
<button class="btn btn-info">水煮西蓝花button>
<button class="btn btn-primary">白炒西蓝花button>
div>
（16）信息提示框：
- alert 外层div class 基本类
- alert-danger/seccess… 提示框颜色
- alert-dismiss 修饰内部.close
- 内层span 取消提示信息框的X
- .close与父元素alert-dismissible配合使用
- 自定义属性 data-dismiss=“alert”
<h1>信息提示框h1>
<div class="alert alert-danger">
今天好冷！！！！！！！！
<span class="close" data-dismiss="alert">×span>
div>
（17）导航：
- nav 在ul上的基本类，定义了弹性布局
- nav-item 在li上与父级配合使用，让元素等宽显示
- nav-link 在a上设置了hover样式，块级元素
- justify-content-around 平均水平导航栏
- flex-column 垂直导航栏
<h1>水平导航h1>
<ul class="nav justify-content-around nav-justified">
<li class="nav-item"><a href="" class="nav-link">秒杀a>li>
<li class="nav-item"><a href="" class="nav-link">优惠券a>li>
<li class="nav-item"><a href="" class="nav-link">PLUS会员a>li>
<li class="nav-item"><a href="" class="nav-link">闪购a>li>
<li class="nav-item"><a href="" class="nav-link">品牌拍卖a>li>
ul>
（18）选项卡导航：
- ul.nav 变成选项卡使用 nav-tabs
- li.nav-item 配合父元素ul使用
- a.nav-link 同时a中也要加自定义属性data-toggle=“tab”
- div.tab-content让子元素隐藏或者显示
- div.tab.pane配合父元素的tab-content使用让子元素display:none
- 子元素div要添加id，被上面的a href引用，并且要与每一个a标签对应
- 默认显示 在默认的a标签中 加入active 同时，对应的div中也要添加
<h1>选项卡导航h1>
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#tab1" class="nav-link active" data-toggle="tab">广东东莞大益队a>li>
<li class="nav-item"><a href="#tab2" class="nav-link" data-toggle="tab">深圳马可波罗a>li>
<li class="nav-item"><a href="#tab3" class="nav-link" data-toggle="tab">广州新时代a>li>
<li class="nav-item"><a href="#tab4" class="nav-link" data-toggle="tab">北京首钢a>li>
ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">1广东东莞大益队div>
<div class="tab-pane" id="tab2">2深圳马可波罗div>
<div class="tab-pane" id="tab3">3广州新时代div>
<div class="tab-pane" id="tab4">4北京首钢div>
div>
（19）胶囊导航：
- ul.nav .nav-pills 选中样式变为蓝色
- 其余和选项卡导航类似
<h1>胶囊导航h1>
<ul class="nav nav-tabs nav-pills">
<li class="nav-item"><a href="#tab5" class="nav-link" data-toggle="tab">JAVAa>li>
<li class="nav-item"><a href="#tab6" class="nav-link active" data-toggle="tab">C++a>li>
<li class="nav-item"><a href="#tab7" class="nav-link" data-toggle="tab">WEBa>li>
ul>
<div class="tab-content">
<div class="tab-pane" id="tab5">Java框架div>
<div class="tab-pane active" id="tab6">指针div>
<div class="tab-pane" id="tab7">网页div>
div>
（20）卡片：
- div.card 父容器中
- div.card-header 子容器中标题
- div.card-body 内容
- div.card-footer 版权所有
<div class="card">
<div class="card-header">
<h4>卡片标题h4>
div>
<div class="card-body">
<p>lorem内容p>
div>
<div class="card-footer">
<p>版权所有p>
div>
div>
（21）媒体：
- div.dedia 父容器中
- 接着一张 img图片
- div.media-body 子容器中 有标题与内容
- 可以结合ul li 形成一个媒体列表
<h1>媒体h1>
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<img src="img/1.png" alt="">
<div class="media-body">
<h4>多媒体h4>
<p>学的不仅是技术，还是梦想p>
div>
div>
li>
<li class="list-group-item">
<div class="media">
<img src="img/1.png" alt="">
<div class="media-body">
<h4>多媒体h4>
<p>学的不仅是技术，还是梦想p>
div>
div>
li>
<li class="list-group-item">
<div class="media">
<img src="img/1.png" alt="">
<div class="media-body">
<h4>多媒体h4>
<p>学的不仅是奇数，还是梦想p>
div>
div>
li>
ul>
（21）图片轮播：
轮播图片
- 最外层div.carousel 并且添加自定义元素 data-ride=“carousel”
- 录播图片容器div.carousel-inner
- 每一张图片都用一个div包着 div.carousel-item 并且在第一张轮播图片添加active激活 图片宽度w-100
左右箭头
- .carousel-control-next, .carousel-control-prev 需要重写
- data-slide="next/prev"自定义属性注意写href=’#demo’
- a需要加上
轮播指示符小圆点
- 给最外层div.carousel 添加data-ride=“carousel” id=“demo”
- ul.carousel-indicators
- li 重写部分样式 宽高，圆角，背景色
- 重写active 背景色
<h1>轮播图片h1>
<div class="carousel" data-ride="carousel" id="demo">
<div class="carousel-inner" >
<div class="carousel-item active">
<img src="img/5.png" alt="" class="w-100">
div>
<div class="carousel-item">
<img src="img/6.png" alt="" class="w-100">
div>
<div class="carousel-item">
<img src="img/7.png" alt="" class="w-100">
div>
<div class="carousel-item">
<img src="img/8.png" alt="" class="w-100">
div>
div>
<a href="#demo" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon">span>
a>
<a href="#demo" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon">span>
a>
<ul class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#demo">li>
<li data-slide-to="1" data-target="#demo">li>
<li data-slide-to="2" data-target="#demo">li>
<li data-slide-to="3" data-target="#demo">li>
ul>
div>
三、Node.js框架
express框架 基于node.js平台 引入express包
//1.引入express
const express = require('express');
const querystring = require('querystring');
// 2.创建web服务器
const app = express();
// 3.设置端口
app.listen(8080);
// 请求商品列表
// 请求的url:/list 请求的方法:get
// 通过回调函数做出相应
app.get('/list',(req,res)=>{
res.send('hello');
})
// 路由：用于处理特定的请求，包含请求的方法，url，回调函数，只有请求的方法和请求的url匹配，才会执行回调函数
// res 相应对象
// res.send() 设置相应的内容并发送
// res.sendFile() 设置相应的文件并发送 文件要使用绝对路径：__dirname+文件名
// res.redirect('http://www.tmooc.cn') 设置相应的重定向，挑战到另一个url
//当前模块的对决目录
// sonsole.log(__dirname);
//req请求对象
// 获取请求的方法 get post 请求的url
// console.log(req.method,req.url);
//直接获取传递的数据，格式为对象
// console.log(req.query); 输出为 key：value
// 对比get和post
// get：请求传递的数据是以查询字符串传递，可能会被浏览器缓存，速度相对快一点，传递数据不超过4K
// post：传递的数据是以请求为主体的方式传递，不会被浏览器缓存，速度相对慢一点，可以传递大文件
// let 是定义数据
//将分段的数据放入到参数chunk中
// console.log(chunk);
// let str = String(chunk);
// console.log(str);
// let obj = querystring.parse(str);
// res.send('登录成功:'+obj.username);
// /index get 这是首页
app.get('/index',(req,res)=>{
res.send('这是首页
');
})
//请求的url /请求的方法get 相应文件1.html
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/1.html');
})
//当前模块的对决目录
// sonsole.log(__dirname);
// /detail get detail.html
app.get('/detail',(req,res)=>{
res.sendFile(__dirname+'/detail.html');
})
//跳转 get 请求的url /study http://www.tmooc.cn
app.get('/study',(req,res)=>{
res.redirect('http://www.tmooc.cn');
})
// 使用express创建web服务器，设置端口，添加路由(get，/search) 相应文件
// search.html h2-用户搜索
app.get('/search',(req,res)=>{
res.sendFile(__dirname+'/search.html');
})
//根据表单提交请求创建对应的路由 this is list
app.get('/mysearch',(req,res)=>{
res.send('this is list !'+req.query.keyword);
})
app.get('/login',(req,res)=>{
res.sendFile(__dirname+'/login.html');
})
app.post('/mylogin',(req,res)=>{
req.on('data',(chunk)=>{
//将分段的数据放入到参数chunk中
// console.log(chunk);
let str = String(chunk);
// console.log(str);
let obj = querystring.parse(str);
res.send('登录成功:'+obj.username);
});
})
四、中间件
- 中间件：中间件为路由服务的，用于拦截对路由的请求，也可以做出响应
- 中间件分为：应用级中间件，路由级中间件，内置中间件，第三方中间件，错误处理中间件
- 应用级中间件
导入路由器对象
// 导入包
// 导入路由器对象
const express = require('express');
const userRouter = require('./user.js');
const productRouter = require('./product');
// const querystring = require('querystring');
// 创建服务器对象
const app = express();
// 端口
app.listen(8080);
// 挂载路由器到web服务器下，添加前缀
// 参数1：添加的前缀
// 参数2：要挂载的路由器
app.use('/user',userRouter);
app.use('/product',productRouter);
路由器对象
// 引入包
const express = require('express');
// 创建路由器对象
const r = express.Router();
// 往路由器中添加路由 用户列表路由 get /list
r.get('/list',(req,res)=>{
res.send('这是用户列表');
})
// 导出路由器对象
module.exports = r;
拦截
const express = require('express');
const app = express();
app.listen(8080);
//智能按照url拦截
// 拦截对/list的请求
// 参数1：要拦截的url
// 参数2：回调函数，一旦拦截到，自动调用这个函数
app.use('/list',(req,res,next)=>{
//req res 和路由中的是一样的
//获取以查询字符串传递的数据
console.log(req.query);
if(req.query.uname!=='root') {
res.send('请提供管理员的账户');
}
else{
//往后执行下一个中间件 即这是所有用户数据
next();
}
});
app.get('/list',(req,res)=>{
res.send('这是所有的用户数据')
})
// 添加中间件，拦截添加购物车的请求
app.use('/shopping',(req,res,next)=>{
console.log(req.query);
req.query.price = req.query.price*0.9;
next();
})
app.get('/shopping',(req,res)=>{
console.log(req.query);
res.send('这是购物车价格为：'+req.query.price)
})
未完待续。。。