01Node.js入门+留言本实操
01Node.js
Node.js是什么
- 帮助大家打开服务端,只有懂得服务端才能更好配合服务器开发人员进行协同开发
- Java/PHP/Python/Ruby/.Net/Node.js
官方解释
Node.js不是一门语言,也不是库或者框架,是JavaScript运行时的环境,简单来讲就是Node.js可以解析和运行JavaScript代码,现在JavaScript可以完全脱离浏览器
- Node.js中的JavaScript
- 没有BOM\DOM
- EcmaScript
- 在Node这个JavaScript执行环境中为JavaScript提供了一些服务器就级别的操作API
- 文件读写
- 网络服务的构建
- 网络通信
- http服务器
- .......
- 构建
- event-driven 事件驱动
- non-blocking I/O model 非阻塞IO模型(异步)
- lightweight and efficent 轻量和高效
- npm是世界上最大的开源库生态系统
- 绝大多数JavaScript相关的包都存放在npm上,方便下载eg
npm install jquery
Node.js可以做什么?
- web服务器后端
- 命令行工具
- npm(node)
- git(C)
- hexo(node)
- ..
- 使用第三方
- webpack
- gulp
- npm
require方法
概念
require 是一个方法,它的作用就是用来加载模块的
在 Node 中,模块有三种:
具名的核心模块,例如 fs、http
用户自己编写的文件模块
相对路径必须加 ./
可以省略后缀名
相对路径中的 ./ 不能省略,否则报错在 Node 中,没有全局作用域,只有模块作用域
- 外部访问不到内部
- 内部也访问不到外部
- 默认都是封闭的
既然是模块作用域,那如何让模块与模块之间进行通信,我们加载文件模块的目的不是为了简简单单的执行里面的代码,更重要是为了使用里面的某个成员
作用
require 方法有两个作用:
- 加载文件模块并执行里面的代码
- 拿到被加载文件模块导出的接口对象
exports
- 在每个文件模块中都提供了一个对象:exports
exports 默认是一个空对象,要把所有需要被外部访问的成员挂载到这个 exports 对象中
使用方法
request 请求事件处理函数,需要接收两个参数:
- request 请求对象
- 请求对象可以用来获取客户端的一些请求信息,例如请求路径
- response 响应对象
- 响应对象可以用来给客户端发送响应消息
- response 对象有一个方法:write 可以用来给客户端发送响应数据
- write 可以使用多次,但最后要使用 end 来结束响应,否则客户端会一直等待,告诉客户端结束了,呈递给用户了
response.end()
- 可以直接 end 的同时发送响应数据
res.end('hello nodejs')
- res.end()里面只接受字符串,需要用JSON.stringfy(xxx)进行转字符串
- write 可以使用多次,但最后要使用 end 来结束响应,否则客户端会一直等待,告诉客户端结束了,呈递给用户了
根据不同的请求路径发送不同的响应结果
- 获取请求路径
req.url 获取到的是端口号之后的那一部分路径,也就是说所有的 url 都是以 / 开头的 - 判断路径处理响应
require 加载 fs 核心模块
fs 核心模块
fs 是 file-system 的简写,就是文件系统的意思,在 Node 中如果想要进行文件操作,就必须引入 fs 这个核心模块
在 fs 这个核心模块中,就提供了所有的文件操作相关的 API
fs.readFile()
就是读取文件的
- 第一个参数就是读取文件路径
第二个参数就是一个回调函数
- 成功
- data:数据
- error: null
- 失败
- data: undefined
- error :错误对象
fs.readFile('./data/a.txt', function (error, data) {if (error) {console.log('读取文件失败了')} else {console.log(data.toString())}
})
fs.writeFile()
写文件的
- 第一个参数:文件路径
- 第二个参数:文件内容
- 第三个参数:回调函数
- 成功:error:null
- 失败:error错误对象
fs.writeFile('./data/你好.md', '大家好,给大家介绍一下,我是Node.js', function (error) {if (error) {console.log('写入失败')} else {console.log('写入成功')}
})
http 创建编写服务器
服务器作用
- 提供服务:对数据的服务
- 发请求
- 接收请求
- 处理请求
- 给个反馈(发送响应)一个请求对应一个响应,如果在一个请求的过程中,已经结束响应了,则不能重复发送响应。
- 注册 request 请求事件
- 当客户端请求过来,就会自动触发服务器的 request 请求事件,然后执行回调处理函数
使用方法
一、加载 http 核心模块
var http = require('http')
二、使用 http.createServer() 方法创建一个 Web 服务器,返回一个 Server 实例
var server = http.createServer(function(req,res){})
三、打开服务器并作出响应
server.on('request', function () {console.log('收到客户端的请求了')
})
四、绑定端口号,启动服务器
server.listen(3000, function () {console.log('服务器启动成功了,可以通过 http://127.0.0.1:3000/ 来进行访问')
})
02Node.js
代码标准
代码标准
无分号注意:无分号当使用以下开头( [ ` 最好前面补分号,避免一些问题
` 是 EcmaScript 6 中新增的一种字符串包裹方式,叫做模板字符串,它支持换行和非常方便拼接变量
在 EcmaScript 6 的 ` 字符串中,可以使用 ${} 来拼接、引用变量
return 有两个作用:
1. 方法返回值
2. 代码继续往后执行
art-template 模板引擎
- 安装:
npm install art-template
该命令在哪执行就会把包下载到哪里。默认会下载到 node_modules 目录中
node_modules 不要改,也不支持改。 - 在需要使用的文件模块中加载 art-template
只需要使用 require 方法加载就可以了:require('art-template')
参数中的 art-template 就是你下载的包的名字
也就是说你 isntall 的名字是什么,则你 require 中的就是什么
- 查文档,使用模板引擎的 API
- template.render() 默认读取到的 data 是二进制数据,而模板引擎的 render 方法需要接收的是字符串,所以我们在这里需要把 data 二进制数据转为 字符串 才可以给模板引擎使用
问题:如何生成自动可变的目录
- 如何得到 wwwDir (即自定义的根路径) 目录列表中的文件名和目录名
fs.readdir
- 如何将得到的文件名和目录名替换到 template.html (主页面)中
2.1 在 template.html (主页面)中需要替换的位置预留一个特殊的标记(就像以前使用模板引擎的标记一样)
2.2 根据 files 生成需要的 HTML 内容 - 注意:在浏览器中需要引用 lib/template-web.js 文件
强调:模板引擎不关心你的字符串内容,只关心自己能认识的模板标记语法,例如 {{}}
{{}} 语法被称之为 mustache 语法,八字胡啊。
客户端渲染和服务端渲染
- 服务端渲染即在服务端使用模板引擎
- 服务端渲染和客户端渲染的区别
- 客户端渲染不利于 SEO 搜索引擎优化
- 服务端渲染是可以被爬虫抓取到的,客户端异步渲染是很难被爬虫抓取到的
- 所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的,而是两者结合来做的
- 例如京东的商品列表就采用的是服务端渲染,目的了为了 SEO 搜索引擎优化,而它的商品评论列表为了用户体验,而且也不需要 SEO 优化,所以采用是客户端渲染
- 最少两次请求,发起 ajax 在客户端使用模板引擎渲染
- 客户端拿到的就是服务端已经渲染好的
制作留言本
步骤
- / index.html
- 开放 public 目录中的静态资源
当请求 /public/xxx 的时候,读取响应 public 目录中的具体资源 - /post post.html(表单页面)
- /pinglun
4.1 接收表单提交数据
4.2 存储表单提交的数据
4.3 让表单重定向到 /
statusCode
setHeader
主页面
- 处理留言本案例首页数据列表渲染展示
- 处理留言本案例发表留言功能
开放public
路径:如果请求路径是以 /public/ 开头的,则我认为你要获取 public 中的某个资源,所以我们就直接可以把请求路径当作文件路径来直接进行读取
解析路径url
Node 中需要咱们自己动手来解析
- var url = req.url
- 如果是文件,直接读取响应
- 如果是目录,读取渲染目录列表
- 如果目录并且有该目录中有 index.html 则直接渲染目录中的 index.html
- 使用 url.parse 方法将路径解析为一个方便操作的对象,第二个参数为 true 表示直接将查询字符串转为一个对象(通过 query 属性来访问)
- 已经使用 url 模块的 parse 方法把请求路径中的查询字符串给解析成一个对象后
- 获取表单提交的数据 parseObj.query
var parseObj = url.parse(req.url, true)
- 将当前时间日期添加到数据对象中,然后存储到数组中
- 让用户重定向跳转到首页 /当用户重新请求 / 的时候,我数组中的数据已经发生变化了,所以用户看到的页面也就变了
- 将当前时间日期添加到数据对象中,然后存储到数组中
- 获取表单提交的数据 parseObj.query
- 服务端这个时候已经把数据存储好了,接下来就是让用户重新请求 / 首页,就可以看到最新的留言内容了
重定向
header('location')
- 301 永久重定向 浏览器会记住
- a.com b.com
- a 浏览器不会请求 a 了
- 直接去跳到 b 了
- 302 临时重定向 浏览器不记忆
- a.com b.com
- a.com 还会请求 a
- a 告诉浏览器你往 b
如何通过服务器让客户端重定向?
- 状态码设置为 302 临时重定向
statusCode- 在响应头中通过 Location 告诉客户端往哪儿重定向
setHeader
- 在响应头中通过 Location 告诉客户端往哪儿重定向
res.statusCode = 302 res.setHeader('Location', '/') res.end()
- 状态码设置为 302 临时重定向
Console(REPL)使用
node回车到类似控制台的执行环境,作用:类似api辅助测试,退出两次ctrl+c
转载于:https://www.cnblogs.com/furfur-jiang/p/11382571.html
01Node.js入门+留言本实操相关推荐
- 尚硅谷大数据技术Spark教程-笔记09【SparkStreaming(概念、入门、DStream入门、案例实操、总结)】
尚硅谷大数据技术-教程-学习路线-笔记汇总表[课程资料下载] 视频地址:尚硅谷大数据Spark教程从入门到精通_哔哩哔哩_bilibili 尚硅谷大数据技术Spark教程-笔记01[SparkCore ...
- 一篇文章带你快速入门JavaScript(实操代码)
目录 一.前提简介 1.1什么是JavaScript 1.2JavaScript和Java语言的区别 1.3Html.Css和Javascript 1.4Javascript作用 二.实操代码 2.1 ...
- ArcGIS智能标注入门及基础实操
目录 一.什么是智能标注? 二.使用例子 1.打开 Maplex 标注引擎 2.修改标注的放置属性表 一.什么是智能标注? Maplex Label Engine(智能标注)是ArcGIS的高级标注方 ...
- 前端-Vue.js从入门到精通基础笔记(理论+实操+知识点速查)
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言 本文完全基于 参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
- 小白玩大数据日志分析系统经典入门实操篇FileBeat+ElasticSearch+Kibana 实时日志系统搭建从入门到放弃
大数据实时日志系统搭建 距离全链路跟踪分析系统第二个迭代已经有一小阵子了,由于在项目中主要在写ES查询\Storm Bolt逻辑,都没有去搭建实时日志分析系统,全链路跟踪分析系统采用的开源产品组合为F ...
- 【直播回顾及资料下载】小程序云应用入门实操系列课程第一讲...
直播详情:小程序云应用入门实操系列课程第一讲:https://yq.aliyun.com/articles/698244 直播时间:2019年4月16日 20:30 直播专家: 白宦成 - Linux ...
- jQuery入门实操-css操作,鼠标点击事件,页面计算器
前言 本文是学习jQuery中的一些实践,是jQuery入门的实操案例.更多语法可参考w3school的jQuery参考手册 jQuery是一个快速.简洁的JavaScript框架,是继Prototy ...
- 免费直播!真.零基础能学会的前端入门教程,还带实操抖音风格字体特效!
茫茫职海中,有没有那么一个又简单又赚钱的行业呢? 答案:前端!!! 前端是进入技术行业的一个捷径,规划好能事半功倍. 1.前端门槛低,简单易学: 2.应用场景广泛,现已涉及到了各个领域: 3.市场需求 ...
- 微生物组入门必读+宏基因组实操课程=新老司机赶快上车
声明:本文转载自宏基因组公众号,原作者朱微金,己获作者授权. 写在前面 作为纯wet遗传学博士,转行微生物组领域已经有两年.目睹微生物组文章中分析所占比重之大,让我痛下决心苦学dry技能.目前感觉对宏 ...
最新文章
- Oracle 用Drapper进行like模糊传参查询需要在参数值前后带%符合
- MySQL5.6一主多从复制配置方式一:Tungsten复制中间件
- 教怎样写好一份“漏洞报告”
- java获取mavenlib路径,maven install报错致命错误: 在类路径或引导类路径中找不到程序包 java.lang | ZPY博客...
- 当前时间转换的秒数_C++ 日期 amp; 时间
- linux百万行数据加分页符,百万级数据量报表全量导出
- vue 历史更新 功能
- Dlib Python 检测人脸特征点 Face Landmark Detection
- 关于 intptr_t
- 115怎么利用sha1下载东西_用于批量倾倒和提取的115 sha1工具
- python头像转卡通_用python将你的头像“卡通化”
- rockchip rk3566 调试杂记
- windows版微信多开
- C/C++语言——数据类型
- ac Let‘s Play Curling
- 如何在library中使用productFlavors
- 1348:【例4-9】城市公交网建设问题——Kruskal算法
- matlab bsxfun memory,[转]matlab函数 bsxfunarrayfun
- 怎么安装LINUX系统
- C#简易播放器(WindowsMediaPlayer)
热门文章
- 《白帽子讲Web安全》8-文件上传漏洞
- (c语言详解)07-图6 旅游规划(详细解释)
- 前端学习笔记001:HTML5
- 深度好文推荐阅读——阿里云的这群疯子
- android 判断 音乐是否播放,Android如何判断当前手机是否正在播放音乐并获取有关正在播放的音乐的信息...
- chariot iperf使用_ixchariot吞吐量测试
- Luogu-P2015 二叉苹果树
- 决策树(Decision Tree)
- Civil 3d 路线之固定图元(AlignmentEntity)部分分析
- 瑞盟高精度模数转换器,MS1242,MS1243,