Web全栈开发案例教程课件 第3章 Node.js后端开发

Node.js第3章Node.js后端开发《Web全栈开发案例教程》Node.js目录01什么是Node.js02Node.js发展历史03Node.js特点及应用场景04Node.js与JavaScript区别什么是Node.jsNode.js--让JavaScript运行在服务器端的平台,是JavaScript语言的服务器运行环境。--采用Google公司的V8引擎作为JavaScript语言解释器，通过自行开发的libuv库来调用操作系统资源。--V8引擎执行Javascript速度非常快，性能非常好。--对一些特殊用例进行了优化，提供了替代的API。诞生自2009年瑞安·达尔在GitHub上发布Node.js的最初版本2013年12月著名的Koa框架发布2010年1月Node.js包管理器npm诞生3月Express.js问世2015年9月Node.js和io.js合并，Node.js4.0发布2019年Node.js增强了实验性的ESModule支持，并伴随着V8引擎版本升级以及ES特性支持，进入12.x迭代。Node.js发展历史2012年6月Node.jsV0.8.0稳定版发布2011年7月Node.js在微软的赞助下发布了Windows版本单线程模型，在执行过程中只启动一个线程来运行代码。CPU和内存在同一时间集中处理一件事，同时尽可能让耗时的I/O操作并行执行采用异步式I/O与事件驱动架构设计作为服务器向用户提供服务，它跳过了HTTP服务器，直接面向前端开发。内置HTTP服务器有上万个第三方模块网站开发框架、数据库接口，模板语言解析、CSS生成工具、图形用户界面和操作系统API工具等拥有强大而灵活的包管理器Node.js特点及应用场景二进制类库、核心模块二进制类库包括libuv，为网络以及文件系统提供了快速的时间轮循以及非阻塞I/OHTTP类库，快速构建HTTP客户端和服务器具有强大的标准类库JavaScript02区别Javascript最初是一种Web前端语言，由浏览器解析执行，受制于浏览器提供的接口。浏览器为了安全考虑，对文件操作、网络操作、操作系统交互等功能有限制，所以在浏览器端的JavaScript功能受限。Node.jsNode.js与JavaScript区别Node.js事实上既是一个运行环境，同时又是一个库。Node.js完全没有浏览器端的限制，让JavaScript拥有了文件操作、网络操作、进程操作等功能，允许脱离浏览器环境运行JavaScript代码。Node.js的安装/en/download/Node.js下载/Node.js中文网运行Node.js程序nodehello.jsnodemonhello.js在GitBash下运行nodehello.jsnodemonhello.js在CMD中运行右击文件—运行方式—1NodeApplication在HBuilder中运行主讲人：唐四薪Node.js3.1ECMAScript6语言基础《Web全栈开发案例教程》引入ECMAScript是由ECMA国际标准化组织制定的一项JavaScript语言的国际标准，JavaScript是实现ECMAScript标准的脚本语言。ES6表示ECMAScript规范的第6版，即2015版。第一个JavaScript程序【例3-1】变量的声明（hello.js）1varname="张三";2letstr="欢迎你，"+name+"!";3console.log(str);//声明变量//连接字符串和变量//输出变量strvar和let的区别：var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象（即不声明也可直接使用）。而let和const声明的变量或常量都只有块级作用域，其作用域为该语句所在的语句块{…}中。+

既是连接运算符，又是算术运算符，只有其左右两边都是数值时，才执行相加运算模板字符串【例3-1】模板字符串（反引号字符串）（hello.js）1varname="张三";2letstr=`欢迎你，${name}!`;

3console.log(str);//使用模板字符串模板字符串是增强版的字符串，支持在字符串中嵌入变量、表达式甚至调用函数等功能。变量（或符号常量）写成${变量名}的方式解析变量声明和调用函数【例3-1】声明函数并调用（hello.js）1functionhello(name) { 2

letstr=`欢迎你，${name}!`;3returnstr;4}5console.log(hello("张三丰"));//声明函数//调用函数函数的输入：形参函数的输出：return变量箭头函数【例3-1】声明箭头函数并调用（hello.js）1consthello=name=>`欢迎你，${name}!`;2console.log(hello("张三丰"));//箭头函数//调用函数如果函数只有一个参数，可以省略参数外部的小括号。无参数不能省略如果函数体中只有一条语句，可以同时省略花括号和return。1consthello=name=>(`欢迎你，${name}!`);consthello=(name)=>{return`欢迎你，${name}!`};consthello=(name)=>{`欢迎你，${name}!`};

箭头函数中的this【例3-1】箭头函数中的this举例（hello.js）1constobj={name:'zhangsan'};2functionfn(){console.log(this); //输出结果：{name:'zhangsan'}return()=>{5console.log(this); //输出结果：{name:'zhangsan'}6};7}8constresFn=fn.call(obj);10resFn();//声明函数//call()方法可以改变函数内部的this指向ES6中，箭头函数不绑定this关键字，它没有自己的this关键字，如果在箭头函数中使用this关键字，那么this关键字指向的是箭头函数定义位置的上下文this。将函数声明和函数调用写在不同文件中（模块化）【例3-1】声明函数并导出函数（hello.js）1consthello=(name)=>(`欢迎你，${name}!`);2module.exports=hello;//声明hello函数函数、变量和常量都能够导出，供其他文件导入使用，实现代码重用这种模块化遵循CommonJS模块化规范//导出hello函数【例3-2】导入函数并调用函数（hello.js）1consthello=require('./hello');2constwelcome=hello("张三丰");3console.log(welcome);//导入hello函数//调用hello函数一个文件中有多个函数的导出（模块化）【例3-1】声明函数并导出函数（hello.js）1consthello=(name)=>(`欢迎你，${name}!`);2constellips=(str,len)=>str.length>len?str.substring(0,len)+'...':str;3module.exports={hello,ellips};如果要导出多个函数，把这些函数都放在一个对象中。//导出多个函数【例3-2】导入函数并调用函数（hello.js）const{hello,ellips}=require('./hello');console.log(hello("张三"));constwelcome=ellips("10位专家学者衡师开讲纵论王船山",14);//导入多个函数Node.js3.2Web交互编程基于HTTP协议的客户端和服务器端的交互过程3.2.1Web交互开发基础3.2.2HTTP的请求消息和响应消息请求消息在HTTP请求和响应的过程中传递的数据块就叫HTTP消息，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。请求消息是指客户端向服务器端发送请求时所携带的数据块。/index.html3.2.2HTTP的请求消息和响应消息响应消息是指服务器端向客户端进行响应请求时所携带的数据块。响应消息3.2.3请求消息请求方式用来规定客户端与服务器端联系的类型。HTTP协议中常用的请求方式有哪些？主要是GET和POST两种。当用户在浏览器地址栏中直接输入某个URL地址或者单击网页上一个超链接时，浏览器将默认使用GET方式发送请求。如果将网页上的<form>标签的method属性设置为post，那么就会以POST方式发送请求。3.2.1初识Node.js网站服务器小提示：在开发阶段，客户端和服务器端使用同一台计算机，这是因为在开发人员计算机中既安装了浏览器（客户端），又安装了Node.js（服务器端）。既然是同一台计算机，我们如何通过网络的方式访问它呢？每台计算机中都有一组特殊的IP和域名，代表本机。如果将本机作为服务器，则该计算机的特定IP为，特定域名为localhost。例如在开发程序中，我们输入localhost就代表要通过网络的方式找到自己计算机当中的服务器。Node.js3.3Express核心功能3.3Express核心功能Express是TJHolowaychuk于2009年6月创建的、构建在Node.js平台上的Web开发框架，通过中间件机制和路由系统简化了HTTP服务器的创建流程。该框架支持快速搭建RESTfulAPI服务，提供模板引擎整合功能。 //安装Express npminstallexpressExpress框架的核心概念包括路由、中间件和视图引擎。路由负责处理不同的URL请求，并将其映射到相应的处理函数；中间件可以在请求处理的过程中执行一些额外的操作，如日志记录、身份验证等；视图引擎则用于渲染动态页面，将数据与模板相结合，生成最终的HTML页面。Express项目文件结构在命令行下创建Express项目routes：路由文件目录,响应路由请求的程序文件views：模板文件目录public：静态资源文件目录在HBuilderX中创建Express项目E:\>npminstall-gexpress-generatorE:\>express-ewcssite文件→新建→项目→Express项目Express项目结构3.2.2创建Node.js网站服务器【例3-1】用Express框架创建Web服务器（app.js）1varexpress=require('express');2varapp=express();3constport=3000;4app.listen(port,()=>{5 console.log(`Serverisrunningonport${port}`);6});7module.exports=app;//引入express模块//创建一个express模块的实例app//用app对象的listen方法监听端口//向外共享app变量，供其他文件引用//反引号字符串3.2.2创建Node.js网站服务器运行【例3-1】，在cmd窗口输入如下命令：E:\wcssite>nodeapp.jsServerisrunningonport3000打开浏览器，在地址栏输入http://localhost:3000/3.2.3响应GET请求【例3-2】响应GET请求示例（app.js）1 varexpress=require('express');2 varapp=express();3 app.get('/',function(req,res){ 4 res.send('你好，船山研究');5 });6 constport=3000;7 app.listen(port,()=>{8 console.log(`Serverisrunningonport${port}`);9 });10 module.exports=app;//引入express模块//创建一个express模块的实例app//用app对象的listen方法监听端口//向外共享app变量，供其他文件引用//响应get请求//发送字符串给浏览器3.2.2创建Node.js网站服务器运行【例3-2】，在cmd窗口输入如下命令：E:\wcssite>nodeapp.jsServerisrunningonport3000打开浏览器，在地址栏输入http://localhost:3000/浏览器服务器http://localhost:3000/你好，船山研究app.get()说明服务器已经能够响应浏览器对网站根目录“/”的GET请求了回调函数【例3-2】响应GET请求示例（app.js）1 app.get('/',function(req,res){ 2 res.send('你好，船山研究');3

});

Node.js实现异步编程的主要方法是回调函数。回调函数，指将函数作为参数传递给另一个函数，在特定事件发生时被自动调用执行（无需手工调用）。异步编程时，回调函数会在任务完成后进行调用，不用等待文件I/O的操作，从而使程序能够执行多个并发请求。3.2.3响应GET请求【例3-3】获取URL参数示例（app.js）1 varexpress=require('express');2 varapp=express();3 app.get('/',function(req,res){4 res.send(req.query.id); 5 });6 constport=3000;7 app.listen(port,()=>{8 console.log(`Serverisrunningonport${port}`);9 });10 module.exports=app;//引入express模块//创建一个express模块的实例app//用app对象的listen方法监听端口//向外共享app变量，供其他文件引用//响应get请求//获取url参数：id3.2.2创建Node.js网站服务器运行【例3-3】，在cmd窗口输入如下命令：E:\wcssite>nodeapp.jsServerisrunningonport3000打开浏览器，在地址栏输入http://localhost:3000/?id=王船山浏览器服务器?id=王船山王船山req.query.id说明服务器已经获取到URL中的参数了3.2.3响应GET请求【例3-4】获取路由参数示例（app.js）1 varexpress=require('express');2 varapp=express();3 app.get('/:id',function(req,res){4 res.send('你好，'+req.params.id);5 });//引入express模块//创建一个express模块的实例app//获取路由参数：id如果有2个路由参数，则可以写成app.get('/:id/:name',function(req,res)3.2.4响应POST请求【例3-5】获取表单数据示例（3-5.html和app.js）<formmethod="post"action="http://localhost:3000/yz">

用户名:<inputtype="text"name="userName"size="12">

密码:<inputtype="text"name="PS"size="10"><inputtype="submit"value="登录"></form>varexpress=require('express');varapp=express();constbodyParser=require('body-parser'); app.use(bodyParser.urlencoded({extended:true}));app.post('/yz',function(req,res){res.send('您的用户名是：'+req.body.userName+

'<br>您的密码是：'+req.body.PS);});3.3.1定义中间件中间件是一个函数，它可以访问请求对象（req）、响应对象（res）和应用程序“请求——响应”循环中的下一个中间件函数（next）。【例3-6】定义中间件示例（app.js）1 varapp=express();2 app.use('/test',(req,res,next)=>{ 3

='船山';4 next();5 });6 app.use('/test',(req,res)=>{7 res.send('欢迎，'+);8 });//定义中间件app.use()的回调函数中有next参数，表示它是一个中间件3.3.2静态资源访问静态资源服务是指客户端向服务器端请求的资源，服务器端不需要处理，可以直接响应给客户端的资源。静态资源主要包括CSS、JavaScript、image文件，以及HTML文件。动态资源指的是相同的请求地址可以传递不同的请求参数，得到不同的响应资源，这种资源称为动态资源。静态资源服务如果希望服务器端的静态资源能够被用户访问到，这就需要实现静态资源访问功能。在服务器端创建一个专门的目录，存放静态资源。当客户端请求某个静态资源文件时，服务器端将这个静态资源响应给客户端。实现静态资源访问3.3.2定义静态资源目录将某个目录定义为静态资源目录后，就能用文件的url直接访问该目录下的文件了。方法是使用express.static()，这是一个内置中间件。【例3-7】定义静态资源目录示例（app.js）1 varapp=express();2 app.use(express.static('public')); //将public定义为静态资源目录http://localhost:3000/images/1.jpgD:\website\public\images\1.jpg3.3.3读取和写入本地文件Node.js使用fs模块对文件进行操作，该模块是核心模块。fs模块支持同步和异步方式访问文件。【例3-8】读取文本文件并输出（app.js）1 constfs=require('fs'); //引入fs模块2 varexpress=require('express');3 varapp=express();4 app.get('/fs',function(req,res){5 constdata=fs.readFileSync('public/index.html','utf8'); //同步方式读取文件6 res.send(data); //输出文本文件内容8 });3.3.3读取和写入本地文件Node.js使用fs模块对文件进行操作，该模块是核心模块。fs模块支持同步和异步方式访问文件。【例3-9】写入文本文件并输出写入后的结果（app.js）1 constfs=require('fs');2 app.get('/fs',function(req,res){3 varstr="伟大思想家王船山<br>";fs.appendFileSync('public/inde.html',str,function(err){ });//追加写入

constdata=fs.readFileSync('public/index.html','utf8'); //同步方式读取文件6 res.send(data); //将读取的文件内容输出});3.3.4定义模块化路由Node.js使用fs模块对文件进行操作，该模块是核心模块。fs模块支持同步和异步方式访问文件。【例3-8】定义模块化路由（app.js）1 varindexRouter=require('./routes/index'); //包含模块化路由indexvaradminRouter=require('./routes/admin');//包含路由adminvarexpress=require('express');varapp=express();app.use('/',indexRouter); //定义前端路由的起始路径app.use('/admin',adminRouter); //定义后端路由的起始路径3.3.4定义模块化路由Node.js使用fs模块对文件进行操作，该模块是核心模块。fs模块支持同步和异步方式访问文件。【例3-8】定义模块化路由（app.js）app.use('/',indexRouter); //定义前端路由的起始路径app.use('/admin',adminRouter); //定义后端路由的起始路径访问http://localhost:3000/http://localhost:3000/admin3.3.5使用网页模板引擎使用Node.js制作网站必须使用模板引擎。模板引擎可以实现显示界面与逻辑处理的分离，在应用中使用静态模板文件，在运行时使用路由传入的变量替换模板中的静态数据，通过res.render()将渲染后的HTML显示在浏览器

Pug(以前称为Jade)：是一个高级的、功能丰富的模板引擎，它旨在创建高质量的HTML。‌EJS（EmbeddedJavaScript）‌是一种基于JavaScript的简单高效模板引擎两种模板引擎ejs标签的含义ejs模板引擎中标签主要有以下形式：<%

：“脚本”标签，用于流程控制，无输出；<%_

：删除其前面的空格符；<%=：

输出数据到模板，输出的是转义HTML标签；<%-

：输出非转义的数据到模板；<%#

：注释标签，不执行、不输出内容；<%%

：输出字符串

'<%'；%>：

一般结束标签；-%>

：删除紧随其后的换行符；_%>

：将结束标签后面的空格符删除。<%if(user){%><h2><%=%></h2><%}%>Node.js的ejs模板

——通过JavaScript代码生成HTML页面支持直接在标签内书写简单、直白的JavaScript代码app.get('/',(req,res)=>{ res.render(‘index’,{message:‘欢迎：',

user:{name:'张三'

}});});ejs模板中的include指令通过include命令将相对于模板路径中的模板片段包含进来。通常网站内所有页面的头部和尾部都是相同的。为此，可以将网页头部代码和尾部代码单独封装成ejs文件，将其放在views文件夹下，命名为top.ejs和bottom.ejs<body> <%-include("./top.ejs")%> <divclass="main"> ......//此处省略代码

</div> <%-include("./bottom.ejs")%></body>3.3.4渲染ejs模板示例【例3-8】ejs模板引擎使用示例（app.js）varexpress=require('express');varapp=express();app.set('views',path.join(__dirname,'views')); //设置模板文件存放的目录app.set('viewengine','ejs'); //指定使用ejs模板引擎app.use(express.static('public')); //将public定义为静态资源目录app.get('/intro',function(req,res){ vartitle='王船山简介'; varcontent='<p>王夫之，字而农……。</p><p>王夫之自幼……。</p>'; varwcs=['人物生平','历史评价','人物故居'] res.render('intro',{title:title,content:content,wcs:wcs});});3.3.4渲染ejs模板示例(续)【例3-8】ejs模板引擎使用示例（views/intro.ejs）<h2align="center"><%=title%></h2> <ahref="#"target="_blank"><imgsrc="images/wcs