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'的路线，在最后一步中设置在angular $ location.path中，但是，如果我在快速路线中设置此路线，问题改变了，因为刷新不发送原始表单值（参数），所以，我的快递返回错误信息，因为没有任何术语可以搜索。

解决我的问题是否有一些消化？

感谢您的关注，

Answer 1

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

您应该可以通过重新订购Express路线并使用'*'来捕获除'/ partials / ...'等之外的所有请求来完成此操作。只要您的'/ partials / ... 。'路线不叫下一个（）你应该好。

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')
});

Answer 2

从＃form1

中删除method ='POST'

AngularJS和nodeJs Express：路由和刷新

2 个答案: