前端及开发文章及欣赏

视频的传输方式【转】

前端达人

概述

搜索“视频传输协议”,一般会搜出来RTP,RTSP,UDP等等。光看这些协议,可能有些人会觉得奇怪为什么要把udp也往上放一起,rtp不是可以基于udp?!同时,很多文章主要去讲解各个协议之间的差异,而没有从更为宏观的角度来考虑。本文将结合OSI的分层思路,将不同协议之间的关系都梳理清楚;同时也从视频传输与组网角度进行介绍。
再者,视频有很多封装格式,比如m3u8,mp4等;也有很多音视频编码格式,比如h264,h265等,那为何有这么多的封装格式类型和音视频编码格式类型呢?一方面是解决存储的问题;另一方面是支持不同播放器的解析;但更重要的是不同的传输协议可以支持的音视频编码格式有差异,这也是由于不同的应用场景下形成的历史原因。

1.流媒体

流媒体(streaming media),是指将一连串的媒体数据包从服务器端发送到客户端,可以实现边下边播,此技术使得数据包可以像流水一样发送。传统的方式需要在使用前下载整个文件,存储到本地后才能进行播放;而流媒体只允许下载一小部分(存在视频关键帧)就能进行播放。

流媒体技术不是一种单一的技术,它将网络技术、音视频技术还有终端缓存技术等有机地结合。也就是说,在网络上要实现流媒体技术,必须要先制作、发布、传输和播放等,这需要服务器端、终端以及网络都要能支持。当前很多的视频软件或者网站都是用到了这种技术。归结下来是:

  • 1.内容的产生。这里是指将视频源制作成为可以对外发布的视频格式,以及适合在网络上传播的分辨率和码率。这主要用到了视频的编解码技术。考虑的输出参数,如分辨率、码率、音视频编码格式、封装格式等都需要结合应用场景和传输方式统一考虑。

  • 2.对外发布。这里主要是指能够支撑服务器对外输出视频资源的技术,常见的有各种流媒体网络传输协议技术及其需要服务器端支撑的技术。这里的流媒体网络传输协议比如:

    • HLS
      服务端支持Adobe Flash media server,Nginx,vlc等等。
    • DASH
      服务器端支持Nginx等
    • RTMP
    • Adobe Flash 服务器,Nginx-rtmp
  • 3.组网和传输。
    这里的传输还得考虑一个概念,是服务器对外主动推数据,还是等待终端到服务器端拉数据,这是两个完全相反的处理方式。对于组播或者广播的组网方式,往往采用的是服务器主动对外推送数据;而对于单播来说主要是终端向服务器端主动拉数据。

    这里涉及到的IP组网方式中的传输类型有:广播、单播、组播。

    不管是什么类型的组网方式,在传输层就有UDP和TCP。下面也将从OSI等层面讲讲这些底层传输协议之间的关系。

  • 4.视频播放。这里主要是从终端侧角度说,在不同操作系统中能够进行播放视频的播放器,比如vlc等,不同的播放器支持对不同类型的视频数据进行播放。

2.TCP/IP、OSI与视频传输协议之间的关系

从图中也可以看到IP层(网络层)的上层是传输层,通过TCP和UDP等方式进行数据包的传输。
(PS:下图为网络中所找https://blog.csdn.net/yaopeng_2005/article/details/7064869)
在这里插入图片描述
结合上图,再补一个wiki上的互联网协议套组图,一看就更明白了。
在这里插入图片描述
从上面两个图中也可以很清楚地看到,TCP和UDP在接下去的内容有很重要的地位,这里也简单介绍下,深度知识请自行搜索。

  • 1)TCP(Transmission Control Protocol)传输控制协议
    是一种面向连接的、可靠的、基于字节流的传输层协议。也就是说,它在收发数据之前,必须先和对方建立可靠的连接。有兴趣地可以了解TCP的三次握手过程。当TCP检测到数据包丢失时,它将限制其数据速率使用率,因此也说TCP是靠谱的,但是对于实时类型的业务,可能不那么适合。
  • 2)UDP(User Datagram Protocol)用户数据报协议
    是一种简单的面向数据报的通信协议。UDP只提供数据的不可靠传递,它将数据发送出去后,就不保留备份,它仅仅在IP数据报的头部加入了复用和数据校验字段。由于不需要多长校验,UDP的速度比TCP快,但是有数据丢失风险,因此比较适用于实时性要求高的场景,比如实时语音或视频通话。广电网络场景中,以前多用UDP进行传输,而且是组播或广播的方式,这结合组网能够将流量成本较大地控制下来。
  • 3)IP层(Internet Protocol)
    IP是网络层的主要协议,将根据源主机和目的主机的地址进行数据传输。定义了寻址方法和数据报的封装结构。其最为复杂的就是寻址和路由了。寻址就是将IP地址分配给各个终端节点,并如何进行划分和组网。而路由主要是内部和外部网关协议,决定了怎么发送IP数据包。下面提到的组播和广播等,其实主要是针对IP多播来说的。
  • 4)在不同层之间的数据的术语称呼
    数据在TCP层称为流(Stream),数据分组称为分段(Segment)
    数据在IP层称为Datagram,数据分组称为分片(Fragment)
    在UDP中,分组称为Message

3.组播、单播和广播

  • 组播(multicast)
    又称为多点广播或群播,或多播,主要是指将信息同时传递给一组目的地址。消息在每个网络链路上只需传递一次,而且只有在链路分叉时,消息才会被复制,使用的效率是最高的。也正是因为这个原因,以前的广电网络中,针对直播多采用组播方式,流量的传输成本明显降低很多。

  • 单播:
    其实是组播的一种特殊方式,即常规的点到点信息传递。如果所有传输中是以单播的方式传递给多个接收方,必须向每个接收者都发送一份数据副本这么多。

  • 广播
    其实也算是组播的一种特殊方式,就是一对所有的通信方式,对每一台主机发出的信号都进行无条件复制并转发,所有的接收点都可以收到所有信息。

注意,组播一般指的是IP组播,常与RTP等音视频协议相结合。虽然组播的设计理念很好,但是它需要对网络内部的状态比单播要多得多。实际商用中,组播主要应用在较为简单的、只有单个源断的情况,如之前提到广电网络内部用到的组播方式,UDP组播。

以上是不同类型的IP组播方式,实际在采用中要结合具体情况进行调整。比如,如果非要使用广播,但是采用的场景不合适,也有可能产生广播风暴。

组播、广播、单播也介绍了基本的概念,但是他们与视频传输有什么关系呢?

文章上面也提到了,组播是从IP层面的传输策略,而所有的视频传输协议其数据包大部分都经过UDP和TCP,经由IP层进行传输到目的地。因此不同的IP传输策略与传输协议进行结合,就能够落地到具体的应用场景。

同时需要注意的是,采用组播方式可以通过设置网卡为混杂模式或为多播模式,具体也是根据网卡的特性进行差异处理。如果处理方式不当,比如设置成了广播,可能会导致在同网络下,你在播放视频,然后其他相同网络下接收端也将有相应的流量,而导致他们的对外服务网口的流量被占满。

4.视频传输协议

从下图中可以看到,标红色的就是大家经常说的视频传输协议。但是从图中可以看到他们其实是有基于的关系,比如HLS都是基于HTTP进行传输,而HTTP在传输层都是依赖tcp数据包,再经由ip层进行分发。
在这里插入图片描述

  • 1)UDP

    • 基于UDP传输的视频数据,比如udp://238.123.45.1:3001,在网络可达的情况下,即可进行播放。可以采用vlc等播放器进行播放。

    • UDP视频数据传输可以采用单播,组播或广播的方式,具体采用哪种方式根据具体的组网情况进行控制。

    • 上面也有提到过,广电网络中多采用组播的方式进行直播数据传输,这也是得益于广电网络的专网特性以及视频源输出可以控制到单一等特性。

    • UDP的组播大部分是采用MPEG TS流,广电网络中很多视频,其视频编码格式也大部分是mepg2

  • 2)RTP
    整个RTP协议包括RTP数据协议和RTP控制协议(RTCP)。此外,这里也将经常一起提的RTSP介绍下。

    • RTP(实时传输协议,Real-time Transport Protocol),是一种网络传输协议

    • RTP协议说明了传递音频和视频的标准数据包的格式。最早是作为多播协议的,后来主要应用在单播中。RTP是创建在UDP协议之上的,主要应用于流媒体、视频会议等系统业务上。

    • RTP为端到端的数据传输提供了时间信息和流同步,但不保证服务质量,而是由服务质量由RTCP。
      在RTP的数据包封装中,包含了时间戳、标记位、同步源标识等信息。

    • RTP从上层接收到流媒体的数据(如H264),封装成RTP数据包,并将其发往UDP端口中的偶数端口。

    • RTCP(实时传输控制协议,Real-time Transport Control Protocol或RTP Control Protocol)

    • RTP的姐妹协议。RTP使用的是偶数UDP端口,RTCP采用的是RTP下一个端口,也就是下一个奇数的端口。RTCP也是基于UDP进行传输的。

    • RTCP本身不做数据传输,主要与RTP协作,将视频媒体数据打包和发送,并定期在流媒体会话参与者之间传输控制数据,并为RTP提供QoS反馈,简单点说是主要保证音视频的同步。

    • RTCP接收到控制信息后,封装为RTCP控制包,并发往RTP端口下一个偶数端口。

    • RTSP(实时流协议,Real Time Streaming Protocol)
      RTSP是一种网络应用协议,主要来创建和控制流媒体服务器与终端之间的会话。控制类的请求主要走TCP协议。

    • 通过RTSP对流媒体数据进行控制和播放,比如进行播放、暂停、快进等操作,它定义了具体的控制消息、操作方法和状态码等。

    • 与RTP、RTCP配合,在广电网络内部主要应用在点播场景比较多,而直播主要走UDP组播。在互联网场景下,也有用于直播和点播的,但是相对来说使用较少。

    • 请求的url为:rtsp://testdomain/test.mp4/streamid=0

    • 需要服务器端和客户端都能够支持RTSP的控制。一般客户端采用vlc即可,而服务器端采用Darwin Streaming Server,ffmpeg等建立流媒体服务。

  • 3)RTMP(实时消息协议,Real-Time Messaging Protocol)
    包括RTMP、RTMPT等一系列的协议,Adobe为flash播放器和服务器之间音视频数据传输的协议。

    • RTMP
      1)主要基于TCP协议进行数据包传输,默认使用1935端口。
      2)服务器端采用Nginx,支持rtmp模块的即可支持对外rtmp视频数据服务。
      3)支持rtmp模块,可以支持直播rtmp输出,也能够支持hls访问。
      4)RTMP支持mp4,flv等封装格式的视频对外输出
    • RTMPS
      通过SSL加密的RTMP协议
    • RTMPE
      RTMPE是一个加密版本的RTMP,和RTMPS不同的是RTMPE不采用SSL加密,RTMPE加密快于SSL,并且不需要认证管理
    • RTMPT
      采用HTTP封装以穿透防火墙,通常用80和443端口。
    • RTMFP
      使用UDP进行数据传输

4)HTTP
而基于HTTP协议的就更多了,如上图。如果服务器部署了流媒体的服务,如Nginx等,就可以对外提供视频播放服务了。

这里也需要说明,视频的播放一般分为点播和直播,有些协议作为直播的传输协议反而是更好的,比如RTMP,时延就比较低,但RTMP做CDN成本相对较高。CDN支持很好的HTTP如果能支持直播,当前也有很多协议能支持通过HTTP的方式实现直播流媒体。

5.自适应流媒体

自适性流媒体(adaptive bitrate streaming,ABS)也叫码流自适应,是流媒体服务器准备各种码流的视频流,所有的视频码流都是相同时段完全统一图像的音视频数据,客户端根据网络情况和CPU使用情况等进行动态调整。

主要有MPEG-DASH、HLS、HDS、MSS等技术方案,这几个也是上图中最上层的流媒体传输协议技术。通过这些传输协议封装的视频源,可以支持有多种码率,并支持播放器客户端在播放时,根据带宽情况自动调整码率以适应用户的最佳观看效果——不卡顿,不重新加载等。

  • 1) DASH(MPEG-DASH)
    MPEG-DASH是基于HTTP的自适应码流方案中唯一国际标准,它采用TCP传输协议。
  • 2)HLS
    Apple提出的,将.m3u8作为索引文件,分片格式为ts,支持直播和时移。
  • 3)HDS
    采用支持RTMP和HTTP协议,HTTP协议类似于HLS,也可以叫渐进式下载。
  • 4)MSS
    是微软提出的,文件切片格式为mp4,索引文件为ism、ismc,也支持直播和时移。

这里也仅仅对码流自适应技术做了简单介绍,由于现在这种技术应用相当广泛,后面将详细介绍这种技术。

