博客 (298)

当使用在线编辑器编辑一篇文章(或从 Word 复制)后,会得到包含 HTML 标签的字符串内容,可以直接将它输出到页面上而不需要进行 HTML 编码。

但是,当我们需要改变图片大小时,我们发现有些图片的尺寸是直接使用 style 属性固定的,除了用 JS 进行后期处理,我们可以在服务端对 <img /> 进行修正。

这个场景会在小程序开发的时候遇到。

网上一般使用正则表达式直接将 <img 替换成 <img style="max-width: 100%; height: auto;" ,缺点是如果该 <img /> 本身就带有 style 属性,那么会出现一个标签两个 style,很多情况导致这两个样式同时失效,所以我们应针对有 style 和无 style 分别处理。

// 把 <img src="a.jpg" style="display: block;" /> 替换成 <img src="a.jpg" style="display: block;;max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+[^>]*style\s*\=\s*['"][^'"]*)(['"])/gi, '$1;max-width:100%;height:auto;$2');

// 把 <img src="b.jpg" /> 替换成 <img src="b.jpg" style="max-width:100%;height:auto;" />
Content = Content.replace(/(\<img\s+((?!style).)+?)(\/?>)/gi, '$1 style="max-width:100%;height:auto;" $3');

复制以上代码时,半角空格可能会变成全角空格,请注意修正。

当有 style 时,我们将 max-width: 100%; height: auto;追加在原样式之后,以重写原样式。这里没有直接判断原样式是否以 ; 结尾,而是直接追加 ;,这并不会影响实现展示效果。

在判断没有 style 用到正则表达式的“断言”,参:https://blog.csdn.net/xuyangxinlei/article/details/81359366

延伸阅读:C# 用 HtmlAgilityPack 给 HTML 节点加上 style

xoyozo 6 年前
6,022

2019/2/16 补充:参见 JavaScript 中的 TruthyFalsy

使用以下代码对字符串 s 进行判断:

var s = null;
if (s) {
    console.log('true');
} else {
    console.log('false');
}

测试当 s 为不同值时的结果如下:

s 的值if(s) 的结果
s = null;false
s = undefined;false
s = '';false
s = "";false
s = 0;false
s = 1;
true
s = 2;
true
s = -1;
true
s = '0';
true
s= ' ';true

结论:

s 未定义或未赋值时,结果为 false

s 为字符串类型时,长度为 0 即 false,长度大于 0 即 true

s 为数字类型时,等于 0 为 false,不等于 0 为 true


如果判断 s 的长度:

var s = null;
if (s.length > 0) {
    console.log('true');
} else {
    console.log('false');
}

那么会有以下结果:

s 的值if(s.length > 0) 的结果
s = null;Uncaught TypeError
s = undefined;Uncaught TypeError
s = '';false
s = "";false
s = 0;false
s = 1;
false
s = 2;
false
s = -1;
false
s = '0';
true
s= ' ';true

结论:

s 未定义或未赋值时,异常;

s 为字符串类型时,长度为 0 即 false,长度大于 0 即 true

s 为数字类型时,永远为 false

这样的话,if(s.length > 0) 等同于 if(s.length)


综上所述,判断一个字符串是否“有值且长度大于 0 ”,可以这样写:

var s = null;
if (s && s.length) {
    console.log('true');
} else {
    console.log('false');
}

相反,是否“无值或长度为 0”,可以这样写:

var s = null;
if (!s || !s.length) {
    console.log('true');
} else {
    console.log('false');
}

当然,如果要将不为 0 的数字类型也视为“有值”,只要 if(s) 或 if(!s) 即可。


xoyozo 6 年前
8,508

一、显示信息的命令

console.log("normal");           // 用于输出普通信息
console.info("information");     // 用于输出提示性信息
console.error("error");          // 用于输出错误信息
console.warn("warn");            // 用于输出警示信息

 

二、点位符:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o);

console.log("%s","string");                 //字符(%s)
console.log("%d年%d月%d日",2016,8,29);       //整数(%d或%i)
console.log("圆周率是%f",3.1415926);         //浮点数(%f)
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
dog.sex = "母狗";
console.log("%o",dog);                      //对象(%o)


 

三、信息分组 (console.group(),console.groupEnd())

console.group("第一组信息");
    console.log("第一组第一条:我的博客");
    console.log("第一组第二条:CSDN");
console.groupEnd();

console.group("第二组信息");
    console.log("第二组第一条:程序爱好者QQ群");
    console.log("第二组第二条:欢迎你加入");
console.groupEnd();

 

 

四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)

var info = {
    name : "Alan",
    age : "27",
    grilFriend : "nothing",
    getName : function(){
        return this.name;
    }
}
console.dir(info);


 

五、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)

var node = document.getElementById("info");
node.innerHTML += "<p>追加的元素显示吗</p>";
console.dirxml(node);

 

六、判断变量是否是真 (console.assert()用来判断一个表达式或变量是否为真,只有表达式为false时,才输出一条相应作息,并且抛出一个异常)

var testObj = false;
console.assert(testObj, '当testObj为false时才输出!');

 

七、计时功能 (console.time()和console.timeEnd(),用来显示代码的运行时间)

console.time("控制台计时器");
for(var i = 0; i < 10000; i++){
    for(var j = 0; j < 10000; j++){}       
}
console.timeEnd("控制台计时器");

 

八、性能分析performance profile (就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()和console.proileEnd();) 

function All(){
    // alert(11);
    for(var i = 0; i < 10; i++){
        funcA(100);
    }
    funcB(1000);
}
function funcA(count){
    for(var i = 0; i < count; i++){};
}
function funcB(count){
    for(var i = 0; i < count; i++){};
}
console.profile("性能分析器");
All();
console.profileEnd();

详细的信息在chrome控制台里的"profile"选项里查看

 

九、console.count()统计代码被执行的次数

function myFunction(){
    console.count("myFunction 被执行的次数");
}
myFunction();       //myFunction 被执行的次数: 1
myFunction();       //myFunction 被执行的次数: 2
myFunction();       //myFunction 被执行的次数: 3


 

十、keys和values,要在浏览器里输入

 

 

十一、console.table表格显示方法

  var mytable = [
    {
        name: "Alan",
        sex : "man",
        age : "27"
    },
    {
        name: "Wu",
        sex : "gril",
        age : "28"
    },
    {
        name: "Tao",
        sex : "man and gril",
        age : "29"
    }
]
console.table(mytable);


 

十二、Chrome 控制台中原生支持类jQuery的选择器,也就是说你可以用$加上熟悉的css选择器来选择DOM节。

$("body");           //选择body节点

 

十三、copy通过此命令可以将在控制台获取到的内容复制到剪贴板

copy(document.body);                      //复制body
copy(document.getElementById("info"));    //复制某id元素的的节点

 

十四、$_命令返回最近一次表达式执行的结果,$0-$4代表了最近5个你选择过的DOM节点

 

 

十五、利用控制台输出文字,图片,以%c开头,后面的文字就打印的信息,后面一个参数就是样式属性;

console.log("请在邮件中注明%c 来自:console","font-size:16px;color:red;font-weight:bold;");

 


A
转自 AlanTao 6 年前
5,770

本文基于初期只开放微信小程序,后期向 iOS/Android/H5 等多终端开放的场景设计,且并不要求“登录即必须绑定手机号码”。如初期即同时多终端推出请参考此文


项目初期,微信小程序以 openid 作为用户的唯一标识,因此在其它平台也需要用微信来授权登录。但同一微信用户在小程序和 App 上使用微信授权登录后的 openid 并不相同,必须同时绑定到微信开放平台,通过 unionid 关联用户,作为用户的唯一标识。


xoyozo 7 年前
3,267

