6a9ffbcc
 liuqimichale
地图点击事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
<h1 align="center">connect-history-api-fallback</h1>
<p align="center">Middleware to proxy requests through a specified index page, useful for Single Page Applications that utilise the HTML5 History API.</p>
[](https://travis-ci.org/bripkens/connect-history-api-fallback)
[](https://david-dm.org/bripkens/connect-history-api-fallback/master)
[](https://nodei.co/npm/connect-history-api-fallback/)
<h2>Table of Contents</h2>
<!-- TOC depthFrom:2 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->
- [Introduction](#introduction)
- [Usage](#usage)
- [Options](#options)
- [index](#index)
- [rewrites](#rewrites)
- [verbose](#verbose)
- [htmlAcceptHeaders](#htmlacceptheaders)
- [disableDotRule](#disabledotrule)
<!-- /TOC -->
## Introduction
Single Page Applications (SPA) typically only utilise one index file that is
accessible by web browsers: usually `index.html`. Navigation in the application
is then commonly handled using JavaScript with the help of the
[HTML5 History API](http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-history-interface).
This results in issues when the user hits the refresh button or is directly
accessing a page other than the landing page, e.g. `/help` or `/help/online`
as the web server bypasses the index file to locate the file at this location.
As your application is a SPA, the web server will fail trying to retrieve the file and return a *404 - Not Found*
message to the user.
This tiny middleware addresses some of the issues. Specifically, it will change
the requested location to the index you specify (default being `/index.html`)
whenever there is a request which fulfills the following criteria:
1. The request is a GET request
2. which accepts `text/html`,
3. is not a direct file request, i.e. the requested path does not contain a
`.` (DOT) character and
4. does not match a pattern provided in options.rewrites (see options below)
## Usage
The middleware is available through NPM and can easily be added.
```
npm install --save connect-history-api-fallback
```
Import the library
```javascript
var history = require('connect-history-api-fallback');
```
Now you only need to add the middleware to your application like so
```javascript
var connect = require('connect');
var app = connect()
.use(history())
.listen(3000);
```
Of course you can also use this piece of middleware with express:
```javascript
var express = require('express');
var app = express();
app.use(history());
```
## Options
You can optionally pass options to the library when obtaining the middleware
```javascript
var middleware = history({});
```
### index
Override the index (default `/index.html`)
```javascript
history({
index: '/default.html'
});
```
### rewrites
Override the index when the request url matches a regex pattern. You can either rewrite to a static string or use a function to transform the incoming request.
The following will rewrite a request that matches the `/\/soccer/` pattern to `/soccer.html`.
```javascript
history({
rewrites: [
{ from: /\/soccer/, to: '/soccer.html'}
]
});
```
Alternatively functions can be used to have more control over the rewrite process. For instance, the following listing shows how requests to `/libs/jquery/jquery.1.12.0.min.js` and the like can be routed to `./bower_components/libs/jquery/jquery.1.12.0.min.js`. You can also make use of this if you have an API version in the URL path.
```javascript
history({
rewrites: [
{
from: /^\/libs\/.*$/,
to: function(context) {
return '/bower_components' + context.parsedUrl.pathname;
}
}
]
});
```
The function will always be called with a context object that has the following properties:
- **parsedUrl**: Information about the URL as provided by the [URL module's](https://nodejs.org/api/url.html#url_url_parse_urlstr_parsequerystring_slashesdenotehost) `url.parse`.
- **match**: An Array of matched results as provided by `String.match(...)`.
- **request**: The HTTP request object.
### verbose
This middleware does not log any information by default. If you wish to activate logging, then you can do so via the `verbose` option or by specifying a logger function.
```javascript
history({
verbose: true
});
```
Alternatively use your own logger
```javascript
history({
logger: console.log.bind(console)
});
```
### htmlAcceptHeaders
Override the default `Accepts:` headers that are queried when matching HTML content requests (Default: `['text/html', '*/*']`).
```javascript
history({
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
})
```
### disableDotRule
Disables the dot rule mentioned above:
> […] is not a direct file request, i.e. the requested path does not contain a `.` (DOT) character […]
```javascript
history({
disableDotRule: true
})
```
|