【说明】
文章转自,华为云社区,作者Higeeon,相关版权解释权归原作者所有。https://bbs.huaweicloud.com/blogs/fed3df04b1e011e9b759fa163e330718





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

JavaScript核心技术之JSON详解

前端达人

JSON是什么?

JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。它基于 ECMAScript(European Computer Manufacturers Association, 欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 

JSON源自于JavaScript,是一种轻量级(Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。

在现在的开发中,能够进行数据交换格式的,包括两个JSON   XML。

JSON是存储和交换文本信息的语法,类似 XML,JSON比 XML更小、更快,更易解析。

 那么,简而言之,对JSON的说明总结如下:

  • JSON是独立于任何编程语言的数据格式
  • 是一种用于存储和传输数据的轻量级格式
  • 语法是自描述的,便于人类阅读和理解

JSON语法

基本语法:

  • 数组(Array)用方括号 "[]" 表示
  • 对象(0bject)用大括号 "{}" 表示
  • 名称 / 值 对(name/value)组合成数组和对象
  • 名称( name )置于双引号中,值(value)有字符串、数值、布尔值、null、对象和数组
  • 并列的数据之间用逗号 "," 分隔
  • 名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值

需要注意的是:

JSON不支持注释。向 JSON添加注释无效

JSON文件的文件类型是 .json

JSON文本的 MIME 类型是 application/json

获取JSON数据

 json是以对象的形式存在的,直接获取JSON数据可通过如下方法:

1. json对象.键名

2. json对象["键名"]

3. 数组对象[索引]

4. 遍历 

代码示例:


  1. //定义基本格式
  2. var person = { name: "张三", age: 23, gender: true };
  3. var persons = [
  4. { name: "张三", age: 23, gender: true },
  5. { name: "李四", age: 24, gender: true },
  6. { name: "王五", age: 25, gender: false },
  7. ];
  8. //获取person对象中所有的键和值
  9. //for in 循环
  10. /* for(var key in person){
  11. //这样的方式获取不行。因为相当于 person."name"
  12. //alert(key + ":" + person.key);
  13. alert(key+":"+person[key]);
  14. }*/
  15. //获取persons中的所有值
  16. for (var i = 0; i < persons.length; i++) {
  17. var p = persons[i];
  18. for (var key in p) {
  19. console.log(key + ":" + p[key]);
  20. }
  21. }

 输出结果为:

 JSON 解析与序列化(在JavaScript中)

先在控制台中打印一下JSON对象,看看有什么,如图:

 显而易见,在JavaScript中JSON对象仅有两个方法:parse和stringify。后面会详细介绍一下这两个方法

序列化的概念:序列化是将对象转化为字节序列的过程。对象序列化后可以在网络上传输,或者保存到硬盘上。

将对象序列化成json字符串: JSON.stringify(json对象);

反序列化:将json字符串反序列化为对象:   JSON.parse(str)

JSON.parse

API介绍:用来解析 JSON字符串,构造由字符串描述的 JavaScript 值或对象,传入的字符串不符合 JSON规范会报错

语法:

JSON.parse(str, reviver);
  • str:要解析的 JSON字符串
  • reviver:可选的函数 function(key,value),该函数的第一个参数和第二个参数分别代表键值对的键和值,并可以对值进行转换(函数返回值当做处理后的value)

代码示例:


  1. // JSON.parse() 解析JSON字符串, 将JSON转换为对象
  2. let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
  3. console.log(JSON.parse(json));
  4. // {name: Array(2), age: 22, gridFriend: 'ljj'}
  5. // 第二个参数是一个函数,key和value代表每个key/value对
  6. let result = JSON.parse(json, (key, value) => {
  7. if (key == "age") {
  8. return `年龄:${value}`;
  9. }
  10. return value;
  11. });
  12. console.log(result);
  13. //{name: Array(2), age: '年龄:22', gridFriend: 'ljj'}

 JSON.stringify

API介绍:将一个 JavaScript 对象或值转换为 JSON字符串

如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性

语法:

JSON.stringify(value, replacer, space)

value:将要序列化成 一个 JSON 字符串的值

replacer:

  • 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理
  • 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
  • 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化

space:指定缩进用的空白字符串,用于美化输出

  • 如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格
  • 如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格
  • 如果该参数没有提供(或者为 null),将没有空格

代码示例:


  1. let obj = {
  2. name: "jsx",
  3. age: 22,
  4. lesson: ["html", "css", "js"],
  5. };
  6. let json = JSON.stringify(obj);
  7. console.log(json);
  8. // {"name":"jsx","age":22,"lesson":["html","css","js"]}
  9. // 第二个参数replacer 为函数时,被序列化的值得属性都会经过该函数转换处理
  10. function replacer(key, value) {
  11. if (typeof value === "string") {
  12. return undefined;
  13. }
  14. return value;
  15. }
  16. let result = JSON.stringify(obj, replacer);
  17. console.log(result);
  18. // {"age":22,"lesson":[null,null,null]}
  19. // 当replacer参数为数组,数组的值代表将被序列化成 JSON 字符串的属性名
  20. let result1 = JSON.stringify(obj, ["name", "lesson"]);
  21. // 只保留 “name” 和 “lesson” 属性值
  22. console.log(result1);
  23. // {"name":"jsx","lesson":["html","css","js"]}
  24. // 第三个参数spcae,用来控制结果字符串里面的间距
  25. let result2 = JSON.stringify(obj, null, 4);
  26. console.log(result2);
  27. /*{
  28. "name": "jsx",
  29. "age": 22,
  30. "lesson": [
  31. "html",
  32. "css",
  33. "js"
  34. ]
  35. }*/

 注意:如果replacer是一个函数,则该函数会进行深处理,即如果键值对的值也是一个数组,则也会执行该函数

JSON.stringify()原理

  • 转换值如果有 toJSON() 方法,该方法定义什么值将被序列化
  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值,undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。函数、undefined 被单独转换时,会返回 undefined,如JSON.stringify(function(){}) or JSON.stringify(undefined)
  • 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误
  • 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们
  • Date 日期调用了 toJSON() 将其转换为了 string 字符串(同Date.toISOString()),因此会被当做字符串处理
  • NaN 和 Infinity 格式的数值及 null 都会被当做 null
  • 其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

get请求和post请求的区别(全面讲解)

前端达人

1.get请求一般是去取获取数据(其实也可以提交,但常见的是获取数据);
post请求一般是去提交数据。

2.get因为参数会放在url中,所以隐私性,安全性较差,请求的数据长度是有限制的,
不同的浏览器和服务器不同,一般限制在 2~8K 之间,更加常见的是 1k 以内;
post请求是没有的长度限制,请求数据是放在body中;

3.get请求刷新服务器或者回退没有影响,post请求回退时会重新提交数据请求。

4.get请求可以被缓存,post请求不会被缓存。

5.get请求会被保存在浏览器历史记录当中,post不会。get请求可以被收藏为书签,因为参数就是url中,但post不能。它的参数不在url中。

6.get请求只能进行url编码(appliacation-x-www-form-urlencoded),post请求支持多种(multipart/form-data等)。

深入理解
1…GET 和 POST都是http请求方式, 底层都是 TCP/IP协议;通常GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包(但firefox是发送一个数据包),

2.对于 GET 方式的请求,浏览器会把 http header 和 data 一并发送出去,服务器响应 200
(返回数据)表示成功;

而对于 POST,浏览器先发送 header,服务器响应 100, 浏览器再继续发送 data,服
务器响应 200 (返回数据)。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

【uni-app】响应式单位rpx

前端达人

单位

rpx是响应式px
rpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx正好是屏幕的宽度。屏幕变宽,rpx实际显示效果会等比放大,但在App端和h5端,屏幕宽度达到960px时,默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。
uni-app在App端,H5端和小程序都支持rpx,并且可以配置不同屏幕宽度的计算方式。

页面元素在uni-app的宽度计算公式如下:
750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

  1. 若设计稿宽度为750px,元素A在设计稿上的宽度为100rpx, 那么元素A在uni-app中的宽度应该设计为750 * 100/750,即100rpx
  2. 若设计稿宽度为640px,元素A在设计稿上的宽度为100rpx, 那么元素A在uni-app中的宽度应该设计为750 * 100/640,即117rpx
  3. 若设计稿宽度为375px,元素A在设计稿上的宽度为200rpx, 那么元素A在uni-app中的宽度应该设计为750 * 200/375,即117rpx

但是要注意的是

  1. 不要对响应式单位依赖太严重了,比如组件高度或字体大小也使用rpx。只有当你需要某元素的单位要根据屏幕宽度大小变化时,才需要rpx这类动态宽度单位。
  2. 一般情况下高度和字体大小是不应该根据屏幕宽度变化的,除非你的字体大小想根据屏幕宽度变化。
  3. rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向

拓展:在设置文件mainfest.json里开启px转rpx(默认关闭),所有的px可一键转换为rpx

“transformPx”:false  
        
  • 1

rpx直接支持动态绑定

<view class="test" :style="{width:winWidth + 'rpx;'}"></view> 
        
 
        
  • 1


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

Vue跨域解决方法

前端达人

vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。

要想本地正常的调试,解决的办法有三个

一、后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

这样就可以跨域请求数据了

二、使用JQuery提供的jsonp (注:vue中引入jquery,自行百度)

methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}

通过这种方法也可以解决跨域的问题。

三、使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建)

例如请求的url:“/business/remind/user”
1、打开vue.config.js.js,在proxy中添写如下代码:

// 运行配置
devServer: {
port: '9527', //代理端口
open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我们设置了代理,则所有请求url都已写成/api/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
// 因此这里的意义在于, 以 /api开头的url请求,代理都会知道实际上应该请求那里,
// ‘我是服务器/api’,后面的/api根据实际请求地址决定,即我的请求url:/api/test/test,被代理后请求的则是
// https://我是服务器/api/test/test
}
}
},

附带vue.config.js下的代码

const chalk = require('chalk')
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)

}
module.exports = {
// 没有书写outputDir属性 默认'dist' 对应dev.assetsSubDirectory
outputDir: 'dist',
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
//在vue-cli.3.3版本后 baseUrl被废除了,因此这边要写成 publicPath ( 资源地址 )
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PUBLICPATH : '/' ,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {}
// 启用 CSS modules for all css / pre-processor files.
// modules: false
},
// 运行配置
devServer: {
port: '8222', //代理端口
open: false, //项目启动时是否自动打开浏览器,我这里设置为false,不打开,true表示打开
proxy: {
'/api': {
target: process.env.VUE_APP_HTTP_URL,
changeOrigin: true, //是否跨域
pathRewrite: { //重写路径
'^/api': '/' // 或 者 'http://localhost:8080/api'
}
// 既然我们设置了代理,则所有请求url都已写成/api/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
// 因此这里的意义在于, 以 /api开头的url请求,代理都会知道实际上应该请求那里,
// ‘我是服务器/api’,后面的/api根据实际请求地址决定,即我的请求url:/api/test/test,被代理后请求的则是
// https://我是服务器/api/test/test
}
}
},
chainWebpack: config => {
// 提示输出的哪个地址
console.log(chalk.blueBright('\n\n running ' + process.env.VUE_APP_PROJ_NAME + ' : ') +
chalk.yellowBright(process.env.VUE_APP_HTTP_URL + ' please wait... \n'));
// 判断不同环境 做相应处理
if(process.env.NODE_ENV === 'production') {
// 测试生产环境, 不压缩js代码
if (process.env.VUE_APP_TITLE === 'alpha') {
config.optimization.minimize(false)
}
}
//set第一个参数:设置的别名,第二个参数:设置的路径
config.resolve.alias
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('assets',resolve('./src/assets'))
.set('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
//注意 store 和 router 没必要配置

config.plugin('html')
.tap(args => {
args[0].title = '公募综合业务平台'
return args
})
}
}





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

vue 项目启动失败 ‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序

前端达人

报错描述

我使用命令 npm run dev 启动项目 报了下面的错。

 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lara\AppData\Roaming\npm-cache\_logs\2018-06-12T09_40_42_892Z-debug.log

 什么环境都是好的,刚使用npm run dev 启动了一个前端项目都是好的,但是现在这个项目就不行了。

解决步骤:

        第一步:

        删除项目的node_modules文件夹(当前运行的项目中没有node_modules 文件夹的直接运行第二步)

        第二步:

        在项目目录里运行 npm install  命令


 

         第三步:

        在项目目录里运行npm run build 命令

 

         第四步:

        在项目目录里运行npm run dev 命令

这样我就可以成功运行项目了。 


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

vuex存储与本地储存(localstorage、sessionstorage)的区别

前端达人

1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存(不主动删除,则一直存在);sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

2.应用场景:vuex用于组件之间的传值,localstorage,sessionstorage则主要用于不同页面之间的传值。

3.永久性:当刷新页面(这里的刷新页面指的是 --> F5刷新,属于清除内存了)时vuex存储的值会丢失,sessionstorage页面关闭后就清除掉了,localstorage不会。

注:大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,原因就是区别1。





vuex是存储在页面上的变量,说到底还是个Object,刷新页面就清空了。而storage是存储在浏览器的,和页面就无关了,刷新页面也不会清空




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

如何在线Word转成PDF格式

前端达人

我们经常会将Word转换成PDF,下面给大家介绍一种很不错的Word转PDF格式的方式。

打开浏览器搜索speedpdf找到并打开在线转换工具首页,选择主页上的Word转PDF进入转换(也可以点击上方所有工具字样,选择Word转PDF进入)。

将需要转换的Word文档添加上传后,点击进度条后面的转换按钮,就可以开始转换了,等待转换完成后点击下载箭头即可。

如果转换前有登录账户,还可以通过点击登录头像处,选择账户,在转换记录中查看转换状态和下载转换后的文档。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

【vue2】对路由的理解

蓝蓝

目录

 一、vue路由概念

1.概念:

2.初体验:

二、路由基础

1.路由模式        

2.路由写法

总结手动自动配置区别:

三、路由重定向与二级路

1.路由重定向

2.二级路由

 四、路由跳转传参

1.声明式导航:

2.编程式导航


 一、vue路由概念

1.概念:

确保我们在vue中实现页面跳转到我们所想的页面

2.初体验:

88f51af6257443c5aeb88fa4b47a805a.gif

 可以看到当我们点击不同的组件的时候我们实现了路由的功能:在vue中实现页面的跳转

注意看,当我点击的时候上面地址栏中加载了不同的网页。下面我们来学习下路由的写法

二、路由基础

1.路由模式

路由两种模式

路由书写写法:

在index.js中的router对象中书写


  1. const router = new VueRouter({
  2. mode: 'history',//默认是hash模式
  3. })

hash模式:

路由例如: http://localhost:8080/#/home

history模式:

路由例如: http://localhost:8080/home


两种模式的区别:

  1. 外观:hash的url有个#符号,history没有,history外观更好看。
  2. 刷新:hash刷新会加载到地址栏对应的页面,history刷新浏览器会重新发起请求,如果服务端没有匹配当前的url,就会出现404页面。
  3. history模式以后上线需要服务器端支持, 否则找的是文件夹

 2.路由写法

 起步 | Vue RouterVue Router3官网介绍: 起步 | Vue Router

①手动配置(较少使用)

  1. 下载与导入vue-router
  2. 导入组件
  3. 创建routes路由规则(路径和页面一一对应)
  4. 创建路由对象
  5. 把路由对象挂载到App.vue
  6. 在页面写路由导航router-link (生成a标签)
  7. 在页面写路由出口router-view (生成占位盒子,用于显示页面内容)

下面开始我们相关文件的创建

1.创建我们的脚手架(此时没有选择Router):

1d386e264033404e9d2e678b516ac38f.png

 2.准备我们的App.vue文件:


  1. <template>
  2. <div>
  3. <!-- 顶部导航栏 -->
  4. <div class="footer_wrap">
  5. <a href="#/find">发现音乐</a>
  6. <a href="#/my">我的音乐</a>
  7. <a href="#/friend">朋友</a>
  8. </div>
  9. <!-- 下面内容 -->
  10. <div class="top"></div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. methods: {}
  16. }
  17. </script>
  18. <style scoped>
  19. body,
  20. html {
  21. margin: 0;
  22. padding: 0;
  23. }
  24. .footer_wrap {
  25. position: fixed;
  26. left: 0;
  27. top: 0;
  28. display: flex;
  29. width: 100%;
  30. text-align: center;
  31. background-color: #333;
  32. color: #ccc;
  33. }
  34. .footer_wrap a,
  35. span {
  36. cursor: pointer;
  37. flex: 1;
  38. text-decoration: none;
  39. padding: 20px 0;
  40. line-height: 20px;
  41. background-color: #333;
  42. color: #ccc;
  43. border: 1px solid black;
  44. }
  45. .footer_wrap a:hover,
  46. span:hover {
  47. background-color: #555;
  48. }
  49. .top {
  50. padding-top: 62px;
  51. }
  52. .footer_wrap .router-link-active {
  53. background-color: #000;
  54. }
  55. </style>

3.在src下面新建views文件夹并创建我们需要的.vue文件

88e582b6196e48c0a1c697bfc26d9869.png

3.1 find.vue


  1. <template>
  2. <div>
  3. <div class="nav_main">
  4. <router-link to="/Ranking">排行</router-link>
  5. <router-link to="/Recommend">推荐</router-link>
  6. <router-link to="/SongList">歌单</router-link>
  7. </div>
  8. <div style="1px solid red;">
  9. <router-view></router-view>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'find',
  16. }
  17. </script>
  18. <style scoped>
  19. .nav_main {
  20. background-color: red;
  21. color: white;
  22. padding: 10px 0;
  23. }
  24. .nav_main a {
  25. text-align: center;
  26. text-decoration: none;
  27. color: white;
  28. font-size: 12px;
  29. margin: 7px 17px 0;
  30. padding: 0px 15px 2px 15px;
  31. height: 20px;
  32. display: inline-block;
  33. line-height: 20px;
  34. border-radius: 20px;
  35. }
  36. .nav_main a:hover {
  37. background-color: brown;
  38. }
  39. .nav_main .router-link-active{
  40. background-color: brown;
  41. }
  42. </style>

 3.2 my.vue


  1. <template>
  2. <div>
  3. <img src="../assets/my.png" alt="" width="100%">
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'my',
  9. };
  10. </script>
  11. <style scoped>
  12. </style>

3.3 friend.vue


  1. <template>
  2. <div>
  3. <ul>
  4. <li>这是当前页面 query 接收到的参数:
  5. <span>姓名:{{ $route.query.name }}</span> --
  6. <span>年龄:{{$route.query.age}}</span>
  7. </li>
  8. <li>这是当前页面 params 接收到的参数:
  9. <!-- <span>姓名:{{ $route.params.name }}</span> --
  10. <span>年龄:{{ $route.params.age }}</span> -->
  11. </li>
  12. </ul>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: 'friend',
  18. };
  19. </script>
  20. <style scoped>
  21. </style>

