day16_雷神_前端04
前端day04
链接前端的一些库，一些资源，从bootcdn上搜，有前端所有的库。
前端工作流程:
jquery的DOM文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box" id="name">
<p>lalal</p>
<p>黄金爱家</p>
</div>
<button>按钮</button>
<!--<p>alex</p>-->
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
var imgSrc = './timg.jpg';
var alt = '美女';
var aHref = 'http://www.baidu.com'
// 父.append(子) 子元素 可以是 string js对象 jquery对象
$('#name').append('<h2>太白结婚了</h2>');
// $('.box').append(` <ul>
// <li>
// <a href=${aHref}>
// <img src=${imgSrc} alt=${alt}>
// </a>
// </li>
// </ul>`);
// var oH3 = document.createElement('h3');
// oH3.innerText = 'taibai';
// console.log( $('.box'));
// $('.box').append(oH3);
//相当于一个移动操作
// $('.box').append($('p'));
// 追加到
// $(子).appendTo(父)
// $('p').click()
// var oDiv = document.getElementsByClassName('box')[0];
// // $('<h3>哈哈哈哈</h3>').appendTo($('.box'));
// // $('<h3>哈哈哈哈</h3>').appendTo('.box');
// $('<h3>哈哈哈哈</h3>').appendTo(oDiv).click(function () {
// alert(1);
// });
// 追加到父元素中的第一个元素
// $('.box').prepend('哈哈哈')
// $('.box').prepend('<h5>哈哈哈2</h5>')
// 兄弟之间插入
$('p').after('<h3>alex</h3>');
$('<h3>女神</h3>').insertAfter('p');
$('p').replaceWith('结婚了');
$('<h5>哈哈哈</h5>').replaceAll('h3');
$('button').click(function () {
alert(1);
// 删除节点 事件也删除
// var aBtn = $('button').remove(); 返回一个jQuery对象。
// 删除节点 事件保留
// var aBtn = $('button').detach();
// console.log(aBtn);
//
// $('.box').prepend(aBtn);
// 追加的这些元素，可以先删除，再追加
$('.box').empty();
// 1. 初始化的时候，有初始化 渲染开销 对于 文档 DOM 如果是频繁性的切换 建议使用 display：block|none addClass
//2. 少量的切换 建议使用 创建元素 删除元素 性能消耗 创建==》销毁
});
});
</script>
</body>
</html>
事件对象
凡是有事件，都会有默认的事件对象，是JS的，不是jquery的。
a标签，点按钮，能默认跳转，是因为它有默认事件行为。
访问百度，form表单提交， action 后的url 加/s 表示search
form 默认有ajax，不然自己不会提交请求到百度；
同源策略： 端口号之前有一个不同，就是不同源，，后端用cors模块解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<a href="http://www.baidu.com">按钮</a>
</div>
<form action="http://www.baidu.com/s">
<input type="text" name = 'wd' id="wd">
<input type="submit" id="submit">
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('a').click(function (event) {
//a form event.preventDefault();阻止默认事件
event.preventDefault();
//阻止冒泡
event.stopPropagation()
console.log('a点击了');
// 阻止冒泡
// event.stopPropagation()
// window.location.href
});
$('#submit,#wd').click(function () {
event.stopPropagation();
//同时阻止了默认事件和冒泡
// return false;
});
$('form').submit(function (event) {
event.preventDefault();
event.stopPropagation()
console.log(1111);
// ajax请求
$.ajax({
url:'http://www.baidu.com/s',
type:'get',
success:function (data) {
console.log(data);
}
});
});
$('.box').click(function () {
console.log('盒子被点击了')
})
$('body').click(function () {
console.log('body被点击了')
})
$('html').click(function () {
console.log('html被点击了')
})
});
</script>
</body>
</html>
换肤
position：fix 以浏览器左上角
absolute 是以页面的左上角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 40px;
background-color: rgba(0,0,0,.3);
}
.header_box{
position: fixed;
width: 100%;
height: 200px;
background-color: #555;
left: 0;
top: 0;
z-index: 888;
}
</style>
</head>
<body style="height: 2000px">
<div class="header">
<a href="javascript:void(0)" id="changeFu">换肤</a>
<div class="header_box" style="display: none;">
<a href="javascript:void(0)" class="hotmen">热门</a>
<a href="javascript:void(0)" class="slideUp">收起</a>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#changeFu').click(function (e) {
e.stopPropagation();
$('.header_box').stop().slideDown(1000);
});
$('.hotmen').click(function (e) {
e.stopPropagation()
console.log('点了hotmen');
});
$('.slideUp').click(function (e) {
e.stopPropagation();
$('.header_box').stop().slideUp(1000);
})
$('.header_box,.header').click(function () {
return false;
})
$('body').click(function () {
alert(1);
$('.header_box').stop().slideUp(1000);
})
})
</script>
</body>
</html>
> 表单事件
select： 输入框里一选中就走了
jQuery的位置信息
offset.top 是相对于页面顶部的距离
scrollTop 是页面被卷起的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
background-color: red;
padding: 10px;
border: 1px solid yellow;
/*margin-top: 100px;*/
/*margin-left: 100px;*/
position: relative;
top: 50px;
}
</style>
</head>
<body style="height: 2000px">
<div class="box">alex</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('.box').width(200).height(300);
// innerWidth innerHeight 内部宽和高 不包含border
// console.log($('.box').innerWidth());
// $('.box').innerWidth(400)
// outerHeight outerWidth 外部宽和高 包含border
// console.log( $('.box').outerWidth());
// console.log( $('.box').offset().top);
// $(document).scroll(function () {
// // console.log(22222);
//
// console.log( $(document).scrollTop())
// })
})
</script>
</body>
</html>
滚动固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 40px;
background-color: rgba(0,0,0,.3);
}
.header_box{
position: fixed;
width: 100%;
height: 200px;
background-color: #555;
left: 0;
top: 0;
z-index: 888;
}
.fix_header{
position: fixed;
width: 100%;
height: 80px;
background-color: red;
top: 0;
left: 0;
display: none;
}
.content{
width: 500px;
height: 300px;
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -250px;
top: 300px;
}
</style>
</head>
<body style="height: 2000px">
<div class="header">
<a href="javascript:void(0)" id="changeFu">换肤</a>
<div class="header_box" style="display: none;">
<a href="javascript:void(0)" class="hotmen">热门</a>
<a href="javascript:void(0)" class="slideUp">收起</a>
</div>
</div>
<div class="content">
</div>
<div class="fix_header">
固定导航栏
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#changeFu').click(function (e) {
e.stopPropagation();
$('.header_box').stop().slideDown(1000);
});
$('.hotmen').click(function (e) {
e.stopPropagation()
console.log('点了hotmen');
});
$('.slideUp').click(function (e) {
e.stopPropagation();
$('.header_box').stop().slideUp(1000);
})
$('.header_box,.header').click(function () {
return false;
})
$('body').click(function () {
alert(1);
$('.header_box').stop().slideUp(1000);
});
$(document).scroll(function () {
//获取黄色的盒子到顶部的距离
var top = $('.content').offset().top;
var docScrollTop = $(document).scrollTop()
if (docScrollTop > top){
$('.fix_header').show();
}else {
$('.fix_header').hide();
}
});
})
</script>
</body>
</html>
jquery的插件
www.jq22.com
iframe 框架标签，标签去链接别人写好的地址
扒一些插件
iconfont 阿里巴巴矢量图标库
扒一些图标
jQuery的事件委托
on方法，绑定的意思，第一个元素是click，你要绑定的事件，第二个是你要绑定的子元素，第三个是对应的function
也是给li标签绑定点击事件，只不过把点击事件交给了父亲ul，未来添加的只要从ul点击就OK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>alex1</li>
<li>alex2</li>
<li>alex3</li>
<!--li-->
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
// $('ul li').click(function () {
// alert($(this).text());
// })
//事件委托
// $('ul').on('click','li',function () {
// alert($(this).text())
// })
//
// //未来追加的元素 不能做点击事件
// $('ul').append('<li>太白</li>');
// var arr = ['alex','etaibai','nv'];
//数组遍历使用forEach
// arr.forEach(function (el,index) {
// console.log(el,index);
// });
//jquery伪数组遍历 使用each
// $('li').each(function (index,el) {
// console.log(el);
// console.log(index);
// })
});
</script>
</body>
</html>
jquery 内部遍历：给两个div绑定事件
$('.box').click(function () {
//对值得操作
// alert(this.innerText);
// alert($(this).text());
// alert($(this).html());
$(this).text('nvshen');
json使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<img src="./拍照-01.png" alt="">
<img src="./购物车满.png" alt="">
<img src="./购物车满%20(1).png" alt="">
</head>
<body>
<script>
//后端响应回来的数据 json字符串
var a={"name":"tom","sex":"男","age":"24"}; //json
var b='{"name":"Mike","sex":"女","age":"29"}'; //jsonStr
// var jsonStr = '{"name":"张三"}';
// console.log(JSON.parse(b).name);
console.log(JSON.stringify(a));
// 把一个对象解析成JSON字符串
</script>
</body>
</html>
bootstrap使用
基础模板（起步里） + 导航条（组件里）
全局CSS样式
生产环境：编译之后的代码
bootstrap 源码： 包含了less，less是CSS的高级语言，有逻辑、有运算、函数等，让CSS活了，但是浏览器只识别CSS，用less编译器转译成CSS，
前端工具：
Bower进行安装，
npm， 服务器语言，node.js的包管理器
下载的包最终要用Grunt，对所有文件处理，html、CSS、js等文件压缩，编译打包上线
grunt目前已经不用了，还有gulp、webpack，目前多的是webpack
bgc的大图会编译成一段js代码，放在某一个js文件，请求资源的时候方便多了
工具的使用都是流水化的使用，配置好，执行命令就好了
一般写项目不会一个目录一个目录的创建，会有模板直接创建目录、文件等。
960.cs 栅格系统
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式 </div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式 </div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式 </div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套响应式 </div>
</div>
</div>
组件的使用
插件： JS功能
组件： html、css、js， 可复用的
php，多线程，没有异步队列，只允许链接一个最大连接数。
面板 ==》 下拉菜单
bootstrap.min.js 必须依靠jQuery
分裂式的下拉菜单
导航条
品牌图标
导航是独立于内容主题的一块区域
路径导航
分页
相对定位，可以微调元素，因为相对原来的位置。
写路由，即url，会往后端请求数据，如果后台资源过多，前端页面会出现白屏现象。
1、单页面操作，现在是锚点值的链接，前端做路由，后端只传数据，点击a标签，切换页面，在某个时机发送请求，获取后端资源，2、解决前后端分离，MVC架构模式，controller就是路由/course,路由一切换，加载页面，以前页面是后台做的，整个放到前端，现在分离，整个View让前端做。
module 就是数据，从前没分那么细，后台渲染view，先读取数据，把数据渲染到后天写的一个模板，通过http协议render到前端页面。后端处理视图。后端通过模板语法直接渲染进去。
后来单独把view摘出来，做DOM操作，django是前后端没分的。
js单线程，nodejs、python都是单线程，
插件
模态框、滚动监听、
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap 全局的css-->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 70px;
}
.ttt {
position: relative;
top: 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top 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 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-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">注册</button>
<button type="submit" class="btn btn-success">登录</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class='col-md-6'>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">下拉菜单</h3>
</div>
<div class="panel-body">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<!--凡是在组件中带有 data-xxx 表示与js有很大关系-->
Dropdown
<span class="caret"></span>
<!--三角形-->
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">按钮式的下拉菜单</h3>
</div>
<div class="panel-body">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<!--<span class="sr-only">Toggle Dropdown</span> -->
</button>
<!--sr-only不显示这个span标签-->
<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>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">按钮式的下拉菜单</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="javascript:void(0)">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><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="#">6</a></li>
<li><a href="#">7</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge ttt">3</span></a></li>
</ul>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" id="modal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="close">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#modal').click(function () {
$('#myModal').modal('show');
});
$('#close').click(function () {
$('#myModal').modal('hide');
});
});
</script>
</body>
</html>
补充
echart 前端做图标的
bootstrap 后端ui框架：adminlte
day16_雷神_前端04的更多相关文章
- day15_雷神_前端03
# 前端 day03 内容回顾 javascript: 1.ECMAScript5.0 es6(阮一峰) es7 es8 (1)声明变量 var let (2)内置函数 Date Math.rando ...
- day14_雷神_前端02
# 前端day02 1. html标签 1. span标签设置宽高 设置宽高后,字体不会发生变化. 2. 盒模型 padding是border里面的距离: margin 是border边框外头的了属于 ...
- day13_雷神_前端01
#前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...
- 为什么fis没有freemarker的解决方案啊？_前端吧_百度贴吧
为什么fis没有freemarker的解决方案啊?_前端吧_百度贴吧 fis-plus:适用于PHP+Smarty后端选型jello:适用于Java+Velocity后端选型goiz:适用于go+ma ...
- Python web前端 04 盒子模型
Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...
- 前端04 /css样式
前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...
- day17_雷神_数据库 小全
# 数据库 1.mysql 介绍 一 数据库管理软件的由来 程序的所有组件不可能只在一个机子上,性能问题和单点故障, 程序分散了,还需要解决数据共享问题, 基于网络访问这台共享的机器,用socket. ...
- day07_雷神_面向对象进阶
day07 1.接口类(抽象类) 接口类和抽象类是一种规范,写代码时的规范. 两个思想: 一个是统一接口,一个是定义规则. 最终版本:接口类,抽象类,是一种规范,写代码时的规范 强制性的规定. fro ...
- 一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...
随机推荐
- Activity 启动模式 FLAG
原文:https://blog.csdn.net/youhongyan/article/details/64151922 一.Activity启动模式的设置在AndroidManifest.xml文件 ...
- 【redis 学习系列】安装-配置-卸载Redis
一.安装 wget http://download.redis.io/releases/redis-3.0.7.tar.gz tar -zxf redis-.tar.gz ln -s redis- r ...
- jquery点击回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Devexpress使用之：GridControl控件
Devexpress使用之:GridControl控件 Devexpress系列控件功能很强大,使用起来也不太容易,我也是边摸索边使用,如果有时间我会把常用控件的使用方法整理出来的. using Sy ...
- 移动端h5调试方法
charles代理 使用技巧如下: http://www.jianshu.com/p/fdd7c681929c 1.手机wifi连接代理 以iphone为例,长按住wifi, 进入下一页,可看到 HT ...
- 20170506计划-----(基于python查询oracle语句)
在日常的工作中,经常接到开发同事查询生产SQL的请求,公司又不允许对开发开放查询SQL的权限,并且查询的堡垒机又很慢,计划做一个可以自动查询SQL的小工具,一周内完成吧. 大概功能实现了,一些涉及敏感 ...
- create-react-app创建项目并用git上传至GitHub及展示预览效果
1.在本地中创建一个项目所在的文件夹 2.npm -g create-react-app 3.在此文件夹下 create-react-app react-demo (项目名) 4.cd react-d ...
- bittorrent 学习(三) MSG
msg.c中 int转化 char[4] char[4]转化int的函数 如下(有多种方案) ]) { c[] = i % ; c[] = (i - c[]) / % ; c[] = (i - c[ ...
- SpringBoot跨域问题
1.先来说说跨域原理: 跨域原理简单来说就是发起跨域请求的时候,浏览器会对请求域返回的响应信息检查HTTP头,如果Access-Control-Allow-Origin包含了自身域,则允许访问,否则报 ...
- docker常用操作备忘
一.docker安装 参考资料:阿里云镜像加速1. 安装/升级Docker客户端 curl -fsSL https://get.docker.com | bash -s docker --mirror ...