当我们用 ASP.NET Web API 作服务端接口时,如果客户端以 GET 方式请求的 URL 中,由于拼接错误导致“?”和“&”并列出现,会发生 400 Bad Request,那么需要在 IIS 中使用 URL 重写模块来纠正。

请求 URL 如:

http://www.abc.com/api/obj?&foo=bar

需要重写为:

http://www.abc.com/api/obj?foo=bar


打开 IIS 管理器中对应网站的 URL 重写

image.png


添加空白规则。

匹配的 URL 不包含域名,如上述 URL 则匹配的范围是:

api/obj

不包含我们要查找的字符串 ?&,所以此处模式只能匹配所有:

.*

又因为重定向路径中需要包含这部分,所以用括号包裹,即:

(.*)

image.png

继续添加条件匹配:

条件输入:{QUERY_STRING},表示匹配查询字符串,

匹配的部分是“?”后面的字符串:

&foo=bar

那么可以填写模式:

^\&.*

因为 & 后面的部分仍然需要使用,所以用括号包裹:

^\&(.*)

image.png

“操作”中选择类型“重定向”,URL 填写:

{R:1}?{C:1}

其中 {R:1} 指代 api/obj,{C:1} 指代 foo=bar

取消“附加查询字符串”前面的勾

重定向类型在测试时可以选择 302 或 307,没问题后选择 301。

image.png

完成。

最终我们可以在网站的配置文件 web.config 中看到:

<rewrite>
    <rules>
        <rule name="uni-app-h5-replace-q" stopProcessing="true">
            <match url="(.*)" />
            <conditions>
                <add input="{QUERY_STRING}" pattern="^\&amp;(.*)" />
            </conditions>
            <action type="Redirect" url="{R:1}?{C:1}" appendQueryString="false" redirectType="Temporary" />
        </rule>
    </rules>
</rewrite>

我们要把这段代码复制到开发环境源代码的 web.config 中,以免发布网站时将我们设置好的配置覆盖掉。

xoyozo 7 年前
9,394

TIM图片20181126142732.png

uni-app 的 input,当 type = "text" 时,设置 confirm-type = "next" 可以提供键盘的“下一项”,通过 @confirm 触发设置下一个文本框的焦点,即可实现只操作键盘即可完成表单填写。

我们以从 a 组件跳转到 b 组件为例:

<input v-model="a" type="text" confirm-type="next" @confirm="moveNext('b')" />

uni-app 的组件只有属性和事件,不提供方法,那么我们只能设置提供了 focus 属性的组件的焦点。

<input v-model="b" :focus="focusList['b']" />

moveNext() 方法实现:

moveNext(dom){
	this.focusList[dom] = true;
}

当然 focusList 必须先定义并初始化,否则设置 focus 为 true 将失效:

data() {
	return {
		a: '',
		b: '',
		focusList: {
			b: false
		}
	}
}

几个注意点:

  • confirm-type = "next" 仅支持微信小程序

  • “下一项”按钮效果是一次性的,使用一次后再次在 a 上触摸“下一项”将不再跳转到 b,即使在 moveNext() 中先设置为 false 再设置为 true 也没用

  • 其它组件也可以通过自带的方法实现跳转到带 focus 属性的组件(如在 picker 的 @change 中设置 this.focusList['b'] = true)

  • 限制于 confirm-type = "next" 只当 type = "text" 时有效,因此非文本键盘(如数字键盘)就不能提供“下一项”功能

  • textarea 组件的右下角始终是“换行”,由其右上角的“完成”按钮来实现“下一项”功能

  • textarea 组件在“下一项”跳转过程中,组件可能会被 tabBar 遮挡(几率很大)

xoyozo 7 年前
10,115

在学习和使用 ASP.NET Web API 之前,最好先对 RESTful 有所了解。它是一种软件架构风格、设计风格,而不是标准。


推荐视频教程:https://www.imooc.com/learn/811

