AngularJS 和 nodeJs Express：路由和刷新

Question

我的应用“工作”正常，但是当我在浏览器中按 F5 时出现问题。

我的应用是这样组织的：

nodeJs + express，在 Express 中我有这些路线

core.app.get('/', function(req, res){
  res.render('index')
});

core.app.get('/partials/:name', function(req, res){
    nome = req.params.name
    res.render('partials/' + name)
});

core.app.get('/partials/:folder/:name', function(req, res){
    name = req.params.name
    pasta = req.params.folder
    res.render('partials/' + folder + '/' + name)
});

服务路线

core.app.post('/servico/usuario/buscar', function(req, res){
    console.log('servico.usuario.buscar');

    console.log(req.body);

    model.buscar(core, req.body.termo, function(status, data){
        if(status == core.Status.error){
            console.error("Erro na busca de usuário!")
            console.error("termo: " + req.body.termo);
        }
        res.json(data);
    })
})

在我的 angularJs 中，我有这些路线

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {templateUrl: 'partials/index'})
        .when('/enviar/busca/usuarios', {templateUrl: '/partials/usuario/lista_usuario', reloadOnSearch: true})
        .when('/enviar/busca/produto', {templateUrl: '/partials/produto/listar', controller: 'BuscaProduto'})
}]);

我的表格

form#form1(name='formBuscaTopo', method='post', novalidate)
    span.L
        input(name='tipoBuscaTopo', type='radio', value="p", data-ng-model="busca.tipoBusca")
        label(for='produtos') produtos
        input(name='tipoBuscaTopo', type='radio', value="u", data-ng-model="busca.tipoBusca")
        label(for='produtos') usuários

    input#busca_geral.busca_campo(type='text', name='termo', data-ng-model="busca.termo", placeholder='faça aqui a sua busca')

    #lupa
        img(src='/images/base/lupa.png', alt='Buscar', title='Buscar', data-ng-click="buscar()")

在我的角度控制器中

http.post('/servico/usuario/buscar', scope.busca)
        .success(function(data){
            scope.listaUsuario = data;
            location.path('/enviar/busca/usuarios');
        })

和我的列表视图

    div.box_busca_usu.c_azlEsc(data-ng-repeat="item in listaUsuario")
    div.busca_img_usu
        img.img75(data-ng-src="/img/avatar/gd/{{item.usuario.foto}}")
    div.box_d_u
        div.busca_n_usu.txt_14 {{item.usuario.nome}}
        img.img16(src='/img/status/superUsuario.png', title='usuário rubi', alt='usuário rubi')
        .HW100L.top5
            span {{item.usuario.cidade}}
            |/
            span {{item.usuario.estado}}
        .HW100L.txt_11.c_666.top5 Cadastrado desde
            span.c_azlEsc.lft5 {{item.usuario.dataCadastro}}

一切正常，响应打印完美，但是，如果我按 F5，我会收到消息“无法获取 /enviar/busca/usuarios”。

我认为问题是因为在我的快递中没有“/enviar/busca/usuarios”的路线，这是在最后一步中在角度 $location.path 中设置的，但是，如果我在快递路线中设置这条路线，问题变了，因为刷新不发送原始表单值（参数），所以，我的快递返回错误信息，因为没有任何要搜索的词。

有什么建议可以解决我的问题吗？

感谢关注，

Answer 1

从 #form1 中删除 method='POST'

Answer 2

要正确处理此问题，您需要确保对您的 Express 应用程序的任何虚拟（例如路由）请求都会以“索引”视图进行响应。

您应该能够通过重新排序您的 Express 路线并使用 '*' 来捕获除 '/partials/...' 等之外的所有请求。只要您的 '/partials/... .' 路由不调用 next() 你应该很好。

core.app.get('/partials/:name', function(req, res){
    nome = req.params.name
    res.render('partials/' + name)
});

core.app.get('/partials/:folder/:name', function(req, res){
    name = req.params.name
    pasta = req.params.folder
    res.render('partials/' + folder + '/' + name)
});

core.app.get('*', function(req, res){
  res.render('index')
});