《(11.1)--Node.js基础Web前端攻城狮.pdf》由会员分享，可在线阅读，更多相关《(11.1)--Node.js基础Web前端攻城狮.pdf（84页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、双击此处编辑标题饶晓宇Node.js 基础什么是 Node.js01Node.js 语法02模块和 NPM03构建 Web 应04录01 什么是 Node.jsNode.js is a JavaScript runtime built onChromes V8 JavaScript engine.https:/nodejs.org与 JavaScript 的区别基于异步 I/O 相关接基于 node_modules 和 require 的模块依赖提供 C+addon API 与系统交互Node 的发展历程2009 年，由 Joyent 的员 Ryan Dahl 开发成Ryan 在2012年离开
2、社区2015年由于 Node 贡献者对 es6 新特性集成问题的分歧，分裂出iojsiojs 发布1.0、2.0和3.0版本2015年Node基会的成，与iojs 合并，顺利发布了4.0版本Node.js基会发展很好，稳定地发布多个版本Ryan 在2018年发布了denoNode 特性事件驱动单线程/异步/阻塞npmNode.js 可以什么？Web 服务端：Web Server、爬CLI 命令脚本：webpackGUI 客户端软件：VSCode、易云乐IoT,图像处理,实时通讯，加密货币.const puppeteer=require(puppeteer);const url=https:?
3、browser=await puppeteer.launch();const page=await browser.newPage();await page.goto(url);const data=await page.evaluate()?return Array.from(document.querySelectorAll(.comment?item),cmt?(user:cmt.querySelector(.comment?info a).innerText,content:cmt.querySelector(p).innerText ););data.forEach(user,con
4、tent)?console.log($user:$content);await browser.close();)();Puppeteer Sandbox02 Node.js 语法安装 Node.jsNode.js is a JavaScript runtime built on Chromes V8 JavaScript engine.#BlackLivesMatterDownload for Linux(x64)12.18.3 LTSRecommended For Most UsersOther Downloads|Changelog|API Docs 14.7.0 CurrentLate
5、st FeaturesOther Downloads|Changelog|API DocsOr have a look at the Long Term Support(LTS)schedule.HOME|ABOUT|DOWNLOADS|DOCS|GET INVOLVED|SECURITY|CERTIFICATION|NEWShttps:/nodejs.org安装 Node.js https:/asciinema.org/a/348477/embed?size=big数据类型原始数据类型NumberStringBooleanNullUndefinedSymbol引数据类型ObjectArray
6、FunctionMapSet.对象1 let obj=2 a:1,3 b:4 c:hello,5 d:true6 7;8 9 console.log(obj.b.c);?hello10 11 let arr=1,2,3;12 console.log(arr.length);?313 console.log(arr.map(v?v*2);?2,4,614 typeof arr;?object变量定义1?var 定义的变量可以重复定义2 var x=0;3 var x=1;4 5?let 定义的变量只允许定义次6 let x=0;7 let x=1;?Uncaught SyntaxError:Id
7、entif?er x has already been declared8 9?const 定义的变量不可重新赋值10 const x=0;11 x=1;?Uncaught TypeError:Assignment to constant variable.12 13?不允许换，使+拼接字符串14 var name=Li Lei;15 var x=Hello World +name;16 17?使 模板字符串定义18 var x=Hello World$name;19 20?对象21 var x=22 a:0,条件语句1 const a=1;2 if(a)3 console.log(hello
8、 world);4 5 6 if(a?1)7 console.log(hello world again!);8 9 10 if(a?1)11 console.log(hello world again and again!);12 13 14 console.log(a?2);?215 console.log(a?2);?116 17 switch(a)18 case 1:19 console.log(a);20 break;21 22 default:循环1 for(let i=0;i 10;i?)2 console.log(i);3 4 5 6 let i=0;7 while(i 10)
9、8 console.log(i);9 i?;10 11 12 13 let i=0;14 do 15 console.log(i);16 i?;17 while(i 1.0.0 Must be greater thanversion=1.0.0 1.0.0=version1=version2.04 构建 Web 应const http=require(http);const server=http.createServer(req,res)?res.end(Hello World););server.listen(3000);WebKoaconst Koa=require(koa);const
10、 app=new Koa();?response app.use(ctx?ctx.body=Hello Koa;);app.listen(3000);https:/ Application extends Emitter?listen()debug(listen);const server=http.createServer(this.callback();return server.listen.apply(server,arguments);use(fn)this.middleware.push(fn);return this;callback()const fn=compose(this
11、.middleware);if(!this.listeners(error).length)this.on(error,this.onerror);const handleRequest=(req,res)?res.statusCode=404;const ctx=this.createContext(req,res);const onerror=err?ctx.onerror(err);const handleResponse=()?respond(ctx);onFinished(res,onerror);return fn(ctx).then(handleResponse).catch(o
12、nerror);hdl RKoaconst Koa=require(koa);const app=new Koa();?response app.use(ctx?ctx.body=Hello Koa;);app.listen(3000);https:/ Koa=require(koa);const app=new Koa();app.use(async(ctx,next)?const start=Date.now();await next();const ms=Date.now()-start;console.log($ctx.method$ctx.url-$msms););?response
13、 app.use(ctx?ctx.body=Hello Koa;);app.listen(3000);执过程服务启动实例化 application注册中间件创建服务、监听端接收、处理请求获取请求的 req、res 对象基于 req 包装 request 对象基于 res 包装 response 对象基于 request 和 response 包装 context 对象将返回状态码设置为 404执中间件输出设置到 ctx.body 上的内容Koa 规范约束，不利于团队开发 中间件繁多，质量参差不，选择困难 逻辑分层路由处理数据解析、校验权限校验Session、Cache数据库、Redis安全.s
14、rc bootstrap conf?g conf?g.js adapter.js controller index.js logic index.js model view index_index.html?static css img js development.js production.js package.json?src/controller/index.jsexport default class extends think.Controller indexAction()return this.display();?view/index_index.html Hello Wor
15、ldhttps:/thinkjs.orgThinkJS基于 Koa内置套完善的中间件列表持 Extend 和 Adapter，便扩展sessioncachedbwebsocketLogic、ServiceAOP中间件统管理const path=require(path);const isDev=think.env?development;module.exports=handle:meta,options:logRequest:isDev,sendResponseTime:true ,handle:resource,enable:isDev,options:root:path.join(thi
16、nk.ROOT_PATH,?),publicPath:/(static|favicon.ico)/内置中间件think-metathink-resoucethink-tracethink-payloadthink-routerthink-logicthink-controller扩展const view=require(think?view);const model=require(think?model);const fetch=require(think?fetch);const session=require(think?session);module.exports=view,?mak
17、e application support view model(think.app),fetch,session;扩展类型src/extend/application.jssrc/extend/context.jssrc/extend/request.jssrc/extend/response.jssrc/extend/think.jssrc/extend/controller.jssrc/extend/logic.jssrc/extend/service.js?src/extend/controller.jsmodule.exports=get isMobile()const userAg
18、ent=this.userAgent.toLowerCase();const mList=iphone,android;return mList.some(item?userAgent.indexOf(item)-1);扩展 Controller?src/controller/index.jsmodule.exports=class extends think.Controller indexAction()if(this.isMobile)?解决个功能不同实现下接不统的问题提供统的接，可以通过配置快速切换Adapter 模式Adapter（缓存）const mysql=require(thi
19、nk?model?mysql);const postgresql=require(think?model?postgresql);exports.model=type:mysql,common:logConnect:isDev,logSql:true ,mysql:handle:mysql,database:test,pref?x:think_,host:127.0.0.1,port:,user:root,password:12345678 Adapter 配置module.exports=class extend think.Controller indexAction()?默认使 mysq
20、l 数据库 const user=this.model(user);?动态切换为 postgre 数据库 const anotherUser=this.model(user,postgre);Adapter 使TODO List 项实战功能列表TODO List 的API获取 TOO 列表增加 TODO删除 TODO更新 TODO 状态CREATE TABLE ticket(id int(11)unsigned NOT NULL AUTO_INCREMENT,desc varchar(255)NOT NULL DEFAULT,status tinyint(11)NOT NULL DEFAULT
21、 0 COMMENT 0 是未完成，1是已完成,createdAt datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,updatedAt datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMES PRIMARY KEY(id)ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;数据表设计npm install-g think-cli?thinkjs?version 2.2.8创建项$thinkjs new todo$cd todo$npm install?
22、simple?todo npm start simple?todo1.0.0 start/Users/lizheming/Desktop/star?plan/node development.js 2019-04-21T21?58:16.197 7077 INFO-Server running at h2019-04-21T21?58:16.201 7077 INFO-ThinkJS version:32019-04-21T21?58:16.201 7077 INFO-Environment:develo2019-04-21T21?58:16.201 7077 INFO-Workers:1启动
23、项模板渲染?src/controller/index.jsconst Base=require(./base.js);module.exports=class extends Base indexAction()return this.display();API 开发使 RESTful APIRESTful 接规范1.每个 API 都对应种资源或资源集合2.使 HTTP Method 来表示对资源的动作3.使 HTTP Status Code 来表示资源操作结果RESTful APIGET/ticket获取 ticket 列表GET/ticket/:id查看某个具体的 ticketPOST/t
24、icket新建个 ticketPUT/ticket/:id更新 id 为 12 的 ticketDELETE/ticket/:id删除 id 为 12 的 ticekt创建 API 件?simple?todo thinkjs controller?r ticket think?cli Create:src/controller/rest.js think?cli Create:src/controller/ticket.js think?cli Create:src/logic/api/ticket.js配置路由?src/conf?g/router.jsmodule.exports=/tick
25、et/:id?,rest,?配置 RESTful API 路由 路由解析GET/api/ticket 获取 TODO 列表，执getActionGET/api/ticket/:id获取某个TODO的详细信息，执getActionPOST/api/ticket 添加个 TODO，执postActionPUT/api/ticket/:id更新个 TODO，执putActionDELETE/api/ticket/:id删除个 TODO，执deleteActiongetAction?src/controller/rest.jsasync getAction()let data;if(this.id)c
26、onst pk=this.modelInstance.pk;data=await this.modelInstance.where(pk?this.id).f?nd return this.success(data);data=await this.modelInstance.select();return this.success(data);postAction async postAction()const pk=this.modelInstance.pk;const data=this.post();delete datapk;if(think.isEmpty(data)return
27、this.fail(data is empty);const insertId=await this.modelInstance.add(data);return this.success(id:insertId);deleteActionasync deleteAction()if(!this.id)return this.fail(params error);const pk=this.modelInstance.pk;const rows=await this.modelInstance.where(pk?this.id).delete()return this.success(affe
28、ctedRows:rows);async putAction()if(!this.id)return this.fail(params error);const pk=this.modelInstance.pk;const data=this.post();delete datapk;if(think.isEmpty(data)return this.fail(data is empty);const rows=await this.modelInstance.where(pk?this.id).update(data);return this.success(affectedRows:row
29、s);putAction?src/conf?g/adapter.js exports.model=type:mysql,common:logConnect:isDev,logSql:isDev,logger:msg?think.logger.info(msg),mysql:handle:mysql,database:todo,pref?x:,encoding:utf8,host:127.0.0.1,port:,user:root,数据库配置http:?127.0.0.1?8360/ticket errno:0,errmsg:,data:id:1,desc:点打扫房间,status:0,crea
30、tedAt:2018-07-08 17?12?59,updatedAt:2018-07-08 17?13?14 数据校验提供了 Logic 机制转来持数据校验件和 Action 与 Controller 对应数据校验?src/logic/ticket.jsmodule.exports=class extends think.Logic getAction()this.rules=id:int:true ;deleteAction()this.rules=id:int:true,required:true,method:get errno:1001,errmsg:id:id can not be
31、 blank DELETE http:?127.0.0.1:8360/ticket数据库操作封装了 think.Model 类提供增删改查等操作持关联模型查询动分析数据表字段类型动数据安全过滤控制器中操作模型const model=this.model(modeName);根据模型名查找 src/model 下的模型件件存在，实例化对应的模型类件不存在，实例化 think.Model 类定义模型类?src/model/todo.js module.exports=class TodoModel extends think.Model getList()?get list 模型的好处简化代码、提效率不太懂 SQL 语句也能操作数据库避免写 SQL 语句的安全险