讲师:会飞的鱼Xia

需时:2小时25分


REST API 测试工具:

在 Chrome 网上应用店中搜索:Restlet Client

或网站 https://client.restlet.com


>>> 资源路径

SCHEME :// HOST [ ":" PORT ] [ PATH [ "?" QUERY ]]

其中 PATH 中的资源名称应该使用复数名词,举例:

GET https://xoyozo.net/api/Articles/{id}

POST https://xoyozo.net/api/Articles


>>> HTTP verb(对应 CURD 操作):

方法功能ASP.NET Web API 接口返回类型(一般的)
GET取一个或多个资源T 或 IEnumerable<T>
POST增加一个资源T
PUT修改一个资源T
DELETE删除一个资源void
PATCH更新一个资源(资源的部分属性)
HEAD获取报头
OPTIONS查询服务器性能或资源相关选项和需求


>>> 过滤信息:

如分页、搜索等


>>> 常用状态码:

200
OK
指示请求已成功
201
Created
资源创建成功(常见用例是一个 PUT 请求的结果)
202
Accepted
该请求已被接收但尚未起作用。它是非承诺的,这意味着HTTP中没有办法稍后发送指示处理请求结果的异步响应。
204
No Content
成功 PUT(修改)或 DELETE(删除)一个资源后返回空内容(ASP.NET Web API 中将接口返回类型设置为 void 即可)
400
Bad Request
服务器无法理解请求(如必填项未填、内容超长、分页大小超限等),幂等
401
Unauthorized
未授权(如用户未登录时执行了须要登录才能执行的操作),通俗地讲,是服务器告诉你,“你没有通过身份验证 - 根本没有进行身份验证或验证不正确 - 但请重新进行身份验证并再试一次。”这是暂时的,服务器要求你在获得授权后再试一次。
403
Forbidden
服务器理解请求但拒绝授权(是永久禁止的并且与应用程序逻辑相关联(如不正确的密码、尝试删除其它用户发表的文章)、IP 被禁止等),通俗地讲,是服务器告诉你,“我很抱歉。我知道你是谁 - 我相信你说你是谁 - 但你只是没有权限访问此资源。”
404
Not Found
找不到请求的资源(指资源不存在,如果找到但无权访问则应返回 403)
405
Method Not Allowed
请求方法被禁用(HTTP 动词)
500
Internal Server Error
服务器遇到阻止它履行请求的意外情况(如数据库连接失败)
503
Service Unavailable
服务器尚未准备好处理请求(常见原因是服务器因维护或重载而停机,这是临时的,可用于在单线程处理事务时遇到被锁定时的响应,如抽奖活动、抢楼活动,防止因并发导致逻辑错误)


>> 错误处理:

C# 例:throw new HttpResponseException(HttpStatusCode.NotFound);

PHP 例:throw new Exception('文章不存在', 404);


>>> 返回结果:

JSON/XML

不要返回密码等机密字段


>>> 其它:

身份验证窗口(浏览器弹窗,类似 alert,非页面表单),明文传输,安全性不高,不建议使用。实现:

在 Headers 中添加 Authorization:Basic “用户名:密码”的 Base64 编码


xoyozo 7 年前
4,796
  1. 首先,手机打开【设置】-【更多设置】-【关于手机】-【版本信息】,触摸“软件版本号”7次。

  2. 返回【更多设置】底部出现【开发者选项】,打开后开启【USB 调试】。

  3. 使用数据线连接手机和电脑(注意必须使用数据线,而非一般充电宝附带的充电线,虽然插头类型是一样的),弹出“允许 USB 调试吗?”对话框,选择“确定”。

  4. 电脑上安装 vivo 手机助手,就可以管理手机了。手机端可以安装手机助手

  5. 如果需要连接 HBuilderX 进行安卓应用调试,需要从手机顶部下划,将“USB已连接”中的“管理文件”更改为“传输照片”。并使用 vivo 手机助手手动安装调试基座(控制台中会提示)。


