精华内容
下载资源
问答
  • 移动web开发笔记

    万次阅读 2016-05-15 20:12:27
    移动web开发笔记移动web开发笔记

    移动web开发笔记

    参考:
    移动web开发入门
    移动端web开发技巧

    基础概念

    像素单位

    CSS pixels与device pixels CSS pixels

    浏览器使用的抽象单位, 主要用来在网页上绘制内容。 device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度。 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式:
    1 CSS pixels = (devicePixelRatio)^2 device pixels
    (^2是平方的意思,至于 devicePixelRatio是什么东西,后面会讲解) 。

    PPI/DPI

    PPI,有时也叫DPI,所表示的是每英寸所拥有的像素(pixel)数目,数值越高,即代表显示屏能够以越高的密度显示图像。(注:这里的像素,指的是device pixels。)搞清楚了PPI是什么意思,我们就能很容易理解PPI的计算方式了,我们需要首先算出手机屏幕的对角线等效像素,然后处以对角线(我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度),就可以得到PPI了。准确的计算公示大家可以参照下图。比较有意思的是,根据公式计算出来的iPhone 4的PPI为330,要比苹果官方公布的326要高一点点。

    devicePiexelRatio

    pixel - px ( picture element )
    
    dpi / ppi - 每英寸像素 ( dot per inch )
    
    dips - 设备独立像素 ( device-independent pixels )
    
    devicePixelRatio - 物理像素 / dips 
    

    文字大小控制

    px, rem
    
    固定大小 - px
    
    多屏适配,统一修改 - rem
    相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
    
    rem - font size of the root element (W3C)
    

    viewport

    参考:移动前端开发之viewport的深入理解

    <meta name="viewport"
          content="width=device-width,
                   height=device-height,
                   inital-scale=1.0,
                   maximum-scale=1.0,
                   user-scalable=no;"
    />

    在苹果的规范中,meta viewport 有6个属性,分别如下:
    - width - viewport的宽度[pixel_value |device-width]
    - height - viewport的高度[pixel_value |device-height]
    - initial-scale - 初始的缩放比例[float_value]christer1229
    - maximum-scale - 允许用户缩放到的最大比例
    - minimum-scalbujue - 允许用户的最小缩放值
    - user-scalable - 用户是否可以手动缩放 [yes | no]

    响应式布局

    原则

    • 移动优先
    • 渐进增强

    实现方式

    • 媒体查询
    • 使用JS
    • 使用第三方框架

    布局方案

    百分比布局(流体布局)

    将元素原本的定宽除父容器的宽度得到百分比设置为宽度,使用百分比,文字使用 em。

    • 优点:
      流动布局页面对用户更友好,因为它能自适应用户的设置。
      页面周围的空白区域在所有分辨率和浏览器下都是相同的,在视觉上更美观。
      如果设计良好,流动布局可以避免在小分辨率下出现水平滚动条。
    • 缺点:
      设计者更难控制用户所见,并可能忽略掉一些错误,因为在特定的分辨率下看起来好的;
      图片,视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户;
      在特别大的分辨率下,内容会被拉成长长的一行,变得难以阅读;
      会有画面失真问题

    弹性(flexible)布局

    用rem替代px
    原理:定一个最大宽度,设备屏幕超过这个宽度之后,rem大小不再变化,否则,rem大小设置为屏幕宽度的几分之一,页面中的长度单位值用rem代替px,这样随着页面的宽度变化能够进行等比例缩放。
    rem实际是页面根元素的字体大小,通过js改变rem值的代码如下:

    ;
    ( function( win ) ) {
        var doc = win.document;
        var docEl = doc.documentElement;//获取文档元素
        var tid;
    
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;//获取设备宽度
            if ( width > 540 ) {
                width = 540;
            }
            var rem = width / 10;//设置rem为屏幕宽度的十分之一
            docEl.style.fontSize = rem + 'px';
        }
        win.addEventListener('resize', function() {//屏幕宽度改变时
            clearTimeout(tid);//清除之前的计时器
            tid = setTimeout(refreshRem, 300);//300ms后改变rem大小
        }, false);
    
        win.addEventLister('pageshow', function( e ) {//页面显示时
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        refreshRem();
    })( window );

    参考:移动端页面使用rem来做适配

    flex-box布局

    flex-box,参考:
    Flex 布局教程:语法篇
    优点:布局方便,灵活性高;
    缺点:兼容性问题;

    图片处理

    普通设置:

    img {
        max-width: 100%;
    }

    或:

    img {
        width: 100%;
        max-width: 300px;
    }//限制最宽不超过300px;

    响应式图片:

    参考:
    响应式图片srcset全新释义sizes属性w描述符
    Srcset和sizes

    即根据屏幕密度现实对应尺寸图片
    src:指定资源(在浏览器不认识srcset和size时会加载这个)
    srcset:srcset的值是可用图像版本的URL列表;每个图片的宽度都用w描述符来表明。
    sizes:使用长度与媒体查询配合,浏览器会检测每一个媒体查询,直到匹配到为止。使用查询配合的长度作为“选择资源”拼图的最后一块:图像渲染宽度或者相对于视图。
    eg.

    <img src="small.jpg"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw,
            100vw"
     alt="A rad wolf" />

    媒体查询

    1. 可以通过<link>标签的media属性为样式表指定设备类型
    <link rel="stylesheet" type="text/css" media="screen" href="screen-style.css">
    <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> //纵向屏幕
    <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> //宽度小于900px时
    1. 在css中同样可以使用
    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media (max-width: 960px){
        body{
            background: #000;
        }
    }
    @media screen and (min-width:960px) and (max-width:1200px){
        body{
            background:yellow;
        }
    }
    1. @import方法
      @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。
    @importurl(reset.css) screen;   
    @importurl(print.css) print;

    <head>中的<style>标签中引入媒体类型方法。

    <head>
    <style type="text/css">
        @importurl(style.css) all;
    </style>
    </head>

    为方便查阅,下面列出了所有可供媒体查询检测的特性
    - width:视口宽度。
    - height:视口高度。
    - device-width:渲染表面的宽度(对我们来说,就是设备屏幕的宽度)。
    - device-height:渲染表面的高度(对我们来说,就是设备屏幕的高度)。
    - orientation:检查设备处于横向还是纵向。
    - aspect-ratio:基于视口宽度和高度的宽高比。一个16∶9比例的显示屏可以这样定义aspect-ratio: 16/9。
    - device-aspect-ratio:和aspect-ratio类似,基于设备渲染平面宽度和高度的宽高比。
    - color:每种颜色的位数。例如min-color: 16会检测设备是否拥有16位颜色。
    - color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
    - monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如monochrome: 2。
    - resolution:用来检测屏幕或打印机的分辨率,如min-re一种检测 IE 是否加载完成的方式,使用 doScroll 方法调用,详情可见http://javascript.nwbox.com/IEContentLoaded/
    原理就是对于 IE 在非 iframe 内时,只有不断地通过能否执行 doScroll 判断 DOM 是否加载完毕。在上述中间隔 50 毫秒尝试去执行 doScroll,注意,由于页面没有加载完成的时候,调用 doScroll 会导致异常,所以使用了 try -catch 来捕获异常。
    结论:所以总的来说当页面 DOM 未加载完成时,调用 doScroll 方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。solution: 300dpi。还可以接受每厘米像素点数的度量值,如min-resolution: 118dpcm。
    - scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。如720p HD电视(>devide-width指屏幕宽高,width指渲染窗口宽高
    720p的p即表明是逐行扫描)匹配scan: progressive,而1080i HD 电视(1080i中的i表明是隔行扫描)匹配scan: interlace。
    - grid:用来检测输出设备是网格设备还是位图设备。
    - 在上述所有特性中,除scan和grid之外,都可使用min和max前缀来创建一个查询范围。

    HTML5

    新表单类型

    • placeholder
      只需在input元素中加入placeholder属性,其属性值就会默认显示为占位符文字,输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时,占位符文字则会再次显示。
    • required
      在支持HTML5的浏览器中,在input元素中追加布尔类型的属性required(也就是说你可以选择追加或不追加该属性),则表明该表单域为必填项。如果表单提交时该必填项没有任何信息,浏览器则会显示警告信息。警告信息的显示方式(包括显示内容和样式)取决于浏览器与输入框类型。
      range、color、 button和hidden类型的输入元素则不能使用required,因为这几种输入类型几乎都有默认值。

    • autofocus
      HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦(或选中),以便于用户输入。
      例如有多个表单域追加了autofocus属性,在Chrome(v16)中会聚焦最后一个使用autofocus属性的表单域,而Firefox(v9)恰恰相反,会聚焦第一个使用autofocus的表单域。

    • autocomplete

    也可以通过给表单本身(不是fieldset)设置属性来禁用整个表单的自动完成功能。示例代码如下:

    <form id="redemption" method="post" autocomplete="off">
    • list(及对应的datalist元素)
      list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候,显示一组备选值。
      list属性中的值(awards)同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将option包裹在select中不是必需的,但这样做便于为老版本浏览器提供降级方案。

    HTML5的新输入类型

    • type=”email”——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。
    • type=”number”——支持该特性的
      浏览器期望输入一个数字。这种输入类型默认还提供控制按钮,允许用户简单地点击向上或向下来改变数值。
      你可能注意到在上面的代码中,我们还设置了允许输入的最小值和最大值范围,具体代码如下:
    type="number" min="1929" max="2015"

    超出范围的数字会(应该)得到特殊对待。
    - type=”url”——你猜对了,URL输入类型用于输入URL地址。
    - type=”tel”是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码- type=e=”search”——和普通文本输入框的表现基本一样,仅在个别浏览器中渲染得有点细微差别。
    你可用pattern属性通过正则表达式来定义表单域的数据
    - type=”color”——会在支持该特性的浏览器中生成一个颜色选择器,让用户可以选择十六进制的颜色值。
    - 日期和时间输入类型
    和color类型一样,目前对date提供原生支持的浏览器寥寥无几,大多数浏览器默认都将其渲染为标准的文本输入框。超级棒的Opera已经实现了这个功能
    range输入类型会生成一个滑动条。

    CSS3

    笔记

    设备控制

    • 打开数字键盘
      <input type="tel">
    • 隐藏地址栏
      setTimeout(function(){ window.scrollTo(0, 1); }, 0);
    • 在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
      <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
      <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
      <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

    设备交互

    1. input fixed失效问题
      参考:
      iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
      【小贴士】虚拟键盘与fixed带给移动端的痛!
      Web移动端Fixed布局的解决方案
      出现原因:
      移动端虚拟键盘出现的条件是:文本框(文本类)获得焦点,但是文本框获得焦点未必会弹出键盘;
      收起虚拟键盘的条件是:文本框失焦
      总而言之,我们认为会出现或者消失虚拟键盘的时候都可能不工作
      在移动设备上,如果文本框在上方,点击不会有什么问题:
      在设备的最下面的话,整个块会上移,以将input区域显示出来
      这个时候几个棘手的问题就出现了:
      ① 虚拟键盘的出现对页面来说是不可知的,这句话的理解是:没有键盘出现事件,没有办法获取键盘高度
      ② 键盘是“贴”在了viewport上,表面上不会对dom产生“任何”影响,但是这个时候一些定位元素的表现却变得“怪异”。

    软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。

    这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样的问题。

    解决方案:
    使fixed的父元素不滚动,将滚动区域限制在与footer和header同级的内容部分。

    性能优化

    参考:移动开发规范概述
    要考虑Android低端机与2G网络场景下性能 注意!

    发布前必要检查项

    所有图片必须有进行过压缩
    考虑适度的有损压缩,如转化为80%质量的jpg图片
    考虑把大图切成多张小图,常见在banner图过大的场景
    

    加载性能优化, 达到打开足够快

    数据离线化,考虑将数据缓存在 localStorage
    初始请求资源数 < 4
    图片使用CSS Sprites 或 DataURI
    外链 CSS 中避免 @import 引入
    考虑内嵌小型的静态资源内容
    初始请求资源gzip后总体积 < 50kb
    静态资源(HTML/CSS/JS/Image)是否优化压缩?
    避免打包大型类库
    确保接入层已开启Gzip压缩(考虑提升Gzip级别,使用CPU开销换取加载时间) 注意!
    尽量使用CSS3代替图片
    初始首屏之外的静态资源(JS/CSS)延迟加载
    初始首屏之外的图片资源按需加载(判断可视区域)
    单页面应用(SPA)考虑延迟加载非首屏业务模块
    开启Keep-Alive链路复用
    

    运行性能优化, 达到操作足够流畅

    避免 iOS 300+ms 点击延时问题 注意!
    缓存 DOM 选择与计算
    避免触发页面重绘的操作
    Debounce连续触发的事件(scroll / resize / touchmove等),避免高频繁触发执行 注意!
    尽可能使用事件代理,避免批量绑定事件
    使用CSS3动画代替JS动画
    避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
    HTML结构层级保持足够简单
    尽能少的使用CSS高级选择器与通配选择器
    Keep it simple
    

    在线性能检测评定工具使用指南

    访问 Google PageSpeed 在线评定网站
    在地址栏输入目标URL地址,点击分析按钮开始检测
    按 PageSpeed 分析出的建议进行优化,优先解决红色类别的问题
    
    展开全文
  • # 关于考不考 因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,知名度并不是很高,有没有用现在无法一锤定音,看它以后办的怎么样把,软考以前也是慢慢地才知名起来。能考就考...

    由于经常分享失败,我上传github上了,先放上链接:https://github.com/Lydever/web-1-x.git

    请礼貌,不要耍流氓哈哈,创作不易,下载的同时,请start一下,谢谢~

    注意:转载请备注来源: https://blog.csdn.net/weixin_43853746/article/details/109992935

    # 官方信息网站
    👉 1+X Web考证信息成绩查询系统
    👉 工信部: 关于首批1+X证书制度试点院校名单的公告
    👉 1+X Web 前端开发职业技能等级标准.pdf
    # 前言
    2020 12月 1+X Web 前端开发中级 模拟题大致就更这么多,我的重心不在这里,就不花太多时间在这里面了。但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高?
    # 关于考不考
    因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,知名度并不是很高,有没有用现在无法一锤定音,看它以后办的怎么样把,软考以前也是慢慢地才知名起来。能考就考吧,据所知,大部分学校报考,基本不用交什么报考费(小部分学校,个别除外,如果要缴费的看自己需要…) 反正不损失什么,就算以后没什么用就当给自己做的一次测试吧。
    # 关于理论题
    就这去年和今年考的那几批的试题来看,考得很基础,对于选择题基本上都是基础的知识点和概念之类的,记住多看看基础,在我发的这几套试题认真做,中级基础的知识点都在这里面了。
    # 关于实操题
    中级实操的考核是在初级的基础上,重点考察下面几个部分,所以下面五个知识点差不多一个知识点一道大题,一般实操有四道大题,打√的都是重点考的知识点(极少可能只有三道):

    • 前端静态搭建(html+css+js )
    • 深入浅出MySQL数据库(php与MySQL数据库操作)√
    • PHP 技术与应用 (PHP Laravel 框架应用) √
    • Web前后端交互技术(php)√
    • 响应式开发技术(bootstrap响应式题型)√

    # 关于答题技巧
    实操就是自己读懂程序代码,理清相关文件,进行填空,补齐代码,实现功能。技巧:整体看一下整体相关文件,有一个大概的了解,理清思路,程序代码“上下前后连接”,记不得样式单词找样式单词看一下前后代码,找变量尽量copy,防止自己稍不留神敲错

    了解 1+X Web前端开发等级考证的看这里戳这里👈

    2020年下半年 Web前端开发中级 理论考试

    考生姓名:——————————— 准考证号:——————————

    (考试时间9:00-11:30 共150分钟)

    1. 本试卷共3道大题,满分100分。
    2. 请在指定位置作答。

    一、单选题(每小题2分,共30小题,共60分)

    1、下列标签不属于列表标签的是()。
    A、ul B、dl C、ol D、p

    2、在CSS中用()属性来实现文字环绕图片。
    A、margin B、float C、padding D、src

    3、在CSS文件中插入注释正确书写格式的是()。
    A、//this is a comment
    B、#this is a comment
    C、/this is a comment/
    D、’this is a comment

    4、在form表单中哪种类型是滑块控件()?
    A、search B、controls C、slider D、range

    5、下列哪一个是CSS3新增的属性()。
    A、box-shadow B、border C、background D、display

    6、在javascript中关于"+"的用法说法错误的是()。
    A、可以用于加法运算
    B、不可以转换数据类型
    C、可以链接字符串
    D、可以是立即执行函数的符号

    7、在javascript中下列执行结果不正确的是()。
    A、Math.max(3,4,5)返回5;
    B、Math.abs(-9)返回9;
    C、Math.floor(3.5)返回3;
    D、Math.ceil(4.2)返回4

    8、在JavaScript中下面选项关于this描述正确的是()。
    A、在使用new实例化对象时, this指向这个实例对象;
    B、当对象调用函数或者方法时,this指向这个对象;
    C、严格模式下,this指向window;
    D、在任何情况下this指向一旦确定就不能修改;

    9、在jQuery中,下面的说法错误的是()。
    A、$ (“ul li:first”) 指选取< ul>下的第一个 < li>子元素
    B、$ (“ul li:gt(2)”) 指选取< ul>下的索引从2开始的所有< li>子元素
    C、$ (“ul li:eq(2)”) 指选取< ul>下的索引为2的< li>子元素
    D、$ (“ul li:not(:first)”) 指选取< ul>下的除了第一个 < li>子元素的所有< li>子元素

    10、不属于栅格系统的实现原理的是()。
    A、自定义容器的大小。平均分为12份
    B、基于JavaScript开发的组件
    C、结合媒体查询
    D、调整内外边距

    11、在bootstrap4中,关于响应式栅格系统分屏类型错误的是()。
    A、.col-sm- B、.col-md- C、.col-sx- D、.col-lg-

    12、下面哪个类用于固定宽度并支持响应式布局的容器()?
    A、container B、center C、containers D、containerFluid

    13、bootstrap插件是依赖()开发的。
    A、javascript B、jquery C、angular js D、node js

    14、在laravel中,界面文件应该放在以下哪个路径下()。
    A、app\http\controllers
    B、public/html
    C、resources\views
    D、routes

    15、在处理应答中,如果我们要以文本的方式处理,我们需要在参数表中放置XMLHttpRequest对象的()属性。
    A、xhr.responseText B、xhr.responseXML
    C、xhr.requestText D、xhr.requestXML

    16、XMLHttpRequest对象的readyState状态,当xhr.readyState==1表示:()。
    A、请求已接收 B、服务器链接已经建立
    C、请求已经完成 D、未初始化

    17、在MySQL中,查找出班主任“王笑笑”班的全部男生的信息,则正确的SQL语句是()。
    A、select * from 学生 where 性别=‘男’ and 班级编号 == (select 班级编号 from 班级 where 班主任=‘王笑笑’)
    B、select * from 学生 where 性别=‘男’ and 班级编号 in (select 班级编号 from 班级 where 班主任=‘王笑笑’)
    C、select * from 学生 where 性别=‘男’ and 班级编号 union (select 班级编号 from 班级 where 班主任=‘王笑笑’)
    D、select * from 学生 where 性别=‘男’ and 班级编号 as (select 班级编号 from 班级 where 班主任=‘王笑笑’)

    18、在MySQL中,关于索引管理说法错误的是()
    A、执行CREATE TABLE语句时可以创建索引,也可以单独用CREATE INDEX或ALTER TABLE来为表增加索引
    B、可通过唯一索引设定数据表中的某些字段列不能包含重复值
    C、ALTER TABLE或DROP INDEX语句都能删除数据表中的索引
    D、查看索引的命令为: SHOW INDEX 数据表名

    19、在MySQL中,创建数据库 test 正确的SQL语句是()。

    ACREATE  DATABASE  IF  EXISTS  `test`
    BCREATE  IF  NOT  EXISTS  `test`
    CCREATE  DATABASE  IF  NOT  EXISTS  `test`
    DCREATE  IF  NOT  EXISTS  `test`  DATABASE
    

    20、在MySQL中,联合查询使用的关键字是()。
    A、JOIN B、UNION C、ALL D、FULL

    21、在MySQL数据库服务器中,查看当前系统内所有可用的数据库,可以执行()指令。
    A、SHOW DATABASES; B、SHOW TABLES;
    C、DESCRIBE DATABASES; D、DISPLAY LIBRARIES;

    22、在缓存中,Cookie可存的最大限制是()。
    A、1kb B、2kb C、3kb D、4kb

    23、mysql_connect()与@mysql_connect()的区别是()。
    A、@mysql_connect()不会忽略错误,将错误显示到客户端
    B、mysql_connect()不会忽略错误,将错误显示到客户端
    C、没有区别
    D、功能不同的两个函数

    24、在php中,以下代码中$result的结果是()

    <?php
    $x="";
    $result=is_null($x);
    var_dump($result);
    ?>
    

    A、报错 B、bool(true) C、bool(false) D、""

    25、关于mysql_fetch_object说法中,正确的是()。
    A、mysql_fetch_object和mysql_fetch_array一样,没什么区别
    B、mysql_fetch_object返回值是个对象,所以在速度上比mysql_fetch_array要慢
    C、mysql_fetch_object返回值是个数组,所以在速度上和mysql_fetch_array及mysql_fetch_row差不多
    D、mysql_fetch_object返回值是个对象,在速度上和mysql_fetch_array及mysql_fetch_row差不多

    26、在php中,语句for(k=0;k=1;k++);和语句for(k=0;k==1;k++);执行的次数分别是: ()。
    A、无限和0 B、0和无限 C、都是无限 D、都是0

    27、PHP运算符中,优先级从高到低分别是()。
    A、关系运算符,逻辑运算符,算术运算符
    B、算术运算,关系运算符,逻辑运算符
    C、逻辑运算符,算术运算符,关系运算符
    D、关系运算符,算术运算符,逻辑运算符

    28、在javascript中,声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确 的是 ()。
    A、var obj = [name:“zhangsan”,show:function(){alert(name);}];
    B、var obj = {name:“zhangsan”,show:“alert(this.name)”};
    C、var obj = {name:“zhangsan”,show:function(){alert(name);}};
    D、var obj = {name:“zhangsan”,show:function(){alert(this.name);}};

    29、在Laravel框架中,模板文件中不一样的部分用()关键词?
    A、@class B、@yield C、@extends D、@section

    30、在Laravel框架中,表单提交请求的时候,以下说法正确的是()。
    A、用get请求,需要令牌验证;
    B、用post的请求,需要令牌验证,在表单中加入{{ csrf_field() }}或者@csrf;
    C、用get 和post请求,都不要需要令牌验证;
    D、以上说法都不正确;

    二、多选题(每小题2分,共15小题,共30分)

    1、下列标签属于HTML5结构标签的是()。
    A、header B、footer C、nav D、hgroup E、p

    2、transform的类型有哪些()。
    A、scale B、skew C、translate D、rotate E、tansition

    3、session 和cookie 的区别说法正确的是()。
    A、session 和 cookie 都可以记录数据状态。
    B、在设置session 和cookie 之前不能有输出。
    C、在使用cookie 前要使用 cookie_start()函数初始。
    D、在使用session 前要使用 session_start()函数初始。

    4、php中数组可以使用哪些键名()。
    A、数字键名 B、下标 C、null D、文本(或字符串)键名

    5、PHP允许的注释符号有()。
    A、// B、闭合的段落 C、 # D、 //闭合的段落

    6、在MySQL中,关于数据库恢复说法正确的是()。
    A、执行备份的SQL文件里的SQL语句可达到数据库恢复的目的
    B、SOURCE命令恢复数据库的命令是:SOURCE /path/db_name.sql
    C、使用mysql命令恢复数据库的语法是:
    mysql ?u username ?p [dbname] < /path/db_name.sql
    D、SOURCE命令恢复数据库与mysql命令一样都可在DOS命令窗口执行

    7、在MySQL中,下面关于数据类型说法正确的是()。
    A、varchar类型和char类型都是字符串类型,没有区别
    B、varchar(4) 类型的字段,插入“abcdef”时会报长度过长的错误
    C、varchar类型的长度是固定的,char类型的长度是可变的
    D、char(2) 类型的字段,插入“abc”时,所占的字符数为2,数据库中插入“ab”

    8、在MySQL中,创建一个购物表,其中一个字段是记录购物时间(要求精确到秒),则该字段比较合适的数据类型是()。
    A、DATE B、TIME C、DATETIME D、TIMESTAMP

    9、使用Ajax可带来便捷有()。
    A、减轻服务器的负担
    B、无刷新更新页面
    C、可以调用外部数据
    D、可以不使用Javascript脚本

    10、构成Ajax的技术有()。
    A、DOM B、XML C、JS D、HTML

    11、以下说法正确的是()。
    A、HTML中表示标题的标签应该全部使用h1
    B、应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
    C、应该根据页面中内容的层级关系来决定使用合适的标题标签。
    D、h1标签用来描述网页中最上层的标题。

    12、关于HTML标签表述正确的是()。
    A、div标签主要用于布局
    B、html中标签中的代码缩进是为了方便阅读
    C、< div>< p>web前端< /div>< /p>
    D、< div>中不可以嵌套ul,h标签

    13、在laravel中,关于页面跳转说法正确的是()。
    A、return redirect(‘home/test’);在控制器中用redirect跳转的方法;
    B、< a href="{{ route(‘test’) }}">首页,这种方式是针对命令路由的;
    C、< a href="{{ route(‘test’) }}">首页,不是命名路由也可以使用此方法;
    D、< a href="{{ action(‘HomeController@index’) }}">首页

    14、关于RESTful API说法正确的是()。
    A、它是一个api的标准,无状态请求
    B、请求的路由地址是固定的
    C、使用标准有.post .put .delete
    D、以上说法都正确

    15、在Bootstrap4中,下列说法正确的是()。
    A、<576px 像素的为超小屏幕,用 .col-*
    B、≥576px 像素的为小屏幕,用 .col-sm-*
    C、≥768px 像素的为中等屏幕,用 .col-md-*
    D、≥992px 像素的则为大屏幕,用 .col-lg-*
    E、≥1200px像素的则为超大屏,用 .col-xl-*

    三、判断题(每小题2分,共5小题,共10分)

    在每小题后对应括号内填入判断结果,正确的选项填写“√”,错误的选项填写“×”
    1、ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。( )。

    2、同源策略是指域名,协议,端口三者都一样( )。

    3、在mysql中“use ‘demoDB’ ” 切换到demoDb数据库( )。

    4、在MySQL中,使用索引不能避免进行全表的扫描( )。

    5、PHP程序中可以使用echo输出数据类型( )。


    理论考试答案评分细则

    一、单选题(每小题2分,共30小题,共60分)

    第1题第2题第3题第4题第5题
    DBCDA
    第6题第7题第8题第9题第10题
    BDABB
    第11题第12题第13题第14题第15题
    CABCA
    第16题第17题第18题第19题第20题
    BBDCB
    第21题第22题第23题第24题第25题
    ADBCB
    第26题第27题第28题第29题第30题
    ABDBB

    二、多选题(每小题2分,共15小题,共30分)

    第1题第2题第3题第4题第5题
    ABCABCDABDABCDACD
    第6题第7题第8题第9题第10题
    ABCBDCDABCABC
    第11题第12题第13题第14题第15题
    BCABABDABCDABCDE

    三、判断题(每小题2分,共5小题,共10分)

    第1题第2题第3题第4题第5题
    ××

    1+X 系列导航

    考点知识回顾:

    一、 1+X Web前端中级必考 | PHP 技术与应用
    二、 1+X Web前端等级考证 | 详解jQuery基础
    三、 1+X Web前端等级考证 | 深入浅出MySQL数据库
    四、1+X Web前端等级考证 | Web中级12月最新模拟题
    五、 1+X Web前端等级考证 | 浅谈AJAX基础知识 (中级必考)

    模拟题


    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷1) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷1) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷2) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷2) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷3) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷3) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷4) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷4) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (试卷5) 附答案
    1+X Web前端等级考证 | 2020 12月Web前端开发中级理论 (试卷5) 附答案

    有时间会持续更新关于1+X 方面的~~

    展开全文
  • eclipse导入一个别人写的web项目时产生的错误。 换句话说就是eclipse如何正确导入一个别人的web项目 适合于 小白,和初学者 下面我们来进行正文 一、准备一个下载好的web项目 这里是下载或者从GitHub上下载的一个...

    一、问题描述
    为了不浪费你的时间,你可以先看这就几句话,再决定要不要继续阅读下去。
    这篇博客可以解决的问题是
    eclipse导入一个别人写的web项目时产生的错误。
    换句话说就是eclipse如何正确导入一个别人的web项目
    适合于 小白,和初学者

    下面我们来进行正文
    一、准备一个下载好的web项目

    这里是下载或者从GitHub上下载的一个web项目在这里这就插入图片描述
    二、打开eclipse导入web项目
    导入你的web项目
    一般有代码操作的都应该会
    当然如何正确导入项目你可以去百度

    三、最重要的是导入后的操作
    1、首先来说一下都有哪些可能会产生的错误,然后你根据你的实际情况进行选择修改
    (1)jdk的版本不同
    (2)MySQL的版本不同
    (3)tomcat的版本不同
    (4)加载驱动的connector的.jar的包的版本不同
    (5)期间可能会产生的tomcat的报错
    总之就是版本不同所导致的各种问题,
    这些都是你要修改的或者是你要查看的

    分情况解决问题
    (1)jdk的版本不同
    (3)tomcat的版本不同
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    (2)MySQL的版本不同
    这里我主要说的是MySQL5版本之前和之后的差异

    5版本之前的加载驱动的
    Class.forName(“com.mysql.jdbc.Driver”);
    5版本之后的加载驱动
    Class.forName(“com.mysql.cj.jdbc.Driver”);

    5版本之前的创建连接
    DriverManager.getConnection(“jdbc:mysql://localhost:3306/数据库名”,“用户名”,“密码”);
    5版本之后的创建连接
    DriverManager.getConnection(“jdbc:mysql://localhost:3306/数据库名?useSSL=false&serverTimezone=UTC”,“用户名”,“密码”);

    如果你想更多了解MySQL新旧版本的区别可以百度

    上面要修改的代码,不是在连接池里,就是DButi里或者是dao层里

    (4)加载驱动的connector的.jar的包的版本不同
    如果你的数据库的版本不同基本上也是要经历这个步骤的
    首先要删除项目本来的

    这个在WEB-INF中的lib中
    删除他然后把和你数据库匹配的包复制过来
    右键buildpath一下就可以了

    (5)期间可能会产生的tomcat的报错
    如果你的tomcat报错或者启动不了
    解决方法,首先
    任务管理器—>详细信息—>找到Javax,右键结束任务
    (一般这笔不就可以了,这个产生错误的原因是,端口号被占用)
    然后eclipse中卸载再重装的你tomcat就可以了
    在这里插入图片描述
    在这里插入图片描述


    看都看完了,给个赞再走呗


    展开全文
  • Tomcat是一个被广泛使用的Java WEB应用服务器,下面将认识Tomcat:先来了解Tomcat与Java技术的关系、以及在WEB中的应用场景;再来了解Tomcat的安装目录结构、Tomcat配置文件、Tomcat部署Web应用程序的目录结构;最后...

    Tomcat(一) Tomcat是什么:

    Tomcat与Java技术 Tomcat与Web应用 以及 Tomcat基本框架及相关配置


           Tomcat是一个被广泛使用的Java WEB应用服务器,我们有必要对它有足够的了解。下面将认识Tomcat:

           1、先来了解Tomcat与Java技术的关系、以及在WEB中的应用场景;

           2、再来了解Tomcat的安装目录结构、Tomcat配置文件、Tomcat部署Web应用程序的目录结构;

           3、最后了解Tomcat基本架构、以及Tomcat架构各组件的一些配置。

    1、Tomcat是什么

           Apache Tomcat是由Apache Software Foundation(ASF)开发的一个开源Java WEB应用服务器。

           类似功能的还有:Jetty、Resin、Websphere、weblogic、JBoss、Glassfish、GonAS等,它们的市场占有率如下,可以看到Tomcat是最受欢迎的Java WEB应用服务器:

           Tomcat在技术实现上所处的位置如下:

           下面我们来了解下Tomcat与这些技术之间的关系。

    1-1、Tomcat与Java

    1、Tomcat与Java SE

          Tomcat是用Java语言编写的,需要运行在Java虚拟机上,所以一般需要先安装JDK,以提供运行环境。

    2、Tomcat与Java EE

          Tomcat实现了几个Java EE规范,包括Java Servlet、Java Server Pages(JSP),Java Expression Language和Java WebSocket等,这些是都下载Tomcat安装包默认提供的,可以在源码中看到相关Java EE 规范API源码引用,如下:

           此外,官网还提供了另外一些Java EE规范的实现,如JMX Remote、Web services,要使用的话需要另外下载,放到Tomat安装目录/lib中,官网相关下载如下:

           可以说Tomcat是一个不完整的Java EE应用服务器。

           更多关于Java SE、Java EE等java技术信息请参考:《Java平台体系:组成结构 运行机制 JRE/JDK/OpenJDK Java SE/EE/ME Java优点

    1-2、Tomcat与Servlet/编程开发

           Tomcat实现的几个Java EE规范最重的是Servlet,因为实现了Servlet规范,所以Tomcat也是一个Servlet容器,可以运行我们自己编写的Servlet应用程序处理动态请求。

           平时用的Struts2、SpringMVC框架就是基于Servlet,所以我们可以在这些框架的基础上进行快速开发,然后部署到Tomcat中运行。

           另外对于JSP规范实现:可以混合HTML与Java开发在一个文件中(.jsp),这种文件在第一次调用之后会被Tomcat的Jasper组件编译成一个servlet类,在后续的操作中则可以直接使用此类。这种开发方式不灵活,一般少用。

    1-3、Tomcat与WEB/HTTP请求

           Tomcat的(HTTP类型)Connector组件实现了HTTP请求的解析,Tomcat通过Connector组件接收HTTP请求并解析,然后把解析后的信息交给Servlet处理:

           对于静态资源(html/js/jpg等)请求,Tomcat提供默认的Servlet来处理并响应;

           对于动态请求,可以映射到自己编写的Servlet应用程序来处理。

    1-4、Tomcat与Nginx/Apache的应用架构

           Nginx、Apache都是目前主流的Web服务器,也可以作为反向代理服务器它们在处理大量并发的请求连接、连接会话管理和静态内容请求等方面相比Tomcat更具优势。

           所以一般在实际应用中,先是通过Nginx(或Apache)反向代理服务器接收请求,匹配分离动态/静态请求(动静分离);

           如果是静态请求,则转发到另外的Nginx WEB服务器上,返回静态内容;如果是动态请求,则转发到后面的Tomcat应用服务器,处理动态请求的业务逻辑。

           简单的架构如下:

           更多信息请参考:《各种容器与服务器的区别与联系:Servlet容器 WEB容器 Java EE容器 应用服务器 WEB服务器 Java EE服务器

    2、Tomcat安装目录

           Tomcat安装后根目录如上图,由环境变量$ CATALINA_HOME表示,可以手动设置,可以由/bin/catalina.sh命令脚本自动设置该环境变量,如果使用多个Tomcat实例,需要为每个实例定义$ CATALINA_BASE环境变量。

           这些目录说明如下:

          bin:启动、关闭和其他脚本, * .sh文件(对于Unix系统)是* .bat文件的功能重复(对于Windows系统)。

          conf:配置文件及相关数据文件存放目录,如server.xml,tomcat-users.xml,web.xml;

           logs:默认的日志文件存放目录,如访问日志,可以通过server.xml文件配置到其他目录;

           lib:Tomcat使用的库文件存放目录,如Servlet规范的API;

           temp:临时文件的工作目录,如上传大文件时的缓存数据会存储到这里;

          webapps:我们的应用程序部署目录,可以通过server.xml文件配置;

           work:Tomcat工作目录,如存放JSP编译后的类文件。

           更多相关信息请参考:http://tomcat.apache.org/tomcat-8.5-doc/introduction.html

    3、Tomcat配置文件

           Tomcat的配置文件默认存放在$CATALINA_HOME/conf目录中,主要有以下几个:

          server.xml: Tomcat核心配置文件,包含Service, Connector, Engine, Realm, Valve, Hosts主组件的相关配置信息。

          context.xml:为部署与此Tomcat实例上的web应用程序提供的默认配置文件,每个webapp都可以使用独有的context.xml,通常放置于webapp目录的META-INF子目录中,常用于定义会话管理器,Realm已经JDBC等。

          web.xml:为部署与Tomcat实例上的所有web应用程序提供部署描述符,通常用于为webapp提供默认的servlet定义和基本的MUIME映射表。

          tomcat-users.xml:Realm认证时用到的相关角色、用户和密码等信息;Tomcat自带的manager默认情况下会用到此文件;在Tomcat中添加/删除用户,为用户指定角色等将通过编辑此文件实现。

           catalina.policy:当基于-securty选项启动tomcat实例时会读取此配置文件;此文件是JAVA的安全策略配置文件,用于配置访问codebase(代码库)或某些Java类的权限。

          catalina.properties:java属性定义文件,设定类加载器路径,安全包列表和一些调整性能的参数信息。

          logging.properties:定义日志相关的配置信息,如日志级别、文件路径等。

    4、WEB应用部署目录结构

           我们的应用程序一般会打包成归档格式(.war),然后放到Tomcat的应用程序部署目录。而webapp有特定的组织格式,是一种层次型目录结构,通常包含了servlet代码文件、HTML/jsp页面文件、类文件、部署描述符文件等等,相关说明如下:

           /:web应用程序的根目录,可以存放HTML/JSP页面以及其他客户端浏览器必须可见的其他文件(如js/css/图像文件)。在较大的应用程序中,还可以选择将这些文件划分为子目录层次结构。

          /WEB-INF:此webapp的所有私有资源目录,用户浏览器不可能访问到的,通常web.xml和context.xml均放置于此目录。

          /WEB-INF/web.xml:此webapp的私有的部署描述符,描述组成应用程序的servlet和其他组件(如filter),以及相关初始化参数和容器管理的安全性约束。

           /WEB-INF/classes:此webapp自有的Java程序类文件(.class)及相关资源存放目录。

           /WEB-INF/lib:此目录存放webapp自有的JAR文件,其中包含应用程序所需的Java类文件(及相关资源),例如第三方类库或JDBC驱动程序。

           更多信息请参考:

          Tomcat《Application Developer's Guide》Deployment

           《Servlet3.1规范(最终版)》第10章

    5、Tomcat基本框架及相关配置

           如上图,Tomcat可以按功能划分许多不同的组件,这些组件都可以通过/conf/server.xml文件中可定义和配置,包括Server, Service, Connector, Engine, Cluster, Host, Alias, Context, Realm, Valve, Manager, Listener, Resources, ResourceEnvRef, WatchedResource, Store, Transaction, Channel, Membership, Transport, Member, ClusterListener等,一般可分为以下四类:

          1、顶级组件:位于配置层次的顶级,并且彼此间有着严格的对应关系,有Server组件、Service组件;

          2、连接器:连接客户端(可以是浏览器或Web服务器)请求至Servlet容器,只有Connector组件,

          3、容器:表示其功能是处理传入请求的组件,并创建相应的响应。如Engine处理对一个Service的所有请求,Host处理对特定虚拟主机的所有请求,并且Context处理对特定web应用的所有请求;

          4、被嵌套的组件:位于一个容器当中,但不能包含其它组件;一些组件可以嵌套在任何Container中,而另一些只能嵌套在Context中。

           server.xml默认配置(删除注释内容)如下:

           下面来了解下上图中主要的组件。

    5-1、Server组件

           Server(服务器)表示Tomcat的一个实例,因此,它必须是/conf / server.xml配置文件中的单个最外层元素,它的属性表示servlet容器的整体特性。通常一个JVM只能包含一个Tomcat实例。

           默认配置表示监听在8005端口以接收shutdown命令,默认仅允许通过本机访问。

           更多Server配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Server Component

    5-2、Service组件

           Service(服务)主要用于关联一个Engine和与此Engine相关的Connector,每个Connector通过一个特定的端口和协议接收请求,并将其转发至关联的Engine进行处理。

           因此,Service可以包含一个Engine、以有一个或多个Connector;而一个Server可以包含多个Service组件,但通常情下只为一个Server指派一个Service。通常需要给Service命名,可以方便管理员在日志文件中识别不同Service产生的日志。

           如默认配置中server只包含一个名为"Catalina"的service,而service里包含两个Connector,其中一个监听8080端口接收HTTP请求,另一个监听8009端口接收AJP协议的请求。

           更多Service配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Service Component

    5-3、Connector组件

           如上面所述,Connector(连接器)通过一个特定的端口接收特定协议的客户端请求,并将其转发至关联的Engine进行处理。一个Engine可以配置多个连接器,但这些连接器必须使用不同的端口。

           定义连接器可以使用多种属性,有些属性也只适用于某特定的连接器类型。一般说来,连接器类型可以分为两种:

    (1)、HTTP连接器

          HTTP连接器元素表示支持HTTP / 1.1协议的连接器组件,它能使Tomcat能够作为独立的Web服务器。此组件的特定实例侦听服务器上特定TCP端口号上的连接,每个转发到相关联的Engine以执行请求处理并创建响应。

          HTTP连接器又有三种不同的实现:Java Nio Connector、Java Nio2 Connector、APR/native Connector,它们的对比如下:

           默认配置文件,定义了一个连接器为protocol="HTTP/1.1" 表示的是使用自动切换机制来选择基于Java NIOConnector或基于APR /Native Connector(需要设置),也可以手动指定,

          更多HTTP连接器配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The HTTP Connector

    (2)、AJP 1.3连接器

          AJP连接器元素表示通过AJP(Apache JServ Protocol)协议与Web连接器通信的连接器组件。

          AJP协议是基于二进制的格式在Web服务器和Tomcat之间传输数据,这比HTTPP获得更好的效率,但比较复杂不通用。

          通常用于将Tomcat集成到现有Apache服务器中,并且希望Apache处理Web应用程序中包含的静态内容或SSL连接处理的情况,即Apache服务器作为代理服务器。Apache与Tomcat结合可以由mod_jk或mod_proxy模块来实现,但它们的使用范围不同:mod_jk支持apache/1.3,apache/2.0,mod_proxy支持apache/2.2+。

           默认配置文件中定义了一个监听8009端口的AJP连接器,其实官方文档说明这种连接器不久后不再支持,一般用得不多,就不再多介绍了。

          更多AJP 1.3连接器配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The AJP Connector

       

           定义连接器时可以配置的属性非常多,但通常定义HTTP连接器时必须定义的属性只有"port",定义AJP连接器时必须定义的属性只有"protocol",因为默认的协议为HTTP。以下为常用属性的说明(更多请参考前面给出的文档):

          1) 、address:指定连接器监听的地址,默认为所有地址,即0.0.0.0;

          2)、 maxThreads:支持的最大并发连接数,默认为200;

          3)、port:监听的端口,默认为0;

          4) 、protocol:连接器使用的协议,默认为HTTP/1.1,定义AJP协议时通常为AJP/1.3;

          5) 、redirectPort:如果某连接器支持的协议是HTTP,当接收客户端发来的HTTPS请求时,则转发至此属性定义的端口;

          6)、connectionTimeout:等待客户端发送请求的超时时间,单位为毫秒,默认为60000,即1分钟;

          7)、enableLookups:是否通过request.getRemoteHost()进行DNS查询以获取客户端的主机名;默认为true;

          8) 、acceptCount:设置等待队列的最大长度;通常在tomcat所有处理线程均处于繁忙状态时,新发来的请求将被放置于等待队列中;

    5-4、Engine组件

           Engine(引擎)表示与特定Service相关联的整个请求处理机制,即Servlet容器引擎。它接收和处理来自一个或多个连接器的所有请求,并检查每一个请求的HTTP首部信息以辨别此请求应该发往哪个Host或Context,并将完成的响应返回到连接器,以便最终传输回客户端。

           一个Engine元素必须嵌套在Service元素内,它可以包含多个host组件,还可以包含Realm、Listener和Valve等子容器。


           常用的属性定义:

          1、defaultHost:Tomcat支持基于FQDN的虚拟主机,这些虚拟主机可以通过在Engine容器中定义多个不同的Host组件来实现;但如果此引擎的连接器收到一个发往非非明确定义虚拟主机的请求时则需要将此请求发往一个默认的虚拟主机进行处理,因此,在Engine中定义的多个虚拟主机的主机名称中至少要有一个跟defaultHost定义的主机名称同名。

          2、name:Engine组件的名称,用于日志和错误信息记录时区别不同的引擎。

           如默认配置中定义了一个名为"Catalina"的Engine,而Engine里包含一个Hots,并被配置为默认的虚拟主机。

          更多Engine配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Engine Component

    5-5、Host组件

           Host(虚拟主机)类似于Apache中的虚拟主机,但在Tomcat中只支持基于FQDN的"虚拟主机"。Host位于Engine容器中用于接收请求并进行相应处理,它是服务器(例如"www.mycompany.com")的网络名称与运行Tomcat的特定服务器的关联。

           客户端通常使用主机名来标识他们希望连接的服务器,但要使客户端能够使用其网络名称连接到Tomcat服务器,此名称必须在管理所属的Internet域的域名服务(DNS)服务器中注册。此主机名也包含在HTTP请求标头中,Tomcat从HTTP头中提取主机名,并查找具有匹配名称的主机;如果未找到匹配项,请求将路由到默认主机。

           一个Engine至少要包含一个Host组件,而在Host元素内可以嵌入与此虚拟主机关联的Web应用程序的Context等元素。


           常用属性说明:

          1)、name:此Host的FQDN虚拟主机名称;

          2) 、appBase:此Host的webapps目录,即存放非归档的web应用程序的目录或归档后的WAR文件的目录路径;可以使用基于$CATALINA_HOME的相对路径;

           3)、autoDeploy:在Tomcat处于运行状态时放置于appBase目录中的应用程序文件是否自动进行deploy;默认为true;

          4) 、unpackWars:在启用此webapps时是否对WAR格式的归档文件先进行展开;默认为true。

           如默认配置中定义了一个主机名为"localhost"的Host,而webapps目录为$ CATALINA_BASE相对的"webapps",即前面说到的默认目录,也可用绝对路径来配置其他目录。

           更多Host配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Host Component

    5-6、Context组件

           Context(上下文)表示在特定虚拟主机中运行的Web应用程序,一个Context对应一个Web应用程序,而里面的Wrapper可以理解为一个个Servlet程序

           Context需要根据其定义的上下文路径(path)匹配请求URI的最长前缀(除主机名外)来选择。一旦选择,可以由docBase来找到该上下文将对应的web应用程序部署目录,由目录中web.xml定义的servlet映射选择一个合适的servlet来处理传入的请求。

           一个Host可以有多个Context,通常不建议定义在server.xml文件中,而是每一个context定义使用一个单独的XML文件进行,其文件的目录      为$CATALINA_HOME/conf/<engine name>/<host name>。

           可以看到server.xml中默认没有定义Context,但存在/conf/context.xml,在前面说Tomcat配置文件时曾介绍过,context.xml为部署与此Tomcat实例上所有的web应用程序提供的默认配置文件,删除注释后其内容如下:

           通过它可以找到默认的和各web应用程序提供部署描述符文件web.xml,/conf/web.xml定义了Tomcat提供的默认Servlet处理程序,主要用来处理静态资源请求;而各webapp的web.xml可以定义其他的动态请求url映射到不同Servlet程序处理。

           常用的属性定义有:

          1) 、docBase:相应的Web应用程序的存放位置;也可以使用相对路径,起始路径为此Context所属Host中appBase定义的路径;切记,docBase的路径名不能与相应的Host中appBase中定义的路径名有包含关系,比如,如果appBase为deploy,而docBase绝不能为deploy-bbs类的名字;

          2) 、path:相对于Web服务器根路径而言的URI;如果为空"",则表示为此webapp的根路径;如果context定义在一个单独的xml文件中,此属性不需要定义;

          3)、reloadable:是否允许重新加载此context相关的Web应用程序的类;默认为false;

           更多Context配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Context Component

    5-7、Realm组件

           Realm(领域)表示分配给这些用户的用户名,密码和角色(类似于Unix组)的"数据库"。一个Realm(领域)表示一个安全上下文,它是一个授权访问某个给定Context的用户列表和某用户所允许切换的角色相关定义的列表。

           Catalina容器(Engine,Host或Context)可以包含不超过一个Realm元素(但自身可以嵌套)。此外,与引擎或主机关联的领域由低级容器自动继承,除非下级容器显式定义了自己的领域。如果没有为引擎配置领域,将自动为引擎配置空领域的实例。

           定义Realm时惟一必须要提供的属性是classname,它是Realm的多个不同实现,用于表示此Realm认证的用户及角色等认证信息的存放位置,Tomcat中实现了多种不同的Realm,如下:

          UserDatabaseRealm:基于UserDatabase文件(通常是tomcat-user.xml)实现用户认证,它实现是一个完全可更新和持久有效的MemoryRealm,因此能够跟标准的MemoryRealm兼容;它通过JNDI实现;

          LockOutRealm:提供锁定功能,以便在给定时间段内出现过多的失败认证尝试时提供用户锁定机制;

          JAASRealm:基于Java Authintication and Authorization Service实现用户认证;

          JDBCRealm:通过JDBC访问某关系型数据库表实现用户认证;

          JNDIRealm:基于JNDI使用目录服务实现认证信息的获取;

          MemoryRealm:查找tomcat-user.xml文件实现用户信息的获取。

           可以看到默认配置文件中定义了一个LockOutRealm并嵌套一个UserDatabaseRealm的Realm来通过tomcat-user.xml文件实现用户认证。

           更多Realm配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Realm Component

    5-8、Valve组件

           Valve(阀门)类似于过滤器,用来拦截请求并在将其转至目标之前进行某种处理操作;它可以工作于Engine和Host/Context之间、Host和Context之间以及Context和Web应用程序的某资源之间。

           Valve常被用来记录客户端请求、客户端IP地址和服务器等信息,这种处理技术通常被称作请求转储(request dumping)。请求转储valve记录请求客户端请求数据包中的HTTP首部信息和cookie信息文件中,响应转储valve则记录响应数据包首部信息和cookie信息至文件中。

           一个容器内可以建立多个Valve,而且Valve定义的次序也决定了它们生效的次序。不同类型的Value具有不同的处理能力,Tomcat中实现了多种不同的Valve:

          AccessLogValve:访问日志Valve

          ExtendedAccessValve:扩展功能的访问日志Valve

          RequestDumperValve:请求转储Valve;

          RemoteAddrValve:基于远程地址的访问控制;

          RemoteHostValve:基于远程主机名称的访问控制;

          SemaphoreValve:用于控制Tomcat主机上任何容器上的并发访问数量;

          ReplicationValve:专用于Tomcat集群架构中,可以在某个请求的session信息发生更改时触发session数据在各节点间进行复制;

          SingleSignOn:将两个或多个需要对用户进行认证webapp在认证用户时连接在一起,即一次认证即可访问所有连接在一起的webapp;

          ClusterSingleSingOn:对SingleSignOn的扩展,专用于Tomcat集群当中,需要结合ClusterSingleSignOnListener进行工作。

           通过属性className定义相关的java实现的类名来选择Value。如默认配置文件中定义了一个AccessLogValve的Value来记录访问日志到文件中。

           更多Valve配置信息请参考:《Apache Tomcat 8 Configuration Reference》 The Valve Component

    5-9、其他组件

    1、Logger

          日志记录器(Logger):用于记录组件内部的状态信息,可被用于除Context之外的任何容器中。日志记录的功能可被继承,因此,一个引擎级别的Logger将会记录引擎内部所有组件相关的信息,除非某内部组件定义了自己的Logger组件(前面介绍的AccessLogValve使用自包含的逻辑来写它的日志文件,以获得更好的效率)。

    2、Listener

          Listener用于创建和配置LifecycleListener对象,而LifecycleListener通常被开发人员用来创建和删除容器。

    3、Loader

          Java的动态装载功能是其语言功能强大表现之一,Servlet容器使用此功能在运行时动态装载servlet和它们所依赖的类。Loader可以用于Context中控制java类的加载,即WebApp类加载器

    4、Resources

          经常用于实现在Context中指定需要装载的但不在Tomcat本地磁盘上的应用资源,如Java类,HTML页面,JSP文件等。

    5、GlobalNamingResources

          应用于整个服务器的JNDI映射,此可以避免每个Web应用程序都需要在各自的web.xml创建,这在web应用程序以WAR的形式存在时尤为有用。它通常可以包含三个子元素:Environment、Resource和ResourceEnvRef。

    6、WatchedResource

          WatchedResource可以用于Context中监视指定的webapp程序文件的改变,并且能够在监视到文件内容发生改变时重新装载此文件。

    7、Manager

          Manger对象用于实现HTTP会话管理的功能,Tomcat中有5种Manger的实现:

    1) 、StandardManager

          Tomcat6的默认会话管理器,用于非集群环境中对单个处于运行状态的Tomcat实例会话进行管理。当Tomcat关闭时,这些会话相关的数据会被写入磁盘上的一个名叫SESSION.ser的文件,并在Tomcat下次启动时读取此文件。

    2) 、PersistentManager

          当一个会话长时间处于空闲状态时会被写入到swap会话对象,这对于内存资源比较吃紧的应用环境来说比较有用。

    3)、DeltaManager

          属于ClusterManager,用于Tomcat集群的会话管理器,它通过将改变了会话数据同步给集群中的其它节点实现会话复制。这种实现会将所有会话的改变同步给集群中的每一个节点,也是在集群环境中用得最多的一种实现方式。

    但集群节点较多时,会消耗大量的网络资源,一般适用于3、4个节点的集群。

    4)、BackupManager

          属于ClusterManager,用于Tomcat集群的会话管理器,与DeltaManager不同的是,某节点会话的改变只会同步给集群中的另一个而非所有节点。

    5)、SimpleTcpReplicationManager

          Tomcat4时用到的版本,过于老旧了。

    8、Stores

          PersistentManager必须包含一个Store元素以指定将会话数据存储至何处。这通常有两种实现方式:FileStore和JDBCStore。

    9、Cluster

          专用于配置Tomcat集群的元素,可用于Engine和Host容器中。在用于Engine容器中时,Engine中的所有Host均支持集群功能。在Cluster元素中,需要直接定义一个Manager元素,这个Manager元素有一个其值为org.apache.catalina.ha.session.DeltaManager或org.apache.catalina.ha.session.BackupManager的className属性。同时,Cluster中还需要分别定义一个Channel和ClusterListener元素。

    10、Channel

          用于Cluster中给集群中同一组中的节点定义通信"信道"。Channel中需要至少定义Membership、Receiver和Sender三个元素,此外还有一个可选元素Interceptor。

    11、Membership

          用于Channel中配置同一通信信道上节点集群组中的成员情况,即监控加入当前集群组中的节点并在各节点间传递心跳信息,而且可以在接收不到某成员的心跳信息时将其从集群节点中移除。Tomcat6中Membership的实现是org.apache.catalina.tribes.membership.McastService。

    12、Sender

          用于Channel中配置"复制信息"的发送器,实现发送需要同步给其它节点的数据至集群中的其它节点。发送器不需要属性的定义,但可以在其内部定义一个Transport元素。

    13、Transport

          用于Sender内部,配置数据如何发送至集群中的其它节点。Tomcat有两种Transport的实现:

    1) 、PooledMultiSender

          基于Java阻塞式IO,可以将一次将多个信息并发发送至其它节点,但一次只能传送给一个节点。

    2)、PooledParallelSener

          基于Java非阻塞式IO,即NIO,可以一次发送多个信息至一个或多个节点。

    14、Receiver

           用于Channel定义某节点如何从其它节点的Sender接收复制数据,Tomcat中实现的接收方式有两种BioReceiver和NioReceiver。 

    更多组件及配置信息请参考:

    《Apache Tomcat 8 Configuration Reference》

    《Apache Tomcat User Guide》

     

           到这里,我们对Tomcat有了一个基本的认识:了解到Tomcat技术与在Web中的应用、以及Tomcat基本框架及相关配置,后面将更深入了解Tomcat:了解JavaEE Servlet技术、Tomcat中的一些实现细节,而后再来配置Tomcat+nginx+keepalived的动静分离、会话保持的高可用集群……

     

    【参考资料】

    1、Apache Tomcat User Guide:http://tomcat.apache.org/tomcat-8.5-doc/index.html

    2、Apache Tomcat 8 Configuration Reference:ttp://tomcat.apache.org/tomcat-8.5-doc/config/index.html

    3、Servlet3.1规范(最终版)

    4、Java平台体系:组成结构 运行机制 JRE/JDK/OpenJDK Java SE/EE/ME Java优点

    5、各种容器与服务器的区别与联系:Servlet容器 WEB容器 Java EE容器 应用服务器 WEB服务器 Java EE服务器

    6、《深入分析Java Web技术内幕》

    7、《深入剖析tomcat》

    展开全文
  • web测试知识详解

    千次阅读 多人点赞 2018-11-21 17:09:19
    web测试 web测试..............................................................................................................................1 1. 分类及测试要点...........................................
  • 1.ScriptManger错误错误如下图: 出现这种错误是由于页面使用了UpdatePanel控件,由于操作耗费时间长,出现了超时显示,解决办是:  AsyncPostBackTimeout="300"> AsyncPostBackTimeout默认的超时时间是60秒。...
  • Java Web应用开发 考试题库 答案

    千次阅读 2020-07-11 17:04:24
    一、选择题(共10小题,每小题2分,共20分) 1、以下哪种情况是出现500报错的原因?...2、下面哪一项对Servlet描述错误?( ) A. Servlet是一个特殊的Java类,它必须直接或间接实现Servlet接口 B. Servlet接口定
  • 1.下面关于tomcat服务器描述正确的是() (难度A) A. tomcat是一个开源的免费的web服务器,它支持javaEE规范 B. tomcat不是一个开源的免费的web服务器,它支持servlet规范 C. tomcat是一个开源的免费的web...
  • 本篇博文主要讲解采用SpringMVC框架的异常处理以及web项目的错误界面处理1....首先配值web工程的配置描述符,这里只讲错误处理也免得配置,配置代码如下: <!-- 需要访问的资源不存在 --> <error-code>404</error-c
  • java web项目的部署描述文件--web.xml

    千次阅读 2017-10-06 15:48:00
    java web项目的部署描述文件–web.xml提纲 web.xml是什么 java web项目的启动过程 web.xml中的一些标签的含义 项目中的web.xml的解释 ...这个部署描述文件是web.xml,它在java web项目打包war下面WEB-INF目录下面
  • 问题描述: 这几天在Eclipse上做java web项目,配置好了Tomcat后,测试编写的jsp文件时出现了404问题,还提示源服务器未能找到目标资源的表示或者是不愿公开一个已经存在的资源表示 解决过程: 之后上网找了一下...
  • 问题描述: 新添加资产账户密码资产单独xshell可以登入,web终端登录不了主机连接旧提示用户密码错误 解决方案: 资产列表: 资产用户列表 检查下面有2台一样的资产其中一条没有账户密码信息,应该之前添加没处理好...
  • 1.下面关于tomcat服务器描述正确的是() (难度A) A. tomcat是一个开源的免费的web服务器,它支持javaEE规范 B. tomcat不是一个开源的免费的web服务器,它支持servlet规范 C. tomcat是一个开源的免费的web...
  • 400错误请求怎么解决A 400 Bad Request Error occurs when a request sent to the website server is incorrect or corrupt, and the server receiving the request can’t understand it. Occasionally, the ...
  • 2020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— (考试时间9:00-11:30 共150分钟) 本试卷共3道大题,满分100分。 请在指定位置作答。 一、单选题...
  • Java Web概述-练习题

    千次阅读 2020-12-13 13:48:30
    Java Web概述 大学生期末复习题
  • Flask(python web框架)安全

    万次阅读 2021-03-04 15:34:45
    Flask 作为一个 WEB 框架来说内部封装的安全性的措施很多,基本解决了常见的 web 漏洞,下面介绍 Flask 是如何来避免产生 常见的 web 漏洞。 SQL注入: Flask 使用 ORM 对象关系映射的数据库管理方式,同时 Flask ...
  • 基于Python的Web开发

    万次阅读 2019-02-26 11:24:29
    下面来介绍一下基于Python语言的Web开发中几种常见的Web开发框架; 1、Python语言是第四代程序设计语言,是解释性的、交互性的和面向对象的。它在Web应用和非Web应用中都发挥了重要的作用。比如Google的核心代码是...
  • 应用程序事件监听器是Web应用程序声明周期中的事件产生时通知的类。比如,Servlet上下文或者一个会话对象被创建和修改时,生命周期事件就会收到一个通知。在Servlet API手册中,我们可以找到相关的监听器接口的定义...
  • 2.以下说法,错误的是() A、mark用于显示变粗的文字 B、用于显示删除的文本 C、的文字会带下划线 D、用于强调文本 3.设置文字颜色应使用属性() A、font-family B、font-color C、color D、font 4.根据规范,哪些...
  • web工程加载到eclipse可能出现的错误

    千次阅读 2014-01-15 09:29:43
    一次加载web工程到eclipse出现了一些错误,就把解决的方法记下来,供大家分享,可能还有别的错误,但本人只是遇到了下面错误,不周之处,请大家谅解!   将web项目加载到eclipse中,凡是和serelet类相关的出现了...
  • web.xml是什么?web.xml详解。

    千次阅读 2017-04-08 19:32:46
    web.xml文件中web-app元素声明的是下面每个子元素的声明。下面的章节讲述部署描述符中可能包含的所有子元素。 注意: 在Servlet 2.3中,子元素必须按照DTD文件语法描述中指定的顺序出现。比如,如果部署描述符中的...
  • 2020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— (考试时间9:00-11:30 共150分钟) 本试卷共3道大题,满分100分。 请在指定位置作答。 一、单选题...
  • 关于Web Worker你必须知道的7件事

    万次阅读 2018-06-13 09:49:32
    原文:http://www.developer.com/lang/jscript/7-things-you-need-to-know-about-web-workers.html译者: Rock(ruanqig@gmail.com)转载:https://blog.csdn.net/shenlei19911210/article/details/49779613介绍通过...
  • 异常描述:VALIDATION PROBLEMS WERE FOUND problem: cvc-enumeration-valid: string value '3.0' is not a valid enumeration value for web-app-versionType in namespace http://java.sun.com/xml/ns/javaee
  • 1+X web前端题库1_初体验

    千次阅读 2020-06-24 15:55:01
    2、下面关于HTML说法错误的是?( B ) A HTML是一种标记语言 B HTML可以控制页面和内容的外观 C HTML文档总是静态的 D HTML文档是超文本文档 3、以下哪一个项目是用来访问web页的软件?( B ) A OutlookExpress B ...
  • 2020年下半年 Web前端开发中级 理论考试 考生姓名:——————————— 准考证号:—————————— (考试时间9:00-11:30 共150分钟) 本试卷共3道大题,满分100分。 请在指定位置作答。 一、单选题...
  • 使用了近两年的eclipse开发web...web项目中请求出现错误,如下: HTTP Status 500 - Error instantiating servlet class XXXX类 type Exception report message Error instantiating servlet class test.Test descripti
  • java web工程web.xml配置详解

    万次阅读 多人点赞 2018-01-09 17:19:57
    这篇文章主要是综合网上关于web.xml的一些介绍,希望对大家有所帮助,也欢迎大家一起讨论。 ---题记 Web.xml详解: 1.web.xml加载过程(步骤) 首先简单讲一下,web.xml的加载过程。当启动一个WEB项目...
  • WEB Server根据情况返回HTTP响应(指定的URL数据或错误信息)给客户端 浏览器显示页面 :浏览器收到响应后,将会解析HTML、CSS和Java Script,随后baidu页面就会显示出来了 扩展内容 HTTP请求 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 203,861
精华内容 81,544
关键字:

下面关于web的描述错误的是