logo头像

不忘初心 方得始终

静态服务器搭建及前端知识点

本文于1149天之前发表,文中内容可能已经过时。

引言

​ 虽然是做后台开发,但是很多时候自己也兼顾了前台,并不是所有的项目都是前后台分离开发,所以在开发期间自己也总结和学习了前端了一些小知识,在这里进行总结,以便自己温习。



NodeJS搭建静态资源服务器

Node.js只有浅显的认识,但是有时候又要自己搭建静态服务器进行测试。搭建静态服务器需要以下几个步骤:

  1. 下载node.js,进入node.js官网下载http://nodejs.cn对应的版本。
  2. 安装node.js。
  3. 启动node.js,在命令行输入命令安装需要的模块,依次执行命令。
1
2
3
npm install express
npm install request
npm install http-server

简单的静态服务器

新建server.js,内容为

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var http = require("http");
var request = require('request');
var app = express();
//启动端口为81
var port = process.env.PORT||81;

//静态资源存放的路径
app.use(express.static('E:/SmallTools/StaticServer'));
http.createServer(app).listen(port);
console.log("服务启动成功");


启动server.js



通过http请求访问a.html页面



可以访问说明搭建成功!

带反向代理静态服务器搭建

新建server-kaow-school.js,内容为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var express = require('express');
var http = require("http");
var https = require('https');
var request = require('request');
var app = express();
//app.disable('x-powered-by');
var port = process.env.PORT||81;

app.use(express.static('E:/SmallTools/StaticServer'));


function proxy(app,route,remoteDomain){
app.use(route,function(req,res){
var url = remoteDomain+req.url;
req.pipe(request(url)).pipe(res);
});
}

//10.9.4.215:8380 测试服务器ip
proxy(app,'/163','http://www.163.com');
//proxy(app,'/MonitorService/','http://10.9.4.215:9192/MonitorService/');

http.createServer(app).listen(port);
console.log("服务器启动完成,请使用locahost:"+port+"访问");

启动server-kaow-school.js



通过http请求访问b.html页面



访问/163



可以访问说明带反向代理的静态服务器搭建成功!

前端知识点



JS字符串截取空白trim()的原型实现

1
2
3
String.prototype.trim = function(){
return this.replace( /(^\s*)|(\s*$)/g , ''");
}

JS屏蔽键盘按键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" onmouseup=document.selection.empty() oncopy=document.selection.empty() onselect=document.selection.empty()></body> 
讲上面红色显示的插入到网页中就可以实现鼠标右击无效
禁止选择 onselectstart="return false"
禁止拖放 ondragstart="return false"
禁止拷贝 ncopy=document.selection.empty()
禁止保存(放在head里面) <noscript><iframe src="*.htm"></iframe></noscript>
禁止粘贴 <input type=text onpaste="return false">
关闭输入法 <input style="ime-mode:disabled">
屏蔽鼠标右键 function document.oncontextmenu(){event.returnValue=false;}
屏蔽F1帮助 function window.onhelp(){return false}

屏蔽其他键
function document.onkeydown() {
if ((window.event.altKey)&&
((window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←
(window.event.keyCode==39))) //屏蔽 Alt+ 方向键 → {
alert("不准你使用ALT+方向键前进或后退网页!");
event.returnValue=false;
}
/* 注:这还不是真正地屏蔽 Alt+ 方向键,
因为 Alt+ 方向键弹出警告框时,按住 Alt 键不放,
用鼠标点掉警告框,这种屏蔽方法就失效了。以后若
有哪位高手有真正屏蔽 Alt 键的方法,请告知。*/
if ((event.keyCode==8) || //屏蔽退格删除键
(event.keyCode==116)|| //屏蔽 F5 刷新键
(event.ctrlKey && event.keyCode==82)){ //Ctrl + R
event.keyCode=0;
event.returnValue=false;
}
屏蔽F11 if (event.keyCode==122){event.keyCode=0;event.returnValue=false;}
屏蔽 Ctrl+n if (event.ctrlKey && event.keyCode==78) event.returnValue=false;
if (event.shiftKey && event.keyCode==121) event.returnValue=false; //屏蔽 shift+F10
if (window.event.srcElement.tagName == "A" && window.event.shiftKey)
window.event.returnValue = false; //屏蔽 shift 加鼠标左键新开一网页
if ((window.event.altKey)&&(window.event.keyCode==115)){ //屏蔽Alt+F4
window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
return false;
}
}

屏蔽打印:
<style>
@media print{
* {display:none}
}
</style>

HTML之间传值(通过解析url)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var hrefInfo = getUrlVars(window.location.href); // 得到参数信息
if (hrefInfo.logId && hrefInfo.logId != "undefined") {
fillData(hrefInfo.logId);
logId = hrefInfo.logId;
} else {

}

//解析url中的参数
function getUrlVars(hrf) {
var vars = [], hash;
var locationHref = !hrf ? window.location.href : hrf;
locationHref = locationHref.replace(/#/g, "");
if (locationHref.indexOf('%') > 0) {
locationHref = unescape(locationHref);
}
var hashes = locationHref.slice(locationHref.indexOf('?') + 1).split('&');
for ( var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

Jquery获取radio,checkbox

1
2
3
4
5
6
7
8
9
10
11
12
//获取radio的id                          
$("input[name='r']:checked").attr("id");
//获得checkbox数目
$("input[name='c']:checked").length;
//遍历checkbox
$("input[name='c']:check").eq(i).attr("id");
//全选checkbox
$("input[name='c']:checkbox").attr("checked","true");
//获取选中的checkbox
$("input[name='c']:checked").map(function(){return $(this).val();}).get().join(",");
//获取下拉框选中的id
$("#s option:selected").attr("value");

Jquery页面查询(数据量大时禁用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function search(){
var nameSearch = $("#itemName").val(); //搜索框ID
var tableObj = $("#itemList tr:gt(0)"); // table的ID
if(nameSearch.trim()!=""){
tableObj.hide();
tableObj.each(function(){
var tr = $(this);
var fuHe = tr.children(":eq(0)").html();
if(fuHe.indexOf(nameSearch)==0){
tr.show();
}
});
}else{
tableObj.show();
}
}

Jquery 回车(Enter)移到下一个输入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function () {
$('input:text:first').focus();
$('input:text').bind("keydown", function (e) {
if (e.which == 13) { //Enter key
e.preventDefault(); //to skip default behaviour of enter key
var nextinput = $('input:text')[$('input:text').index(this) + 1];
if (nextinput != undefined) {
nextinput.focus();
} else {
alert("没有下一个输入框!");
}
}
});
});

JS,Jquery获取各种屏幕的宽度和高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//Javascript:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

//JQuery:
$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

Ajax,Get时请求异步缓存问题

用Ajax的Get方式请求同一个地址获取数据时,经常碰到回调函数成功执行,前台又有数据的情况,但是无法请求到后台获得最新的数据。原因是ajax存在异步缓存的问题。

因为ajax本身自带有实时异步请求的功能,而IE缓存导致请求时不会请求后台,会直接读取缓存的数据。

解决办法:

  1. ajax get请求时比较简单 只需将cache设置为false就好。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $.ajax({  
    type: 'get', //get请求时
    url: '....',
    cache: false, //不缓存
    data: { },
    success: function (result) {
    //
    }
    });
  2. 访问就在URL后面加上 URL?+new Date();[总之就是使每次访问的URL字符串不一样的]

    设计WEB页面的时候 也应该遵守这个原则,因为请求同一个地址会直接读取缓存,所以可以在参数中加一个随机数数 让每次参数不一样就好。

微信打赏

赞赏是不耍流氓的鼓励