- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我知道对此还有其他答案,但它们似乎有一些警告。
This one causes a redirect ,这对于我使用 Mixpanel 的前端应用程序来说可能是致命的,并且双重加载 Mixpanel 将在浏览器中出现 Maximum Call Stack Size Exceeded 错误。
This one uses sendFile
我个人无法上类。试图诊断,我只是建议使用 express.static()
。
目前我的代码如下所示:
home.js - 一些路由,最后一个打算作为前端站点。
var indexPath = path.resolve( __dirname, '../' + process.env.PUBLIC_FOLDER )
router.get( '/:user/:stream/:slug', function( req, res, next ) {
if ( req.headers['user-agent'].indexOf( 'facebook' ) != -1 ) {
// stuff to handle the Facebook crawler
} else return next()
})
router.get( '/*', function( req, res ) {
express.static( indexPath )
})
server.js - 配置 Node/express
app = express();
app
.use( morgan( 'dev' ) )
.use(bodyParser.urlencoded( { limit: '50mb', extended: true } ) )
.use( bodyParser.json( { limit: '50mb' } ) )
.use( '/api', require('./routes/usersRoute.js') )
.use( '/', require( './routes/home' ) )
.on( 'error', function( error ){
console.log( "Error: " + hostNames[i] + "\n" + error.message )
console.log( error.stack )
})
http
.createServer( app ).listen( process.env.PORT )
.on( 'error', function( error ){
console.log( "Error: " + hostNames[i] + "\n" + error.message )
console.log( error.stack )
})
更多信息
您可以看到我正在尝试使用 express.static()
的原因是因为当我使用 res.sendfile()
时,我遇到了 like this one 控制台显示 Unexpected token '<'
的问题。不幸的是,答案并没有指定确切的解决方法,并且说他们解决了问题但没有分享答案的提问者也没有。
在我的反复试验中,我添加了一些更多的表达方式,像这样
.use( '/app/app.js', express.static( indexPath + '/app/app.js' ) )
.use( '/app/views', express.static( indexPath + '/app/views' ) )
.use( '/app/controllers', express.static( indexPath + '/app/views' ) )
.use( '/app/directives', express.static( indexPath + '/app/views' ) )
.use( '/app/vendor', express.static( indexPath + '/app/vendor' ) )
.use( '/js', express.static( indexPath + '/js' ) )
.use( '/css', express.static( indexPath + '/css' ) )
.use( '/fonts', express.static( indexPath + '/fonts' ) )
.use( '/images', express.static( indexPath + '/images' ) )
.use( '/api', require('./routes/usersRoute.js') )
.all( '/*', require( './routes/home' ) )
在我的 home.js
路由文件中添加了这个
router.get( '/*', function ( req, res ) {
res.status( 200 ).set( { 'content-type': 'text/html; charset=utf-8' } )
.sendfile( indexPath + '/index.html' )
})
在浏览器中,我可以看到我的所有文件都在加载,但是上面出现了 <
错误。我在刷新时看到这条 /*/
路由被调用了数百次,所以我认为 .use( '...', ... )
配置被忽略了。
下面是 Jonas 要求的另一个示例。
var indexPath = path.resolve( __dirname, process.env.PUBLIC_FOLDER )
mongoose.connect( process.env.MONGOLAB_URI )
app = express();
app
.use( morgan( 'dev' ) )
.use(bodyParser.urlencoded( { limit: '50mb', extended: true } ) )
.use( bodyParser.json( { limit: '50mb' } ) )
.use( '/api', require('./routes/usersRoute.js') )
.use( '/', require( './routes/home.js' ) )
.use( express.static( indexPath ) )
.on( 'error', function( error ){
console.log( "Error: " + hostNames[i] + "\n" + error.message )
console.log( error.stack )
})
我也在没有 .use( '/', require( './routes/home.js' ) )
行的情况下做了同样的事情来尝试缩小任何问题的范围,但结果是一样的。如果 URL 中有 #
,页面将加载,但浏览器将删除 #
(到目前为止一切正常)。但是如果我按下刷新,或者手动输入 URL,sans-hashbang,它会给出一个类似 Cannot GET /home/splash
的错误,其中 /home/splash
是我要去的任何路径。
最佳答案
您可能以错误的方式使用 express 中间件。看着documentation例如告诉我下面的代码
.use( '/images', express.static( indexPath + '/images' ) )
使用以下 URL 提供文件夹 indexPath + '/images'
下的任何文件:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/images/logo.png
http://localhost:3000/images/whatever.jpg
这是你期望它做的吗?
我的建议是改变
.use( '/', require( './routes/home' ) )
到
.use(express.static( indexPath ))
因为根据文档,它将提供根路径下 indexPath
文件夹下的所有静态文件,也就是。没有前缀。
我认为这就是我迄今为止所能提供的所有帮助。如果这不能解决问题,也许您可以分享一些小代码示例,我可以自己使用它来重现它。
好的。我试图创建一个简单的例子。我通过以下方式使其工作。我的目录结构是这样的:
|- index.js
|- public/
|---- index.html
|---- test.html
|---- main.js
|---- angular.js
|---- angular-route.js
index.js
是 Node 服务器。注意路由的顺序。我还添加了一些 /home/login
示例,以明确如何添加不应通过 angular 的其他服务器路由。
var http = require('http');
var express = require('express');
var app = express();
app
.use(express.static('public'))
.get('/home/login', function (req, res) {
console.log('Login request');
res.status(200).send('Login from server.');
})
.all('/*', function ( req, res ) {
console.log('All');
res
.status( 200 )
.set( { 'content-type': 'text/html; charset=utf-8' } )
.sendfile('public/index.html' );
})
.on( 'error', function( error ){
console.log( "Error: \n" + error.message );
console.log( error.stack );
});
http
.createServer( app ).listen( 8080 )
.on( 'error', function( error ){
console.log( "Error: \n" + error.message );
console.log( error.stack );
});
console.log('Serving app on port 8080');
index.html
非常简单。
<!doctype html>
<html>
<head>
<title>Angular HTML5 express test</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="main.js">
</script>
</head>
<body ng-app="app">
<div ng-view></div>
</body>
</html>
main.html
只是添加了一些内容。重要的是 /test
<div>
<h1>This is just a {{val}}</h1>
<button ng-click="clicked()">Click me!</button>
<span>You clicked {{counter}} times</span>
<a href="/test">test me!</a>
</div>
test.html
其实是无关紧要的
<div>
<h4>What a beautiful day to test HTML5</h4>
</div>
main.js
正在做核心的 Angular html5 工作
angular.module('app', ['ngRoute'])
.config(function($locationProvider) {
$locationProvider
.html5Mode({
enabled: true, // set HTML5 mode
requireBase: false // I removed this to keep it simple, but you can set your own base url
});
})
.config(function($routeProvider) {
$routeProvider
.when('/test', {templateUrl: 'test.html', controller: function() {
console.log('On /test.');
}})
.when('/', {templateUrl: 'main.html', controller: 'MyTestCtrl'})
.otherwise('/');
})
.controller('MyTestCtrl', function ($scope) {
self = $scope;
self.val = 'TeSt';
self.counter = 0;
var self = self;
self.clicked = function() {
self.counter++;
};
});
关于javascript - 使用 Node.js 在 HTML5 模式下进行 Angular 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31327439/
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之,我想将我的应用程序实现为单独的层,其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况? 最佳答案 我认为您可以将
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序,并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据,然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中,我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时,会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近,我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中,papa先生在客户端有类
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是一个图形新手,需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么,而我没有从 Konva 等基于 Canvas 的库中得到什么? 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ,并希望能够查看当前登录的用户。最好和最快的方法是什么? 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序,但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载,运行与 DOM 交互的 js 的最佳方式是什么,例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好,所以我一定是在 Gulp 中做错了什么。 除脚本外,所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件,例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发,我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序,如果我理解得很好,一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初,我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀!