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

标题: 杨国强20230130 [打印本页]

---

作者: 违心    时间: 2023-2-4 17:46
标题: 杨国强20230130
1. 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