目录

一、Web 开发路线选择(HTML负责构建页面元素;JavaScript负责行为;CSS负责布局;web服务采用组件技术扩展处理业务层所有的数据计算,数据分析,数据库联结处理;文件/数据库。)... 2

二、HTML 表单操作(负责构建页面元素)... 4

由form表单来说说前后台数据之间的交互... 4

使用ajax和form表单两种方式上传文件,保存到项目根路径下的指定文件夹下... 4

表单验证... 4

将form表单的一些属性... 5

HTML 5中的本地存储概念... 8

三、Js(jquery解决兼容性问题,负责行为). 9

jQuery的流行很大程度上要归功于解决兼容性问题。... 9

jQuery加载一个html页面到指定的div里... 10

jquery load方法把一个页面载入到主页面的一个div中替换iframe. 10

两个html页面间如何传递数据... 11

jQuery 参考手册 - 选择器... 11

参考:如何做到HTML负责构建页面元素,JavaScript负责行为,CSS负责布局... 11

四、CSS负责布局... 11

五、数据存储与传输选择(json轻便性)... 11

六、web服务选择,采用组件技术扩展处理业务层... 12

apache 重量级的web服务器,访问方式是同步阻塞模式,访问更加稳定。一般动态请求要apache去做     12

nginx 轻量级的web服务器,异步非阻塞模式,速度快。nginx只适合静态和反向。需要性能的web 服务     13

嵌入式WEB服务器 thttpd、lighttpd、Simple HTTPD.. 15

thttpd - tiny/turbo/throttling HTTP server. 15

lighttpd - light footprint + httpd = LightTPD.. 16

SHTTPD - Simple HTTPD.. 17

不适宜投入生产使用嵌入式WEB服务器 Tinyhttpd、mini_httpd. 17

Tinyhttpd. 17

mini_httpd. 18

七、问题... 18

1、缓存问题... 18

2、html+jquery+ajax可以将表单数据存储到服务器的xml文件里吗... 18

3、写惯了 ASP,PHP,CGI的朋友,经常会不自觉的把 presentation layer 和 business layer 混在一起。     18

一、Web 开发路线选择(HTML负责构建页面元素;JavaScript负责行为;CSS负责布局;web服务采用组件技术扩展处理业务层所有的数据计算,数据分析,数据库联结处理;文件/数据库。) 

Web 开发路线1>>>采用了老的 CGI 方式,是一句一句输出,所以,编写和修改 HTML 非常不方便。在传统的 CGI中,每个请求都要启动一个新的进程。

Web 开发路线2>>>Servlet 用 Java 编写,Servlet 则没有图形界面,运行在服务器端。Servlet 是一个早期的不完善的产品,写 business layer 很好,写 presentation layer 就很臭,并且两层混杂。而在 Servlet 中,每个请求由一个轻量级的 Java 线程处理(而不是重量级的操作系统进程)。主要功能在于交互式地浏览和生成数据,生成动态Web内容。

这个过程为:

客户端发送请求至服务器端;

服务器将请求信息发送至 Servlet;

Servlet 生成响应内容并将其传给服务器。响应内容动态生成,通常取决于客户端的请求;

服务器将响应返回给客户端。

Java Servlet 通常情况下与使用 CGI(Common Gateway Interface,公共网关接口)实现的程序可以达到异曲同工的效果。

但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。

doPost() 方法

当一个客户通过 HTML 表单发出一个 HTTP POST 请求时,doPost() 方法被调用。与 POST 请求相关的参数作为一个单独的 HTTP 请求从浏览器发送到服务器。当需要修改服务器端的数据时,应该使用 doPost() 方法。

Servlet 能够直接和 Web服务器交互,而普通的 CGI 程序不能。Servlet 还能够在各个程序之间共享数据,使得数据库连接池之类的功能很容易实现。

Servlet 包

Java Servlet 是运行在带有支持 Java Servlet 规范的解释器的 web 服务器上的 Java 类。

Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间的中间层。

使用 Servlet,您可以收集来自网页表单的用户输入,呈现来自数据库或者其他源的记录,还可以动态创建网页。

Web 开发路线3>>>Java Server Pages(JSP)是一种实现普通静态HTML 和动态 HTML 混合编码的技术。在 JSP 中编写静态HTML 更加方便,不必再用 println语 句来输出每一行 HTML 代码。

根据 SUN 自己的推荐,JSP中应该仅仅存放与 presentation layer 有关的东西,也就是说,只放输出 HTML 网页的部分。而所有的数据计算,数据分析,数据库联结处理,统统是属于 business layer,应该放在 Java BEANS 中。通过 JSP 调用 Java BEANS,实现两层的整合。

总结:一个网络项目最少分三层:data layer(数据层),business layer(业务层),presentation layer(表现层)。当然也可以更复杂。

Servlet 用来写 business layer 是很强大的,但是对于写 presentation layer 就很不方便。

JSP 则主要是为了方便写 presentation layer 而设计的。jsp不要写 business layer理由有3点(1)如果出现大量用户点击,纯 SCRIPT 写业务business layer很快就到达了他的功能上限,而组件技术就能大幅度提高功能上限,加快执行速度。(2)如果想修改一个地方,经常会牵涉到十几页 code。(3)写文件权限问题。

business layer采用组件技术就只改组件就可以了并且可以提高功能上限和解决写文件权限问题。

根据 SUN 自己的推荐,JSP中应该仅仅存放与 presentation layer 有关的东西,也就是说,只放输出 HTML 网页的部分。而所有的数据计算,数据分析,数据库联结处理,统统是属于 business layer,应该放在 Java BEANS 中。通过 JSP 调用 Java BEANS,实现两层的整合。

二、HTML 表单操作(负责构建页面元素)

是由 <form> 和 </form> 标记定义的。表单中典型地包含输入字段(如文本输入字段、复选框、单选按钮和选择列表)和用于提交数据的按钮。当提交信息时,它们还指定服务器应执行哪一个Servlet(或其它的程序cgi或BEAN)。

由form表单来说说前后台数据之间的交互

https://zhuanlan.zhihu.com/p/94411127

使用ajax和form表单两种方式上传文件,保存到项目根路径下的指定文件夹下

https://zhuanlan.zhihu.com/p/266862076

form表单提交文件/图片

需要设定form的enctype=“multipart/form-data” 如果不加这个会传不过去

表单验证

(1)好处:减轻服务器的压力;保证数据的可行性和安全性。

(2)placeholder:为文本框提示用户输入

<input type="text" name="name" placeholder="请输入你的姓名"/>

(3)required:规定文本框不能为空

<input type="email" name="email" required/>

(4)pattern:输入的内容必须符合正则表达式自定义的规则

<input type="text" name="tel" required pattern="^1[35]\d{9}"/>规定以13、15开头的11位数字

将form表单的一些属性

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Insert title here</title>

</head>

<body>

<!--form表单中的属性:

accept-charset  作用: 规定服务器可处理的表单数据字符集。   常用值: UTF-8 - Unicode 字符编码   、ISO-8859-1 - 拉丁字母表的字符编码 、 gb2312 - 简体中文字符集

action  作用:规定当提交表单时向何处发送表单数据。  可能的值: 绝对 URL - 指向其他站点(比如 src="www.example.com/example.htm")、相对 URL - 指向站点内的文件(比如 src="example.htm")

autocomplete  作用:规定是否启用表单的自动完成功能。

enctype 作用:规定在发送表单数据之前如何对其进行编码  enctype 属性可能的值:  application/x-www-form-urlencoded    multipart/form-data   text/plain

method 作用:规定用于发送 form-data 的 HTTP 方法     常用值:get / post

name 作用:规定表单的名称。

novalidate 作用:如果使用该属性,则提交表单时不进行验证。  使用方式 : novalidate="novalidate"

target 作用:规定在何处打开 action URL。 常用值: _blank:在新窗口中打开。    _self:默认。在相同的框架中打开。   _parent:在父框架集中打开。  _top:在整个窗口中打开。   framename:在指定的框架中打开。

-->

<form>

<!--常用的表单元素   form   表单  input   表单元素,表单项     select和option  下拉菜单      textarea 文本域  -->

<!-- input 属性 :

value 属性规定输入字段的初始值

readonly 属性规定输入字段为只读(不能修改)

disabled 属性规定输入字段是禁用的。  被禁用的元素是不可用和不可点击的。  被禁用的元素不会被提交。  disabled 属性不需要值。它等同于 disabled="disabled"。

size 属性规定输入字段的尺寸

maxlength 属性规定输入字段允许的最大长度

H5之后添加的属性

autocomplete 属性规定表单或输入字段是否应该自动完成。  当自动完成开启,浏览器会基于用户之前的输入值自动填写值。

提示:您可以把表单的 autocomplete 设置为 on,同时把特定的输入字段设置为 off,反之亦然。

autocomplete 属性适用于 <form> 以及如下 <input> 类型:text、search、url、tel、email、password、datepickers、range 以及 color。

例子  <form action="action_page.php" autocomplete="on">   First name:<input type="text" name="fname"><br>  E-mail: <input type="email" name="email" autocomplete="off"><br>  </form>

autofocus 属性是布尔属性。  如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点。

form 属性规定 <input> 元素所属的一个或多个表单。   提示:如需引用一个以上的表单,请使用空格分隔的表单 id 列表。

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"

formenctype 属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

formenctype 属性适用于 type="submit" 以及 type="image"。

formmethod 属性定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。

formmethod 属性覆盖 <form> 元素的 method 属性。

formmethod 属性适用于 type="submit" 以及 type="image"。

formnovalidate 属性

novalidate 属性是布尔属性。

如果设置,则规定在提交表单时不对 <input> 元素进行验证。

formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性可用于 type="submit"。

formtarget 属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。

formtarget 属性会覆盖 <form> 元素的 target 属性。

formtarget 属性可与 type="submit" 和 type="image" 使用。

height 和 width 属性规定 <input> 元素的高度和宽度。   height 和 width 属性仅用于 <input type="image">。

注释:请始终规定图像的尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。

min 和 max 属性规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。

multiple 属性是布尔属性。    如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。

multiple 属性适用于以下输入类型:email 和 file。

pattern 属性规定用于检查 <input> 元素值的正则表达式。    pattern 属性适用于以下输入类型:text、search、url、tel、email、and password。

placeholder 属性规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述)。  该提示会在用户输入值之前显示在输入字段中。

placeholder 属性适用于以下输入类型:text、search、url、tel、email 以及 password。

required 属性是布尔属性。   如果设置,则规定在提交表单之前必须填写输入字段。

required 属性适用于以下输入类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.

step 属性规定 <input> 元素的合法数字间隔。     示例:如果 step="3",则合法数字应该是 -3、0、3、6、等等。

-->

<!-- 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type=’submit’>)就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行提交 -->

<!-- 用户名  type 是类型  name -->

First name: <input type="text" name="firstname"><br>

Last nameee: <input type="text" name="lastname"><br>

<!-- 密码 -->

Password: <input type="password" name="pwd"><br><br>

<!-- 单选按钮 -->

性别:<input type="radio" name="sex" value="male">Male

<input type="radio" name="sex" value="female">Female<br><br>

<!-- 复选框 -->

爱好:<input type="checkbox" name="vehicle" value="Bike">I have a bike

<input type="checkbox" name="vehicle" value="Car">I have a car <br><br>

<!-- 文件域 -->

选择文件:<input type="file" name="newfile"> <br><br>

<!-- 隐藏域  这个在页面上不可加 可以保存一些不需要显示的隐藏信息 用于传递值-->

<input type="hidden" name="newhidden">

<!-- 将表单里的信息清空 重新填写 -->

<input type="reset" value="清空表单"><br><br>

<!-- 用来设置一个按钮 这个按钮没有提价功能 -->

<input type="button" value="注册">

<!--这个不常用    图片提交按钮 点击这个与点击submit效果相同    插入图片用 img标签 而不是input标签-->

<input type="image" name="newimg" ><br><br>

<!--常用   提交按钮  type 是类型  value 是按钮显示的内容-->

<input type="submit" value="Submit"><br><br>

<!--

type=image和type=submit的异同:

都可以相应回车,并且都能提交。

区别就是type=image的input提交方式会把按钮点击的位置坐标x,y提交过去。

对于通常的表单应用来说,这样多一两个参数并没有问题,因为我们在接收端中都是按照指定的名称来处理参数,

所以即使多了两个参数也不会有任何问题。

但是在做支付接口的时候(例如:支付宝接口)你就会发现,多出两个隐藏参数会带来很麻烦的问题,

因为在在提交表单之后,接收端会对参数名称进行MD5校验,想想多两个参数会带来什么问题。

将会直接导致表单校验不通过,然后支付失败的问题。

所以在在通常网站开发中不提倡使用type=image作为表单的提交按钮。

-->

</form>

</body>

</html>

HTML 5中的本地存储概念

很多时候,我们想在本地计算机存储有关用户的信息。例如,假设用户已经填满了一半的长表单,互联网却突然连接中断。此时,用户希望能在本地存储这些信息,然后当重新连接到互联网的时候,获取这些信息,并将其发送到服务器进行存储。

用一个对象接着表单里面的内容 然后存进sessionStorage或者localStorage根据你的需求存就好

现代的浏览器存储称为“本地存储”,可以让你存储这些信息。

如何添加和删除本地存储中的数据?

添加到本地存储的数据使用“键”和“值”。下面的示例代码显示了国家数据“India”添加的键值为“Key001”。localStorage.setItem

要检索本地存储的数据,我们需要使用“getItem”来提供键名

var country = localStorage.getItem;

你还可以使用下面的代码存储JavaScript对象到本地存储。

如果你想用JSON格式存储,那么可以使用“JSON.stringify”函数,如下面所示的代码。

localStorage.setItem

什么是本地存储的生命周期?

本地存储没有生命周期,它会一直存在直到用户将其从浏览器清楚或使用JavaScript代码删除它。

本地存储和cookies之间的区别是什么?

cookies本地存储客户端/服务器端既可以从客户端也可以从服务器端访问数据。每个请求都会发送cookie数据到服务器。只能在本地浏览器端访问数据。服务器无法访问本地存储,除非特意通过POST或GET发送到服务器。大小每个Cookie 4095个字节。每个域5 MB。有效期cookie有附加的有效期。所以有效期后的cookie和cookie数据会被删除。数据没有有效期限。要么最终用户从浏览器删除它,要么使用JavaScript编程删除。

三、Js(jquery解决兼容性问题,负责行为)

jQuery的流行很大程度上要归功于解决兼容性问题。

ajax

ajax全称Asynchronous JavaScript and XML(异步的JavaScript与XML),是网页无需刷新页面、使用js与服务器进行交互的一种技术。

有时候会有这样一种需求:只希望更改页面上的一个区域。提供了解决这种需求的技术方案,也就是ajax。

ajax的基本流程可以概括为:页面上js脚本实例化一个XMLHttpRequest对象,设置好服务器端的url、必要的查询参数、回调函数之后,向服务器发出请求,服务器在处理请求之后将处理结果返回给页面,触发事先绑定的回调函数。这样,页面脚本如果想要改变一个区域的内容,只需要通过ajax向服务器获取与该区域有关的少量数据,在回调函数中将该区域的内容替换掉即可,不需要刷新整个页面。

ajax的核心是异步方式,而同步方式只有在极其特殊的情况下才会被用到。