3.4 notfound.vue


  1. <template>
  2. <div class="box">
  3. <h1>这是一个 404 页面</h1>
  4. <img src="../assets/404.png" alt="">
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. name: 'notfound',
  10. data() {
  11. return {
  12. };
  13. },
  14. };
  15. </script>
  16. <style scoped>
  17. .box {
  18. display: flex;
  19. flex-direction: column;
  20. justify-content: center;
  21. align-items: center;
  22. }
  23. </style>

 4.准备图片素材(所有素材可私信博主获取)

3febf3f9755241a3b8bafccedb0f646e.gif

 5.所有准备工作做完现在开始我们的文件配置

 1.下载与导入vue-router

  • npm i vue-router@3.6.5

  • 导入vue-router (在main.js中)


  1. //main.js中导入
  2. // 0.导入路由
  3. import VueRouter from 'vue-router'
  4. // 使用vue的插件,都需要调用Vue.use()
  5. Vue.use(VueRouter)

2.导入组件

@符号代表 /src 文件夹的绝对路径,在脚手架中文件比较多的时候,使用这个@符号会更加的方便

 在main.js中导入


  1. // 导入组件
  2. import find from '@/views/find.vue'
  3. import friend from '@/views/friend.vue'
  4. import my from '@/views/my.vue'
  5. import notfound from '@/views/notfound.vue'

3.创建路由规则

路由规则作用: 设置 url 和 组件 对应的规则

 在main.js中写入


  1. // 路由规则
  2. const routes = [
  3. { path: '/find', component: find },
  4. { path: '/friend', name: 'friend', component: friend },
  5. { path: '/my', component: my },
  6. { path: '/notfound', component: notfound },
  7. ]

4.创建路由对象

路由对象: 帮你管理这些路由规则

 在main.js中写入


  1. // 创建路由对象
  2. const router = new VueRouter({
  3. routes// (缩写) 相当于 routes: routes
  4. })

 5.挂载路由到根组件

挂载到根组件作用:让你的整个应用都有路由功能

 在main.js中写入


  1. // 挂载路由到根组件
  2. new Vue({
  3. router,
  4. render: h => h(App)
  5. }).$mount('#app')

6.在页面写路由导航router-link

作用与a标签一样实现跳转,好处:当点击链接的时候自带一个专属类名 

在App.vue中我们将传统的a标签进行替换:

4970109a68ec4481b7b4ce6d015fb05e.png

替换a标签原因:便于我们做专属效果 

 我们选中点击的超链接做触发效果:

457bf5ab19d14e1196aae8ebe7fbb272.png

 7在页面写路由出口router-view

占位盒子,用于渲染路由匹配到的组件

(<router-view> : 是vue内置的一个组件,会自动替换成路由匹配的组件 )

0487e6a9e90f47259742157cc9bf927f.png

好了一个最最最基本的路由就被我们制作完成啦!下面我们来看看效果:

b90436a4b4b043e0972a686ec5d6c7b9.gif

上述的操作有些许麻烦,下面我们来使用我们开发中常用的自动配置方法

②自动配置(推荐使用)

创建脚手架方式与手动配置类似,唯一不同是此处必须选择Router

8da9a6240ba34b7d8231d7e3d1329023.png

对比手动模式:

b4e1986802914f9682f82f40bd819859.png

 此刻:脚手架已经帮我们创建好了Router路由不需要我们下载与导入vue-router了

只需要写:

  1. 导入组件
  2. 配置路由规则
  3. 路由导航
  4. 路由出口

并且为了进一步的封装我们的配置信息,我们的配置代码将写在router/index.js下,不再是全部写在main.js下。

1.导入组件(index.js中)


  1. import find from '@/views/find.vue'
  2. import friend from '@/views/friend.vue'
  3. import my from '@/views/my.vue'
  4. import notfound from '@/views/notfound.vue'

2.配置路由规则(index.js中)


  1. { path: '/find', component: find },
  2. { path: '/friend', name: 'friend', component: friend },
  3. { path: '/my', component: my },
  4. { path: '/notfound', component: notfound }

 3.路由导航(直接cv我们之前的App.vue文件)


  1.       <router-link to="/find">发现音乐</router-link>
  2.       <router-link to="/my">我的音乐</router-link>
  3.       <router-link to="/friend">朋友</router-link>

 4.路由出口(App.vue中


  1. <div class="top">
  2. <router-view></router-view>
  3. </div>

效果查看:

a0b3530b690c4a9ca6249c14b002d6b0.gif


总结手动自动配置区别:

自动配置省去了一些固定不变的操作,我们不需要写繁琐且固定的代码,只需要写不同的代码。且代码书写的位置都给我们设置好了,我们直接遵守该规范书写代码即可


三、路由重定向与二级路由

1.路由重定向

路由重定向官方文档:重定向和别名 | Vue Router

  • 重定向应用场景: 页面输入根路径/ , 自动跳转到首页

  • 注意点 : 重定向只是修改路径, 还需要单独去设置路由匹配规则

重定向命令:


  1. {
  2. path: '/',
  3. /*
  4. (1)重定向只是修改页面路径。 输入 / 会重定向到 /路径
  5. (2)只有component才会让vue去寻找路由匹配页面。所以设置了重定向,还需要单独设置匹配规则
  6. */
  7. redirect: "路径"
  8. },

1. 就拿我们刚才创建的举例:

bef58f0f03f0422bad9ff7ff552333ca.png

 实现效果:当我在浏览器中打开的时候我没有输入任何路径,vue自动帮我们跳转到了 my.vue这个页面组件

fc6d192e015f4d028f6d8e601a9ab2a1.png

 2.也可以利用重定向来设置当我们路径错误提示404页面:

ec7212bfaf874c898e43147ff21dcb43.png

实现效果:当我任意输入没有匹配的路径,自动帮我们跳转到了notfound.vue这个组件

4544b2c521bc475998d8f3220f43f714.gif

2.二级路由

实现页面中存在第二级的跳转

写法(拿我们上述的案例实操,需要素材可私信博主喔):

①在index.js中引入


  1. // 导入二级路由
  2. import Ranking from '@/views/second/Ranking.vue'
  3. import Recommend from '@/views/second/Recommend.vue'
  4. import SongList from '@/views/second/SongList.vue'

②在需要引用的组件中使用:


  1. //格式:
  2. {
  3. path: '路径', component: 组件名, children: [
  4. //此处填写二级路由的路径信息
  5. ]
  6. }

  1. {
  2. path: '/find', component: find, children: [
  3. {path:'/',redirect:'/SongList'},
  4. { path: '/Ranking', component: Ranking },
  5. { path: '/Recommend', component: Recommend },
  6. { path: '/SongList', component: SongList }
  7. ]
  8. }

③写路由导航与出口

bde6628a95f54fb2b73ef7ea54cb05f3.png

 查看效果:

fae7f2b60cab46599c9d7a4b142de98a.gif

 可以看到:当我们点击一级路由之后,我们还可以点击二级路由到我们的专属页面中


 四、路由跳转传参

有两种跳转传参方式:

  • 声明式导航
  • 编程式导航

1.声明式导航:

①query写法:

在路径中加参数信息即可

      <router-link to="/路径?参数名=参数值&参数名=参数值</router-link>

接收信息:

在触发的组件中书写{{ $route.query.属性名}}接收

 举个例子:

026595d1cedd4c02ab86a4f99188edd8.png

②params写法:

在index.jsx文件中写:参数名。在需要传递的路由路径中写参数值

47aaff039df84bc990dd7f3f2ad9b74b.png

接收信息:

在触发的组件中书写{{ $route.params.属性名}}接收

 6da470911546454488c229af441d7d78.png

 实现效果:

c2acf124d4cf44fb96dbc98e71d804c1.png


2.编程式导航

①query写法:

结构:


  1. this.$router.push({
  2. path: '/路径',
  3. query: { 属性名: '属性值'}
  4. })

接收信息:

在触发的组件中书写{{ $route.query.属性名}}接收

举个例子:

c55bce2fbbaf4910812fa99a15ef760b.png

 ②params写法

结构:


  1. this.$router.push({
  2. name: '我们注册路径的组件名',//写path获取不到值!!!
  3. query: { 属性名: '属性值'}
  4. })

 注意点:写path获取不到值,需要用name

接收信息:

在触发的组件中书写{{ $route.params.属性名}}接收

5fa2f0cd7c87446aadd377efaabe0784.png



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

【前端】参考C站动态发红包界面,高度还原布局和交互

前端达人

目录

1、界面效果

2、界面分析

2.1、整体结构

2.2、标题

2.3、表单

2.4、按钮

3、代码实现

3.1、标题区域布局

3.2、表单区域

3.2.1、祝福语

3.2.2、红包数量

3.2.3、红包总金额

3.2.4、余额支付

3.3、确认按钮区域

4、完整代码

5、基础知识点


1、界面效果

  • 完成效果

  • C站发红包界面 

2、界面分析

2.1、整体结构

上部分为标题、中间为表单、底部为确定按钮

2.2、标题

底部背景、标题文本、右上角关闭按钮

2.3、表单

祝福语文本、红包数量文本、红包总金额、当前余额文本显示、以及前往充值按钮

2.4、按钮

左边为需支付金额显示,右边为取消和确定按钮

3、代码实现

3.1、标题区域布局

1)背景图片

