zoukankan      html  css  js  c++  java
  • 简版的电商项目学习——第四步:从数据库获取数据,页面跳转以及跳转页面成功与否的提示信息设置

    一、简介

      目前的注册功能可以成功的把数据存入数据库中,但是我们要实现的是具有登录,注册并且要往数据库存储前端所需要的数据的一个后台管理系统,所以对于注册,登录要有的功能就必须有获取数据库里的数据,以及页面跳转的基本功能。

    二、获取数据 —— promise

      在添加数据的时候,就设置好如果添加成功,就返回添加的数据。

    function reg(params) {//注册时添加数据的方法
       return new Promise((resolve,reject)=>{//resolve 成功之后的回调   reject 失败的回调
          adminModel.create(params,(err,data)=>{
             if(err){
                reject({//添加失败返回的数据
                   errno:500,
                   msg:'数据库错误',
                   data:null
                })
             }else{
                resolve({//添加成功返回的数据
                   errno:0,
                   msg:'OK',
                   data:data
                })
             }
          })
       })
    };

      在注册的 post 操作里调用添加注数据的 reg 方法之后,使用 .then 方法获取 promise 所返回的数据

    adminModel.reg(postData).then((data)=>{
       console.log(data);//输出获取到的数据
    })

    注:现在就是针对注册的数据进行操作,所以下面所有的操作都是在 regPost 方法里操作

    三、页面跳转  

      在获取到数据之后,就可以通过判断返回的错误码来确定要跳转的页面。

    adminModel.reg(postData).then((data)=>{
       console.log(data);
       if(!data.errno){
          res.redirect('/login');//注册成功之后重定向到登录页面
       }else{
          res.redirect('/reg');//不成功就还是在当前注册页面
       }
    })

    四、跳转成功与否的提示信息

      下载依赖模块:

    npm install connect-flash --save

      在项目中调用:

    var flash = require('connect-flash');//引入模块
    
    //这个模块是依赖于session  所以必须在session下面使用
    app.usr(flash());

      这样就可以在全局使用这个模块的方法,但是注意,这个提示信息是点击的注册按钮之后,再提示是否操作成功,所以在经过一系列操作之后,最后都进入了入口文件,所以在主路由 routes 上边截取成功与否的数据

    app.use((req,res,next)=>{
       res.locals.success = req.flash('success');
       res.locals.error = req.flash('error');
       console.log(res.locals.success,res.locals.error);
       next();
    })

      然后在所有跳转操作完成之后,获取在经过主路由是获取的成功与否的提示信息:

    adminModel.reg(postData).then((data)=>{
       if(!data.errno){
          req.flash('success',data.msg)//传两个参数时是  给success存值
          res.redirect('/login');
       }else{
          req.flash('error',data.msg);
          res.redirect('/reg');
       }
    })

    注:这样带过来的数据只是为了记录上一次操作的状态,所以只会存在一次,也就是刷新之后数据就没有了

      现在有了成功或者失败的提示字段了,紧接着就要把它渲染到页面了,因为它不止注册的时候要用,所以把他封装到一个单独的文件夹里:

    //封装的提示信息
    <%if(success.length!=0){%>
    <div class="alert alert-success" role="alert"><%=success%></div>
    <%}%>
    <%if(error.length!=0){%>
    <div class="alert alert-danger" role="alert"><%=error%></div>
    <%}%>

      然后就在要用到它的页面调用就好了:

    <%include ../public/success-error.html%>

    补一张效果图:

  • 相关阅读:
    centos下两种方法安装git
    Field.setAccessible()方法
    Tomcat日志格式自定义
    Java监控工具
    JDK目录结构和文件作用介绍
    Java中堆和栈的区别
    Magicodes.WeiChat——使用AntiXssAttribute阻止XSS(跨站脚本攻击)攻击
    Magicodes.WeiChat——缓存管理
    Magicodes.WeiChat——WeChatOAuthTest(网页授权获取用户基本信息)
    Magicodes.WeiChat——后台JS框架封装
  • 原文地址:https://www.cnblogs.com/cmy485562216/p/8350108.html
Copyright © 2011-2022 走看看