$.ajax({

//几个参数需要注意一下

type: "POST",//方法类型

dataType: "text",//预期服务器返回的数据类型 如果是对象返回的是json 如果是字符串这里一定要定义text 之前我就是定义json 结果字符串的返回一直到额error中去

/*

dataType:

要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:

xml:返回XML文档,可用JQuery处理。

html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。

script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。

json:返回JSON数据。

jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。

text:返回纯文本字符串。

*/

jQuery加载一个html页面到指定的div里

https://www.cnblogs.com/webenh/p/5718478.html

把a.html里面的某一部份的内容加载到b.html的一个div里。
比如:加载a.html里面的<div id=“row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div>

juqery $.ajax 请求另一个html页面的指定的“一部分”加载到本页面div,重点是一部分数据加载到本页面div

大至思路如下:

$.ajax( {
    url: url, //这里是静态页的地址
        type: "GET", //静态页用get方法,否则服务器会抛出405错误
        success: function(data){
            var result = $(data).find("另一个html页面的指定的一部分");
          $("本页面div").html(result);

}
});

jquery load方法把一个页面载入到主页面的一个div中替换iframe

https://blog.csdn.net/qq_32447321/article/details/64438598

jquery load方法把一个页面载入到主页面的一个div中,载入页面的javascript消失了

如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。

如果绑定在元素上,则当元素的内容加载完毕后触发。

注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。

两个html页面间如何传递数据

https://blog.csdn.net/qq_41209003/article/details/103739371

在不同的html之间传递数据我总结了3种方式。

1、通过表单简单的传输数据,利用js代码接收传递的数据,注意method属性要设为get。

2、使用Cookie传递参数【借】

下面是简单的实例,a页面保存Cookie,b页面读取。

3.通过web服务器利用前后端交互

前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单,用户填写表单后提交给服务器,服务器收到表单后返回处理结果。其大致构成如下:
URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下:
例如利用nodejs与json文件相连接,实现对本地json数据的增删改查,在不同网页间传递数据。

jQuery 参考手册 - 选择器

参考:如何做到HTML负责构建页面元素,JavaScript负责行为,CSS负责布局

四、CSS负责布局

HTML CSS整理笔记(路过不要错过,你无法记住的笔记,建议收藏)

https://zhuanlan.zhihu.com/p/144199451

五、数据存储与传输选择(json轻便性)

xml则相当精简,适合用于单纯的数据存储与传输。

但是XML格式有一个缺点,就是文档构造复杂,需要传输比较多的字节数。在这种情况下,JSON的轻便性逐渐得到重视,后来替代XML成为ajax最主要的数据传输格式。

在当前桌面端以及web端应用中,xml主要用于书写配置文件,json则用在web场景下的http请求参数提交或者数据返回。当然以上强调了主要,json也可以用于桌面软件配置文件,xml也可以用于网络文件传输和数据交换。

我们熟知的office平台,所有的模板文件、配色文件均以xml书写的。

可以看到,主流网站涉及异步加载的内容,大多都选择了json作为数据交换格式,而静态网站或者不愿意开放api的网站,仍然使用html/xml较多。但是随着今后web端ajax技术扩散程度的加深,相信json标准会有更广泛的应用。
xml和json在某种程度上几乎决定了你在写数据抓取程序时所使用的技术方案和处理流程。

我们知道在抓取数据的流程中,成功构造请求是第一步,涉及请求构造的篇章,我已经在之前讲过很多,无论是GET请求还是POST请求,无论是传递参数,还是传递表单。

xml/html和json则涉及到网络数据抓取的第二步——网页与数据解析。

因为xml/html是标记语言,虽然在某种程度上具有key-value的形式,但是因为标签对这种形式,无论是R语言还是Python都没法直接将它转化为关系表。所以请求到的xml/html需要使用Xpath或者css表达式进行提取,关于这两种技术,前面有专门的篇章讲解。

json本身就是半结构化数据,作为流行且通用的数据交换格式,R语言和Python都有现成的接口工具可以调用,以及半结构化工具的对标容器。json还有一种应用场景即是noSQL数据库的存储结构,典型如mongoDB,不过在mongodb中,将json标准扩展为bson,增加了其作为容器的性能和兼容性。mongoDB和R与Python都有结构工具可以连接。

六、web服务选择,采用组件技术扩展处理业务层

作为Web服务器,我们需要对服务器后期的维护、管理等环节进行综合的考虑,完整的Web服务器应向外提供以下几个功能:Web服务器软件;上传或下载的

linux-主流web服务器搭建有:apache和nginx

apache 重量级的web服务器,访问方式是同步阻塞模式,访问更加稳定。一般动态请求要apache去做

Apache - HTTP服务器

Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性[1]被广泛使用,是最流行的Web服务器端软件之一。它快速、可靠并且可通过简单的API扩展,

软件类型:HTTP服务器

授权协议:Apache

开发语言:C/C++

nginx 轻量级的web服务器,异步非阻塞模式,速度快。nginx只适合静态和反向。需要性能的web 服务

nginx嵌入到设备中, 裁减掉无用功能, 能否再降内存?

https://www.oschina.net/question/2257117_177632

想把nginx放到嵌入式设备中做Web Server使用, 把官网提供裁减选项都关闭了,

测试 flash大小有 117KB, 内存大小为 1024KB(启动)和1284KB(运行静态网页), 包括work和master进程

我们希望把内存再降700KB以内, 请问大家有没有这方面的经验? 谢谢!

worker_connections  32;  这个设小一点可以减少内存占用

master_process  off;  以单进程模式启动

Nginx("Engine X")作为世界第三大Web服务器,如果能应用到嵌入式系统中是多么美好的事情,如下将告诉你实现的可能, 实现(通过验证)最小硬件配置(300Mhz ARM9,128MB内存)

Nginx搭建WEB服务器

nginx相对于apache的优缺点:

1动态页面,nginx处理动态请求是鸡肋,一般动态请求要apache去做,nginx只适合静态和反向。

2轻量级,同样起web 服务,比apache占用更少的内存及资源 ,支持更多的并发连接,体现更高的效率,这点使 Nginx 尤其受到虚拟主机提供商的欢迎。

3抗并发,nginx 处理请求是异步非阻塞的,

4高度模块化的设计,编写模块相对简单

5社区活跃,各种高性能模块出品迅速啊

6Nginx本身就是一个反向代理服务器

7负载均衡能力突出。也可以支持作为 HTTP代理 服务器对外进行服务. Nginx采用C进行编写, 不论是系统资源开销还是CPU使用效率都比 Perlbal 要好很多.

3. 核心区别:apache是同步多进程模型,一个连接对应一个进程;nginx是异步的,多个连接(万级别)可以对应一个进程。

一般来说,需要性能的web 服务,用nginx 。如果不需要性能只求稳定,那就apache 吧。

nginx可以利用其反向代理的功能来进行负载均衡的实现,同时也可以使用其正向代理的功能设置代理服务器,比如在内网的环境中,在可以连接外网的机器上运行nginx作为代理服务器,其他机器通过设定此台机器的IP和port即可通过其连接上网

nginx,rewrite,proxy_pass,post数据,表单

https://blog.csdn.net/u013080278/article/details/78616564

nginx中的rewrite到外部url会导致post的参数丢失,所以放弃该方案。内部的rewrit是不会丢失post数据)

需要传递post参数,需要使用proxy_pass。同时,因为proxy之前的url和proxy的url不同,需要做location,并需要在在proxy_pass中写全路径参考例子如下

今天接到一个需求,前台要调用后台的短信发送网关:必须以post形式传递参数,并且前台的发送短信的请求的url和后台的发送短信的url不一致

前台的url为http://xxx.test.com/ajax/mobiledynamiclogincode

后台的发送短信网关的url为:

http://xxx2.test.com/json/account/mobiledynamiclogincode

思考了为啥proxy_pass能传递post的参数:因为对于用户而言,就只是一个请求,所以request body没变。nginx会将该request body传递到后续的server

location /ajax/mobiledynamiclogincode {

proxy_pass http://xxx2.test.com/json/account/mobiledynamiclogincode;

}

如何在nginx中读取POST上来的数据

https://www.cnblogs.com/donj/archive/2012/09/07/2675378.html

如果

rb->temp_file || r->request_body_in_file_only

两个值被设置了,那么就将request_body保存进一个临时文件中。

相信读到这里,POST数据如何获取已经一目了然了。另外,如果设置了标记将post数据写入file的话,存放file信息的buf最终会链入bufs chain中。

nginx 配置日志格式并且采集POST请求信息放入日志

1、nginx采集post请求日志有两种方式

https://www.cnblogs.com/abner123/archive/2004/01/13/14137723.html

1.可以安装 openresty 版本nginx;

2.可以使用官方nginx版本编译lua模块;

在这里我们就使用nginx版本编译lua模块进行配置, openresty 版本nginx就不做更多说明

nginx模块开发获取post参数

对于 "application/x-www-form-urlencoded" 格式的 POST 参数获取,可以参考 ngx_lua 模块的

ngx.req.get_post_args() 函数以及 ngx_form_input 模块的实现:

http://wiki.nginx.org/HttpLuaModule#ngx.req.get_post_args

https://github.com/calio/form-input-nginx-module

而对于 "multipart/form-data" 格式的 POST 参数获取,可以参考 ngx_upload 模块以及 lua-resty-upload 库:

http://www.grid.net.ru/nginx/upload.en.html

https://github.com/agentzh/lua-resty-upload

nginx中读取POST数据必须要调用ngx_http_read_client_request_body()函数,而默认情况下,这个函数是不会被调用的。

于是解决方法就很明显了:要么hack代码强行调用一下,要么找一个module能不那么费事地帮忙调用一下。

天无绝人之路,这里可以用ngx_lua解决,只要在输出log之前读一遍request_body即可,照着例子做:http://wiki.nginx.org/HttpLuaModule#Synopsis

location /test {

lua_need_request_body on;

content_by_lua 'local s = ngx.var.request_body';

...

}

在location里面加上两行即解决问题,POST内容成功输出到了日志中,赞美Lua。

nginx接受post数据,并在日志里记录数据

https://blog.csdn.net/weixin_37519367/article/details/73498756

装一台nginx,做开发的同事向我提供的接口post数据,然后我要把数据记录在nginx日志里面,然后通过flume存到HDFS,post数据为json格式。

嵌入式WEB服务器:boa thttpd、lighttpd、Simple HTTPD  

Boa

Boa服务器是一个小巧高效的web服务器,是一个运行于unix或linux下的,支持CGI的、适合于嵌入式系统的单任务的http服务器,源代码开放、性能高。
Boa是一种非常小巧的Web服务器,其可执行代码只有大约60KB左右。作为一种单任务Web服务器,Boa只能依次完成用户的请求,而不会fork出新的进程来处理并发连接请求。但Boa支持CGI,能够为CGI程序fork出一个进程来执行。Boa的设计目标是速度和安全。

Ubuntu16.04安装BOA服务器
http://blog.sina.com.cn/s/blog_16483ca950102yoz3.html

配置

(1)创建/etc/boa/路径

sudo mkdir /etc/boa/

(2)将生成的可执行程序以及配置文件复制到/etc/boa/目录下

sudo cp boa boa_indexer /etc/boa
sudo cp boa.conf /etc/boa

(3)修改boa配置文件

sudo vi /etc/boa/boa.conf

修改以下内容 将User nobody和Group nogroup 分别改为:User 0和Group 0,如下所示:

Port 8074

User 0

Group 0

(4)根据boa.conf中定义的内容再配置

创建日志文件并修改权限

sudo mkdir -p /var/log/boa/

sudo touch /var/log/boa/error_log /var/log/boa/access_log

sudo chmod -R 777 /var/log/boa/

创建html文件

vi index.html

sudo mkdir -p /var/www/

sudo cp index.html /var/www/

sudo chmod -R 777 /var/www/

示例index.html文件内容

Hello,my world!

5,测试
执行

/etc/boa/boa​

查询Ubuntu的IP地址192.168.1.7

在浏览器地址栏输入 http://192.168.1.7:8074/

thttpd - tiny/turbo/throttling HTTP server 

thttpd中是一个简单,小型,轻便,快速和安全的http服务器:
简单:它能够支持HTTP/1.1协议标准,或者超过了最低水平
小巧:它具有非常少的运行时间,因为它不fork子进程来接受新请求,并且非常谨慎的分配内存(性能对比表:http://www.acme.com/software/thttpd/benchmarks.html)
便携:它能够在大部分的类Unix系统上运行,包括FreeBSD, SunOS 4, Solaris 2, BSD/OS, Linux, OSF等等
快速:它的速度要超过主流的Web服务器(Apache, NCSA, Netscape),在高负载情况下,它要快的多
安全:它努力的保护主机不受到攻击,不中断服务器

thttpd 类似于lighttpd,对于并发请求不使用fork()来派生子进程处理,而是采用多路复用(Multiplex)技术来实现。因此效能很好。同时它还 有一个特点就是基于URL的文件流量限制,这对于下载的流量控制而言是非常方便的。象Apache就必须使用插件实现,效率较thttpd低。
thttpd跟lighttpd类似,适合静态资源类的服务,比如图片、资源文件、静态HTML等等的应用,性能应该比较好,同时也适合简单的CGI应用的场合。

官方地址:http://www.acme.com/software/thttpd/
下载地址:http://www.acme.com/software/thttpd/thttpd-2.25b.tar.gz

lighttpd - light footprint + httpd = LightTPD 

Lighttpd是一个德国人领导的开源软件,其根本的目的是提供一个专门针对高性能网站,安全、快速、兼容性好并且灵活的web server环境。具有非常低的内存开销,cpu占用率低,效能好,以及丰富的模块等特点。
lighttpd 是众多OpenSource轻量级的web server中较为优秀的一个。支持FastCGI, CGI, Auth, 输出压缩(output compress), URL重写, Alias等重要功能,而Apache之所以流行,很大程度也是因为功能丰富,在lighttpd上很多功能都有相应的实现了,这点对于apache的用 户是非常重要的,因为迁移到lighttpd就必须面对这些问题。
实用起来lighttpd确实非常不错,apache主要的问题是密集并发下,不断的fork()和切换,以及较高(相对于 lighttpd而言)的内存占用,使系统的资源几尽枯竭。而lighttpd采用了Multiplex技术,代码经过优化,体积非常小,资源占用很低, 而且反应速度相当快。
利用apache的rewrite技术,将繁重的cgi/fastcgi任务交给lighttpd来完成,充分利用两者的优点,现在那台服务器的负载下降了一个数量级,而且反应速度也提高了一个甚至是2个数量级!
lighttpd 适合静态资源类的服务,比如图片、资源文件、静态HTML等等的应用,性能应该比较好,同时也适合简单的CGI应用的场合。

官方地址:http://www.lighttpd.net/
下载地址:http://www.lighttpd.net/download/lighttpd-1.4.16.tar.gz

SHTTPD - Simple HTTPD

Shttpd是另一个轻量级的web server,具有比thttpd更丰富的功能特性,支持CGI, SSL, cookie, MD5认证, 能嵌入(embedded)到现有的软件里。最有意思的是不需要配置文件!由于shttpd可以嵌入其他软件,因此可以非常容易的开发嵌入式系统的 web server,官方网站上称shttpd如果使用uclibc/dielibc(libc的简化子集)则开销将非常非常低。

特点:
    小巧、快速、不膨胀、无需安装、简单的40KB的exe文件,随意运行
    支持GET, POST, HEAD, PUT, DELETE 等方法
    支持CGI, SSL, SSI, MD5验证, resumed download, aliases, inetd模式运行
    标准日志格式
    非常简单整洁的嵌入式API
    dietlibc friendly. NOT that friendly to the uClibc (*)
    容易定制运行在任意平台:Windows, QNX, RTEMS, UNIX (*BSD, Solaris, Linux)
由于shttpd可以轻松嵌入其他程序里,因此shttpd是较为理想的web server开发原形,开发人员可以基于shttpd开发出自己的webserver!
官方网站:http://shttpd.sourceforge.net/
下载地址:http://jaist.dl.sourceforge.net/sourceforge/shttpd/shttpd-1.38.tar.gz

Appweb

Appweb 是下一代嵌入式web服务器,它天生是为嵌入式开发的,它的最初设计理念就是安全。Appweb是一个快速、低内存使用量、标准库、方便的服务器。与其它嵌入式web服务器相比,appweb最大特点就是功能多和高度的安全保障。Appweb简单、方便、开源。

不适宜投入生产使用嵌入式WEB服务器: Tinyhttpd、mini_httpd

Tinyhttpd

Nginx的代码量是比较大的,几万行的代码阅读起来可能比较吃力。如果想了解HTTP协议的具体实现,由不太敢阅读Nginx的代码怎么办?正好有个替代方案,那就是tinyhttpd,它是一个超轻量型Http Server,使用C语言开发,全部代码只有502行(包括注释),附带一个简单的Client,可以通过阅读这段代码理解一个 Http Server 的本质。

由于在Linux系统拥有非常多且版本不同的源安装包,不同的硬件对应不同的源包,不同的Linux系统可能其安装源包的方式也稍有区别。所以,在安装配Linux时,应该多了解自己的硬件与Linux之间的兼容性。

mini_httpd

也是相对比较适合学习使用,大体实现了一个Web Server的功能,支持静态页和CGI,能够用来放置一些个人简单的东西,不适宜投入生产使用。

Mini_httpd是一个小型的HTTP服务器。开源,它的性能不强,但是它非常适合于中小访问量的站点。Mini_httpd和thttpd都是ACME Labs 开发的软件,功能没有thttpd强。

七、问题

1、缓存问题

1)什么是缓存问题?

ie浏览器提供的ajax对象在发送get请求时,会比较请求地址

是否访问过,如果访问过,则不再发送新的请求,而是显示第一次

返回的结果。

2)如何解决?

在请求地址后面添加一个随机数。

2、html+jquery+ajax可以将表单数据存储到服务器的xml文件里吗

不可以

你要往服务器写东西,就必须有服务器端的程序在那里写啊。

网页都是在用户端运行的

3、写惯了 ASP,PHP,CGI的朋友,经常会不自觉的把 presentation layer 和 business layer 混在一起。

Web 开发方案选择和实现相关推荐

  1. 为什么做Web开发要选择PHP

    大部分互联网公司做WEb开发都选择PHP,PHP的优势在哪?你应该知道的 以前偶尔被人问到,为什么你(和大部分互联网公司)做Web开发要选择PHP, PHP有什么好处.简单的回答便是"PHP ...

  2. Web开发-数据格式选择

    (*注:本文章摘抄自jQuery.基础教程) 说明:本方案用于将信息加载到现有的页面上作考虑的 HTML:HTML片段实现起来只需要很小的工作量.这种格式的自问数据可以通过一种简单的方法加载并插入到页 ...

  3. web开发工具选择,html零基础入门书籍

    基础能力 HTML(5)篇 1. html 基本结构 html 标签是由<>包围的关键词. html 标签通常成对出现,分为标签开头和标签结尾. 有部分标签是没有结束标签的,为单标签,单标 ...

  4. web 开发入门分享

    分享一: 如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答. 所以对于Web开发刚刚入门的菜鸟们 ...

  5. web开发入门(转载)

    一.准备工作 1, 做好失败的心理准备 Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情.不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费 ...

  6. 移动端web开发主流方案选择

    本篇目录 一.移动端主流方案 单独制作移动端页面(主流) 响应式页面兼容移动端(其次) 二.单独移动端页面(主流) 三.响应式兼容PC移动端 四.总结 五.往期笔记回顾直达车 一.移动端主流方案 单独 ...

  7. php和python哪个用了开发web好-web开发选择Python还是PHP好呢?

    原标题:web开发选择Python还是PHP好呢? Python与PHP是两种不同的编程语言,二者的学习成本并不是很高,所以成为了很多新手学习的第一门语言. 这两种语言的优缺点对比大致如下: 1.PH ...

  8. 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

    移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...

  9. Web图形开发方案选型,SVG/VML/Flash/Applet优劣比较

    Web图形开发方案选型,SVG/VML/Flash/Applet优劣比较 在Web 项目开发过程中,我们常常会使用到各类图形,如流程图,饼图,甘特图,散列图,趋势图等等.目前有很多种方法在网页上绘制图 ...