图片宽度380px像素,高度56px像素

2)背景图片自动填充

布局一个div,宽度为400px像素,高度为56px像素,然后再设置背景图片样式,由于图片本身宽度小于div宽度,div会多出20px像素,图片会自动填充,默认效果如下


  1. <div style="width:400px;height:56px;background:url(/1674461966454.jpg);background-size: 100%;">
  2. </div>

 

 3)图片百分比显示

再给div设置背景百分比缩放显示,效果如下

background-size: 100%;

 4)文本

布局一个span标签,显示"添加红包"文本,白色黑体,18号字体,加粗,左对齐,且左边距20px像素。并设置div标签56px像素垂直居中样式,效果如下

5)关闭按钮

在右上角添加一个关闭按钮,一般可以设置一个svg标签图标,设置高28px,宽36px

  • base64编码图标
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC
  • 错位布局

设置相对定位position样式,位于右上角。它所在的父级就要设置绝对定位relative。这样关闭按钮图标就会以它所在的父级定位,否则可能会布局错位,比如下面错位效果

  •  正确布局

  • 样式代码

  1. <style type="text/css">
  2. .title { width: 400px; height: 56px; background: url(/1674461966454.jpg); background-size: 100%; line-height: 56px;position:relative; }
  3. .title-text { font-size: 18px; font-weight: bold; color: #fff; font-family: 黑体; margin-left: 20px; }
  4. .close { position: absolute; top: 0px; right: 0px; width: 36px; height: 28px; }
  5. </style>
  6. <div class="title">
  7. <span class="title-text">添加红包</span>
  8. <img class="close" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAA4CAYAAABez76GAAAAAXNSR0IArs4c6QAAAtVJREFUeF7tm2FO3DAQhR+0BVZt2QIFujfrQXqMHqQ3W4kflRYJrZBArV6EUTa7jj0ee0yILUUIZcb2fJnMsx3tEYAfAI4x3/YPwDOARwAPAJ76KI4AfAdwMl8+e5ET0j0AggMBXQBYNEA7BJhNfwmJgL6+XI3RLgFm0oaAmD3Motb2CdwREOsP61Br+wQeCIgKRiVrbZ/AEwGxzV3qfcnRFWm2JvUeRA5Qk/oAoCb1AUBN6gOAmtQHADWpDwBqUh8BqEn9AUhO5nmrSX0AkLnULxaL7gFtt9vu7EXatP4x4/UzyFTqGdx6vf7NSa5Wq19SSFr/GDi06QMyk3oX3HK5/MlJbDabPxJIWv9YOENAZlI/DFACSeMrAeNs+xlkKvUpgab4pEDp+wwBmUq9JGCJrRbKGCBzqY8JPMYmJ5QxQOZSz8mMAeB9qp0r6JJ6lQPa8BUzlfp+AD5ItKkFZ6hi/N9M6g893UOQ+nbS5UCJDDKTet/kfZBqwDmUQaZSL8mitwToCsBpjvSU9jGFV4wxnQP4Ig1Oaz+VIt2prvWn6CnJPAGZFuqYRWCMjTaDff7DdZCzM9lySAKX2OaE5QPEGsRaVKylBJziow3AB4iv2e3gvEg71qu/JlCNb0oAPkDdCh/A55ROQz7aAy+tf2h+/ftjgD4CuJF0JrHVHplq/WPnOgaIfVwCOIvtTGqnPXTX+sfMNwSo6uY1JoDSNiFARWtR6eBy9B8DiDbXAFiTZtdiABHKbF+1WECEVGUTWztlJYBoS1WrchRSC5QEEOdIe54Xzea3HVJAs4OUAoiQuFdjJn2qlfpW46YCcpC+lVxpW0EYG0cDyPXLDS0VLkdfb4HJzhxyBcVFJBXu3S0mcwFyxZufrplROfutmlUlAmEBJyRek/8tbAlA7om/C1AlATlQHIMLS35O4tnSpLLKAtCwhrCQExj/8vrwAo3gasxntMb9B9PXrmqWhf+yAAAAAElFTkSuQmCC" alt="">
  9. </div>

3.2、表单区域

3.2.1、祝福语

1)组成元素

红色星号、文本、输入文本框、刷新文本按钮

2)calc函数

它属于css3的功能,calc() 函数用于动态计算长度值。对于布局非常有作用。

需要特别注意,函数内的参数值前后都需要保留一个空格,例如:width: calc(100% - 40px);

3)刷新小图标

样式设置16x16高宽度

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=

4)文本框默认高亮

input输入文本框默认点击选中会有一个高亮的效果,可以设置样式去掉

outline:none;

5)随机文本

设置随机祝福语文本值,可设置js全局数组参数变量保存。

并且给右边的刷新按钮绑定点击事件,然后在事件内使用随机函数进行随机显示

  • 交互代码

  1. <script type="text/javascript">
  2. $(function () {
  3. // 祝福语
  4. var labelText = ['成就一亿技术人!', '节日快乐', 'Hello World', '新春大吉!', '大吉大利', 'Bug Free'];
  5. $('.cl-input img').click(function () {
  6. // Math.random() - 随机函数会产生0~1之间的值
  7. var index = parseInt(Math.random() * labelText.length);
  8. var text = labelText[index];
  9. $('.cl-input input').val(text);
  10. });
  11. });
  12. </script>
  • 效果如下

  • 布局代码

  1. <div class="content-label">
  2. <div class="cl-text">
  3. <span style="color:#f00;">*</span>
  4. <span>祝福语</span>
  5. </div>
  6. <div class="cl-input">
  7. <input placeholder="请填写红包祝福语或标题" value="成就一亿技术人!" />
  8. <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAA3NJREFUSEu1lX+IVFUUx7/nPpV1N1zbzNQsXFkUoZBCqH+KNhJikKid14QpsjLv3Uc/yCQpCcISot+yJZHz3qxj2xIxzozJYCCuWiREfxQZJIT9IgjKoq0l3WZ33v3GvN3ZdczdmWXr/vfePef7uefce84R/M9LGtVPFYvN+Lm0H8SVIhwi5BcFc7i1FScSiUQ4lU7DgN7e3MpyyLMAVK2YnBOoXVp37bscJAKk3i0uwvnRByFsmjQKv/KcxJGLnVJvZ69XI1hNkasAWUXCAXldxUYgAy0tTYlNmzYMXuwzBgjyu0HzzCUnMPObrKVbtnSdmyr8bDZrDQ7hAaHsJdEmIh8vv7Z5fSwWK1V9IkAQ5JeTdAEsJrAZ4BWRwbw5HV73fd/Wu6dM5tCKkdHwJMAVEHnTc+1HawCVj76+oy3DpaHPQKwG5ALA5kYBFf90unBDaMLPRaAEcrPr2l+OpW58pYL8E6B5FcAZAPMBtM8EUJHx/dwegtsF6j2t4xsnAJnMyaaR8m/fg1giFmI0shPELVhorvESiT/rpai6H6Ua5gdSypYyyxwn8XsUgd+bu4shjwH4Ubt2+4ED7y8wJmxLJu3vGhWv2vnBweMk7lSCe133/sNjAL/wFBG+CJE3PNfeNlPRmqcc5J8HzdMQ9Zznxp+tPtMANI4oeVw79uuzAfjp3DYa9kBUj+fGt49HMHE5j2kd3zsbQCqdfxLGvARRr3lufEdNikRkn3bth2YFCPL7QbMVIg97rv3WeKEV1hiGZ0Tw68JWLp2ueU0HJ6n8dO6nymtUImsrtTBZB37uC4BrxZL1OmkPNBpFJpNdMlpWAxTpEeEgQ+YAOetpe9UlhZbbCfIFERxzHftuETGNQHz/4AYCRVHqCMiVJNcILK11V1AD6OsrLB4uhaejYlOySzv27hkBRL4h2QHB17ip/UZv3brRGsBYP8nfHhoeB6hEsVs7iXfqQSYiEERDh2KSmDPvVLVJ/mvg+OnCDprwlYgucpRzrUem66hBkIsZsmZuVHwtJfc4jl287EQLgkObifIeElcDUoLgFCAfKZgPOzoWfdLZ2VmuRtbf/8GC88MX+gVcVv1HyB+Ya3mVg005MtPpbJuhehlgNwlrMlXyqaftW+ulrrpfdyZHJ/z7r9tAq1Ng7gDltNZ28j8DNCo0ld0/bOx/KATgarIAAAAASUVORK5CYII=" alt="">
  9. </div>
  10. </div>

3.2.2、红包数量

布局和祝福语一样,刷新按钮换成了单位文本。

这里文本框有个离开焦点事件,如果判断没有输入值,那么提示”请输入数量",并且红包数量只能是正整数,文本框也变为红色边框,默认则为蓝色边框

  • 布局效果

  • 布局代码

  1. <div class="content-label">
  2. <div class="cl-text">
  3. <span style="color:#f00;">*</span>
  4. <span>红包数量</span>
  5. </div>
  6. <div class="cl-input">
  7. <input placeholder="请填写红包数量" value="" />
  8. <span></span>
  9. </div>
  10. </div>
  •  交互效果

  • 交互代码 

  1. $("#txtCount").blur(function () {
  2. txtCount = $(this).val();
  3. if (txtCount == undefined || txtCount == null || txtCount == '' || txtCount.trim() == '') {
  4. $("i", $(this).parent()).show().html('请输入数字!');
  5. $(this).parent().addClass('red-border');
  6. }
  7. else {
  8. if (txtCount <= 0) {
  9. $("i", $(this).parent()).show().html('请输入有效数字格式!');
  10. $(this).parent().addClass('red-border');
  11. }
  12. else if (!isNaN(txtCount)) {
  13. $("i", $(this).parent()).hide();
  14. $(this).parent().removeClass('red-border');
  15. }
  16. else {
  17. }
  18. }
  19. });

3.2.3、红包总金额

布局和前面一样,这就是前端布局的魅力,有很多可以重用的东西

  • 布局效果

  • 布局代码 

  1. <div class="content-label">
  2. <div class="cl-text">
  3. <span style="color:#f00;">*</span>
  4. <span>红包总金额</span>
  5. </div>
  6. <div class="cl-input">
  7. <input placeholder="请填写红包总金额" value="" />
  8. <span></span>