精华内容
下载资源
问答
  • 目录需求前期准备功能实现需求通过点击按钮实现页面间的跳转前期准备通过express脚手架搭建express框架:express myexpress 进入myexpress,进行初始化npm init然后安装依赖npm install 最后设置日志,并启动项目set ...

    目录

    需求

    前期准备

    功能实现

    需求

    通过点击按钮实现页面间的跳转

    前期准备

    通过express脚手架搭建express框架:

    express myexpress

    787a413822657388a5bafee27fd57f42.png

    进入myexpress,进行初始化

    npm init

    然后安装依赖

    npm install

    a03485539524a0503663a3f42fecce3a.png

    最后设置日志,并启动项目

    set DEBUG=express:* & npm start

    318e7359fa9cbfb522a8099eb56a8fdc.png

    在浏览器输入localhost:3000,成功显示如下:

    de646fe8bd08c167ef6442974c80f610.png

    修改入口文件

    在此项目中我用的是handlebars模块,所以对入口文件app.js进行了修改:

    // 引入express-handlebars模块

    var exphbs = require('express-handlebars');

    设置node_modules文件夹为静态资产根目录

    //静态资源托管中间件

    app.use(express.static('public'));

    app.use(express.static('node_modules'));

    设置引擎模块

    app.engine('html', exphbs({

    layoutsDir: 'views',

    defaultLayout: 'layout',

    extname: '.html'

    }));

    app.set('view engine', 'html');

    引入路由文件index.js(后面创建index.js文件,并在index.js文件中设置路由)

    // 路由文件

    var indexRouter = require('./routes/index');

    //使用路由

    app.use('/', indexRouter);

    在public文件夹下,放入jquery.js文件

    b7a24507439d17bc4daf3678e4286db2.png

    功能实现

    在views文件夹下删除原有的的文件,创建index.html 和main.html,代码分别为:

    index.html

    {{title}}

    {{indexInfo}}

    跳转

    main.html

    {{title}}

    {{mainInfo}}

    创建路由文件index.js,代码如下:

    var express = require('express');

    var router = express.Router();

    //GET home page.

    router.get('/', function(req, res) {

    res.header("Access-Control-Allow-Headers", "content-type");

    var sql = 'select * from user';

    connection.query(sql, function(err, result) {

    if (err) {

    console.log('[SELECT ERROR] - ', err.message);

    return;

    }

    res.render('index', {

    layout: false,

    title: "登录页",

    indexInfo: "index paper"

    });

    });

    });

    //get main paper

    router.get('/main', function(req, res) {

    res.render('main', {

    layout: false,

    title: "主页",

    mainInfo: 'main paper'

    });

    });

    module.exports = router;

    注:在实现页面跳转时,去渲染界面,切勿用router.post;

    重新启动服务器:

    set DEBUG=express:* & npm start

    即可实现页面跳转

    展开全文
  • Express实现页面跳转

    千次阅读 2018-09-04 00:28:18
    之前的思路是页面获取登录名和密码之后,利用Ajax请求传输数据,然后在路由处理里面利用SQL获取数据库数据,进行校验之后利用res.redirect()进行跳转,但是一直出错,出现了好几个问题,下面讲述问题和原因。...

    之前的思路是页面获取登录名和密码之后,利用Ajax请求传输数据,然后在路由处理里面利用SQL获取数据库数据,进行校验之后利用res.redirect()进行跳转,但是一直出错,出现了好几个问题,下面讲述问题和原因。

    1.首先Ajax一般只是用来传输数据,不是用于进行页面跳转

    因为Ajax使用之后他是一个完整的一个请求和回调的过程,在这个过程里面只存在一个HTTP表头,如果你重定向就会重复,就会报错。使用Ajax就是在同一个界面的东西,不能重定向到其他界面就打破Ajax的整个请求过程,因为redirect这个函数改变的是Ajax请求中间的定向,这就打破了Ajax整个流程。

    所以如果你想做一个登陆界面,那么只有Ajax返回打开下一步的url,然后前端进行调转吧。或者不用Ajax。

    2.报错Can’t set headers after they are sent.

    例如我在路由处理时候这么写:

    // 登陆信息验证
    router.all('/test1',function (req,res,next) {
    
      //接收传输过来的邮箱和密码
      var username = req.query.username;
      var password = req.query.password;
    
      // username 和 password 都是string类型
      console.log('a '+typeof(username));
      console.log('b '+ password);
    
      // 连接数据库
      var connection = mysql.createConnection({      //创建mysql实例
          host:'127.0.0.1',
          port:'3306',
          user:'root',
          password:'',
          database:'test'
      });
      connection.connect();
      var sql = 'SELECT passwd FROM users where username = ' + username ;
    
      connection.query(sql, function (err,result) {
    
          var result1 = result[0].passwd;
    
          console.log('3'+result1) // 输出3123
    
          if(err){
              res.send(500);
              console.log('[SELECT ERROR]:',err.message);
          }
    
          else{
    
              if(password == result1){
    
                  //登陆成功,进行页面的跳转
                  console.log("登陆成功");
                  res.send(200);
              }else{
    
                  res.send(404);
                  console.log("密码错误");
              };
          }
      });
    
      connection.end();
    
      return res.send(username);
    });

    就会报错:Can’t set headers after they are sent.,测试了下不能使用多个res.send(),但是按照网上指示,添加return还是出错,这个问题一直没想到解决方法。

    3.使用Ajax跳转

    上面虽然说使用Ajax无法直接跳转,但是可以利用Ajax传递数据,利用数据的不同通过判断在前端进行跳转。

    server.js

    /**
     * Created by web-01 on 2018/1/4.
     */
    var express=require('express');
    var app=express();
    var bodyParser=require('body-parser');
    var m=require("./init1.js");
    var pool=m.pool;
    
    var urlencodedParser=bodyParser.urlencoded({extended:false});
    
    app.use(express.static('public'));
    
    
    app.get('/',function(req,res){
        res.sendFile(__dirname+"/"+"ex9_1.html");
    });
    
    app.get('/jquery.min.js',function(req,res){
        res.sendFile(__dirname+"/"+"jquery.min.js");
    });
    
    app.get('/main',function(req,res){
       res.sendFile(__dirname+"/"+"main.html");
    });
    
    /*app.get('index.html',function(req,res){
        res.sendFile(__dirname+"/"+"index.html");
    });*/
    
    app.post('/login',urlencodedParser,function(req,res){
        var response={
            "uname":req.body.uname,
            "upwd":req.body.upwd
        };
        console.log(response.uname);
        var sql="SELECT * FROM t_user WHERE uname=? AND binary upwd=?";//记得加binary区分大小写
        pool.getConnection((err,conn)=>{
            conn.query(sql,[response.uname,response.upwd],(err,result)=>{
               if(result.length>0){
                   res.json({code:1,msg:"登录成功"});
                }else{
                   res.json({code:-1,msg:"用户名或密码错误"});
                }
                conn.release();
            });
        })
        //res.end(JSON.stringify(response));
    });
    
    app.get('/list',function(req,res){
        var sql="SELECT * FROM test";
        pool.getConnection((err,conn)=>{
            conn.query(sql,(err,result)=>{
            if(result.length>0){
                res.json(result);
                //res.send(result)也可
            }else{
                res.json({code:-1,msg:"用户名或密码错误"});
            }
            conn.release();
        });
        })
    });
    
    var server=app.listen(8081,function(){
    
    });

    login.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        用户名:<input type="text" name="uname" id="uname"><br/>
        密码:<input type="password" name="upwd" id="upwd"><br/>
        <input type="submit" id="btn_smt" value="提交">
    
        <script src="jquery.min.js"></script>
        <script>
            btn_smt.onclick=function(){
                var uname=$("#uname").val();
                var upwd=$("#upwd").val();
                $.ajax({
                    type:"post",
                    url:"/login",
                    data:{uname:uname,upwd:upwd},
                    success:function(data){
                        if(data.code>0){
                            alert(data.msg);
                            location.href="/main";
                        }else{
                            alert(data.msg);
                        }
                    },
                    error:function(){
                        alert("网络故障,请检查");
                    }
                });
            }
        </script>
    </body>
    </html>

    main.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <td>tid</td>
                    <td>tname</td>
                </tr>
            </thead>
            <tbody>
    
            </tbody>
        </table>
    
        <script src="jquery.min.js"></script>
        <script>
            $.ajax({
                type:"GET",
                url:"/list",
                success:function(data){
                    var html="";
                    for(var i=0;i<data.length;i++){
                        html+="<tr>";
                            html+="<td>"+data[i].tid+"</td>";
                            html+="<td>"+data[i].tname+"</td>";
                        html+="</tr>";
                    }
                    $("tbody").html(html);
                },
                error:function(){
                    alert("网络故障,请检查");
                }
            })
        </script>
    </body>
    </html>
    

    参考文献:

    https://segmentfault.com/q/1010000007613619
    https://cnodejs.org/topic/53774ffecbcc396349ca1155
    https://blog.csdn.net/spfLinux/article/details/78974205

    其他可以参考的文章:

    https://www.cnblogs.com/Leo_wl/p/4361289.html

    展开全文
  • Express框架实现页面跳转功能

    千次阅读 2019-11-19 10:40:30
    通过点击按钮实现页面间的跳转 前期准备 通过express脚手架搭建express框架: express myexpress 进入myexpress,进行初始化 npm init 然后安装依赖 npm install 最后设置日志,并启动项目 set ...

    目录

     

    需求

    前期准备

    功能实现


    需求

    通过点击按钮实现页面间的跳转

    前期准备

    通过express脚手架搭建express框架:

    express myexpress

    进入myexpress,进行初始化

    npm init

    然后安装依赖

    npm install

    最后设置日志,并启动项目

    set DEBUG=express:* & npm start

    在浏览器输入localhost:3000,成功显示如下:

    修改入口文件

    在此项目中我用的是handlebars模块,所以对入口文件app.js进行了修改:

    // 引入express-handlebars模块
    var exphbs = require('express-handlebars');

    设置node_modules文件夹为静态资产根目录

    //静态资源托管中间件
    app.use(express.static('public'));
    app.use(express.static('node_modules'));

    设置引擎模块

    app.engine('html', exphbs({
        layoutsDir: 'views',
        defaultLayout: 'layout',
        extname: '.html'
    }));
    app.set('view engine', 'html');

    引入路由文件index.js(后面创建index.js文件,并在index.js文件中设置路由)

    // 路由文件
    var indexRouter = require('./routes/index');
    //使用路由
    app.use('/', indexRouter);
    

     

    在public文件夹下,放入jquery.js文件

    功能实现

    在views文件夹下删除原有的的文件,创建index.html 和main.html,代码分别为:

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{{title}}</title>
        <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
        <h1>{{indexInfo}}</h1>
        <button type="button" class="btn btn-primary" id="jump">跳转</button>
        <script type="text/javascript">
            $(function() {
                $('#jump').on('click', function() {
                    location.href = "/main";
                })
            })
        </script>
    </body>
    </html

    main.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>{{title}}</title>
        <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <h1>{{mainInfo}}</h1>
    </body>
    </html>

    创建路由文件index.js,代码如下:

    var express = require('express');
    var router = express.Router();
    
    //GET home page. 
    router.get('/', function(req, res) {
        res.header("Access-Control-Allow-Headers", "content-type");
        var sql = 'select * from user';
        connection.query(sql, function(err, result) {
            if (err) {
                console.log('[SELECT ERROR] - ', err.message);
                return;
            }
            res.render('index', {
                layout: false,
                title: "登录页",
                indexInfo: "index paper"
            });
        });
    });
    
    
    //get main paper
    router.get('/main', function(req, res) {
        res.render('main', {
            layout: false,
            title: "主页",
            mainInfo: 'main paper'
        });
    });
    
    module.exports = router;

    注:在实现页面跳转时,去渲染界面,切勿用router.post;

    重新启动服务器:
     

    set DEBUG=express:* & npm start

    即可实现页面跳转

    展开全文
  • 這邊我使用 express@4.13.4 實作一個簡單的 ajax get 是正常的。var path = require('path');var express = require('express');var app = express();// 定義靜態檔案目錄app.use(express.static(path.join(__...

    可否提供更詳細的訊息呢?

    這邊我使用 express@4.13.4 實作一個簡單的 ajax get 是正常的。

    var path = require('path');

    var express = require('express');

    var app = express();

    // 定義靜態檔案目錄

    app.use(express.static(path.join(__dirname, 'public')));

    app.listen(3000, function () {

    console.log('app listening on port 3000');

    });

    Ajax - sample

    Get user from Github

    $(function () {

    $('#btn').on('click', function (e) {

    var username = $('input[name=username]').val();

    $.get('https://api.github.com/users/' + username, function (result) {

    console.log('ajax completed', result);

    var avatar = new Image(80, 80);

    avatar.src = result.avatar_url;

    $('#avatar').append(avatar);

    $('#username').text(result.login);

    var a = document.createElement('a');

    a.innerHTML = "BLOG"

    a.setAttribute('href', 'http://www.google.com');

    $('#blog').append(a);

    })

    });

    });

    展开全文
  • Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和res.redirect(),使用它们可以实现URL的301或302重定向。res.location(path)res.location(path)下面...
  • varexpress=require("express")varport=process.env.PORT||3000varapp=express()app.set('views','./views')app.set('viewengine','jade')app.listen(port);console.log('imoocstartedonport'+port);//ind...
  • 前台页面当点击a标签按钮是触发ajax发送post值到后台$('a[type="submit"]').on('click', function() {let name = $('#name').val();let age = $('#age').val();let sex = $('#sex').val();let phone = $('#phone')....
  • 需要前端进行状态码和后端返回的数据的判断,然后前端自己进行跳转页面。 因为 ajax 是一个完整的请求和回掉的过程,header 头是不会变的。我们以前使用后端来让前端跳转原理是通过给浏览器发送一个特殊的 header ...
  • 1、前端使用form直接post,因为ajax并不是为了跳转页面设计的(我不确定具体是不是这个原因),如果使用ajax post数据的话后端接受之后无法render view。 // express框架前端是jade格式 a(href='javascript:void(0)...
  • express默认使用jade模板,可以配置让其支持使用ejs或html模板。1. 安装ejs在项目根目录安装ejs.npm install ejs2、引入ejsvar ejs = require('ejs'); //我是新引入的ejs插件3、设置html引擎app.engine('html', ejs....
  • 1、演示效果 ...var commonsPlugin = new ...通过webpack打包、react与jade文件映射、express router作为路由,实现了登录、验证、session缓存、主页面获取登录信息一系列流程,希望此篇文章对你有所帮助。
  • 文章目录Express请求处理app.js 配置详解路由构建路由模块化GET参数的获取POST请求参数的获取Express路由参数静态资源的处理Express页面express-art-template模板引擎app.locals对象总结:Express页面Express跨域的...
  • express 404页面配置

    2019-12-17 14:58:46
    express 对于没有设定的请求路径,默认会返回 Cat not get xxx 配置 要配置 express-art-template 要在路由配置之后增加一个 app.use(function(req,res){ res.render("404.html") }) 完整案例 /** * app.js 入口...
  • 页面跳转

    2017-01-11 09:35:05
    总结一下: 1.如果在普通页面中(整个...2.如果在组合页面(浏览器中的页面是多个页面组合而成),《iframe》中的页面里,我们在使用上面的方式跳转,则不会使浏览器的整个页面跳转到b.jsp,而是只将《iframe》中
  • express是一个基于Node.js平台的web开发框架 二、express安装 1.创建项目 打开Webstorm,新建一个Project,创建一个http.js文件【其他名字也可以】 2.安装 进入项目目录下,打开控制台,输入 npm init ...
  • node+express的路由跳转(get/post) 项目目录 app.js var router = require('./router') var express = require('express'); var app = express() // 放开静态资源 app.use('/node_modules', express.static('....
  • NODEJS开发:Express配置HTML页面访问的实现。1.配置模板引擎Express默认的模板引擎是pug(jade),想要渲染html页面必须要导入对应的模板引擎ejs。npminstallejs安装完成在app.js文件中完成模板引擎的引入。varejs=...
  • webform基础介绍及页面传值(session,cookie)、跳转页面 一,IIS1.首先知道IIS是个什么东西:它是web服务器软件,安装在服务器上,接受客户端发来的请求,并传送给服务器端,然后响应请求并送回给客户端。类似于...
  • 做项目时,你可能会发现,跨域配置了,路由也配置的,都是正确的,就是跳转不到指定页面。就是http://localhost:3000/order可以请求出来数据, http://localhost:8080/order就是跳转不到指定的页面。 很恼、很气...
  • 页面显示: <van-button plain @click="checkExpress(item.express_code, item.express_no)" >查看物流</van-button> js代码: checkExpress(express_code, express_no) { window.location.href ...
  • 场景如下:在 App客户端内有两种H5独立界面 商城 ...为了解决这种情况,搜集了下其他博客以及向同事讨教,记录下利用Express当作http服务器的解决思路; 服务器环境配置 以windows为例(最好还是linux)先安装需要的环
  • express + vue 项目开发过程中,vue-router 设置 mode 为 history 时,页面刷新或者输入路径时,会直接访问node服务,而不会对应进入vue页面,在vue官网中已经给出了解决方法。但是有的时候自己配置总会出现问题,...
  • Express 配置HTML页面访问1.配置模板引擎cssExpress默认的模板引擎是pug(jade),想要渲染html页面必需要导入对应的模板引擎ejshtmlnpm install ejs安装完成在app.js文件中完成模板引擎的引入expressvar ejs = ...
  • 总结GridView实现超链接列和图片列、跳转页面并传递参数的方法。
  • 2.首先利用npm install express和npm install ejs 下载这两个家伙.至于要不要设置成全局的,看习惯,我习惯性的下载到本项目中的文件夹中my_ejs. 然后建立相应的文件: index.js: form.ejs: index.ejs app.js: ...
  • 主要介绍了Session过期后自动跳转到登录页面实例代码,非常不错具有参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,596
精华内容 3,438
关键字:

express跳转页面