最新文章

  1. docker制作镜像篇(基于容器)
  2. ELK不香了?企业级日志平台后起之秀 Graylog
  3. Samba的简介和配置
  4. maven jetty 插件 允许修改 js
  5. 浅析微信支付:申请退款、退款回调接口、查询退款
  6. 【ShaderToy】跳动的心
  7. pytest测试框架(一)---安装及入门
  8. 台式linux桌面远程链接华为云windows服务器桌面
  9. html手机表白弹窗,火热的程序员表白方式,调皮弹窗表白代码,赶紧拿去试试吧...
  10. c语言程序设计操作,c语言编程入门相关详细操作
  11. 投入和产出比例是衡量信息化成功的最主要标准
  12. 二维码门禁助力于打造更智能化的出入管理-码上开门,说走就走
  13. 在线考试系统的倒计时
  14. 计算机网络机房安置要点,机房平面布置图
  15. 在微型计算机中 负数常用()表示,在微型计算机中,负数常用( )表示。
  16. PIXI学习历程 -- 持续更新
  17. 2019年下半年软件设计师备考指南
  18. 在阿里云ECS上安装流媒体服务器软件Ti Top Streamer
  19. 2022-2028全球与中国交通领域的生物识别市场现状及未来发展趋势
  20. linux 串口连接交换机,怎么用串口线连接电脑和交换机 连接步骤教程

热门文章

  1. 苹果iOS系统:令人感动的化茧成蝶过程
  2. java什么是抽象思维_什么是抽象思维,抽象思维有多重要
  3. 雅思听力旅游度假场景词汇
  4. TS 常见问题整理(60多个,持续更新ing)
  5. 【手把手教你】使用Python对股价的Heikin Ashi蜡烛图进行可视化
  6. C++中的operator主要有两个作用,一是操作符的重载,一是自定义对象类型的隐式转换。
  7. Electerm for Mac(终端模拟器/免费ssh客户端)
  8. 移动端开发需要注意事项
  9. ae教程 (六)人物滤镜 (五)lomo色调
  10. n!阶乘后面有多少个零