20160610
|
|
Hoxy是一个用Node编写的完全免费、开源的Http代理软件,类似Charles和Fiddler。 它有一下功能:
Hoxy是客户端和服务器端之间的一个代理工具,可以在请求或者响应阶段做任何处理。配置代理后,客户端发送的请求将经历一下五个阶段
1234567 time ==>-----------------------server: 3-------------/-\-------hoxy: 2 4-----------/-----\-----client: 1 5
1.客户端发送请求.
2.Hoxy拦截并处理请求.
3.服务器端收到请求并发送响应数据.
4.Hoxy拦截响应并处理.
5.客户端收到请求.
下面通过几个例子来了解下hoxy的使用
|
|
现在你可以直接打开浏览器直接访问http://localhost:8080,或者配置代理地址为"你的ip:8080",然后访问任意网页,即可看到"hello world!”
假如只是想查看请求内容,不做任何处理,只需要将resp相关行注释掉即可。
在请求阶段修改了响应内容之后,hoxy将不会再向服务器发送请求,直接使用修改后的内容发送给客户端。
|
|
|
|
|
|
关于https和ssl证书,可以参考
在这里我们使用openssl工具创建证书
创建https代理服务器
配置好代理访问https://www.baidu.com,将提示改网站证书不可信。
这里需要我们先信任刚刚制作的证书“my-private-root-ca.crt.pem”,之后就可以正常访问了。。
可以结合示例4,匹配某一个地址就发送证书给浏览器,就可以像fiddle或charles一样监控手机的https请求了。
|
|
在项目开发过程中,我们常把页面拆分成一个个小组件,每个组件由css、模板、js组成。
一般情况下,三个部分我们分别写在不同的文件中,但是假如页面有很多小组件,每个组件都拆分成三个文件,最终就会产生大量的小文件,不便于管理。
这时我们通过将组件的三个部门写在同一个文件来避免多个小文件,并且每个组件一个文件也更加直观。
参考webpack和browserify打包单文件组件和fis3-parser-vue
|
|
文件weight/app.vue
文件index.html
|
|
|
|
执行 fis3 release -d output,即可看到文件output/weight/app.js
但是”vueify-insert-css”是什么鬼?
通过浏览器打开查看,会提示”mod.js:65 Uncaught Error: Cannot find module vueify-insert-css
“
在项目中搜索 vueify-insert-css,会发现fis3-parser-vue中使用了模块vueify-insert-css,打开项目,就一个文件
稍微改造一下就可以了
放在js/base目录,html中直接引入,重新打包,ok
|
|
在做一些页面时,可能要求页面内容根据页面宽度自动调整文字大小。例如某元素p字体大小在屏幕宽度320px时为14px,其他宽度自动等比例缩放。
开始之前,需要了解一些单位
使用媒体选择,根据浏览器分辨率不同自动设置根节点的字体大小(间隔40px)
可以通过less或者css简化媒体选择部分
|
|
1vm代表宽度的1%,假如给元素指定fontsize的单位是vm时,页面宽度320px时,1vm代表3.2px,640px时代表6.4px,元素内容的字体大小就会自动改变;
css3增加了calc属性,例如
那么是否可以通过calc根据页面宽度计算根节点字体大小呢?calc中模仿方案1,可得如下代码
到底可以不可以呢?经测试,该方法行不动!!!至少上面的写法不可行!
为什么呢?100%页面宽度 / 320 * 10就是具体要的字体大小啊?
为什么呢?
答案: font-size的calc的100%不是代表元素宽度的,而是代表字体大小!!!!!就像font-size:100% 一样;