首页

开发过程中积累的CSS样式(持续更新)

seo达人

前言:平时写页面的时候有些样式使用完发现没过多久就忘记了,这篇文章主要是用来记录开发过程中容易忘记的CSS样式,与其总是去网上查,还不如一个一个记录下来,虽然说之前的都没有记录,但是知识的累积不论什么时候开始做都不会晚的。



首先 记录几个好用的插件网站:



layDate日期与时间组件: https://www.layui.com/laydate/

Vant移动端插件库: https://youzan.github.io/vant/#/zh-CN/intro

Element组件库: https://element.eleme.cn/#/zh-CN/component/installation

Vue.js框架: https://cn.vuejs.org/v2/guide/

Bootstrap框架: https://v2.bootcss.com/index.html

菜鸟教程官网: https://www.runoob.com/

w3school官网: https://www.w3school.com.cn/

下面是遇到的一些想累积的css样式:(内容会随时间累积的越来越多)



1、一个 div 中的内容实现上下滑动效果(而不是超出body的高以后上下滑动):overflow:auto;

简单的描述:body 中的一个 div 内,如果设置了固定的 height,而内容的总 height 超出了 div 的高,则超出的部分就会被覆盖,而想实现超出的部分变成滑动的效果而不被覆盖,则用 overflow:auto; 实现。



2、修改 前端框架封装好的css样式: border-radius: 20px!important;(注意使用英文的 ! 叹号)

简单的描述:在开发过程中经常使用一些前端框架(bootstrap,vue.js,laydate,Vant等等),在使用link导入css文件以后,发现有些css是在标签内使用内嵌的方式实现的,优先级最高,那么我们怎么修改呢?

比如:css文件中的边框弧度样式为10px:border-radius: 10px;

我们想改成20px,则在后面加上 !important 即可:border-radius: 20px!important;



这篇文章主要是以后回头复习或者忘记了的时候给我自己看的,但是如果恰好也帮助到了你,那是更加的有意义,在以后的开发过程中,该文章的内容一定会累积的越来越多

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

JS--普通数字格式与会计金额格式之间的转换

seo达人

普通数字转会计金额格式(保留两位小数)

我们可以用数字的toLocaleString()方法将普通数字转为会计金额格式,但是这种方式无法保留两位小数(四舍五入),如果是整数或者小数长度只有一位的时候无法自动补0



例如:





思路:

利用toLocaleString()以及toFixed()先对数字进行一个转换得到最多保留了2位小数的金额,然后判断数字是为整数还是带有小数,如果带有小数则进行切割,判断小数长度为1时自动补0



// 普通数字转会计金额格式 第一种

    function toThousandsFormates(num) {

        // 判断传进来的数字是否为非空数字

       if (!isNaN(parseFloat(num))) {

            var reg = /./g

            var newNum = Number(Number(num).toFixed(2)).toLocaleString()

            // 判断转换后的数字是否带有小数

            if (reg.test(newNum)) {

                var numArr = newNum.split('.')

                // 判断小数点后数字长度为1,则自动补0

                numArr[1] = numArr[1].length === 1 ? numArr[1] + '0' : numArr[1]

                return numArr.join('.')

            } else {

                // 整数直接在后面补上0.00

                return newNum + '.00'

            }



        } else {

            return ''

        }

    }

    console.log(toThousandsFormates('0')); // 0.00

    console.log(toThousandsFormates('')); // ''

    console.log(toThousandsFormates(966)); // 966.00

    console.log(toThousandsFormates(966.3)); // 966.30

    console.log(toThousandsFormates(9669228.55)); // 9,669,228.55

    console.log(toThousandsFormates(96566.56954)); // 96,566.57



经过查阅资料后,发现toLocaleString()它里面自带属性可以检查到最少保留了几位小数,不够自动补0,这样我们上面的代码其实可以更加简单,如下:

// 普通数字转会计金额格式 第二种

function toThousandsFormates2(num) {

    // 判断传进来的数字是否为非空数字

    if (!isNaN(parseFloat(num))) {

        var newNum = Number(Number(num).toFixed(2)).toLocaleString('zh', { minimumFractionDigits: 2 })

        return newNum



    } else {

        return ''

    }

}



console.log(toThousandsFormates2('0')); // 0.00

console.log(toThousandsFormates2('')); // ''

console.log(toThousandsFormates2(966)); // 966.00

console.log(toThousandsFormates2(966.3)); // 966.30

console.log(toThousandsFormates2(9669228.55)); // 9,669,228.55

console.log(toThousandsFormates2(96566.56954)); // 96,566.57



// 结果一模一样



会计金额格式转普通数字(利用正则)

// 会计金额格式转为普通数字

    function rMoney(num) {

        return parseFloat(num.replace(/[^\d\.-]/g, ''))

    }

    console.log(rMoney('96,566.57')); // 96566.57

    console.log(rMoney('966.30')); // 966.3

    console.log(rMoney('9,669,228.55')); // 9669228.55

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

nginx配置rewrite的用法详解

seo达人

文章目录

rewrite在if中的用法

rewrite中break和last的用法

1.break和last在location{}外部时

2.break和last在location{}内部时

3.break和last用法总结

return的用法

rewrite的语法规则

rewrite应用实例

1.域名跳转(域名重定向)

2.http跳转https

3.跳转二级目录

4.动静态请求分离

5.防盗链配置

6.伪静态(将静态页面重写为动态)

7.多个if并用

rewrite在if中的用法

格式:if (条件判断) { 具体的rewrite规则 }



if条件判断语句由Nginx内置变量、逻辑判断符号和目标字符串三部分组成。

其中,内置变量是Nginx固定的非自定义的变量,如,$request_method, $request_uri等。

逻辑判断符号,有=, !=, ~, ~, !~, !~

!表示相反的意思,~为匹配符号,它右侧为正则表达式,区分大小写,而~为不区分大小写匹配。

目标字符串可以是正则表达式,通常不用加引号,但表达式中有特殊符号时,比如空格、花括号、分号等,需要用单引号引起来。

1

2

3

4

5

示例1:当http请求方法为post时,返回403状态码



if ($request_method = POST)

{

    return 403; 

}

1

2

3

4

示例2:通过浏览器标识匹配关键字,禁止IE浏览器访问



if ($http_user_agent ~
MSIE) 

{

    return 403;

}

1

2

3

4

限制多个浏览器:



if ($http_user_agent ~ "MSIE|firefox|Chrome")

{

    return 403;

}

1

2

3

4

示例3:当请求的文件不存在时,进行重定向或return状态码等处理操作



if(!-f $request_filename)

{

    rewrite 语句;

}

1

2

3

4

示例4:判断uri中某个参数的内容



if($request_uri ~
'gid=\d{6,8}/') 

{

    rewrite 语句;

}

1

2

3

4

\d表示数字,{6,8}表示数字出现的次数是6到8次,当uri中gid参数的值包含6-8个数字那么执行rewrite语句



rewrite中break和last的用法

两个指令用法相同,但含义不同,需要放到rewrite规则的末尾,用来控制重写后的链接是否继续被nginx配置执行(主要是rewrite、return指令)。



1.break和last在location{}外部时

测试示例:



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html;

    rewrite /2.html /3.html;

}

1

2

3

4

5

6

7

8

请求1.html文件时,会被重定向到2.html,然后被重定向到3.html,最后返回的文件为3.html



示例1:在rewrite 指令后面添加break



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html break;

    rewrite /2.html /3.html;

}

1

2

3

4

5

6

7

8

请求1.html文件时,会被重定向到2.html,然后直接返回2.html,break在此处的作用就是当匹配第一个rewrite指令成功时,不执行后面的rewrite指令



示例2:当break后面还有location{}的情况



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html break;

    rewrite /2.html /3.html;

    location /2.html {

        return 403;

    }

}

1

2

3

4

5

6

7

8

9

10

11

请求1.html文件时,会返回403状态码,当1.html被重定向到2.html时,break不会匹配后面的rewrite规则,但条件2.html匹配location{}定义的文件2.html,所以会执行return 403


以上两个示例中,将break换成last效果一样



2.break和last在location{}内部时

测试示例:



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

请求1.html,会经过两次重定向到3.html,3.html又刚好匹配location /3.html{},所以返回b.html,当请求2.html时,会直接返回a.html,因为location /2.html {} 更精准,优先匹配



示例1:在rewrite后面添加break



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html break;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

请求1.html,会返回2.html,不会返回a.html,当break再location {} 内部时,遇到break后,当前location{} 以及后面的location{} 的指令都不再执行



示例2:在rewrite后面添加last



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html last;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

请求1.html时,会返回a.html,在location {} 内部遇到last,当前location {}中剩下的指令不会再执行,但被重定向的url会重新匹配一遍location {}



3.break和last用法总结

1.当rewrite规则在location{}外,break和last作用一样,遇到break或last后,其后续的rewrite/return语句不再执行。但后续有location{}的话,还会近一步执行location{}里面的语句,前提是请求能匹配该location

2.当rewrite规则在location{}里,遇到break后,本location{}与其他location{}的所有rewrite/return规则都不再执行

3.当rewrite规则在location{}里,遇到last后,本location{}里后续rewrite/return规则不执行,但重写后的url再次从头匹配所有location



return的用法

该指令一般用于对请求的客户端直接返回响应状态码。在该作用域内return后面的所有nginx配置都是无效的,可以使用在server、location以及if配置中,除了支持跟状态码,还可以跟字符串或者url链接。



示例1:直接返回状态码



server{

    listen 80;

    server_name www.test.com;

    return 403;

    rewrite www.test.net;  

}

1

2

3

4

5

6

访问时,直接返回403状态码,return返回内容后,后面的配置rewrite不会执行



示例2:当return在if 判断中时



server {

.....



if ($request_uri ~ ".password|.bak")

{

    return 404;

    rewrite /(.*) /index.html;  

}

.....

}

1

2

3

4

5

6

7

8

9

10

请求的文件包含.password或.bak时,直接返回404,rewrite不会执行,但if {}外的配置会继续执行,return只在当前作用域中生效



示例3:返回字符串



server{

    listen 80;

    server_name www.test.com;

    return 200 "hello";

}

1

2

3

4

5

返回字符串必须加上状态码,否则会报错



示例4:返回nginx变量



location /1.html {

    return 200 "$host $request_uri";

}

1

2

3

示例5:返回url



server{

    listen 80;

    server_name www.test.com;

    return http://www.test.com/index2.html;

}

1

2

3

4

5

返回url时,必须以http://或https://开头



示例6:返回html代码



if ($http_referer ~ 'baidu.com') 

{

    return 200 "<html><script>window.location.href='//$host$request_uri';</script></html>";

}

1

2

3

4

当网站被黑了的时候,从百度点进网站是链接都会跳转到其他网站,可以使用该方法暂时处理

注意:return http://$host$request_uri; 在浏览器中会提示"重定向的次数过多"



rewrite的语法规则

格式:rewrite regex replacement [flag]



rewrite 配置可以在server、location以及if配置段内生效



regex 是用于匹配URI的正则表达式,其不会匹配到$host(域名)



replacement 是目标跳转的URI,可以以http://或者https://开头,也可以省略掉$host,直接写$request_uri部分



flag 用来设置rewrite对URI的处理行为,其中有break、last、rediect、permanent,其中break和last在前面已经介绍过,rediect和permanent的区别在于,前者为临时重定向(302),而后者是永久重定向(301),对于用户通过浏览器访问,这两者的效果是一致的。

但是,对于搜索引擎爬虫来说就有区别了,使用301更有利于SEO。所以,建议replacemnet是以http://或者https://开头的,flag使用permanent。



示例1:域名跳转



location / {

    rewrite /(.*) http://www.test.com/$1 permanent;

}

1

2

3

.*为正则表达式,表示uri,用()括起来,在后面的uri中可以调用它,第一次出现的()用$1调用,第二次出现的()用$2调用,以此类推。



示例2:域名跳转的第二种写法



location / {

    rewrite /. http://www.test.com$request_uri permanent;

}

1

2

3

示例3:文件跳转



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    if ($request_uri !~ '^/web/')

    {

        rewrite /(.
) /web/$1 redirect;

    }

}

1

2

3

4

5

6

7

8

9

10

将uri请求的文件重定向到web/目录中去寻找



错误写法1:



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    rewrite /(.*) /web/$1 redirect;

}

1

2

3

4

5

6

7

这样写会反复循环,直到浏览器最大循环限制次数,哪怕uri包含web/目录了,也会继续重定向/web/web/$1



错误写法2:



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    rewrite /(.*) /web/$1 break;

}

1

2

3

4

5

6

7

添加break后不会导致循环,但如果uri中包含web/目录的情况下也会被重定向一次,重定向后的uri就是web/web/$1



rewrite应用实例

1.域名跳转(域名重定向)

单个域名的情况:



server{

    listen 80;

    server_name www.test.com;

    rewrite /(.) http://www.test.net/$1 permanent;    

}

1

2

3

4

5

多个域名的情况:



server{

    listen 80;

    server_name www.test.com www.test.net;

    if ($host != 'www.test.net')

    {

        rewrite /(.
) http://www.test.net/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

2.http跳转https

server{

    listen 80;

    server_name www.test.com;

    rewrite /(.) https://www.test.com/$1 permanent;

}

1

2

3

4

5

3.跳转二级目录

server{

    listen 80;

    server_name bbs.test.com;

    rewrite /(.
) http://www.test.com/bbs/$1 last;

}

1

2

3

4

5

4.动静态请求分离

server{

    listen 80;

    server_name www.test.com;

    location ~ ..(jpg|jpeg|gif|css|png|js)$

    {

        rewrite /(.*) http://img.test.com/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

假设www.test.com的服务器在国外,访问速度较慢,img.test.com的服务器在国内,访问速度正常,可以将访问www.test.com静态文件的请求重定向到img.test.com,提高文件返回速度



第二种写法:



server{

    listen 80;

    server_name www.test.com;

    if ( $uri ~ 'jpg|jpeg|gif|css|png|js$')

    {

        rewrite /(.
) http://img.test.com/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

5.防盗链配置

server{

    listen 80;

    server_name www.test.com;

    location ~ ^.+.(jpg|jpeg|gif|css|png|js|rar|zip|flv)$

    {

        valid_referers none blocked server_names
.test.com

        if ($invalid_referer)

        {

            return 403;

        }

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

配置防盗链避免别的网站引用www.test.com不想被引用的图片等文件



http_referer表示从哪儿点击进网站的,比如从百度搜索引擎访问的

valid_referers:白名单

invalid_referer:无效的(未在白名单中定义的)

none:允许referer为空(也就是允许直接访问,未从其他站点跳转的请求)

blocked:允许来源地址不含http/https



6.伪静态(将静态页面重写为动态)

location /  {

    rewrite ^([^.])/topic-(.+).html$ $1/portal.php?mod=topic&topic=$2 last;

    rewrite ^([^.]
)/forum-(\w+)-([0-9]+).html$ $1/forum.php?mod=forumdisplay&fid=$2&page=$3 last;

    rewrite ^([^.])/thread-([0-9]+)-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=viewthread&tid=$2&extra=page%3D$4&page=$3 last;

    rewrite ^([^.]
)/group-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=group&fid=$2&page=$3 last;

    rewrite ^([^.])/space-(username|uid)-(.+).html$ $1/home.php?mod=space&$2=$3 last;

    rewrite ^([^.]
)/(fid|tid)-([0-9]+).html$ $1/index.php?action=$2&value=$3 last;

}

1

2

3

4

5

6

7

8

示例为discuz的伪静态配置



7.多个if并用

location /{

    set $a 0;

    if ($document_uri !~ '^/abc')

    {

        set $a "${a}1"; #uri不以/abc开头时,$a的值变为01

    }

    if ($http_user_agent ~ 'ie6|firefox')

    {

       set $a "${a}2"; #浏览器标识包含ie6或者Firefox时,$a的值变为012

    }

    if ($a = "012") #当满足前两个if判断时,重写url

    {

        rewrite /(.
) /abc/$1 redirect;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

nginx配置文件语法不支持if嵌套,需要通过多个if并用判断时,使用标识变量值的方式处理



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

使用docbox定制API文档

seo达人

使用docbox定制API文档

什么是docbox

docbox的安装

克隆项目

部署方式

docbox的编写

定制logo及UI

更换代码背景色

插入自己的logo

三列改为双列

其他定制UI



在公司实习了一个月,由于业务需要,我花了大概一周时间对docbox的安装,编写,定制化等进行了详细的研究,下面给大家分享一下我的总结

什么是docbox

Docbox是一个开源的REST API文档系统。它采用结构化的Markdown文件,并生成带有导航,固定链接的两列布局。下面是官方example图片:









docbox的安装

克隆项目

直接去官网https://github.com/tmcw/docbox,然后克隆即可。



部署方式

在使用npm命令前需要下载Node.js,npm会根据package.json配置文件中的依赖配置下载安装



接着,在/content下放入.md文件,并使用 npm run build 命令,生成一个包含所需要的js代码的bundle.js文件,同时创建一个新的index.html文件



重要的就是index.html、bundle.js、/css这三个文件和文件夹



docbox的编写

在/content下放入.md文件(markdown语法俺就不说了哈……)

对/src/custom/content.js中添加需要引入的.md文件位置和以及标题





注意: /src/custom/content.js中放入的是一级标题、二级和三级标题需要在.md文件中编写。





定制logo及UI

修改/src/custom/index.js文件

修改对应标签的属性即可,定制时修改生成的index.html是没有用的,因为index.html里的标签是被动态写死的。

更换代码背景色

<div class='round-left pad0y pad1x fill-green code small endpoint-method'>

1





<div class='endpoint dark fill-blue round '>

1





插入自己的logo





修改/src/components/app.js文件



三列改为双列

docbox默认情况下是显示三列布局,但我们可以在app.js下进行修改使之默认为双列布局。将下图的1改为2即可切换双列模式







其他定制UI

像下图一样,我们可以修改并填写代码得到自己想要的页面样式,比如说我在最上方加了一个固定位置的区域,然后可以在这个区域添加相应的超链接等。







app.js里可以找到图中对应的标签和js代码,docbox支持多种语言切换,我们在需要的地方加入我们想要加入的标签,并在/css文件夹中对相应的css文件添加样式就可以定制我们想要的UI啦!!!



下面给大家列出一些用docbox定制API文档的网站



Mapbox API文档

Mapillary的API文档和Tiles文档

HYCON 8th

Wall

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

一篇解决 thymeleaf 下拉选的选中问题

seo达人

说明:本文基于thymeleaf3.x



在做后台系统时多多少少都会遇到下拉选回显的问题,本次就总结一下如何利用thymeleaf简单快速的进行下拉选的回显。



两种情况:

1、下拉选的数据固定死了的情况下?

利用 th:field="${要选中的option的value值}" 属性,如下

<select id="bookKind" name="bookKind" th:field="${book.bookKind}" class="form-control">

        <option value="">请选择书的种类</option>

        <option value="1">编程语言</option>

        <option value="2">数据库</option>

        <option value="3">操作系统</option>

        <option value="4">办公软件</option>

        <option value="5">图形处理与多媒体</option>

</select>

         book是请求域中的实体类,当${book.bookKind}的值和 option 的 value值匹配上后,该option就会被选中。



        怎么样是不是很简单?如果是用ajax的话,还要先获取所有的option,循环遍历,判断value值是否相等,设置selected属性值为true,跳出循环,这一系列操作,thymeleaf一个属性值就搞定,所以孰轻孰重您就看着来吧!哈哈!



2、下拉选的数据没固定死时?

两个属性  th:each="bookKind : ${bookKinds}" th:selected="{bookKind} == ${book.bookKind}" 搞定,如下所示



<select id="bookKind" name="bookKind" class="form-control">

    <option th:each="bookKind : ${bookKinds}" th:selected="
{bookKind} == ${book.bookKind}" 

            th:value="${bookKind}" th:text="${bookKind}"></option>

</select>

        解释一下,先th:each遍历,*{bookKind}代表遍历出来的元素,判断与点击的者一栏的bookKind值是否一样,如果一样th:selected的值就为true,然后th:value 设置option的value 值,th:text 设置option的文本值。



试想一下,如果是用ajax会怎么样?1、先后台获取数据后,循环append(html标签) 2、再获取到当前记录的这列属性值,再获取到 1 中循环设置的option,在比对value值,设置选中,break等。而且第一个ajax还要整成同步的,不然 2 中可能获取不到 1 中的option元素。



 



最后说明:如果恰巧能解决你的问题,那就动一动您的小手,点个赞或者评论一下,让我看到你们,您的点赞或评论将会持续带给我不懈的动力!!!come on baby!Let's go!

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

vue-router编程式的导航

seo达人

什么是编程式的导航

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。



router.push(location, onComplete?, onAbort?)

注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。



想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。



HTML代码



<p @click="$router.push('/test/emitView')">跳转1</p>

<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>

<p @click="test">带参数的跳转</p>

<p @click="test1">提供了path,params会被忽略</p>

<p @click="$router.push({path: /test/propsView/${userId}})">

    url变为/test/propsView/123

</p>

<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">

    带参数的url变为/test/propsView?plan=private

</p>

Script中代码



test () {

    this.$router.push({

        name: 'routerView',

        params: {userId: this.userId, test: 333},

    })

    console.log(this.$route)

    console.log(this.$route.params)

},

test1 () {

    this.$router.push({ // 如果提供了 path,params 会被忽略

        path: 'routerView',

        params: {userId: this.userId, test: 333},

    })

    console.log(this.$route)

    console.log(this.$route.params)

},

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。



router.go(n)

// 在浏览器记录中前进一步,等同于 history.forward()

router.go(1)

 

// 后退一步记录,等同于 history.back()

router.go(-1)

 

// 如果 history 记录不够用,则无反应

router.go(-100)

router.go(100)

router.back()

在浏览器记录中后退一步



router.forward()

在浏览器记录中前进一步


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

H5之外部浏览器唤起微信分享

seo达人

最近在做一个手机站,要求点击分享可以直接打开微信分享出去。而不是jiathis,share分享这种的点击出来二维码。在网上看了很多,都说APP能唤起微信,手机网页实现不了。也找了很多都不能直接唤起微信。

总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。

下面上代码,把这些直接放到要转发的页面里就可以了:

html部分:


        
  1. <script src="mshare.js"></script>//引进mshare.js
  2. <button data-mshare="0">点击弹出原生分享面板</button>
  3. <button data-mshare="1">点击触发朋友圈分享</button>
  4. <button data-mshare="2">点击触发发送给微信朋友</button>

js部分:


        
  1. <script>
  2. var mshare = new mShare({
  3. title: 'Lorem ipsum dolor sit.',
  4. url: 'http://m.ly.com',
  5. desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
  6. img: 'http://placehold.it/150x150'
  7. });
  8. $('button').click(function () {
  9. // 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生
  10. mshare.init(+$(this).data('mshare'));
  11. });
  12. </script>

下面是mshare.js的代码分享,把这些代码新建一个js文件放进去,然后在页面中引进就ok了。


        
  1. /**
  2. * 此插件主要作用是在UC和QQ两个主流浏览器
  3. * 上面触发微信分享到朋友圈或发送给朋友的功能
  4. */
  5. 'use strict';
  6. var UA = navigator.appVersion;
  7. /**
  8. * 是否是 UC 浏览器
  9. */
  10. var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
  11. /**
  12. * 判断 qq 浏览器
  13. * 然而qq浏览器分高低版本
  14. * 2 代表高版本
  15. * 1 代表低版本
  16. */
  17. var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
  18. /**
  19. * 是否是微信
  20. */
  21. var wx = /micromessenger/i.test(UA);
  22. /**
  23. * 浏览器版本
  24. */
  25. var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
  26. var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
  27. /**
  28. * 获取操作系统信息 iPhone(1) Android(2)
  29. */
  30. var os = (function () {
  31. var ua = navigator.userAgent;
  32. if (/iphone|ipod/i.test(ua)) {
  33. return 1;
  34. } else if (/android/i.test(ua)) {
  35. return 2;
  36. } else {
  37. return 0;
  38. }
  39. }());
  40. /**
  41. * qq浏览器下面 是否加载好了相应的api文件
  42. */
  43. var qqBridgeLoaded = false;
  44. // 进一步细化版本和平台判断
  45. if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
  46. qq = 0;
  47. } else {
  48. if (qq && qqVs < 5.4 && os == 2) {
  49. qq = 1;
  50. } else {
  51. if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
  52. uc = 0;
  53. }
  54. }
  55. }
  56. /**
  57. * qq浏览器下面 根据不同版本 加载对应的bridge
  58. * @method loadqqApi
  59. * @param {Function} cb 回调函数
  60. */
  61. function loadqqApi(cb) {
  62. // qq == 0
  63. if (!qq) {
  64. return cb && cb();
  65. }
  66. var script = document.createElement('script');
  67. script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
  68. /**
  69. * 需要等加载过 qq 的 bridge 脚本之后
  70. * 再去初始化分享组件
  71. */
  72. script.onload = function () {
  73. cb && cb();
  74. };
  75. document.body.appendChild(script);
  76. }
  77. /**
  78. * UC浏览器分享
  79. * @method ucShare
  80. */
  81. function ucShare(config) {
  82. // ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
  83. // 关于platform
  84. // ios: kWeixin || kWeixinFriend;
  85. // android: WechatFriends || WechatTimeline
  86. // uc 分享会直接使用截图
  87. var platform = '';
  88. var shareInfo = null;
  89. // 指定了分享类型
  90. if (config.type) {
  91. if (os == 2) {
  92. platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
  93. } else if (os == 1) {
  94. platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
  95. }
  96. }
  97. shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
  98. // android
  99. if (window.ucweb) {
  100. ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
  101. return;
  102. }
  103. if (window.ucbrowser) {
  104. ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
  105. return;
  106. }
  107. }
  108. /**
  109. * qq 浏览器分享函数
  110. * @method qqShare
  111. */
  112. function qqShare(config) {
  113. var type = config.type;
  114. //微信好友 1, 微信朋友圈 8
  115. type = type ? ((type == 1) ? 8 : 1) : '';
  116. var share = function () {
  117. var shareInfo = {
  118. 'url': config.url,
  119. 'title': config.title,
  120. 'description': config.desc,
  121. 'img_url': config.img,
  122. 'img_title': config.title,
  123. 'to_app': type,
  124. 'cus_txt': ''
  125. };
  126. if (window.browser) {
  127. browser.app && browser.app.share(shareInfo);
  128. } else if (window.qb) {
  129. qb.share && qb.share(shareInfo);
  130. }
  131. };
  132. if (qqBridgeLoaded) {
  133. share();
  134. } else {
  135. loadqqApi(share);
  136. }
  137. }
  138. /**
  139. * 对外暴露的接口函数
  140. * @method mShare
  141. * @param {Object} config 配置对象
  142. */
  143. function mShare(config) {
  144. this.config = config;
  145. this.init = function (type) {
  146. if (typeof type != 'undefined') this.config.type = type;
  147. try {
  148. if (uc) {
  149. ucShare(this.config);
  150. } else if (qq && !wx) {
  151. qqShare(this.config);
  152. }
  153. } catch (e) {}
  154. }
  155. }
  156. // 预加载 qq bridge
  157. loadqqApi(function () {
  158. qqBridgeLoaded = true;
  159. });
  160. if (typeof module === 'object' && module.exports) {
  161. module.exports = mShare;
  162. } else {
  163. window.mShare = mShare;
  164. }

好了,这样就可以直接唤起微信进行分享啦

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

calc的使用

seo达人

       有张页面是要求要一屏展示,我想到了媒体查询,也想到了vw和vh。我先用vw和vh来布局,分为上,中,下三部分。每块计算宽高,vw和vh可以实现响应式布局,所以就用上了。但媒体查询用上了却发现在这边不好用,这时使用上了calc()属性。因为上一个人引入了video.js并加上id:#myVideo ,这边也做相应的计算处理。



注意:要有空格



calc()能计算的计算表达式里,在加号(“+”)和减号(“-”)两边要留空格,而乘号(“”)和除号(“”)没有这个要求。 



.video_rel {

        height: calc(100% - 66px);

        width: calc(51.3% - 60px);

 

        #myVideo {

            width: 100%;

            height: 100%;

        }

    }

CSS3引入了一个有用的功能,就是calc()函数。在指定元素高度或宽度时,你可以基于计算设定,而不是简单的使用固定数值。这种功能在自适应网页布局设计中格外有用——针对不同尺寸的设备,你需要动态的调整元素的大小,产生适合屏幕大小的不同布局。

 

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

六、HTTP协议中的缓存

seo达人

一、缓存简介

缓存无处不在,浏览器端的缓存、服务器端的缓存、代理服务器的缓存、对象缓存、数据库也有缓存……HTTP中具有缓存功能的是浏览器缓存和代理服务器缓存。下面说一下缓存的优点:



1.减少冗余的数据传输,节省了传输时间



2.减少服务器的负担,大大提高了网站的性能



3.加快了客户端加载网页的速度



二、使用Fiddler如何查看缓存的Header

与缓存相关的内容放在Header中的Cache项里;Requests和Responses均是这样。如图:







三、缓存的新鲜度(通过什么方式判断其是否,如何刷新缓存)

Web服务器通过两种方式判断浏览器缓存是否:



(1)浏览器把缓存文件的最后修改时间通过Header“If-Modified-Since”项传递给Web服务器。



(2)浏览器把缓存文件的ETag通过Header“If-None-Match”项传递给Web服务器。



简单描述一下,浏览器端想请求一个文档,它首先检查本地缓存,发现存在这个文档的缓存,获取缓存文档的最后修改时间,发送请求,将值放在Header中的“If-Modified-Since”项传递给Web服务器。Web服务器接收到请求后,将服务器的文档修改时间(Last-Modified)与HTTP请求中的header中的“If-Modified-Since”值相比较,有两种情况,如下面图示:



1.缓存有效:







2.缓存无效:







截图举例:







上面说的是If-Modified-Since值对比的方式;下面说一下ETa'g;



四、ETag

ETag(Entity Tag):实体标签;是根据实体内容生成的一段hash字符串(类似MD5之后的结果),可以用来标识资源的状态(当资源发送变化时,ETag也会跟着改变);ETag是Web服务端产生的,然后通过response响应给浏览器。使用ETag,主要解决Last-Modified无法解决的情况:



(1.某些服务器不能得到文件的If-Modified-Since来判断文件是否更新;



(2.某些文件修改非常频繁,以小于秒的单元进行修改,而Last-Modified最单元为秒;



(3.有些文件最后修改时间变化了,但是内容并没有变化,所以我们不希望浏览器以为文件已变化了;







五、与缓存相关的header

字段名称 释义

Cache-Control:max-age=0 以秒为单位

If-Modified-Since:Fri, 11 Jan 2019 01:55:04 GMT 缓存文件的最后修改时间

If-None-Match:W/"5c37f778-732" 缓存文件的Etag的值

Cache-Control:no-cache 不使用缓存

Pragma:no-cache 不使用缓存

Cache-Control:public 响应被缓存,可以共享与多用户

Cache-Control:private 响应只能私有缓存,不可共享

Cache-Control:no-store 绝对禁止缓存(机密、敏感文件)

Cache-Control:max-age=60 60秒后缓存过期(相对时间)

Date:Fri, 11 Jan 2019 01:55:04 GMT 当前发送时间

Expires:Fri, 11 Jan 2019 01:55:04 GMT 缓存过期时间设置(绝对时间)

Last-Modified:Fri, 11 Jan 2019 01:55:04 GMT 服务器端文件的最后修改时间

Etag:W/"5c37f778-732" 服务器端文件的Etag值

六、关于缓存的常识

1.如何让浏览器不使用缓存?



答:【Ctrl+F5】快捷键强制刷新浏览器,让浏览器不使用缓存;此时Fiddler抓包所看到的请求Header中都会带有Cache-Control:no-cache;







2.如何让浏览器直接使用缓存,不请求服务器进行缓存验证?



答:第一次访问与第二次访问同一个网页;(注意:第二次访问时,输入网址,直接回车)浏览器会直接使用有效的缓存,而不会发生HTTP请求去服务器验证缓存,这种情况称之为缓存命中;



使用Fiddler抓包,现象:第一次访问,有70多个Session;第二次访问,仅40多个请求;



3.浏览器均可在设置中设置不使用缓存;



4.公有缓存、私有缓存的区别:一个可以多个不同的客户端使用,一个只可唯一的客户端使用;


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

JS中钩子函数与回调函数的区别

seo达人

测试代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

    <button id="btn">按钮</button>

    <script>

        let btn = document.getElementById("btn");

        btn.onclick = () => { // 钩子函数

            console.log('我是钩子函数');

        }

 

        btn.addEventListener("click",() =>{ // 回调函数

            console.log('我是回调函数');

        });

        // 这是给btn绑定了一个监听器,后面那个函数是它的回调函数,

        // 因为消息捕获的过程我们并不能参与,而在捕获执行完毕的时候,

        // 回调函数才会执行,我们可以把对消息的处理写在回调函数里。

    </script>

</body>

</html>

点击按钮后代码输出如下:







回调函数和钩子函数的区别根本上是

钩子函数在捕获消息的第一时间就执行,而回调函数是捕获结束时,最后一个被执行的。



什么是钩子函数

一般认为,钩子函数就是回调函数的一种,其实还是有差异的,差异地方就是:触发的时机不同。

钩子(Hook)概念源于Windows的消息处理机制,通过设置钩子,应用程序对所有消息事件进行拦截,然后执行钩子函数。 



什么是回调函数

回调函数其实是调用者将回调函数的指针传递给了调用函数,当调用函数执行完毕后,通过函数指针来调用回调函数。



钩子函数和回调函数都是事件处理函数


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

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档