使用express.js提供聚合物应用程序页面?

时间:2017-03-09 17:49:40

标签: javascript express polymer polymer-1.0

我有一堆基于Polymer入门套件的页面,它可以与polymer serve一起使用。但是,我需要通过服务器发送一些ajax请求进行数据库查询,所以我不得不用express.js编写自己的服务器代码。我的问题是每当我进入一个非root并刷新的页面时,我会得到消息Cannot GET /bugs或者/ page name是什么。我的index.html页面正常引用container.html,其app-route代码如下:

<app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

...

<app-drawer id="drawer">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view-1" href="/view-1">View One</a>
          <a name="bugs" href="/bugs">Bugs</a>
        </iron-selector>
      </app-drawer>

...

<iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view-404"
            role="main">
          <view-1 name="view-1"></view-1>
          <bugs-view name="bugs"></bugs-view>
        </iron-pages>

换句话说,它几乎与默认的聚合物入门套件中的完全相同。我的服务器代码如下:

var express = require('express');
var path = require('path');
var mysql = require('mysql');

var connection = mysql.createConnection({
    host     : 'host',
    user     : user,
    password : password,
    database : 'db'
});
connection.connect();
var app = express();

app.get('/sql', function(req,res) {
    //console.log(req.query.query);
    connection.query(req.query.query, function(error, results, fields) {
        if (error) {console.log(error); throw error;}
        else {
            res.send(results);
        }
    }.bind(this));
});

app.use(express.static(__dirname));
app.use(express.static(__dirname+'/src'));
app.listen(8080);

console.log("Server listening on localhost:8080");

我可以正常加载localhost:8080,然后导航到页面就好了,但每当我尝试在任何页面上刷新但root时它会给我Cannot GET /page错误。这使得开发成为一种非常令人沮丧的经历...

1 个答案:

答案 0 :(得分:2)

尝试将此添加到您的服务器配置:

app.get('*', function(req, res) {
    res.sendfile('./public/index.html', {root: '.'}); 
});

而不是./public/index.html,请设置index.html

的路径

把它放在你所有的其他路线之后,所以它不会覆盖它们。这样,无论您重新加载的页面如何,您的服务器仍然会发送您的“起点”,这当然会拉动您的所有路线javascript和css。在所有这一切之后,一旦有角度的引导,它的路由器将接管并带你到达应有的位置。