xoyozo 7 年前
20,540

确定唯一凭证:

若项目仅提供微信端访问,那么使用微信的授权(即以微信 openid / unionid 作为唯一凭证)是一种体现注重用户体验的方式。如果项目需要应用到多个平台上,那么通过微信来授权变得不那么完美(譬如未安装微信客户端或平台不支持使用微信授权等)。因手机的使用率已明显高于电脑的使用率,再加上用户帐号实名认证的要求,以手机号码为作为帐号的唯一凭证是非常合理的。

 

登录唤起条件:

当用户打开需要登录授权的页面或触发需要登录授权才能执行的操作时。

 

场景实现:

平台

实现

微信网页/小程序

授权获取 openid / unionid

同时若未绑定手机号码则强制绑定(发送验证码的方式)

如果允许在微信上登录不同的用户帐号,那么需要提供【“手机号码 + 密码”登录】方式

手机 App

提供【“手机号码 + 密码”登录】

提供【第三方帐号登录】,登录后强制绑定手机号码

参“京东”等

PC 端浏览器网页

提供【“手机号码 + 密码”登录】

登录框可切换成【扫二维码登录】,登录后强制绑定手机号码

手机浏览器网页

提供【“手机号码 + 密码”登录】

如果提供【第三方帐号登录】,那么可能需要在网页上手动输入第三方帐号的用户名密码,而非跳转到第三方 App 上(视第三方开放平台)

 

l  【“手机号码 + 密码”登录】页面显示填写手机号码和密码框的表单,提供“忘记密码”、“短信验证码登录”、“手机快速注册”等功能。如果在可长期记住登录状态的场景中(如手机 App)也可取消密码,直接使用短信验证码登录。“手机快速注册”必须通过短信验证码实现实名认证。

l  【第三方帐号登录 / 扫二维码登录】App 中提供跳转相应第三方 App(如微信)授权登录,PC 端网页中提供微信扫二维码登录。登录获得 unionid,同时判断是否已经绑定过手机号码,若未绑则强制绑定,确保数据库中的每一条用户信息都有手机号码。

 

注:同一个微信帐号在不同的公众号和 App 中的 openid 不同,将这些公众号和 App 通过微信开放平台绑定后,同一个微信帐号的 unionid 是相同的,可用于判断同一用户。


流程图:

image.png

多平台用户登录模块设计.vsdx


各平台登录设计:

xoyozo 7 年前
5,301

MozillaWiki 中推荐了三种配置,分别是现代兼容性、中级兼容性(默认)和旧的向后兼容性。


现代兼容性
对于不需要向后兼容性的服务,以下参数提供更高级别的安全性。 此配置与 Windows 7,Edge,Opera 17,Safari 9,Android 5.0 和 Java 8 上的 Firefox 27,Chrome 30,IE 11 兼容。

listen 443 ssl http2;
ssl_protocols TLSv1.2;
ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;


中级兼容性(默认)
对于不需要与旧客户端(主要是 WinXP)兼容但仍需要支持各种客户端的服务,建议使用此配置。 它与 Firefox 1,Chrome 1,IE 7,Opera 5 和 Safari 1 兼容。(推荐)

listen 443 ssl http2;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS;


旧的向后兼容性
这是旧的密码组件,它主要工作在 Windows XP / IE6 中,如果不是特别需要,建议放弃此配置。

listen 443 ssl http2;
ssl_protocols TLSv1.2 TLSv1.1 TLSv1 SSLv3;
ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:DES-CBC3-SHA:HIGH:SEED:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!RSAPSK:!aDH:!aECDH:!EDH-DSS-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!SRP;


一般情况下,使用中级兼容性(默认)的配置即可启用 HTTP2,你还可以通过 mozilla 的 Server side TLS Tools 根据你的服务器进行详细配置。


F
转自 F2EX 7 年前
13,893