1、引入Bootstrap
首先从Bootstrap官网下载代码包,解压后将其中的css、js、fonts中的文件放在对应的静态资源目录中。之后在要使用的页面中引入该css、js文件,或者也可以直接以CDN的方式引入。注意bootstrap.js是基于jQuery,因此也需要引入jquery.js。
接着需要用meta标签设置字符编码为utf-8,并且使用viewpoint
固定页面大小以保证页面在不同分辨率的设备上看起来都是一样的
< head>
< meta charset = " utf-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1" >
< link rel = " stylesheet" href = " ../../static/css/bootstrap.css" >
< script src = " ../../static/js/jquery.js" > script >
< script src = " ../../static/js/bootstrap.js" > script >
head >
2、网格系统
Bootstrap中可以根据屏幕的大小动态计算元素的宽度。如下所示,Bootstrap会将父元素默认划分为12等份,我们通过指定占多少份来计算子元素的宽度。例如我们为元素添加类名.col-md-4
,则其宽度占整个父元素的4/12。下一个子元素会自动跟在其右边,若总份数超过12之后自动换下一行,例如大小为5的元素后面是一个大小为8的元素,5+8>12该元素会自动换到下一行。 .col-md-4中的md代表medium中等的,即Bootstrap会对页面宽度进行检测,如果宽度复合某个区间,则对应前缀的类名生效
设备
大小
前缀
超小设备(extremely small)
<768px
.col-xs-
小型设备(small)
>768px
.col-sm-
中等设备
>992px
.col-md-
大型设备
>1200px
.col-lg-
如下所示,为网格添加类名col-md-4和col-sm-6,即当页面宽度介于768px~992px时,类名col-sm-6生效,每个网格占用六份,一行有两个网格。当页面宽度大于992px时,col-md-4生效,每个网格占4份,一行三个网格。
< div class = " row" >
< div class = " col-md-4 col-sm-6" > 网格1div >
< div class = " col-md-4 col-sm-6" > 网格2div >
< div class = " col-md-4 col-sm-6" > 网格3div >
div >
3、常用组件
Bootstrap官网提供了网页常用组件的demo样例,我们可以直接复制粘贴并加以简单修改后直接使用。
导航栏
通过
使用导航栏,其中navbar-default为白色背景,navbar-inverse可以设置为黑色背景
其中使用了navbar-toggle
类声明了响应式弹框,当页面为超小型设备时会自动触发将id为navbar的导航条收起到右上角弹框。
在#navbar内通过
标签定义多个导航标签,其中class="active"的li会显示为激活状态。在每个子
内可以进一步通过
定义下拉菜单
显示小徽标可以采用3
的方式
注意到其中有许多声明为sr-only
的类,这是专门为残障人士提供的屏幕阅读器属性,正常页面不会显示改内容,当使用屏幕阅读器时会朗读其中内容。
< nav class = " navbar navbar-inverse navbar-static-top" >
< div class = " container" >
< div class = " navbar-header" >
< button type = " button" class = " navbar-toggle collapsed" data-toggle = " collapse" data-target = " #navbar"
aria-expanded = " false" aria-controls = " navbar" >
< span class = " sr-only" > Toggle navigationspan >
< span class = " icon-bar" > span >
< span class = " icon-bar" > span >
< span class = " icon-bar" > span >
button >
< a class = " navbar-brand" href = " #" > Project namea >
div >
< div id = " navbar" class = " navbar-collapse collapse" aria-expanded = " false" style =" height : 0.8px; " >
< ul class = " nav navbar-nav" >
< li class = " active" > < a href = " #" > Homea > li >
< li> < a href = " #about" > Abouta > li >
< li> < a href = " #contact" > Contacta > 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 = " #" > Actiona > li >
< li> < a href = " #" > Another actiona > li >
< li role = " separator" class = " divider" > li >
< li class = " dropdown-header" > Nav headerli >
< li> < a href = " #" > Separated linka > li >
ul >
li >
ul >
< ul class = " nav navbar-nav navbar-right" >
< li> < a href = " ../navbar/" > Defaulta > li >
< li class = " active" > < a href = " ./" > Static top < span class = " sr-only" > (current)span > a > li >
< li> < a href = " ../navbar-fixed-top/" > Messages< span class = " badge" > 3span > a > li >
ul >
div >
div >
nav >
轮播图
如下所示id="carousel-example-generic"的轮播图,通过
创建轮播图的指示器,在每个li中通过data-target="#carousel-example-generic"
绑定到轮播图,data-slide-to="0"
绑定到具体某张图。
< div id = " carousel-example-generic" class = " carousel slide" data-ride = " carousel" >
< 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" class = " " > li >
< li data-target = " #carousel-example-generic" data-slide-to = " 2" class = " " > li >
ol >
< div class = " carousel-inner" role = " listbox" >
< div class = " item active" >
< img data-src = " holder.js/1140x500/auto/#777:#555/text:First slide" alt = " First slide [1140x500]" src = " data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNzc3OiM1NTUvdGV4dDpGaXJzdCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3M2UxNjJmOTk1IHRleHQgeyBmaWxsOiM1NTU7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTczZTE2MmY5OTUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjM5MC41IiB5PSIyNzUuNDQwMDAwOTE1NTI3MyI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvZz48L3N2Zz4=" data-holder-rendered = " true" >
div >
< div class = " item" >
< img data-src = " holder.js/1140x500/auto/#666:#444/text:Second slide" alt = " Second slide [1140x500]" src = " data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNjY2OiM0NDQvdGV4dDpTZWNvbmQgc2xpZGUKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNzNlMTYzNjU3ZiB0ZXh0IHsgZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjU3cHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE3M2UxNjM2NTdmIj48cmVjdCB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM2NjYiLz48Zz48dGV4dCB4PSIzMzUuNjE2NjY4NzAxMTcxOSIgeT0iMjc1LjQ0MDAwMDkxNTUyNzMiPlNlY29uZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered = " true" >
div >
< div class = " item" >
< img data-src = " holder.js/1140x500/auto/#555:#333/text:Third slide" alt = " Third slide [1140x500]" src = " data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTE0MCIgaGVpZ2h0PSI1MDAiIHZpZXdCb3g9IjAgMCAxMTQwIDUwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvMTE0MHg1MDAvYXV0by8jNTU1OiMzMzMvdGV4dDpUaGlyZCBzbGlkZQpDcmVhdGVkIHdpdGggSG9sZGVyLmpzIDIuNi4wLgpMZWFybiBtb3JlIGF0IGh0dHA6Ly9ob2xkZXJqcy5jb20KKGMpIDIwMTItMjAxNSBJdmFuIE1hbG9waW5za3kgLSBodHRwOi8vaW1za3kuY28KLS0+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48IVtDREFUQVsjaG9sZGVyXzE3M2UxNjMxMDc1IHRleHQgeyBmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NTdwdCB9IF1dPjwvc3R5bGU+PC9kZWZzPjxnIGlkPSJob2xkZXJfMTczZTE2MzEwNzUiPjxyZWN0IHdpZHRoPSIxMTQwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjM3Ny44NzUiIHk9IjI3NS40NDAwMDA5MTU1MjczIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9nPjwvc3ZnPg==" data-holder-rendered = " true" >
div >
div >
< 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" > Previousspan >
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" > Nextspan >
a >
div >
表格
通过来创建一个表格,特别地,如需使用条形背景的表格再添加类名table-striped,带边框的表格table-bordered。如果需要合并两个单元格可以使用
< div class = " container" >
< table class = " table table-striped" >
< thead>
< tr>
< th> #th >
< th> First Nameth >
< th> Last Nameth >
< th> Usernameth >
tr >
thead >
< tbody>
< tr>
< td> 1td >
< td> Marktd >
< td> Ottotd >
< td> @mdotd >
tr >
< tr>
< td> 2td >
< td> Jacobtd >
< td> Thorntontd >
< td> @fattd >
tr >
< tr>
< td> 3td >
< td colspan = " 2" > Larry the Birdtd >
< td> @twittertd >
tr >
tbody >
table >
div >
输入框
对input标签添加form-control
类来设置表单输入框的样式
< div class = " col-md-4" >
< form>
< h2> Please sign inh2 >
< input type = " email" id = " inputEmail" class = " form-control" placeholder = " Email address" required = " " autofocus = " " >
< input type = " password" id = " inputPassword" class = " form-control" placeholder = " Password" required = " " >
< div class = " checkbox" >
< label>
< input type = " checkbox" value = " remember-me" > Remember me
label >
div >
< button class = " btn btn-lg btn-primary btn-block" type = " submit" > Sign inbutton >
form >
div >
列表栏
通过类名
声明父类包裹,子类自动成为列表,列表添加active类会显示为蓝色
< div class = " col-sm-4" >
< div class = " list-group" >
< a href = " #" class = " list-group-item active" > 列表项1a >
< a href = " #" class = " list-group-item" > 列表项2a >
< a href = " #" class = " list-group-item" > 列表项3a >
< a href = " #" class = " list-group-item" > 列表项4a >
div >
div >
按钮
如下所示,对button添加btn
类实现为按钮,并且添加类名btn-default
将按钮设置为白色。 类似地可以将按钮设置为其他颜色,在Bootstrap中default相关的为白色,Primary蓝色、success绿色、info浅蓝色、warning橙色、danger红色。特别的btn-link为无边框的链接按钮。
同样可以通过添加btn-lg
、btn-sm
、btn-xs
类来设置按钮大小
< div class = " container" >
< button type = " button" class = " btn btn-default" > Defaultbutton >
< button type = " button" class = " btn btn-primary" > Primarybutton >
< button type = " button" class = " btn btn-success" > Successbutton >
< button type = " button" class = " btn btn-info" > Infobutton >
< button type = " button" class = " btn btn-warning" > Warningbutton >
< button type = " button" class = " btn btn-danger" > Dangerbutton >
< button type = " button" class = " btn btn-link" > Linkbutton >
< button type = " button" class = " btn btn-lg btn-default" > 大按钮button >
< button type = " button" class = " btn btn-sm btn-default" > 小按钮button >
< button type = " button" class = " btn btn-xs btn-default" > 超小按钮button >
div >
标签
通过label
设置标签显示,与按钮相比,标签无法点击。标签的颜色和按钮类似可以通过添加label-default
等类名来设置。值得注意的是标签会根据外部父元素的大小自动进行变化,例如将标签分别包裹在
、
内大小不同。
< h3>
< span class = " label label-default" > Defaultspan >
< span class = " label label-primary" > Primaryspan >
< span class = " label label-success" > Successspan >
< span class = " label label-info" > Infospan >
< span class = " label label-warning" > Warningspan >
< span class = " label label-danger" > Dangerspan >
h3 >
< h5>
< span class = " label label-default" > Defaultspan >
< span class = " label label-primary" > Primaryspan >
< span class = " label label-success" > Successspan >
< span class = " label label-info" > Infospan >
< span class = " label label-warning" > Warningspan >
< span class = " label label-danger" > Dangerspan >
h5 >
Panel
通过panel类来实现面板样式,panel-default等来指定颜色
< div class = " container" >
< div class = " col-md-4" >
< div class = " panel panel-default" >
< div class = " panel-heading" >
< h3 class = " panel-title" > Panel titleh3 >
div >
< div class = " panel-body" >
Panel content
div >
div >
div >
< div class = " col-md-4" >
< div class = " panel panel-primary" >
< div class = " panel-heading" >
< h3 class = " panel-title" > Panel titleh3 >
div >
< div class = " panel-body" >
Panel content
div >
div >
div >
div >
提示框
通过alert
类来实现提示框,alert-success
类可以设置其颜色
< div class = " container" >
< div class = " alert alert-success" role = " alert" >
< strong> Well done!strong > You successfully read this important alert message.
div >
div >
进度条
进度条的实现首先在外围包裹一个用于实现整体进度槽,然后在其中填充progress-bar实现的进度,通过width来控制宽度,例如60%的进度,那么就填充
width: 60%
。同样可以定制进度条的颜色,特别地progress-bar-striped为条纹状。可以在一个进度槽内填充多个进度条。
< div class = " progress" >
< div class = " progress-bar progress-bar-warning" aria-valuenow = " 60" aria-valuemin = " 0" aria-valuemax = " 100" style =" width : 60%" > div >
div >
< div class = " progress" >
< div class = " progress-bar progress-bar-striped" aria-valuenow = " 60" aria-valuemin = " 0" aria-valuemax = " 100" style =" width : 60%" > div >
div >
< div class = " progress" >
< div class = " progress-bar progress-bar-success" style =" width : 35%" > div >
< div class = " progress-bar progress-bar-danger" style =" width : 10%" > div >
div >
其他Demo
除此之外Bootstrap官网还提供了许多现成的样例可以直接拿来修改和使用,例如: 博客页面:https://v3.bootcss.com/examples/blog/ 控制台实现:
你可能感兴趣的:(WEB,bootstrap)
Jmeter+ant+jenkins接口自动化测试框架
测试老哥
jmeter jenkins python 软件测试 自动化测试 测试用例 压力测试
视频学习:文末有免费的配套视频可观看点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快大致思路:Jmeter可以做接口测试,也能做压力测试,而且是开源软件;Ant是基与java的构建工具,完成脚本执行并收集结果生成报告,可以跨平台,Jenkins是持续集成工具。将这三者结合起来可以搭建一套WebHTTP接口测试的持续构建环境,实现接口自动化测试,pc系统Windows。1、安装就jmet
python ImportError: No module named requests
陈桐Caliburn
curlhttps://bootstrap.pypa.io/get-pip.py-oget-pip.pypythonget-pip.pypipinstallrequests
tomcat和servlet
你曾经是少年
tomcat
tomcat是什么Tomcat是一种开源的JavaServlet容器,它实现了JavaServlet和JavaServerPages(JSP)规范。它允许开发人员将JavaWeb应用程序部署到服务器上,并提供了处理HTTP请求、管理会话、执行Servlet和JSP等功能。Tomcat是Apache软件基金会的一个项目,被广泛用于构建和托管JavaWeb应用程序。Tomcat的关键点掌握Tomcat
Web自动化测试进阶
玉奎
1.什么是框架框架(framework)是一个框子--指其约束性,也是一个架子--指其支撑性,是一个基本概念上的结构,用于去解决或者处理复杂的问题。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。框架,其实就是某种应用的半成品,就是一组组件,供你选用完成你自己的系统。简单说
Web攻击-XSS、CSRF、SQL注入
rrrobber
前端 xss csrf
1.XSS攻击:跨站脚本攻击XSS(CrossSiteScripting),跨站脚本攻击,允许攻击者将恶意代码植入到提供给其它用户使用的页面中。XSS的攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后,攻击者甚至可以假冒合法用户与网站进行交互。根据攻击来源被分为存储型、反射型、DOM型1.1.存储型存储型XSS的攻击步骤:攻击者将恶意
【前端框架开发 | Vue.js | 第一篇】Vue.js框架简介、安装及打包教程
秋说
前后端项目开发 前端框架 vue.js 前端 html css JavaScript
文章目录前言什么是Vue.js为什么是Vue.jsVue.js安装打包Vue项目方法一:vite打包方法二:webpack打包webpack执行流程总结前言正式开始学习前确保确保你已掌握前端三件套:HTMLCSSJavaScript什么是Vue.jsVue.js是一种流行的JavaScript前端框架,用于构建交互式的、响应式的用户界面。它是一种轻量级、灵活和易于学习的框架,广泛应用于现代Web应
【甲方安全建设】富文本编辑器XSS漏洞攻击及防御详析
秋说
网络安全 xss web安全 富文本编辑器
原创文章,禁止转载。文章目录调研背景搭建TinyMCE富文本编辑器靶场富文本编辑器前端过滤富文本编辑器后端攻击后端弱过滤弱过滤1弱过滤2后端有效过滤从甲方的视角看动态安全调研背景随着Web2.0技术的普及,富文本编辑器在各种Web应用中得到了广泛应用,用户、网站管理员等可以通过富文本编辑器在网页中添加并展示格式化文本、图片、视频等丰富内容。然而,由于富文本内容本质上涉及客户端输入,并且可能包含HT
OneWeb再发射34颗卫星,用于不断发展的互联网星座
月影沙丘的故事
如今,SpaceX并不是唯一一家发射互联网卫星的公司。卫星运营商OneWeb(3月21日)再放出34架航天器,以增强其迅速发展的宽带星座。卫星在美国东部时间下午1:06(格林尼治标准时间1806;当地贝加努尔当地时间10:06pm)从哈萨克斯坦拜科努尔国际机场发射的联盟号火箭升空。OneWeb的代表说,所有34艘航天器在发射后3小时45分钟内都已成功部署到低地球轨道上。由法国公司Arianespa
解决 JS WebSocket 心跳检测 重连
二川bro
前端 JS javascript websocket
解决JSWebSocket心跳检测重连文章目录解决JSWebSocket心跳检测重连一、WebSocket心跳检测的作用二、心跳检测的处理方案1.创建WebSocket连接2.心跳参数设置3.心跳检测逻辑4.心跳包响应处理5.断线重连机制三、总结一、WebSocket心跳检测的作用WebSocket是一种在单个TCP连接上进行全双工通讯的协议。然而,由于网络条件、防火墙设置或服务器配置等因素,We
websocket:两台PC间数据传输
我就是666呀
python笔记 websocket python 网络协议
项目要求在两台PC间进行图像传输,写了个小小的例子,如下:服务器端:importosfromsocketimport*importbase64#图片解码defbase64_decode_img(base64_code):""":parambase64_code:base64编码:return:二进制据,直接写入保存为图片"""img_bytes=base64.b64decode(base64_co
万字详解,带你彻底掌握 WebSocket 用法(至尊典藏版)写的不错
only-qi
websocket 网络协议 网络
一、简介1.1什么是WebSocketWebSocket是一种协议,用于在Web应用程序和服务器之间建立实时、双向的通信连接。它通过一个单一的TCP连接提供了持久化连接,这使得Web应用程序可以更加实时地传递数据。WebSocket协议最初由W3C开发,并于2011年成为标准。1.2WebSocket的优势和劣势WebSocket的优势包括:实时性:由于WebSocket的持久化连接,它可以实现实
Flask Web应用开发深度分析
Botiway
FlaskWeb python flask 后端 linux web3
Flask作为一个使用Python编写的轻量级Web应用框架,以其简单、灵活和安全的特点在Web开发领域中广受欢迎。以下是对FlaskWeb应用开发的深度分析:一、Flask的核心特性1.轻量级:Flask框架的核心构成较为简单,没有默认使用的数据库和窗体验证工具,开发者可以根据需要自行添加。这种设计使得Flask更加灵活,易于上手和使用。2.扩展性强:Flask框架的扩展性是其最大的特点之一。通
一个比 Nginx 还简单的 Web 服务器
JackieZhengChina
后端 DevOps nginx 前端 服务器
企业级的Web服务器非常多,Nginx、Tomcat、Apache、IIS、FastAPI、Flask等。今天松哥再给大家介绍一个开源的Web服务器,这款服务器具备自动HTTPS功能和高度可配置性,它的名字是:Caddy。Caddy是一个Go编写的Web服务器,类似于Nginx,Caddy提供了更加强大的功能,随着v2版本发布,Caddy已经可以作为中小型站点Web服务器的另一个选择。相较于Ngi
Spring MVC中HandlerInterceptor和Filter有什么区别?
用心去追梦
spring mvc java
在SpringMVC框架中,HandlerInterceptor(拦截器)和Filter都是用于拦截请求处理过程中的关键组件,但它们之间存在一些重要的区别。下面详细解释这两种机制的区别:Filter生命周期:Filter是由Servlet容器(如Tomcat)管理的,它在Web应用启动时被初始化,并在整个应用的生命周期内保持有效。作用范围:Filter可以拦截所有的HTTP请求,包括JSP、HTM
【JavaWeb项目】——外卖订餐系统用户购买餐品、查询购物车、取消购物车餐品操作
Y小夜
Javaweb开发 hive hadoop 数据仓库 java 后端 前端框架 maven
个人主页:【Y小夜】作者简介:一位双非学校的大二学生,编程爱好者,专注于基础和实战分享,欢迎私信咨询!入门专栏:【MySQL,Java基础,Rust】热门专栏:【Python,Javaweb,Vue框架】感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持!❤️目录购买餐品后端处理AddCarServlet部分代码解析查询购物车后端处理UshowCarServlet部分代码解析前端界面showC
【Rust】——采用发布配置自定义构建
Y小夜
Rust(官方文档重点总结) rust 开发语言 后端
博主现有专栏:C51单片机(STC89C516),c语言,c++,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux,基于HTML5的网页设计及应用,Rust(官方文档重点总结),jQuery,前端vue.js,Javaweb开发,Python机器学习等主页链接:Y小夜-CSDN博客今日学习推荐:在当今这个飞速发展的信息时代,人工智能(AI)已经成为了一个不可或
netty开发模拟qq斗地主
平平无奇的Coding Peasant
netty qq斗地主
为什么要搞这样一个项目满足自己的java网络多线程编程的欲望!因为之前一直都是搞web开发,服务器和客户端数据交流人家web服务器早就给你搞好了,比如tomcat,jetty...等等,其实之前脑子里就有想过--是否可以自己开发一个简单的类似tomcat的web服务器,这样做了的话,至少知道其实web开发是建立在网络多线程web服务器之上否则web开发无从谈起!市面上的书籍和互联网上的电子教材以及
【Rust】——高级类型
Y小夜
Rust(官方文档重点总结) rust 开发语言 后端
博主现有专栏:C51单片机(STC89C516),c语言,c++,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux,基于HTML5的网页设计及应用,Rust(官方文档重点总结),jQuery,前端vue.js,Javaweb开发,Python机器学习等主页链接:Y小夜-CSDN博客目录为了类型安全和抽象而使用的newtype模式类型别名用来创建类型同义词不返回
Canvas 在 微信小程序-uni-APP 和 H5 中的使用差异
xjt_0901
java 前端 javascript
Canvas是一个强大的绘图工具,无论是在Web开发还是跨平台应用开发中都有广泛应用。然而,在uni-APP和传统H5环境中使用Canvas时,存在一些重要的差异。本文将深入探讨这些差异,帮助开发者在不同平台上更好地使用Canvas。1.API差异H5环境在H5环境中,我们使用标准的WebAPI来操作Canvas:constcanvas=document.getElementById('myCan
WebSocket使用及在vue如何使用
Manager_
WebSocketWebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocketAPI中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在WebSocketAPI中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和
【JavaScript】JavaScript模块化开发:ES6模块与CommonJs的对比与应用
代码园与文学坊
《前端学习》 javascript es6 开发语言
1.模块化开发的背景与必要性1.1JavaScript发展与模块化需求JavaScript最初被设计为一种简单的脚本语言,用于实现网页上的交互功能。随着互联网技术的发展,Web应用变得越来越复杂,JavaScript代码量急剧增加,这导致了代码维护和复用变得困难。为了解决这些问题,模块化开发应运而生。模块化开发允许开发者将大型应用拆分成多个小型、独立的模块,每个模块负责特定的功能。这种开发方式与J
在浏览器上使用transformers.js运行(WebGPU)RMBG-1.4进行抠图(背景移除)
shizidushu
WebGPU transformers.js RMBG-1.4 抠图
在浏览器上使用transformers.js运行(WebGPU)RMBG-1.4进行抠图(背景移除)说明:首次发表日期:2024-08-28官方Github仓库地址:https://github.com/xenova/transformers.js/tree/main/examples/remove-background-client准备下载onnx模型文件:https://huggingface
springboot +easyexcel 下载工具类
g3230863
java excel java easyexcel
使用springboot+easyexcel通过web来下载Excel文件pom文件com.alibabaeasyexcel3.3.4Controller类@RestController@Slf4jpublicclassTestController{@PostMapping(value="/down")publicvoiddown(HttpServletResponseresponse){log.
html div鼠标选中状态,html+css+javascript实现跟随鼠标移动显示选中效果
爱护哼哼
html div鼠标选中状态
1,显示效果:2,html结构Endcustomergetproduct1LoginEFOSEwebsiteandpresentinstallationormaintenancerequirements2EFOSEprefercontactservicepoint3Customercontactservicepointtogetservice4Customerpaysthebilldirectly
WEB渗透Win提权篇-提权工具合集
Pluto-2003
渗透测试 渗透测试 WEB安全 网络安全 WEB渗透 提权 windows
提权工具合集包(免费分享):夸克网盘分享往期文章WEB渗透Win提权篇-提权工具合集-CSDN博客WEB渗透Win提权篇-RDP&Firewall-CSDN博客WEB渗透Win提权篇-MSSQL-CSDN博客WEB渗透Win提权篇-MYSQL-udf-CSDN博客WEB渗透Win提权篇-AccountSpoofing-CSDN博客WEB渗透Win提权篇-弱权限提权-CSDN博客WEB渗透Win提权
前端PWA(Progressive Web App)技术(二)
Good_tea_h
前端 web app
三、PWA的优势相对于原生应用和传统Web应用,PWA具有以下显著优势:四、PWA的应用场景PWA技术因其独特的优势,在多个领域得到了广泛的应用,包括但不限于:五、结论PWA技术作为一种结合了Web应用和原生应用优点的新型应用开发模式,具有跨平台兼容性、可安装性、离线访问、快速加载、沉浸式体验等显著特点。这些特点使得PWA应用能够为用户提供更加流畅、便捷和安全的体验,同时也为开发者提供了更低的开发
Websocket笔记
跃龙客
二把刀运维 websocket 笔记 网络协议
Websocket笔记文章目录Websocket笔记标准握手请求REQRES数据帧格式格式解析标准RFC6455https://datatracker.ietf.org/doc/html/rfc6455握手请求REQGET/chatHTTP/1.1Host:example.comUpgrade:websocketConnection:UpgradeSec-WebSocket-Key:dGhlIHN
WebSocket通信学习笔记
StrivePeng
websocket 学习 笔记 spring boot java
1简介WebSocket是一种全双工通信协议,它允许客户端和服务器之间建立持久化的双向连接,从而在不频繁创建HTTP请求的情况下进行实时数据传输。与传统的HTTP协议相比,WebSocket更适合需要实时数据更新的应用场景,如聊天应用、实时股票行情、在线游戏等。WebSocket是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建
Nginx HTTP和反向代理服务器
深渊之望
nginx 服务器 运维
一、什么是nginx:1、概念:Nginx(enginex)是一个高性能的HTTP和反向代理web服务器。2、什么是代理服务器:概念:代理服务器是介于客户端和Web服务器之间的另一台服务器,有了它之后,浏览器不是直接到Web服务器去取回网页信息,而是通过向代理服务器发送请求,信号会先送到代理服务器,由代理服务器来取回浏览器所需要的信息并传送给你的浏览器。一个完整的代理请求过程为:客户端首先与代理服
lnmp(linux nginx mysql php)动静分离web架构中,应用程序间是如何互动的?
2401_84019227
linux nginx mysql
linux操作系统,提供一个platform,架构的平台,是基础设施,不用多讲。nginx提供web服务功能,暴露80端口,让客户端通过ip地址来访问,访问什么呢?就是nginx的网页文件根目录里面放的文件内容。这些文件是固定的,所以叫静态页面。什么是固定的?也就是不和数据库交互的页面,叫做固定的,专业术语叫静态页面。这里的静态页面,容易引起误解,动图算不算静态页面?算,为什么,因为它是一个固定的
PHP,安卓,UI,java,linux视频教程合集
cocos2d-x小菜
java UI linux PHP android
╔-----------------------------------╗┆
zookeeper admin 笔记
braveCS
zookeeper
Required Software
1) JDK>=1.6
2)推荐使用ensemble的ZooKeeper(至少3台),并run on separate machines
3)在Yahoo!,zk配置在特定的RHEL boxes里,2个cpu,2G内存,80G硬盘
数据和日志目录
1)数据目录里的文件是zk节点的持久化备份,包括快照和事务日
Spring配置多个连接池
easterfly
spring
项目中需要同时连接多个数据库的时候,如何才能在需要用到哪个数据库就连接哪个数据库呢?
Spring中有关于dataSource的配置:
<bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"
&nb
Mysql
171815164
mysql
例如,你想myuser使用mypassword从任何主机连接到mysql服务器的话。
GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%'IDENTIFIED BY 'mypassword' WI
TH GRANT OPTION;
如果你想允许用户myuser从ip为192.168.1.6的主机连接到mysql服务器,并使用mypassword作
CommonDAO(公共/基础DAO)
g21121
DAO
好久没有更新博客了,最近一段时间工作比较忙,所以请见谅,无论你是爱看呢还是爱看呢还是爱看呢,总之或许对你有些帮助。
DAO(Data Access Object)是一个数据访问(顾名思义就是与数据库打交道)接口,DAO一般在业
直言有讳
永夜-极光
感悟 随笔
1.转载地址:http://blog.csdn.net/jasonblog/article/details/10813313
精华:
“直言有讳”是阿里巴巴提倡的一种观念,而我在此之前并没有很深刻的认识。为什么呢?就好比是读书时候做阅读理解,我喜欢我自己的解读,并不喜欢老师给的意思。在这里也是。我自己坚持的原则是互相尊重,我觉得阿里巴巴很多价值观其实是基本的做人
安装CentOS 7 和Win 7后,Win7 引导丢失
随便小屋
centos
一般安装双系统的顺序是先装Win7,然后在安装CentOS,这样CentOS可以引导WIN 7启动。但安装CentOS7后,却找不到Win7 的引导,稍微修改一点东西即可。
一、首先具有root 的权限。
即进入Terminal后输入命令su,然后输入密码即可
二、利用vim编辑器打开/boot/grub2/grub.cfg文件进行修改
v
Oracle备份与恢复案例
aijuans
oracle
Oracle备份与恢复案例
一. 理解什么是数据库恢复当我们使用一个数据库时,总希望数据库的内容是可靠的、正确的,但由于计算机系统的故障(硬件故障、软件故障、网络故障、进程故障和系统故障)影响数据库系统的操作,影响数据库中数据的正确性,甚至破坏数据库,使数据库中全部或部分数据丢失。因此当发生上述故障后,希望能重构这个完整的数据库,该处理称为数据库恢复。恢复过程大致可以分为复原(Restore)与
JavaEE开源快速开发平台G4Studio v5.0发布
無為子
我非常高兴地宣布,今天我们最新的JavaEE开源快速开发平台G4Studio_V5.0版本已经正式发布。
访问G4Studio网站
http://www.g4it.org
2013-04-06 发布G4Studio_V5.0版本
功能新增
(1). 新增了调用Oracle存储过程返回游标,并将游标映射为Java List集合对象的标
Oracle显示根据高考分数模拟录取
百合不是茶
PL/SQL编程 oracle例子 模拟高考录取 学习交流
题目要求:
1,创建student表和result表
2,pl/sql对学生的成绩数据进行处理
3,处理的逻辑是根据每门专业课的最低分线和总分的最低分数线自动的将录取和落选
1,创建student表,和result表
学生信息表;
create table student(
student_id number primary key,--学生id
优秀的领导与差劲的领导
bijian1013
领导 管理 团队
责任
优秀的领导:优秀的领导总是对他所负责的项目担负起责任。如果项目不幸失败了,那么他知道该受责备的人是他自己,并且敢于承认错误。
差劲的领导:差劲的领导觉得这不是他的问题,因此他会想方设法证明是他的团队不行,或是将责任归咎于团队中他不喜欢的那几个成员身上。
努力工作
优秀的领导:团队领导应该是团队成员的榜样。至少,他应该与团队中的其他成员一样努力工作。这仅仅因为他
js函数在浏览器下的兼容
Bill_chen
jquery 浏览器 IE DWR ext
做前端开发的工程师,少不了要用FF进行测试,纯js函数在不同浏览器下,名称也可能不同。对于IE6和FF,取得下一结点的函数就不尽相同:
IE6:node.nextSibling,对于FF是不能识别的;
FF:node.nextElementSibling,对于IE是不能识别的;
兼容解决方式:var Div = node.nextSibl
【JVM四】老年代垃圾回收:吞吐量垃圾收集器(Throughput GC)
bit1129
垃圾回收
吞吐量与用户线程暂停时间
衡量垃圾回收算法优劣的指标有两个:
吞吐量越高,则算法越好
暂停时间越短,则算法越好
首先说明吞吐量和暂停时间的含义。
垃圾回收时,JVM会启动几个特定的GC线程来完成垃圾回收的任务,这些GC线程与应用的用户线程产生竞争关系,共同竞争处理器资源以及CPU的执行时间。GC线程不会对用户带来的任何价值,因此,好的GC应该占
J2EE监听器和过滤器基础
白糖_
J2EE
Servlet程序由Servlet,Filter和Listener组成,其中监听器用来监听Servlet容器上下文。
监听器通常分三类:基于Servlet上下文的ServletContex监听,基于会话的HttpSession监听和基于请求的ServletRequest监听。
ServletContex监听器
ServletContex又叫application
博弈AngularJS讲义(16) - 提供者
boyitech
js AngularJS api Angular Provider
Angular框架提供了强大的依赖注入机制,这一切都是有注入器(injector)完成. 注入器会自动实例化服务组件和符合Angular API规则的特殊对象,例如控制器,指令,过滤器动画等。
那注入器怎么知道如何去创建这些特殊的对象呢? Angular提供了5种方式让注入器创建对象,其中最基础的方式就是提供者(provider), 其余四种方式(Value, Fac
java-写一函数f(a,b),它带有两个字符串参数并返回一串字符,该字符串只包含在两个串中都有的并按照在a中的顺序。
bylijinnan
java
public class CommonSubSequence {
/**
* 题目:写一函数f(a,b),它带有两个字符串参数并返回一串字符,该字符串只包含在两个串中都有的并按照在a中的顺序。
* 写一个版本算法复杂度O(N^2)和一个O(N) 。
*
* O(N^2):对于a中的每个字符,遍历b中的每个字符,如果相同,则拷贝到新字符串中。
* O(
sqlserver 2000 无法验证产品密钥
Chen.H
sql windows SQL Server Microsoft
在 Service Pack 4 (SP 4), 是运行 Microsoft Windows Server 2003、 Microsoft Windows Storage Server 2003 或 Microsoft Windows 2000 服务器上您尝试安装 Microsoft SQL Server 2000 通过卷许可协议 (VLA) 媒体。 这样做, 收到以下错误信息CD KEY的 SQ
[新概念武器]气象战争
comsci
气象战争的发动者必须是拥有发射深空航天器能力的国家或者组织....
原因如下:
地球上的气候变化和大气层中的云层涡旋场有密切的关系,而维持一个在大气层某个层次
oracle 中 rollup、cube、grouping 使用详解
daizj
oracle grouping rollup cube
oracle 中 rollup、cube、grouping 使用详解 -- 使用oracle 样例表演示 转自namesliu
-- 使用oracle 的样列库,演示 rollup, cube, grouping 的用法与使用场景
--- ROLLUP , 为了理解分组的成员数量,我增加了 分组的计数 COUNT(SAL)
技术资料汇总分享
Dead_knight
技术资料汇总 分享
本人汇总的技术资料,分享出来,希望对大家有用。
http://pan.baidu.com/s/1jGr56uE
资料主要包含:
Workflow->工作流相关理论、框架(OSWorkflow、JBPM、Activiti、fireflow...)
Security->java安全相关资料(SSL、SSO、SpringSecurity、Shiro、JAAS...)
Ser
初一下学期难记忆单词背诵第一课
dcj3sjt126com
english word
could 能够
minute 分钟
Tuesday 星期二
February 二月
eighteenth 第十八
listen 听
careful 小心的,仔细的
short 短的
heavy 重的
empty 空的
certainly 当然
carry 携带;搬运
tape 磁带
basket 蓝子
bottle 瓶
juice 汁,果汁
head 头;头部
截取视图的图片, 然后分享出去
dcj3sjt126com
OS Objective-C
OS 7 has a new method that allows you to draw a view hierarchy into the current graphics context. This can be used to get an UIImage very fast.
I implemented a category method on UIView to get the vi
MySql重置密码
fanxiaolong
MySql重置密码
方法一:
在my.ini的[mysqld]字段加入:
skip-grant-tables
重启mysql服务,这时的mysql不需要密码即可登录数据库
然后进入mysql
mysql>use mysql;
mysql>更新 user set password=password('新密码') WHERE User='root';
mysq
Ehcache(03)——Ehcache中储存缓存的方式
234390216
ehcache MemoryStore DiskStore 存储 驱除策略
Ehcache中储存缓存的方式
目录
1 堆内存(MemoryStore)
1.1 指定可用内存
1.2 驱除策略
1.3 元素过期
2 &nbs
spring mvc中的@propertysource
jackyrong
spring mvc
在spring mvc中,在配置文件中的东西,可以在java代码中通过注解进行读取了:
@PropertySource 在spring 3.1中开始引入
比如有配置文件
config.properties
mongodb.url=1.2.3.4
mongodb.db=hello
则代码中
@PropertySource(&
重学单例模式
lanqiu17
单例 Singleton 模式
最近在重新学习设计模式,感觉对模式理解更加深刻。觉得有必要记下来。
第一个学的就是单例模式,单例模式估计是最好理解的模式了。它的作用就是防止外部创建实例,保证只有一个实例。
单例模式的常用实现方式有两种,就人们熟知的饱汉式与饥汉式,具体就不多说了。这里说下其他的实现方式
静态内部类方式:
package test.pattern.singleton.statics;
publ
.NET开源核心运行时,且行且珍惜
netcome
java .net 开源
背景
2014年11月12日,ASP.NET之父、微软云计算与企业级产品工程部执行副总裁Scott Guthrie,在Connect全球开发者在线会议上宣布,微软将开源全部.NET核心运行时,并将.NET 扩展为可在 Linux 和 Mac OS 平台上运行。.NET核心运行时将基于MIT开源许可协议发布,其中将包括执行.NET代码所需的一切项目——CLR、JIT编译器、垃圾收集器(GC)和核心
使用oscahe缓存技术减少与数据库的频繁交互
Everyday都不同
Web 高并发 oscahe缓存
此前一直不知道缓存的具体实现,只知道是把数据存储在内存中,以便下次直接从内存中读取。对于缓存的使用也没有概念,觉得缓存技术是一个比较”神秘陌生“的领域。但最近要用到缓存技术,发现还是很有必要一探究竟的。
缓存技术使用背景:一般来说,对于web项目,如果我们要什么数据直接jdbc查库好了,但是在遇到高并发的情形下,不可能每一次都是去查数据库,因为这样在高并发的情形下显得不太合理——
Spring+Mybatis 手动控制事务
toknowme
mybatis
@Override
public boolean testDelete(String jobCode) throws Exception {
boolean flag = false;
&nbs
菜鸟级的android程序员面试时候需要掌握的知识点
xp9802
android
熟悉Android开发架构和API调用
掌握APP适应不同型号手机屏幕开发技巧
熟悉Android下的数据存储
熟练Android Debug Bridge Tool
熟练Eclipse/ADT及相关工具
熟悉Android框架原理及Activity生命周期
熟练进行Android UI布局
熟练使用SQLite数据库;
熟悉Android下网络通信机制,S