左直拳的马桶_日用桶

我们有个项目，前端调用了第三方接口。为了避免跨域，所以使用nginx进行转发。近日第三方调整了安全策略，http转换成https，原本使用ip，现在也改成使用域名，所以nginx这里我们也需要改一下。如果后端服务器对 Host 头部有严格要求（例如必须是 gh.abc.com），则需要显式设置 Host 为后端服务器的域名。默认情况下，Nginx 会将客户端请求的 Host 头部（例如 10.26.40.24:9988）转发给后端服务器。主要是nginx的配置代码，都是抄过来的，东抄西抄，不知道具体含义。

前不久，我搞的单点登录页面发布到服务器以后，发现每次登录都要输入账号名和口令，非常不方便，没有出现今天已经十分常见的浏览器自动填充账号和口令的功能。

SSE（Server Sent Events），是一种服务器向浏览器发送消息的技术，基于http协议。WebSocket大家耳熟能详，是WEB中一种客户端和服务器采用长连接，可长时间保持通信通道的技术，不过它是双向的，服务器可以向客户端推送消息，客户端也同样可以向服务器发送消息。而SSE则是单向的，只能是服务器向客户端发送消息。

如果使用失真的尺寸，去设置网页中的DOM，则必然引起谬误。我上次就是，网页中使用了一幅背景图，然后设置了一些DOM漂浮在上面。我的笔记本电脑屏幕设置了缩放，结果总是发现DOM摆放的位置不对。调来调去，怎么调都不对，时间又很紧迫，差点崩溃。如果显示器的尺寸缩放，而不是100%的话，利用截屏软件截取屏幕中的区域，截取时读取到的区域尺寸，就会失真；如果使用这个尺寸去设置网页中的DOM，则Dom的尺寸也会跟着失真。

transform-origin 属性定义了一个元素在进行变换（如旋转、缩放、倾斜等）时的基准点或中心点。默认情况下，transform-origin 的值是 center，即变换围绕元素的中心点进行（元素就是旋转的dom，在本例子中，就是写着“封面”二字的div）。上面的例子，如果没有旋转，就是一个普通的，水平放置在照片右上角的块。至于为何要将right设为负数，可以想象一下如果不设为负数，这个div围绕自己的中心点顺时针旋转45度后是个啥样子。这里的旋转是顺时针方向，使 .ribbon 斜斜地放置。

有了nvm，可以在一台机器上同时安装多个版本的nodejs，然后指定使用某个版本。

在nginx中，将静态资源设为internal；然后将前端的静态资源地址改为指向后端，在后端的响应头部中写上静态资源地址。近期客户对我们项目做安全性测评，暴露出一些安全性问题，其中一个是有些静态页面（*.html）无须授权即可直接访问，里面的信息一览无遗，不安全。这些静态页面都是arcgis地图页面，依赖arcgis for js，没有办法做成一般意义上的动态页面。或者说，该项目是个老项目，目前只处于维护阶段，大规模改头换面不现实。

话说，我们系统有照相机和摄像头，可以产生照片和视频。通过nginx将照片和视频所在文件夹映射为虚拟目录，外部即可访问。，如果指定的图片不存在，则以“/photo/nophoto.jpg”代替。是照片和视频所在文件夹，后面一定要带个斜杠。如何映射（或曰，转发）呢？记得目录后面要加个斜杠“/"。

情况是这样，我在虚拟机上，使用docker跑前端，需要这个前端支持https，原http的话自动跳转到https。另外，前端部署使用了负载均衡，即使用了3个docker跑前端：1个入口，另外2个是前端，指向了同一份网站代码。现在https已经是标配了，http除了方便一点，没有什么好留恋的，最好的处理方式，不是同时支持两种协议，而是将http自动跳转到https。前面说到，“$server_name“ 在脚本中被赋值，但是”$host"没看到哪里有赋值，其实就是代表我们所访问的地址，无须赋值。

项目前端部署在docker。该前端有时会出现无法访问，重启docker容器后又可以。猜测是不是单个docker容器压力过大，就想引入负载均衡试试效果。

配置nginx支持https，其实也简单，搞个证书，然后修改下配置文件就好了。我以前一篇文章（）为例，做个记录。如前所述，我使用docker，部署了3个nginx。一个做负载均衡服务器，另外两个做应用。结构如下：那么，支持https，也是在负载均衡这里进行设置。

更奇怪的是，进一步调试，发现别的cookie都能顺利更新，唯独这个token不行。这代表该cookie无法被javascript操纵，既不能读取，更不能更改或删除，所以就无法被前端脚本所操作，只能是浏览器自己玩。cookie里的token还是旧的，这样的话，到后台请求资源，带上的token还是旧的，系统认为没有登录，于是退出，又回到了登录界面。鉴于“token”这个名字，差不多等于系统保留字，猜测是后台调用了其他系统返回所导致，覆盖了我们自己那个。于是将“token”改为“mytoken”，以进一步观察。

二者结合，就是报错情况中，为啥先跳转？302就是跳转，后面就是跳到登录页面。由于登录页面位于另一个单点登录，所以会报跨域问题。因此，本错误重点不是跨域，而是为啥会出现跳转。据分析，跳转是因为超时。请求数据过程中超时了，导致登录状态失效，因而出现跳转，跳到登录页。如图所示，这三个提示是连在一起的。所以，对于本错误，应把努力方向放在排查为何请求数据会超时上。这种错误，其实很容易被跨域这个字眼所误导。

但说到底，都要浏览器支持才行。以前这个calc()属于CSS3的东西，IE系列好像不支持。现在没有这个问题了。过去想实现类似这样的功能，我印象中要么用具体的像素值，要么用百分比。后者不同分辨率下有较大误差。使用calc()可以在页面内比较精确地控制对象的尺寸或位置。...

微信小程序和公众号，要求外链的页面或API必须使用https。https意味着需要证书，在测试阶段，很不方便，因此部署的测试站点都是http。于是尝试在现有的https站点中，用nginx转发请求到只有http的测试站点。方法众所周知，在nginx.conf中添加一个转发规则。 server { listen 80; server_name 服务器IP; 。。。 } server { listen 443 ssl; server

微信小程序纯粹是一个前端。微信小程序出来之后，对于普通用户来说，其实没有必要再装一个APP了。既节省时间又节省空间，登录还十分方便，无须注册账号密码一大坨，啰哩啰嗦；尤其是一些不怎么用的应用，装一个APP简直浪费，即使勉强装了也是很快卸载的命。所以说小程序越来越普及，大有取代APP之势。有必要了解一下微信小程序的开发。一、系统结构微信小程序应用总体结构分为前端和后端。前端注册在微信上，后端则由我们自己部署于互联网。运行时，前端向后端请求数据，当然也包括与微信进行通信。这个前端，就是我们所说的微信小程

本模式有3个要点：1）利用vue.js实现html封装进组件，让复用可以落地；2）jquery负责操作dom；3）js函数模拟面向对象中的类，运行时通过new方式创建对象，将dom标识符和业务数据作为参数传递，提高组件独立性，实现与调用页面解耦，且能够动态渲染。近期做的一个项目，使用的框架十分古怪。spring boot，但没有使用默认的thymeleaf，而是前后端分离，同时前后端代码却又放在同一个项目工程里。前端使用了vue.js，但与我之前接触到的vue项目很不一样。一般vue项目，除了一个首

目前在网页上播放大华摄像头视频，有如下2种途径：1）首选获取摄像头的hls协议地址，H5可直接播放2）获取摄像头rtsp协议地址，用ffmpeg转换成hls再播放目前播放视频流，一般是基于rtmp协议或hls协议。依我看，首选是hls，因为兼容性好，html5支持，缺点是有延迟。而rtmp实时性好，但是adobe的私家货，需要flash。众所周知，flash已经逐级不被主流浏览器所支持。之前国内也有个高手写了一个flv.js，可以在网页上无须通过flash而直接播放rtmp，但有限制，只支持H.264

nginX最大的用途，我认为是映射。

本文内容包括如下步骤：1、下载nginx安装包2、安装nginx3、运行nginx4、运行多个网站5、停止nginx一、下载nginx安装包到官网上下一个，地球人都知道。下载linux版的。稳妥一点，来个稳定版本。安装包很小， 1M多一点，虽然是个压缩包，但也足见nginx的短小精悍不是盖的。二、安装nginx1、解压首先解压。解压包纯粹用于安装，安装后就跟它没啥关系了，删掉即可。仿佛熬干了的药渣儿。2、安装进入安装包目录下，依次运行。cd nginx-1.20.1ls./

用npm run build发布vue前端，部署到服务器，发现有许多小图标出不来。这些图标都是特殊字符，采用CSS伪类（：before）设置。现在一律出不来，只显示一个空空的小方框，满页都是，仿佛嗷嗷待哺的小嘴巴。估计是npm缓存的问题。因为发布的时候，它出了警告。我上次也遇到同样的问题，但不记得我捣鼓了啥，最后一次发布时重建了缓存，结果就正常了。但今天发布了几轮，仍然从cache读取数据，都还是报什么路径找不到的问题。按照网上的教程，我应该清掉npm的cache。运行命令如下：npm clear

新版的谷歌浏览器，看来不欢迎表格标记（<table>）。我们有个项目，地图（arcgis for js 开发）嵌在一个<iframe>里，然后这个<iframe>放在<table>里，为的是定位方便。前几天还好地地，今天忽然发现地图里的气泡打不开，点击地图没有反应。就我的机器上的谷歌浏览器不行，火狐可以；而其他人机器的谷歌也可以。看谷歌浏览器版本，89，我的是最新的，估计是浏览器问题了。但问题是，同样的代码，10天还是可以的。究竟是什么导致了这个问题呢？多

VUE的基本组成单元，我看应该是组件。用VUE开发前端项目，就是开发一个个组件，然后搭积木一样，将项目搭建出来。组件包含在页面，或者是更大的组件里面。在这里，组件与页面的界限，好像并不明显。事实上，对于单页应用，只有一个页面。组件的好处，一是可以加强复用；二是能够将特定功能封装，利于调用；三是由于职责分明，组件高内聚，组件间低耦合，利于系统功能的优化、扩展和维护。好处多多。开发组件，主要有2部分内容：1、组件内部逻辑2、外部接口由于我这两天弄的组件，里面包含有一个<iframe>，那么

html5的video标记，可以播放多种视频，什么mp4啦,mov啦，但不包括flv。flv与flash有关系，没前途，快完蛋了。但好像这个又跟直播啥的有关联（是一种直播协议），而且之前有一些视频文件是flv格式的，难道就傲娇的索性不支持了吗？那么html5中，如何播放flv文件？不要想着用flash来播放，霸主chrome已经不支持了。先说结论，可以播放，用bilili的开源项目flvjs就可以播放，不需要任何插件；但只能部分播放，不是所有的flv文件都能播放，只有H.264编码的才能播，什么vp6f

一、同站策略问题chrome自版本80之后，就出现了所谓同站策略问题。即，在A页面跳到B页面，如果chrome发现它们不是同一个站点的话，就不传cookie给B页面所在的站点。众所周知，原本cookie是会附在浏览器到服务器的每个请求（request）里的，这是浏览器自动完成的，现在好了，chrome分情况，可能不给你做这个工作。这样的后果是什么呢？就是有些功能以前没问题的，现在不行了。拿我们来说，原本我们有些WEB项目，会用iframe将其他项目的嵌进去，看上去就好像一个系统一样，这叫界面集成吧，很

我根据个人理解描述一下：一套程序在多种终端设备展示，页面布局有2种：自适应布局和响应式布局。这二者有啥区别呢？自适应布局，就是页面在多种终端设备，不同分辨率下，能够正常展示，不会出现错位，严重变形等，但页面布局不变。而响应式布局，则在不同终端、不同分辨率下，页面布局、元素呈现的先后顺序可能会有所变化。这很容易理解，一个在PC中展示的页面，如果布局不变，完全照搬到手机端展示，效果肯定不会好，同时很有可能给人一种感觉，觉得这就是一种老古董，完全不是移动互联时代的产物。自适应布局，主要就是调整一下CSS而

krpano是一个全景云图框架。可以用来处理全景照片，自动生成网页，实现全景浏览、VR浏览。它主要是一个JS框架，居于XML配置文件，可以进行各种配置或二次开发，实现各种炫酷效果。我感觉利用krpano可以轻易实现各种实景漫游、三维展示效果。当今世界疫情严重，搞在线博物馆或在线展览馆有实际意义；对于房屋中介，在线展示房屋单位估计也是行业标配。演示地址演示地址这2天所做的项目有类似要求，我也初步体验了一下，记录心得如下：一、处理全景照片一张全景照片，要用krpano展示的话，先用它提供的工具处理

上篇文章说道，前段时间忙里偷闲，试了一下vue，搞了个小demo作为练习。原本以为很简单，但实际上耗费时间超出我的想象。如果有客观原因，是vue有自己的私货，另外一个就是缺乏完整的示例，帮助文档搞成手册形式，例子很少，即使有也是支离破碎。再就是所谓免费开源的东西，内容和版本都有点随心所欲，很容易就不被支持，玩似的。闲话休提。先给出demo的样子。demo很简单，就2个页面，再加一个弹窗，但麻雀虽小，demo里也包含了母版页，部件，路由，以及使用了jquery和国产界面框架layUI。一、成果1、首页

这段时间忙里偷闲，见缝插针，试验了一下Vue。demo只有2个页面，一个弹出窗口，如下：一、成果1、首页底部点击【Test】出次页，点击【About】弹出关于。2、次页3、弹出窗口二、感受这个demo里面，有部件，有路由，有JSON读取并展示，有集成第三方框架layUI，等等，麻雀虽小，脏腑却也差不多齐全。一路摸索，不少感慨。1、学习成本老实说，学习成本并不低，出乎我意料。据说react完全抛弃了HTML，另起炉灶，独辟蹊径，完全采用JS来书写dom，所以你要用react的话，相当于

前段时间我们搞了个研究和测试性质的cesium项目，基本都是前端的东西。也就是说，主要就是一些js。于是想到用gulp待项目进行发布。据说当今最热门的发布工具室webpack，其次是gulp。但webpack适合SPA，单页应用，而gulp适合传统的多页系统。我们项目非SPA，因此选用gulp。gulp，就是一个项目发布工具，作用我看无非主要就是压缩js\css\html，然后还可以给文件加上版本号。压缩可以起到减少文件尺寸，节约带宽，加快加载，同时有一定保密作用；而加上版本号，则可以使浏览器缓存失效，避

web中请求远程图片或json出现跨域问题（调试时浏览器出现类似 cross orgin等字眼）应当怎么处理呢？应当设置存放图片和数据的远程服务器，而不是捣鼓我们本身这个网站，捣鼓我们这些运行在浏览器的JS。浏览器默认就是支持跨域请求的，只不过当浏览器发现服务器返回的白名单中没有咱们网站，就强迫报错而已。浏览器是个很死板的东东，同源策略也是它的强迫症。那么，怎么设置服务器呢？1、IIS如果服务器的web服务器软件是IIS，那么在网站或网站项目的根目录下设置一下web.config:<con

效果如图：蓝色背景为渐变透明，只截了前半截。代码如下：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>恭喜发财</title><style>.tit{ position:fixed; left:20px; top:

web项目可分为单页应用 和 多页应用。单页应用，就是只有一个页面，其他内容，估计就是动态加载，用从加载其他页面片段 + 请求后台 这种方式来完成。这么一说，我之前做的，其实都是多页应用。相比之下，单页应用的优缺点单页应用的优势是什么呢？1、页面切换非常快，不会出现白屏，还可以作出过渡效果2、公用的js和css一次性加载，不浪费3、良好的前后端分离，服务器端只管响应数据请求，不用关心页面渲染，压力小，API重用性高缺点呢？1、首次加载慢。不难理解，这么多东西要一下子加载，当然慢了。加载

IE是最恶心人的一款浏览器。但预计在2020年，我们弄的那些个WEB系统还是要兼容它。这种老而不，好多CSS属性都不支持。因此，在开发过程中，要照顾照顾它。下面以css一个定位属性sticky为例，介绍如何在IE浏览器中也能适应，不至于走样或者避免走样太多。sticky可以起到“动态固定”等的效果，但IE不支持。CSS 定位详解查询是否支持stickychromeIE怎么办呢？...

这个不算啥新奇吧？但还是记录一下。这个问题应该这么看。1、首先网站要支持.MOV格式文件就是说，网站要能识别.MOV格式文件。<mimeMap fileExtension=".mov" mimeType="video/quicktime" />如何识别？设置MIME类型。以IIS为例。除了可以在IIS界面上直接设置，还可以在项目的web.config里设置。给个完整的例子...

CSS定位，谁不知道，position咯。position:relative，相对定位；position:absolute，绝对定位，谁人不知？惭愧，我还真不知。一直以来，我都认为absolute是相对于屏幕的位置的定位，其实不是，absolute仍然是一种相对定位，相对于父元素的定位。fixed才是一般意义上的绝对定位（但其实也是相对定位，只不过是相对于视口ViewPort罢了）。pos...

IE下，同名不同域的COOKIE有机会变成紊乱。例如：HttpCookie cookie = Request.Cookies[_CookieSSO];，得到的COOKIE可能会吓你一跳，本来是多值的一个COOKIE，里面只有一个值，并且这个值可能是N年前设置的，你都不知道它从哪来的。将COOKIE清空或删除相关的COOKIE就一点问题没有了。但FF就没见

网页开头声明DOCTYPE为的情况下，文本框的实际高度会比设定值大一些，大约有6px的差距。比如说，一个文本框和一个按钮放一起，排一行，如果要大家看上去高度一致，按钮height=34px,那么文本框height=28px。高度不一致 为什么会这样？不知道。如果将这个DOCTYPE声明去掉，高度立刻恢复正常：

俺根据经验和网上资料写的。

<br />像一堆标签这种东西在页面上如何显示？不做特殊处理，很有可能有些标签会从中断开，换行，比如说，两个字的标签，会出现头一个字在上一行末尾，而另一个字出现在下一行的开头。<br /><br /><br /><span>君住长江头</span><br /><br /><br />对付这种情况，应该用 style="white-space:nowrap;"<br /><span style="white-space:nowrap;">君住长江头</span><span style="white-spa