首页
关于
翻译
留言
统计
搜索
1
第 2 章 类型系统
924 阅读
2
第 4 章 创建您的第一个 React 组件
516 阅读
3
如何读懂编译后的 JavaScript 代码
469 阅读
4
第 9 章 使用 Jest 测试 React 应用
431 阅读
5
第 5 章 让您的 React 组件具有响应式
365 阅读
JavaScript
TypeScript
移动
Web
后端
测试
运维
登录
Search
标签搜索
React
翻译
Vue
组件
库
Angular
工程化
Hook
框架
可视化
Node.js
性能
兼容
Debug
CSS
HTML5
ActionScript
分享
部署
算法
Flying
累计撰写
231
篇文章
累计收到
2
条评论
首页
栏目
JavaScript
TypeScript
移动
Web
后端
测试
运维
页面
关于
翻译
留言
统计
搜索到
16
篇
框架
相关的结果
2020-01-23
Express 中的 Request 对象
req对象代表了一个 HTTP 请求,其具有一些属性来保存请求中的一些数据,比如query string,parameters,body,HTTP headers等等。按照惯例,这个对象总是简称为req(http 响应简称为res),但是它们实际的名字由这个回调方法在那里使用时的参数决定。如下例子:app.get('/user/:id', function (req, res) { res.send('user' + req.params.id); });其实你也可以这样写:app.get('/user/:id', function (request, response) { response.send('user' + request.params.id); });属性在Express 4中,req.files默认在req对象中不再是可用的。为了通过req.files对象来获得上传的文件,你可以使用一个multipart-handling(多种处理的工具集)中间件,比如busboy,multer,formidable,multipraty,connect-multiparty或者pez。req.app这个属性持有express程序实例的一个引用,其可以作为中间件使用。如果你按照这个模式,你创建一个模块导出一个中间件,这个中间件只在你的主文件中require()它,那么这个中间件可以通过req.app来获取 express 的实例。例如:// index.js app.get('/viewdirectory', require('./mymiddleware.js'));// mymiddleware.js module.exports = function (req, res) { res.send('The views directory is ' + req.app.get('views')); };req.baseUrl一个路由实例挂载的 Url 路径。var greet = express.Router(); greet.get('/jp', function (req, res) { console.log(req.baseUrl); // greet res.send('Konichiwa!'); }); app.use('/greet', greet);即使你使用的路径模式或者一系列路径模式来加载路由,baseUrl属性返回匹配的字符串,而不是路由模式。下面的例子,greet路由被加载在两个路径模式上。app.use(['/gre+t', 'hel{2}o'], greet); // load the on router on '/gre+t' and '/hel{2}o'当一个请求路径是/greet/jp,baseUrl是/greet,当一个请求路径是/hello/jp,req.baseUrl是/hello。req.baseUrl和app对象的mountpath属性相似,除了app.mountpath返回的是路径匹配模式。req.body在请求的 body 中保存的是提交的一对对键值数据。默认情况下,它是undefined,当你使用比如body-parser和multer这类解析body数据的中间件时,它是填充的。下面的例子,给你展示了怎么使用body-parser中间件来填充req.body。var app = require('express'); var bodyParser = require('body-parser'); var multer = require('multer');// v1.0.5 var upload = multer(); // for parsing multipart/form-data app.use(bodyParser.json()); // for parsing application/json app.use(bodyParser.urlencoded({extended:true})); // for parsing application/x-www-form-urlencoded app.post('/profile', upload.array(), function(req, res, next) { console.log(req.body); res.json(req.body); });req.cookies当使用cookie-parser中间件的时候,这个属性是一个对象,其包含了请求发送过来的cookies。如果请求没有带cookies,那么其值为{}。// Cookie:name=tj req.cookies.name; // => "tj"获取更多信息,问题,或者关注,可以查阅cookie-parser。req.fresh指示这个请求是否是新鲜的。其和req.stale是相反的。当cache-control请求头没有no-cache指示和下面中的任一一个条件为true,那么其就为true:if-modified-since请求头被指定,和last-modified请求头等于或者早于modified响应头。if-none-match请求头是*。if-none-match请求头在被解析进它的指令之后,和etag响应头的值不相等ps:If-None-Match 作用:If-None-Match 和 ETag 一起工作,工作原理是在 HTTP Response 中添加 ETag 信息。 当用户再次请求该资源时,将在 HTTP Request 中加入 If-None-Match 信息(ETag 的值)。如果服务器验证资源的 ETag 没有改变(该资源没有更新),将返回一个 304 状态告诉客户端使用本地缓存文件。否则将返回 200 状态和新的资源和 Etag. 使用这样的机制将提高网站的性能req.fresh; // => truereq.hostname包含了源自HostHTTP 头部的hostname。当trust proxy设置项被设置为启用值,X-Forwarded-Host头部被使用来代替Host。这个头部可以被客户端或者代理设置。// Host:"example.com" req.hostname; // => "example.com"req.ips当trust proxy设置项被设置为启用值,这个属性包含了一组在X-Forwarded-For请求头中指定的 IP 地址。不然,其就包含一个空的数组。这个头部可以被客户端或者代理设置。例如,如果X-Forwarded-For是client,proxy1,proxy2,req.ips就是["clinet", "proxy1", "proxy2"],这里proxy2就是最远的下游。req.originalUrlreq.url不是一个原生的Express属性,它继承自Node's http module。这个属性很像req.url;然而,其保留了原版的请求链接,允许你自由地重定向req.url到内部路由。比如,app.use()的mounting特点可以重定向req.url跳转到挂载点。// GET /search?q=something req.originalUrl; // => "/search?q=something"req.params一个对象,其包含了一系列的属性,这些属性和在路由中命名的参数名是一一对应的。例如,如果你有/user/:name路由,name属性可作为req.params.name。这个对象默认值为{}。// GET /user/tj req.params.name; // => "tj"当你使用正则表达式来定义路由规则,捕获组的组合一般使用req.params[n],这里的n是第几个捕获租。这个规则被施加在无名通配符匹配,比如/file/*的路由:// GET /file/javascripts/jquery.js req.params[0]; // => "javascripts/jquery.js"req.path包含请求 URL 的部分路径。// example.com/users?sort=desc req.path; // => "/users"当在一个中间件中被调用,挂载点不包含在req.path中。你可以查阅app.use()获得跟多的信息。req.protocol请求的协议,一般为http,当启用 TLS 加密,则为https。当trust proxy设置一个启用的参数,如果存在X-Forwarded-Proto头部的话,其将被信赖和使用。这个头部可以被客户端或者代理设置。req.ptotocol; // => "http"req.query一个对象,为每一个路由中的query string参数都分配一个属性。如果没有query string,它就是一个空对象,{}。// GET /search?q=tobi+ferret req.query.q; // => "tobi ferret" // GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse req.query.order; // => "desc" req.query.shoe.color; // => "blue" req.query.shoe.type; // => "converse"req.route当前匹配的路由,其为一串字符。比如:app.get('/user/:id?', function userIdHandler(req, res) { console.log(req.route); res.send('GET'); });前面片段的输出为:{ path:"/user/:id?" stack: [ { handle:[Function:userIdHandler], name:"userIdHandler", params:undefined, path:undefined, keys:[], regexp:/^\/?$/i, method:'get' } ] methods:{get:true} }req.secure一个布尔值,如果建立的是 TLS 的连接,那么就为true。等价与:'https' == req.protocol;req.signedCookies当使用cookie-parser中间件的时候,这个属性包含的是请求发过来的签名cookies,这个属性取得的是不含签名,可以直接使用的值。签名的cookies保存在不同的对象中来体现开发者的意图;不然,一个恶意攻击可以被施加在req.cookie值上(它是很容易被欺骗的)。记住,签名一个cookie不是把它藏起来或者加密;而是简单的防止篡改(因为签名使用的加密是私人的)。如果没有发送签名的cookie,那么这个属性默认为{}。// Cookie: user=tobi.CP7AWaXDfAKIRfH49dQzKJx7sKzzSoPq7/AcBBRVwlI3 req.signedCookies.user; // => "tobi"为了获取更多的信息,问题或者关注,可以参阅cookie-parser。req.stale指示这个请求是否是stale(陈旧的),它与req.fresh是相反的。更多信息,可以查看req.fresh。req.stale; // => truereq.subdomains请求中域名的子域名数组。// Host:"tobi.ferrets.example.com" req.subdomains; // => ["ferrets", "tobi"]req.xhr一个布尔值,如果X-Requested-With的值为XMLHttpRequest,那么其为true,其指示这个请求是被一个客服端库发送,比如jQuery。req.xhr; // => true方法req.accepts(types)检查这个指定的内容类型是否被接受,基于请求的Accept HTTP 头部。这个方法返回最佳匹配,如果没有一个匹配,那么其返回undefined(在这个 case 下,服务器端应该返回 406 和"Not Acceptable")。type值可以是一个单的MIME type字符串(比如application/json),一个扩展名比如json,一个逗号分隔的列表,或者一个数组。对于一个列表或者数组,这个方法返回最佳项(如果有的话)。// Accept:text/html req.accepts('html'); // => "html" // Accept:text/*, application/json req.accepts('html'); // => "html" req.accepts('text/html'); // => "text/html" req.accepts(['json', 'text']); // => "json" req.accepts('application/json'); // => "application/json" // Accept:text/*, application/json req.accepts('image/png'); req.accepts('png'); // => undefined // Accept:text/*;q=.5, application/json req.accepts(['html', 'json']); // => "json"获取更多信息,或者如果你有问题或关注,可以参阅accepts。req.acceptsCharsets(charset[, ...])返回指定的字符集集合中第一个的配置的字符集,基于请求的Accept-CharsetHTTP 头。如果指定的字符集没有匹配的,那么就返回 false。获取更多信息,或者如果你有问题或关注,可以参阅accepts。req.acceptsEncodings(encoding[, ...])返回指定的编码集合中第一个的配置的编码,基于请求的Accept-EncodingHTTP 头。如果指定的编码集没有匹配的,那么就返回 false。获取更多信息,或者如果你有问题或关注,可以参阅accepts。req.acceptsLanguages(lang [, ...])返回指定的语言集合中第一个的配置的语言,基于请求的Accept-LanguageHTTP 头。如果指定的语言集没有匹配的,那么就返回 false。获取更多信息,或者如果你有问题或关注,可以参阅accepts。req.get(field)返回指定的请求 HTTP 头部的域内容(不区分大小写)。Referrer和Referer的域内容可互换。req.get('Content-type'); // => "text/plain" req.get('content-type'); // => "text/plain" req.get('Something'); // => undefined其是req.header(field)的别名。req.is(type)如果进来的请求的Content-type头部域匹配参数type给定的MIME type,那么其返回true。否则返回false。// With Content-Type:text/html; charset=utf-8 req.is('html'); req.is('text/html'); req.is('text/*'); // => true // When Content-Type is application/json req.is('json'); req.is('application/json'); req.is('application/*'); // => true req.is('html'); // => false获取更多信息,或者如果你有问题或关注,可以参阅type-is。req.param(naem, [, defaultValue])过时的。可以在适合的情况下,使用req.params,req.body或者req.query。返回当前参数name的值。// ?name=tobi req.param('name'); // => "tobi" // POST name=tobi req.param('name'); // => "tobi" // /user/tobi for /user/:name req.param('name'); // => "tobi"按下面给出的顺序查找:req.paramsreq.bodyreq.query可选的,你可以指定一个defaultValue来设置一个默认值,如果这个参数在任何一个请求的对象中都不能找到。直接通过req.params,req.body,req.query取得应该更加的清晰-除非你确定每一个对象的输入。body-parser中间件必须加载,如果你使用req.param()。详细请看req.body。
2020年01月23日
89 阅读
0 评论
1 点赞
2018-12-25
第 12 章 使用 Redux 完善 Flux 应用
上一章带您实现了一个基于 Flux 架构的完整的 React 应用。在本章中,您将对这个应用进行一些修改,以便它使用 Redux 库来实现 Flux 架构。本章的组织结构如下:
2018年12月25日
270 阅读
0 评论
11 点赞
2018-11-29
第 10 章 使用 Flux 增强您的 React 架构
构建 web 应用的过程有一个特性,它在某种程度上反映了生命本身的演变过程——它永远不会结束。与构建桥梁不同,构建 web 应用没有表示开发过程结束的自然状态。您或您的团队决定何时停止开发过程并发布已经构建的内容。
2018年11月29日
127 阅读
0 评论
9 点赞
2018-11-09
第 9 章 使用 Jest 测试 React 应用
到目前为止,您已经创建了许多 React 组件。其中一些非常简单,但也有一些足够复杂。有了这些构建后,您可能已经获得了一定的信心,这让您相信无论用户界面有多复杂,您都可以使用 React 构建它,而不会有任何重大缺陷。这是一个很好的信心。毕竟,这就是我们投入时间学习 React 的原因。然而,许多自信的 React 开发人员都陷入了不编写单元测试的陷阱。
2018年11月09日
431 阅读
0 评论
9 点赞
2018-06-19
使用 Vue Test Utils
前面介绍过使用 Vue CLI 单元测试。如果你读过这篇文章,你会深深感觉到使用 Vue CLI 写单元测试不是很方便,比如测试事件时不得不派发自定义事件。另一方面,Jest 对 React 测试的支持在好很多,老早就可以使用专有的 API 处理事件了,谁让它们都有一个 Facebook 亲爹呢。技术是进步的,一天在 Vue 官网瞎逛,偶然它们发现已经推出了 Vue Test Utils,虽然只是 vuev1.0.0-beta.19,但也提供了强大的 API,写单元测试就更溜了。赶紧 Git 下来试一下。
2018年06月19日
150 阅读
0 评论
6 点赞
1
2
...
4