|
今日学习内容：
1.http模块创建web服务器不同url显示不同html页面 思路：用fs.readFile读取出文件内容，再用res.end响应给浏览器 静态资源加载
静态资源:css、js、img等等 网络中的绝对路径和相对路径（网络中一般都使用绝对路径）
绝对路径：
当href和src属性中的地址以/开头时就是绝对路径，该路径会自动补全浏览器地址栏中协议、IP/域名、端口号 <imgsrc="/assets/images/1.png"/> <linkhref="/assets/images/a.css"/> req.url得到就是没有协议、IP/域名、端口号的地址===>/assets/.... 相对路径：
./:去掉当前路径中的最后一层，继续向下拼 ../:去掉当前路径中的后两层，继续向下拼 绝对路径
相对路径的缺陷
案例：在不同的目录下启动服务器，并通过浏览器访问
①C:\Users\Administrator\Desktop\node\node-2\code\3-path
启动命令：node01-server.js 启动服务器后能够正常通过浏览器访问 ②C:\Users\Administrator\Desktop\node\node-2\code
启动命令：node./03-path/01-server.js 启动服务器后无法正常通过浏览器访问 原因：控制台使用==当前绝路路径拼接readFile中的相对路径==，所以读取文件失败 在不同目录下执行01-server.js文件 执行结果：只有第一条执行成功，其余两条都执行失败。 原因：相对路径是以命令执行的目录作为起点的。 解决方法：使用绝对路径 路径变量
__dirname：获取当前文件所处目录的绝对路径 __filename：获取当前文件的绝对路径 特点：跨平台，自动处理路径分隔符/和\ Path模块(系统模块)
1)join()方法：能够根据不同参数不同系统组装不同的文件地址==
d:\node\day-2\code\03-path.js 2)sep属性：/或\，windows系统下是\;类unix系统下是/ 3)dirname():获取文件路径（不包含文件名） 4)basename():获取文件名（不包含目录路径） 5)extname():获取文件后缀 其他方法： 读取文件优化
上例的缺点：每次读取文件都要写一堆几乎一样的代码 核心：在res对象上挂载一个新的方法，该方法可以根据路径读取文件并将内容返回给浏览器 art-template模板引擎
模板引擎介绍
介绍
模板引擎的本质是一种字符串拼接技术 按照规则在模板页（网页）上挖坑，布置数据规则 再将数据和模板组合成一个字符串 art-template基本使用
使用art-template模板引擎遵循以下步骤即可
1)安装/下载模板引擎(npmiart-template) 2)加载art-template模块(require) 3)准备模板页（一般是html页面）和要显示在页面上的数据（js对象） 4)调用模板引擎核心方法（template）组装模板和数据，得到一个字符串 5)将组装好的字符串返回给浏览器 1)安装/下载art-template模板引擎
npminstallart-template 2)加载art-template模板引擎
consttemplate=require('art-template'); 3)准备模板页（一般是html页面）和要显示在页面上的数据（js/json对象）xml
js对象：{a:"Hello",b:"world"} json对象：{"a":"Hello","b":"world"} 注意：
属性不加双引号或者加双引号均可，但是切忌不要加单引号。此处不会出错，但是其他的位置可能会出错。 html页面（模板页）上使用特殊标记（{{key}}），将要显示数据的位置标记出来；此处的key就是js对象的属性 4)调用模板引擎核心方法
//参数1:模板文件路径---必须使用绝对路径 //参数2:要显示出来的数据---js/json对象 //返回值：数据和模板组装好的字符串 lethtmlStr=template(var1,var2); 5)将组装好的字符串返回给浏览器
res.end(htmlStr); 用户管理优化
目标：根据数组动态生成表格 1)下载\安装art-template 2)在服务器文件(server.js)中加载/导入art-template模块 3)准备模板页和要显示数据——在server.js中设置要显示的数据:
模板页循环显示数据（index.html）——注意：可以嵌套if来处理没有数据时的显示 4)调用template函数将模板和数据组装到一起 5)将组装好的字符串通过end方法返回给浏览器 表单提交(表单标签：form、input、select-option、textarea,表单提交有两种方式get（默认）和post（常用）)
post表单提交1)post表单提交的必要条件
必须有form标签
action：表单数据提交的位置，必须是一种后端技术来接收 method：表单提交的方式，post（常用）、get（默认） 每个表单域都要有name属性和值 必须要有submit按钮来提交表单数据 2)后端接收---post方式
data事件：用来接收表单数据，表单数据会被切割成一块一块，data事件会循环来接收 end事件：当表单数据接收完毕后会自动触发，此时可以操作表单提交的数据 案例:接收表单提交的用户名和密码
1)创建表单页 2)创建服务器，显示post.html页面 3)在server.js中增加对/postData的监听，接收表单提交的数据 每种表单域提交的方式
表单标签：form、==input、select、textarea==表单提交的实际上是每个域的value值 特殊：
1.select-option:
name要定义在select标签中 value要定义在每个option标签中 2.textarea:
name定义在textarea中 value就是开始和结束标签之间内容 get方式提交表单
核心
将method值改为get就是get方式提交表单 get方式提交表单数据时，数据会以字符串方式显示在地址栏 显示方式：key1=value1&key2=value2&key3=value3&... 解决方案:使用系统提供的url模块来处理get方式的url地址
如果url.parse方法的参数2设置为true，则会将query中的字符串自动转换为对象形式 重点：在解析结果中有两个单元必须记住
pathname:当前请求的url地址，本案例中就是/getData query:get方式提交的参数 get和post的区别（非常重要）
1.提交方式
get会将数据显式的拼接到url地址栏中(字符串) 例如：/form==？id=10001&username=heiheihei&passwd=123456&key=value....key=value方式传参，多个参数之间使用&符号隔开 id、username、passwd等等（键/key）都是表单域的name值，10001、heiheihei、123456等等（值/value）都是表单域的value值 post不会显示出来：通过requestbody传递参数。 2.传递数据量大小
post最小值是2M，理论上没有上限的。 get会受到浏览器的地址栏的限制。有的是2k（IE6），有的是8K(chrome) 3.应用范围不一样
| 
