Question

我正在尝试使用node.js构建网站。我希望在没有页面刷新的情况下加载内容。我熟悉AJAX这样做的方式。但是，有人有任何想法，如何使用NodeJ实现相同的目标？

这是我目前正在做的事情（我不认为这是唯一的方法）：

在所有GET请求之间放置一个中间件（如同任何刷新一样）   动作，会有一个GET请求）。在这里，发送所有基本的   网站的组成部分（我称之为主要阶段）。一切都是基本的   布局，样式表被加载。

当请求完成后，客户端会触发XHR请求，   根据当前地址。请求返回需要的html   作为内容显示。

当XHR完成时，将检索到的HTML设置为我的＆＃34;主要内容＆＃34;   的iFrame。

有人可以告诉我，还有其他方法可以做同样的事吗？

谢谢。

Answer 1

我有很多运气是Gulp，使用插件gulp-connect。我正在使用Node.js和Express.Js构建API，但仍然使用Gulp来实现我的所有自动化，无论项目类型如何。

http://gulpjs.com/

使用Gulp打开了许多门，可以增强您的工作流程自动化，例如缩小代码，压缩图像，复制/粘贴文件等。

希望你和我一样幸运。

以下是它如何查找您的服务器。

// Add requiements
var gulp        = require ('gulp'),
    connect     = require ('gulp-connect');


var jsSources;


//Setup path variables

jsSources   =   [ 
                    'builds/development/components/scripts/*.js'
                ];


//Javascript Files
gulp.task('js', function(){
    gulp.src(jsSources)
        .pipe(connect.reload())
});

// Watch all sources file directorys and run tasks if changes happen.
gulp.task('watch', function(){
    gulp.watch(jsSources,   ['js']);

});


// Start a server for project.
gulp.task('connect', function(){
    connect.server({
    root : '',
    livereload : true,
    fallback: 'builds/development/index.html'
    });
});


// Run all tasks above by using default command "Gulp".
gulp.task('default', ['watch', 'connect']);

设置完成后，您只需在终端中输入CD并输入Gulp

Answer 2

此类网站称为单页网站...您可以在不刷新页面的情况下加载页面。

您可以使用ajax和history.pushState（）函数来实现此目的。

首先，您通过使用ajax向服务器发送get请求来加载页面。

当服务器在响应时发送.html页面时，将此页面加载到div元素上。

同时您还可以使用history.pushState（）函数更改浏览器历史记录。

这样页面似乎无需刷新即可更改。

没有使用nodeJs刷新页面的网站

2 个答案: