菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 罗旭 20230130 [打印本页]

---

作者: 十四lll    时间: 2023-2-16 18:42
标题: 罗旭 20230130

• . http模块创建web服务器
  
  •   不同url显示不同html页面
    
    • 思路： 用 fs.readFile 读取出文件内容，再用 res.end 响应给浏览器
      
    
    
  • 静态资源加载
    
    • 静态资源:  css、js、 img等等
      
    
    
  • 网络中的绝对路径和相对路径（网络中一般都使用绝对路径）
    
    • 绝对路径：
      
      • 当 href 和 src 属性中的地址以 / 开头时就是绝对路径，该路径会自动补全浏览器地址栏中协议、IP/域名、端口号
        
      • <img src="/assets/images/1.png" />
        
      • <link href="/assets/images/a.css" />
        
      • req.url 得到就是没有 协议、IP/域名、端口号 的地址 ===>  /assets/....
        
      
      
    • 相对路径：
      
      • ./  :   去掉当前路径中的最后一层，继续向下拼
        
      • ../ :  去掉当前路径中的后两层，继续向下拼
      • 绝对路径
        
      
      
    
    
• 
  
  • 相对路径的缺陷
    
    • 案例： 在不同的目录下启动服务器，并通过浏览器访问
      
      • ① C:\Users\Administrator\Desktop\node\node-2\code\3-path
        
        • 启动命令： node 01-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) 安装 / 下载 模板引擎  (npm i art-template)
        
      • 2) 加载 art-template 模块 (require)
        
      • 3) 准备模板页（一般是html页面） 和  要显示在页面上的数据 （js 对象）
        
      • 4) 调用模板引擎核心方法（template）组装模板和数据，得到一个字符串
        
      • 5) 将组装好的字符串返回给浏览器
        
      
      
    • 1) 安装/下载art-template模板引擎
      
      • npm install art-template
        
      
      
    • 2) 加载 art-template 模板引擎
      
      • const template = 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对象
        
      • //返回值： 数据和模板组装好的字符串
        
      • let htmlStr = 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不会显示出来： 通过 request body 传递参数。
        
      
      
    • 2.传递数据量大小
      
      • post最小值是2M，理论上没有上限的。
        
      • get会受到浏览器的地址栏的限制。有的是2k（IE6），有的是8K(chrome)
        
      
      
    • 3.应用范围不一样
      
      • post在绝大多数情况下都使用在表单提交中。
        
      • get的应用范围比较广，只要能进行页面跳转，就能传递数据。在a标签的href中，location.href中等都能使用get方式。
      • 
        
        
      
      
    
    

---

欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)

Powered by Discuz! X3.4