Nodejs教程笔记(六)事件驱动 EJS(后传前) post、get(前传后)

感谢b站教程:《Nodejs教程_Nodejs+Koa2入门实战视频教程-2020年更新》
参考:https://www.w3school.com.cn/tags/att_form_method.asp

一、events模块处理异步

// Nodejs events模块处理异步

const events = require('events')

// console.log(events)

let eventEmitter = new events.EventEmitter();

// 广播和接收广播

// 监听to_parent广播
eventEmitter.on('to_parent', (data) => {
  // console.log('接收到了这个广播')
  console.log(data)
})

setTimeout(() => {
  console.log('开始广播')
  
  // 广播to_parent事件
  eventEmitter.emit('to_parent', '发送的数据')
}, 2000)

二、EJS模块引擎实现NodeJS路由

EJS模块官方文档:https://www.npmjs.com/package/ejs

2.1 安装EJS模块

npm install ejs --save

2.2 EJS模块示例(ejs类型文件中):
  1. 通过符号<%=与%>
  <%= msg %>

即可获取从后台传输过来的msg数据。

  1. 通过符号<%与%>,即可在ejs类型文件中写javascript代码(示例中list是从后台传来的数据)。
<ul>
    <% for(let i = 0; i < list.length; i++) { %>
        <li><%= list[i] %></li>
    <% } %>
  </ul>
  1. 通过符号<%-与%>,可以直接运行从后台传来的html类型代码。也可以用来引用外部模板
<%# 引入外部模板 %>
<%- include ("public/header.ejs") %>
<%# 运行从后台传来的html类型代码%>
<%- h %>
  1. 通过符号<%#与%>,可以注释
2.3 renderFile函数使用:

renderFile可用于将数据从后台传到前台,将数据显示在前台页面上。

	// 第二个参数为渲染的数据,也就是传到前端的数据
    ejs.renderFile('views/login.ejs', {

      // 将data数据传到前台的msg数据处
      msg:data,
      list:list
    }, (err, data) => {
      res.end(data)
    })
2.4 VS代码补全

输入!后按tab可自动生成html模板
输入h1.title后按tab可自动生成如下语句:

<h1 class="title">这是一个头部的模块</h1>

三、Get、Post

3.1 Get、Post介绍

GET:从指定的资源获取数据
POST:向指定的资源提交要被处理的数据

如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
另一种情况是采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
一般浏览器通过上述任何一种方法都可以传输表单信息,而有些服务器只接受其中一种方法提供的数据。可以在 标签的 method (方法)属性中指明表单处理服务器要用方法来处理数据,使 POST 还是 GET。

3.2 具体操作
  1. 判断是post还是get
// 获取get还是post请求
let Method = req.method
  1. post操作

所得的用户密码信息,会传递到headers的form data字段。
ejs文件:

  <form action ='/dologin' method='post'>
    <input type="text" name="username"/>
    <br/>
    <input type="password" name="password"/>
    <br/>
    <input type="submit" name="登陆"/>
  </form>

获取post数据(js文件):

// postStr中存储传过来的数据
let postStr = ''
req.on('data', (chunk) => {
  postStr += chunk
})
req.on('end', (chunk) => {

  // 显示登陆成功提示框并跳转回login
  res.end('<script>alert("登陆成功"); history.back() </script>')
})
  1. get操作

所得的用户密码信息,会传递到url上。
ejs文件:

  <form action ='/dologin' method='get'>
    <input type="text" name="username"/>
    <br/>
    <input type="password" name="password"/>
    <br/>
    <input type="submit" name="登陆"/>
  </form>

获取get数据(js文件):

let getValue = url.parse(req.url, true)
// get获取数据
console.log(getValue.query)
发布了230 篇原创文章 · 获赞 36 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/Ema1997/article/details/104387399
EJS