sem00000

基于HTML5的移动Web应用——移动端页面布局和常用事件

流式布局

在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，本节将对流式布局进行详细介绍。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。

流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下：

目标元素宽度 / 父盒子宽度 = 百分数宽度

下面通过一个案例来演示固定布局如何转换为百分比布局，如示例1所示。

【示例1】　固定布局转换为百分比布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>固定布局转换为百分比布局</title>
    <style type="text/css">
        body>*{ width:980px; height:auto; margin:0 auto; margin-top:10px;
           border:1px solid #000; padding:5px;}
        header{ height:50px;}
        section{ height:300px;}
        footer{ height:30px;}
        section>*{ height:100%; border:1px solid #000; float:left;}
        aside{ width:250px;}
        article{ width:700px; margin-left:10px;}
    </style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
    <aside>aside</aside>
    <article>article</article>
</section>
<footer>footer</footer>
</body>
</html>

打开Chrome浏览器访问示例代码，页面效果如图1所示。

图1 运行效果

可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，
如图2所示。

图2 缩小浏览器窗口

下面修改示例样式代码，将所有宽度修改为百分比的形式，具体如下：

<style type="text/css">
    body>*{ width:98%; height:auto; margin:0 auto; margin-top:10px;
    border:1px solid #000; padding:5px;}
    header{ height:50px;}
    section{ height:300px;}
    footer{ height:30px;}
    section>*{ height:100%; border:1px solid #000; float:left;}
    aside{ width:25.510204%;/*250÷980*/}
    article{ width:71.428571%; /*700÷980*/margin-left:1.020408%;}
</style>

刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如图3所示。

图3 按百分比布局效果

视口

手机屏幕多种多样，由于不同手机分辨率、屏幕宽高比都有可能不同，同一张图片在不同手机中显示的位置和大小，在视觉上存在差异，我们需要对不同的手机屏幕进行适配，使相同的程序逻辑在不同的屏幕上显示的视觉效果一致，为此出现了视口的概念。

1、理解视口

视口(Viewport) 是移动前端开发中一个非常重要的概念，最早是苹果公司推出iPhone时发明的，为的是让iPhone的小屏幕尽可能完整显示整个网页。不管网页原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。

为了方便读者理解视口到底是什么，下面举例进行说明。在网页制作过程中，有时人们会使用百分比来声明宽度，代码如下:

< !DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <title>demo</title> 
   </head>
   <body>
      <div style="width: 50%"></div>
   </body>
</html>

在上述代码中，div 是body的子元素，设置style="width: 50%"就表示该div占body宽度的50%，而body没有显示声明宽度，因此body占用了父包含块(视口) html 元素宽度的100%。同样，html 也没显示声明宽度，因此html元素也占父包含块的100%。

视口在CSS标准文档中称为初始包含块，这个初始包含块是所有CSS百分比宽度推算的根源。在PC桌面上，如果不对html和body元素设置margin和padding，那么html和body元素都与浏览器窗口的宽度一致。因此，这时，上述代码中的div元素占浏览器宽度的50%。但是，由于移动设备的屏幕较小，在移动设备上，如果视口的宽度与浏览器窗口的宽度一致，在小的屏幕上呈现过多的内容清晰度较差，例如示例1的页面内容如果在iPhone6设备上呈现，效果如图4所示。

图4 示例1 在iPhone6设备的效果

从图4可以看出，网页的内容显示模糊，这时读者也许想到了是否可以把网页放大，通过移动网页来看清上面的内容，这就需要让视口的宽度大于浏览器窗口的宽度，来达到网页缩放的目的，下面将为读者详细讲解视口的设置方式。

来达到网页缩放的目的，下面将为读者详细讲解视口的设置方式。

2、移动端的3种视口

在移动端浏览器当中，存在着3种视口：可见视口、布局视口(视窗视口)和理想视口。

1.可见视口与布局视口
可见视口是指设备的屏幕宽度(浏览器窗口宽度)，布局视口是指网页的宽度，如图5所示。

图5 视口

在图5中，设备屏幕是414像素的宽度，在浏览器中，414像素的屏幕宽度能够展示1200像素宽度的内容。那么414像素就是可见视口的宽度，而1200像素就是布局视口的宽度。

一般移动设备的浏览器都默认设置了一个标签，用来定义虚拟的布局视口，用于解决早期的页面在手机上显示的问题。iOS 和Android基本都将这个视口分辨率设置为980像素，iPad和WinPhone设置为1024像素，所以PC端的网页在这些设备上呈现时，元素看上去很小，一般默认可以通过手动缩放网页。

为了让用户能够看清晰设备中的内容，开发者在通常情况下并不使用默认的viewport来展示，而是自定义配置视口的属性，使视口和页面的比例更加适当。

HTML5中，viewport 元标签是指标签，标签中用于设置视口的常用属性如表1所示。

表1 视口相关属性

属性	取值	描述
width	正整数或 device-width	定义视口的宽度，单位为像素
height	正整数或 device-height	定义视口的高度，单位为像素，一般不用
initial-scale	[0.0-10.0]	定义初始缩放值
minimum-scale	[0.0-10.0]	定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale	[0.0-10.0]	定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable	yes/no	定义是否允许用户手动缩放页面，默认值yes

使用标签配置视口属性的方式如下:

<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0">

在上述代码中，user-scalable用于设置用户是否可以缩放，默认为yes；width用于设置视窗视口的宽度，device-width表示布局视口和可见视口宽度相同，该属性也可以设置成具体宽度; initial-scale 用于设置初始缩放比例，取值为0~10.0; maximum-scale用于设置最大缩放比例，取值为0~10.0。除此之外，还可以通过height属性设置布局视口的高度，minimum-scale 设置最小缩放比例。

2.理想视口
默认情况下，移动设备浏览器的布局宽度为768~1 024像素。这对于宽度较大的网页来说并不理想。换句话说，布局视口的默认宽度并不是一个理想的宽度，这时引进了理想视口的概念。
需要注意的是，只有专为移动端设计的网站才会使用理想视口。理想视口的设置方式如下：

<meta name= "viewport" content="width=device-width">

在上述代码中，设置content="width= device-width"代表通知浏览器，布局视口的宽度应该与理想视口宽度一致。说明定义理想视口是浏览器的工作，而不是设备或操作系统的工作。因此，同一设备上的不同浏览器拥有不同的理想视口。浏览器的理想视口的大小也取决于它所处的设备。

移动端常用事件

前端开发中很多事件在PC端和浏览器端是可共用的，但有些事件是针对移动端的，并且只在移动端产生，如触摸相关的事件。本节将为读者介绍移动端常用的一些事件，以及利用这些事件能够完成的一些效果。

1、Touch 事件简介

移动端常用事件中最典型的就是Touch事件，Touch中文译为“接触、触摸”，Touch事件是许多用于触屏操作事件的总称。

习惯在计算机上写JavaScript代码的读者可能想问一个问题：为什么移动端要使用Touch事件? mouse 事件和click事件在手机上能不能触发?

首先，这两类事件在移动端也可以触发，但分别有一些问题，移动端会多点触屏，不适合mouse，而click事件在手机上有300ms延迟(正常现象，不是bug)。因此，在移动端绑定事件，最好使用专]为移动端设计的Touch事件。
Touch事件的产生是由于iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页时，PC端的鼠标和键盘事件是不够用的，在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(Touch) 操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。

HTML5中为移动端新添加了很多事件，但是由于它们的兼容问题不是很理想，应用实践性不强，所以，在这里只介绍目前几乎被所有移动浏览器支持的4种最基本的Touch事件，如表2所示。

表2 4种最基本的触摸事件

事件	描述
touchstart	手指触摸屏幕时触发
touchmove	手指在屏幕上滑动时触发
touchend	手指离开屏幕时触发
touchcancel	系统取消touch事件的时候触发

表2中的触摸事件与PC端的onclick等事件不同，需要通过以下方法进行绑定，具体如下:

dom.addEventListener('事件名称', function(e) {}) ;

使用触摸移动设备时，有时会出现多个手指同时触摸屏幕的情况，称为多点触摸，如图6所示。

图6 多点触摸

当多点触摸触发Touch事件时，将会返回Touch对象的触摸点集合，在绑定事件的语法中，回调函数返回的e(TouchEvent)对象中包含了3个用于跟踪触摸的属性，用于返回不同的触摸点集合，如表3所示。

表3 TouchEvent 对象的属性

属性	描述
touches	表示当前跟踪的触摸操作的Touch对象的触摸点集合
targetTouches	特定于事件目标的Touch对象的触摸点集合
changedTouches	表示自上次触摸以来发生了什么改变的Touch对象的触摸点集合

触摸点集合中每个Touch对象都包含一些用于获取触摸信息的常用属性，如表4所示。

表4 Touch 对象的常用属性

属性	描述
clientX	触摸目标在视口中的x坐标
clientY	触摸目标在视口中的y坐标
identifier	标识触摸的唯一ID
pageX	触摸目标在页面中的x坐标
pageY	触摸目标在页面中的y坐标
screenX	触摸目标在屏幕中的x坐标
screenY	触摸目标在屏幕中的y坐标
target	触摸的DOM节点目标

虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的，例如DOM属性中也可以获取clientX和clientY，这里进行了解即可。

2、Touch 事件的应用

对Touch事件有了基本了解后，下面通过一个案例来演示Touch事件的用法，如示例2所示。
【示例2】　Touch 事件的应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--视口viewport  只有移动端才识别-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <title>Touch事件</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        a{
            height: 100px;
            width: 100%;
            display: block;
            /*去除 */
            -webkit-tap-highlight-color: red;
            border: 10px solid black;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<a href="#"></a>
<script>
    var a = document.querySelector('a');
    /*触摸开始事件*/
    a.addEventListener('touchstart',function(e){
        console.log('touchstart');
        console.log(e.changedTouches);
        console.log(e.targetTouches);
        console.log(e.touches);
    });
    /*触摸滑动事件*/
    a.addEventListener('touchmove',function(e){
        console.log('touchmove');
        console.log(e.changedTouches);
        console.log(e.targetTouches);
        console.log(e.touches);
    });
    /*触摸结束事件*/
    a.addEventListener('touchend',function(e){
        console.log('touchend');
        console.log(e.changedTouches);
        console.log(e.targetTouches);
        console.log(e.touches);
    });
</script>
</body>
</html>

在上述代码中，第6.7行用于设置移动端设备的视口；在第26行定义了一个标签，并且在第14~22行为标签定义了样式，运行代码后会在页面中显示一个黑色边框的区域，当在移动端触摸标签的黑色边框区域时，会触发touchstart 和touchend事件，当滑动触摸该区域时将触发touchmove事件；第27~50行使用JavaScript代码获取标签，并且为标签绑定了touchstart、 touchmove 和touchend事件，在事件触发时，将3个事件对应的触摸点集合changedTouches. targetTouches 和touches输出到控制台。
打开Chrome浏览器，访问示例，页面效果如图7所示。

图7 页面效果

按[F12]键，打开Chrome的开发者工具，如图8所示。

图8 开发者工具

单击“ ”按钮，进入移动设备调试模式，如图9所示。

图9 移动设备调试模式

在图9中，将Device (设备)选择为Apple iPhone 6/7/8，并且打开Console窗口，这时单击黑色边框区域内，代表触摸页面上的标签区域，触发Touch事件，观察Console窗口输出结果，如图10所示。

图10 touchstart 和touchend

从图10的输出结果可以看出,单击黑色边框区域触发了touchstart和touchend事件，每个事件下的3个TouchList代表输出的changedTouches、targetTouches 和touches集合。需要注意的是，touchend 事件返回的TouchEvent只会记录changedTouches。

刷新示例2，在黑色区域单击并滑动，然后松开鼠标，观察Console窗口输出结果，如图11所示。

图11 触发

从图11的输出结果可以看出，touchmove事件被触发，也就是说当触摸滑动时该事件才会被触发，需要注意的是，触发几次touchmove与滑动的位置改变有关。

打开第一个触摸点集合TouchList的Touch对象信息，可以看到触摸点的相关信息，如图12所示。

图12 触摸点信息

在图12中，“0: Touch”中的“0”表示第一个触摸点的索引值，如果同时有多个触摸点，就会出现“1: Touch”、“2: Touch”，依此类推。另外，可以通过“e. 触摸点集合.属性名称”的方式来获取触摸点的相关信息，例如“e.changedTouches.clientX”。

3、过渡和动画结束事件

在移动端，除Touch事件外，还会经常用到过渡结束(transitionend) 和动画结束(animationend)事件，下面分别介绍两个事件的用法。

1. transitionend 事件
transitionend事件在CSS完成过渡效果后触发，可以使用如下方式来绑定。

//标准语法
dom.addEventListener('transitionend', function(e){});

上述语法为绑定transitionend 事件的标准语法，目前各大浏览器对该事件的支持情况如表5所示。
表5 浏览器对transitionend事件支持情况

IE	Firefox	Chrome	Safari	Opera
10.0+	5.0+	4.0+	4.0+	12.1+

对于webkit内核的浏览器(如Safari)，需要使用如下代码进行绑定。

//Safari 3.1 到 6.0 代码
dom.addEventListener(' webkitTransitionEnd',function(e){});

在上述语法中，webkitTransitionEnd 中添加了webkit前缀。

下面通过一个案例来演示transitionend事件的具体用法，如示例3所示。
【示例3】　transitionend事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>transitionend事件</title>
    <style>
        /*为div设置宽高、背景色及过渡*/
        #myDIV {
            width: 100px;
            height: 100px;
            background: pink;
            -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
            transition: width 2s;
        }
        #myDIV:hover {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<p>将鼠标移动到div元素上，查看过渡效果。</p>
<div id="myDIV"></div>
<script>
    //  Safari 3.1 到 6.0 版本代码
   var dom= document.getElementById("myDIV");
    dom.addEventListener("webkitTransitionEnd", myFunction);
    // 标准语法
    dom.addEventListener("transitionend", myFunction);
    //    事件回调函数
    function myFunction() {
        this.innerHTML='过渡效果结束';
        this.style.background='green';
    }
</script>

</body>
</html>

在上述语法中，完成了一个

逐渐放大变色的过渡效果，当过渡结束时触发transitionend事件，此时，

标签上会出现文字“过渡效果结束”，并且背景颜色会变为green，具体细节如下：
第23行添加一个

标签，第8~18行为

标签设置了宽高、背景色及过渡，当鼠标移动到

上时，可以查看过渡的效果；第25~34行绑定了过渡事件transitionend事件。
打开Chrome浏览器，访问示例3面效果如图13所示。在图13中，将鼠标移动到方块区域，可查看过渡效果和过渡结束触发事件的效果，如图14和图15所示。

图13 页面效果

图14 过渡效果

图15 过渡结束

2. animationend事件

与transitionend事件相似，animationend 事件在CSS完成动画效果后触发，可以使用如下方式来绑定。

//标准语法
dom.addEventListener('animationend'', function(e){});

上述语法为绑定animationend事件的标准语法，同样对于webkit内核的浏览器(如Safari)，需要添加webkit前缀，使用如下代码进行绑定。

//Safari 3.1 到 6.0 代码
dom.addEventListener('webkitAnimationEnd',function(e){});

目前，各大浏览器对该事件的支持情况如表6所示。
表6 浏览器对 animationend事件支持情况

IE	Firefox	Chrome	Safari	Opera
10.0+	5.0+	4.0+	4.0+	12.1+

下面通过一个案例来演示animationend事件的具体用法，如示例4所示。

【示例4】　animationend事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animationend事件</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        /*设置div的样式和动画*/
        .box {
            width: 300px;
            height: 100px;
            margin: 50px auto;
            background: brown;
            position: relative;
            -webkit-animation: move 4s 1;
            animation:move 4s 1;
        }
        /*绑定动画效果*/
        @keyframes move {
        0% {
            left: -300px;
        }

        100% {
            left: 0px;
        }
        }
        @-webkit-keyframes move {
            0% {
                left: -300px;
            }

            100% {
                left: 0px;
            }
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
<script>
    var dom = document.querySelector("div");
    //  Chrome, Safari 和 Opera
    dom.addEventListener("webkitAnimationEnd", myFunction);
    dom.addEventListener("animationend", myFunction);
    //    事件回调函数
    function myFunction() {
        this.innerHTML = "动画结束";
        this.style.backgroundColor = "pink";
    }
</script>
</html>

在上述代码中，完成了一个

向右移动，并且变色的动画效果，动画结束时会在

上显示“动画结束”，

演示变为pink，具体细节如下：第44行添加了

标签；第12-40行为

标签设置样式和动画效果；第47~55行首先获取div元素对象，然后为其绑定animationend事件，并在回调函数中设置动画结束时

标签中的文字为“动画结束”、背景色为pink。
打开Chrome浏览器，访问示例4，可以看到动画自动播放，如图16、图17所示。当动画结束时，触发结束事件animationend，页面效果如图18所示。

图16 运行效果

图17 动画自动播放

图18 动画结束

超全面的测试IT技术课程，0元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

你可能感兴趣的:(移动WEB开发,前端)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
360前端星计划-动画可以这么玩马小蜗
动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
Vue + Express实现一个表单提交九旬大爷的梦
最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
前端知识点 ZhangTao_zata 前端 javascript css
下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
第三十一节:Vue路由:前端路由vs后端路由的了解曹老师
1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
华雁智科前端面试题因为奋斗超太帅啦前端笔试面试问题整理 javascript 开发语言 ecmascript
1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
分布式锁和spring事务管理暴躁的鱼锁及事务分布式 spring java
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
前端CSS面试常见题剑亦未配妥前端面试前端 css 面试
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
【JS】前端文件读取FileReader操作总结程序员-张师傅前端前端 javascript 开发语言
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
【前端】vue 报错:The template root requires exactly one element 程序员-张师傅前端前端 vue.js javascript
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
从单体到微服务：FastAPI ‘挂载’子应用程序的转变黑金IT fastapi 微服务 fastapi 架构
在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端 ui 服务器
前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
了解 UNPKG：前端开发者的包管理利器小于负无穷前端 javascript typescript css html5 node.js
在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js 前端 javascript 三维场景中下雪效果 threejs实现下雪效果
一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧 Vue开发组合式函数模块管理自动导入 Nuxt Kit
title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
多线程编程之卫生间周凡杨 java 并发卫生间线程厕所
如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
How to Install GUI to Centos Minimal sunjing linux Install Desktop GUI
http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
Shell 函数 daizj shell 函数
Shell 函数 linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 shell中函数的定义格式如下： [function] funname [()]{ action; [return int;] } 说明： 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 2、参数返回
Linux服务器新手操作之一周凡杨 Linux 简单操作
1.whoami 当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。此时可以使用whoami命令。 [ecuser@HA5-DZ05 ~]$ whoami e
浅谈Socket通信（一）朱辉辉33 socket
在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包 ServerSock
关于框架的简单认识西蜀石兰框架
入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。都说学前端的要知道三大框架，目前node.
You have an error in your SQL syntax; check the manual that corresponds to your 林鹤霄
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids ) values('0ac91f167f754c8cbac00e9e3dc372
MySQL5.6的my.ini配置 aigo mysql
注意：以下配置的服务器硬件是：8核16G内存 [client] port=3306 [mysql] default-character-set=utf8 [mysqld] port=3306 basedir=D:/mysql-5.6.21-win
mysql 全文模糊查找便捷解决方案 alxw4616 mysql
mysql 全文模糊查找便捷解决方案 2013/6/14 by 半仙 [email protected] 目的: 项目需求实现模糊查找. 原则: 查询不能超过 1秒. 问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 解决方案: 使用mysql全文索引. 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
自定义数据结构链表(单项 ,双向,环形) 百合不是茶单项链表双向链表
链表与动态数组的实现方式差不多, 数组适合快速删除某个元素链表则可以快速的保存数组并且可以是不连续的单项链表;数据从第一个指向最后一个实现代码: //定义动态链表 clas
threadLocal实例 bijian1013 java thread java多线程 threadLocal
实例1： package com.bijian.thread; public class MyThread extends Thread { private static ThreadLocal tl = new ThreadLocal() { protected synchronized Object initialValue() { return new Inte
activemq安全设置—设置admin的用户名和密码 bijian1013 java activemq
ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 <bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint"> <p
【Java范型一】Java范型详解之范型集合和自定义范型类 bit1129 java
本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。范型内容范型集合类范型类
【HBase十二】HFile存储的是一个列族的数据 bit1129 hbase
在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证 1. 建立一个有两个列族的表 create 'members','colfam1','colfam2' 2. 在members表中的colfam1中插入50*5
Nginx 官方一个配置实例 ronin47 nginx 配置实例
user www www; worker_processes 5; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096;} http { include conf/mim
java-15.输入一颗二元查找树，将该树转换为它的镜像，即在转换后的二元查找树中，左子树的结点都大于右子树的结点。用递归和循环 bylijinnan java
//use recursion public static void mirrorHelp1(Node node){ if(node==null)return; swapChild(node); mirrorHelp1(node.getLeft()); mirrorHelp1(node.getRight()); } //use no recursion bu
返回null还是empty bylijinnan java apache spring 编程
第一个问题，函数是应当返回null还是长度为0的数组（或集合）？第二个问题，函数输入参数不当时，是异常还是返回null？先看第一个问题有两个约定我觉得应当遵守： 1.返回零长度的数组或集合而不是null（详见《Effective Java》）理由就是，如果返回empty，就可以少了很多not-null判断： List<Person> list
[科技与项目]工作流厂商的战略机遇期 comsci 工作流
在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。在微软，甲骨文，谷歌，IBM,SONY
过度设计-举例 cuityang 过度设计
过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。未来的事情，比如访问量，比如数据库的容量，比如是否需要改成分布式都是无法预料的再举一个例子，对闰年的判断逻辑：　　1、 if($Year%4==0) return True; else return Fasle; 　　2、if ( ($Year%4==0 &am
java进阶，《Java性能优化权威指南》试读 darkblue086 java性能优化
记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
网络学习笔记初识OSI七层模型与TCP协议 dcj3sjt126com 学习笔记
协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。　　两类服务：　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
mac中用命令行运行mysql dcj3sjt126com mysql linux mac
参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html 感觉workbench不好用（有点先入为主了）。 1，安装mysql 在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
MongDB查询（1）——基本查询[五] eksliang mongodb mongodb 查询 mongodb find
MongDB查询转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 MongoDB中使用find来进行查询。 API:如下 function ( query , fields , limit , skip, batchSize, options ){.....} 参数含义： query:查询参数 fie
base64，加密解密经融加密，对接 y806839048 经融加密对接
String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); // 注意编码格式，注意用于加密，解密的要是同
JavaWeb之JSP概述 ihuning javaweb
什么是JSP？为什么使用JSP？ JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。 JSP起源在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。如果使用Servl
apple watch 指南啸笑天 apple
1. 文档 WatchKit Programming Guide（中译在线版 By @CocoaChina）译文译者原文概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch 概览 - 配置 Xcode 项目 - Overview - Configuring Yo
java经典的基础题目 macroli java 编程
1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
你所不知道神奇的js replace正则表达式 qiaolevip 每天进步一点点学习永无止境纵观千象 regex
var v = 'C9CFBAA3CAD0'; console.log(v); var arr = v.split(''); for (var i = 0; i < arr.length; i ++) { if (i % 2 == 0) arr[i] = '%' + arr[i]; } console.log(arr.join('')); console.log(v.r
[一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics) superlxw1234 hive hive分析表 hive统计信息 hive Statistics
关键字：Hive统计信息、分析Hive表、Hive Statistics 类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等； 14.1 新表的统计信息对于一个新创建
Spring Boot 1.2.5 发布 wiselyman spring boot
Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。官方建议所有的Spring Boot用户升级这个版本。项目首页 | 源

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他