Nodejs中extjs提交信息后如何进行跳转

Nodejs中extjs提交信息后如何进行跳转

我是新手！ 前台用的是extjs，做的一个简单的登陆界面 代码： Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath(‘Ext.ux’, ‘/ext-4.2.1.883/examples/ux’);

       Ext.require([
           //'Ext.form.*',
           //'Ext.layout.container.Column',
           //'Ext.tab.Panel'
           '*',
           'Ext.ux.DataTip'
       ]);

       Ext.onReady(function() {
           Ext.QuickTips.init();
           var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

           var win = Ext.create('widget.window', {
             title: '管理员登录',
             header: {
                 titlePosition: 2,
                 titleAlign: 'center'
             },
             width: 350,
             minWidth: 350,
             closable: false,
             items: [{
                     xtype: 'form',
                     layout: 'form',
                     collapsible: false,
                     collapse: false,
                     id: 'simpleForm',
                     url: '/support/adminLogin',
                     frame: true,
                     bodyPadding: '0',
                     width: 340,
                     border:false,
                     fieldDefaults: {
                         msgTarget: 'side',
                         labelWidth: 55
                     },
                     plugins: {
                         ptype: 'datatip'
                     },
                     defaultType: 'textfield',
                     items: [{
                         fieldLabel: '用户名',
                         afterLabelTextTpl: required,
                         name: 'adminname',
                         allowBlank: false,
                         tooltip: '请输入管理员名称' , 
                         width:240
                     },{
                         fieldLabel: '密码',
                         afterLabelTextTpl: required,
                         name: 'password',
                         allowBlank: false,
                         tooltip: '请输入管理员密码' ,
                         inputType : "password"
                     }],

                     buttons: [{
                         text: '登录',
                         handler: function() {
                             this.up('form').getForm().isValid();
                             this.up('form').getForm().submit();
                         }
                     }]
                 }]
         }).show();
       });

可以点击提交的！

后端的代码如下： index.js ////////////////////////后台系统/////////////////////////////////// app.get("/support" , function(req , res){ if(req.session.admin == null) res.redirect("/support/adminLogin") ; else res.redirect("/support/index") ; }); app.get("/support/index" , function(req , res){ res.render(“support/index” , {title : “后台管理系统”}) ; }); app.get(’/support/adminLogout’ , function(req , res){ req.session.admin = null ; req.flash(“success” , “退出成功!”) ; res.redirect("/support/adminLogin") ;
}); app.get("/support/adminLogin" , function(req , res){ res.render(“support/adminLogin” , {title : “后台管理系统”}) ; }); app.post(’/support/adminLogin’ , function(req , res){ var adminname = req.body.adminname ; var md5 = crypto.createHash(‘md5’) ; var password = md5.update(req.body.password).digest(“base64”); Admin.get(adminname , function(err , admin){ if(!admin) { req.flash(‘error’ , “管理员不存在!”) ; return res.redirect("/support/adminLogin") ;
} if(admin.password != password) { req.flash(error , “管理员密码输入错误!”) ; return res.redirect("/support/adminLogin") ;
} req.session.admin = admin ; req.flash(“success” , “登录成功!”) ; return res.redirect("/support/index") ;
}); });

admin.js

var mongoDoc = require(’./db’) ; var mongoose = mongoDoc.mongoose ; var db = mongoDoc.db ; var AdminSchema = mongoose.Schema({ name : { type : String } , password : { type : String } , email : { type : String } }) ; var AdminModel = db.model(“Admin” , AdminSchema) ; var Admin = function(){} Admin.prototype.get = function(adminname , callback){ AdminModel.findOne({“name” : adminname},"" , function(err , admin){ if(err) return callback(err) ; callback(err , admin) ; }) ; } ; module.exports = new Admin() ;

这个只是部分代码： 当我点击登录提交的时候，代码是可以运行的，从mongo中查到了这个admin，问题来了，运行到return res.redirect(’/support/index’)；的时候，无法从adminLogin跳转到index页面

错误： 2 requests ❘ 385B transferred /support/adminLogin POST 302 Moved Temporarily text/plain ext-all-debug.js:32379 Script 252B 0B 11ms 11ms 11ms0ms

/support/index GET 304 Not Modified text/html http://127.0.0.1:3000/support/adminLogin Redirect 133B 3.76KB 13ms 12ms 12ms

网上找不到，估摸着是跳转无效，extjs是ajax的，提交的时候等待返回的问题

求各位帮小弟解答一下 不知各位能否看懂


4 回复

在Node.js中使用ExtJS进行表单提交并实现页面跳转时，确实需要考虑一些关键点。特别是当涉及到异步操作（如AJAX请求）时，确保正确处理响应以实现页面跳转尤为重要。

前端代码

首先，让我们来看一下前端代码。你的前端代码使用了ExtJS来创建一个登录表单，并且通过AJAX提交数据。你需要确保在提交成功后能够正确地重定向用户到其他页面。

Ext.onReady(function() {
    Ext.QuickTips.init();

    var win = Ext.create('widget.window', {
        title: '管理员登录',
        header: {
            titlePosition: 2,
            titleAlign: 'center'
        },
        width: 350,
        minWidth: 350,
        closable: false,
        items: [{
            xtype: 'form',
            layout: 'form',
            collapsible: false,
            collapse: false,
            id: 'simpleForm',
            url: '/support/adminLogin',
            frame: true,
            bodyPadding: '0',
            width: 340,
            border: false,
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 55
            },
            plugins: {
                ptype: 'datatip'
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: '用户名',
                afterLabelTextTpl: required,
                name: 'adminname',
                allowBlank: false,
                tooltip: '请输入管理员名称',
                width: 240
            }, {
                fieldLabel: '密码',
                afterLabelTextTpl: required,
                name: 'password',
                allowBlank: false,
                tooltip: '请输入管理员密码',
                inputType: "password"
            }],
            buttons: [{
                text: '登录',
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            url: '/support/adminLogin',
                            success: function(form, action) {
                                // 提交成功后的处理逻辑
                                window.location.href = '/support/index';
                            },
                            failure: function(form, action) {
                                // 处理提交失败的情况
                                Ext.Msg.alert('错误', action.result.error);
                            }
                        });
                    }
                }
            }]
        }]
    }).show();
});

后端代码

接下来，我们来看看后端代码。你已经有一个基本的路由设置，用于处理登录请求。确保你的路由处理函数能够正确地重定向用户。

const express = require('express');
const app = express();
const crypto = require('crypto');
const Admin = require('./admin'); // 确保路径正确

app.use(express.urlencoded({ extended: true }));

// 登录页面
app.get('/support/adminLogin', (req, res) => {
    res.render('support/adminLogin', { title: '后台管理系统' });
});

// 处理登录请求
app.post('/support/adminLogin', (req, res) => {
    const adminname = req.body.adminname;
    const md5 = crypto.createHash('md5');
    const password = md5.update(req.body.password).digest("base64");

    Admin.get(adminname, (err, admin) => {
        if (!admin) {
            req.flash('error', '管理员不存在!');
            return res.redirect('/support/adminLogin');
        }

        if (admin.password !== password) {
            req.flash('error', '管理员密码输入错误!');
            return res.redirect('/support/adminLogin');
        }

        req.session.admin = admin;
        req.flash('success', '登录成功!');
        res.redirect('/support/index');
    });
});

// 主页
app.get('/support/index', (req, res) => {
    res.render('support/index', { title: '后台管理系统' });
});

// 其他路由...

关键点总结

  1. 前端：使用window.location.href来实现页面跳转。
  2. 后端：确保在登录成功后正确地调用res.redirect来重定向用户。

通过这种方式，你可以确保在登录成功后将用户重定向到正确的页面。希望这能解决你的问题！


〉 extjs是ajax的，提交的时候等待返回的问题

ajax 返回的要根据返回值，在客户端跳转

window.location = newUrl;

这样处理起来岂不是很麻烦，能否中断前台的ajax连接利用nodejs强制跳转，就像java似的 利用ajax提交数据，判断成功后后台跳转

在你的场景中，前端使用ExtJS发送异步请求（AJAX），而后端返回302重定向响应。由于ExtJS的submit方法默认不会处理重定向，你需要手动处理重定向逻辑。

示例代码

handler: function() {
    var form = this.up('form').getForm();
    if (form.isValid()) {
        form.submit({
            url: form.action,
            success: function(form, action) {
                // 服务器返回成功的状态码（如200）
                window.location.href = action.result.redirectUrl;
            },
            failure: function(form, action) {
                // 处理失败的情况
                console.log(action.result && action.result.message);
            }
        });
    }
}

后端代码调整

在你的Node.js后端代码中，确保返回的数据包含重定向URL。例如：

app.post('/support/adminLogin', function(req, res) {
    // ... 验证逻辑 ...

    if (/* 验证通过 */) {
        req.session.admin = admin;
        req.flash("success", "登录成功!");
        res.json({ success: true, redirectUrl: "/support/index" });
    } else {
        req.flash("error", /* 错误信息 */);
        res.json({ success: false, message: "登录失败!" });
    }
});

解释

  1. 前端：当表单提交成功后，通过success回调函数接收服务端返回的数据。如果登录成功，获取redirectUrl并使用window.location.href进行页面跳转。
  2. 后端：返回JSON格式的响应数据，其中包含success字段表示是否成功，以及redirectUrl字段指定重定向地址。

通过这种方式，你可以确保在ExtJS中正确处理异步请求后的重定向逻辑。

回到顶部