找回密码
当前位置：前端开发者 > Node.js > 正文

前端开发nodejs+pug——注册登录

2019-01-23 分类：Node.js / 面试 阅读(1440) 评论(0)
js前端开发面试题及答案
前端开发的面试提
阿里web前端开发面试题

基于之前的目录，改变view里面的页面文件
html 代码

node-demo/
|
    +- controllers/ <– Controller | |
        | +- login.js
        <– 登录注册处理
        |
        +- views/ <– html模板文件 | |
            | +- head.pug
            <– 头部css引入
            | |
            | +- header.pug
            <– js引入
            | |
            | +- layout.pug
            <– 公共布局页面
            | |
            | +- login.pug
            <– 登录页面
            | |
            | +- signUp.pug
            <– 注册页面
            | |
            | +- index.pug
            <– 登陆完成主页
            |
            +- public/ <– 静态资源文件 |
                +- models <– models | |
                    | +- db.js
                    <– 数据库连接池设置
                    | |
                    | +- dao_mysql.js
                    <– 数据库通用操作方法
                    | |
                    | +- query.js
                    <– 数据库查询
                    |
                    +- router <– 路由文件 | |
                        | +- router.js
                        <– 路由配置
                        |
                        +- app.js <– 入口文件 |
                            +- package.json <– 项目描述文件 |
                                +- node_modules/ <– npm安装的所有依赖包

首先，安装pug依赖包： npm install pug –save
然后将之前的页面改写为pug模板引擎
head.pug
javascript 代码

link(rel=”stylesheet” href= CommonLibs + ‘/css/bootstrap.css’)
link(rel=”stylesheet” href= CommonLibs + ‘/css/font-awesome.css’)
link(rel=”stylesheet” href= CommonLibs + ‘/css/style.css’)

header.pug
javascript 代码

script(src= CommonLibs + ‘/js/jquery.js’)
script(src= CommonLibs + ‘/js/popper.min.js’)
script(src= CommonLibs + ‘/js/bootstrap.min.js’)
script(src= CommonLibs + ‘/js/jquery.md5.js’)

layout.pug
javascript 代码

doctype
head
meta(charset=’UTF-8′)
meta(http-equiv=’X-UA-Compatible’,content=’IE=Edge,chrome=1′)
title #{title}
block head
include head
body
.containers
nav.navbar.navbar-expand-md.navbar-dark.bg-dark
a.navbar-brand(href=’#’)
i(class=”fa fa-fort-awesome”,aria-hidden=”true”)
| Ghost Castle
    button(
    class=”navbar-toggler”
    type=”button”
    data-toggle=”collapse”
    data-target=”#navbarNavAltMarkup”
    aria-controls=”navbarNavAltMarkup”
    aria-expanded=”false”
    aria-label=”Toggle navigation”
    )
    span.navbar-toggler-icon
    div(class=”collapse navbar-collapse justify-content-end” id=”navbarNavAltMarkup”)
    .navbar-nav
    block opration-content
    block content
    block header
    include header

login.pug
javascript 代码

extends layout
block prepend head
link(rel=”shortcut icon”href=CommonLibs+”/icons/glyph/si-glyph-castle.svg”)
block opration-content
a(class=”nav-item nav-link active”href=”#”)Login
a(class=”nav-item nav-link”href=”/register”)SignUp
block content
.login.row.justify-content-md-center
.col-md-8
.card.border-secondary
.card-headerLogin
.card-body.text-secondary
form(id=”login”onsubmit=”return false;”)
.form-group.row
lable(for=”name”class=”col-sm-4 text-right”)Name
.col-sm-6
input(
type=”text”
name=”name”
class=”form-control”
id=”name”
placeholder=”Name”
required
)
.form-group.row
lable(for=”password”class=”col-sm-4 text-right”)Password
.col-sm-6
input(
type=”password”
name=”password”
class=”form-control”
id=”password”
placeholder=”Password”
required
)
.form-group.row
lable.col-sm-4.text-right验证码
#captcha.col-sm-6
p#wait.show正在加载验证码……
.form-group.row
.col-sm-8.ml-sm-auto
label.custom-control.custom-checkbox.mb-2.mr-sm-2.mb-sm-0
input(type=”checkbox”class=”custom-control-input”)
span.custom-control-indicator
span.custom-control-descriptionRememberme
.row
.col-sm-8.ml-sm-auto
button(type=”submit”class=”btn btn-dark”id=”loginBtn”)
i(class=”fa fa-sign-in”aria-hidden=”true”)
|LOGIN
append header
script(src=CommonLibs+’/js/gt.js’)
script.
functionlogin(captchaObj){
var result = captchaObj.getValidate();
if(!result){
returnalert(‘请完成验证’);
}
var name =$(‘input[name=name]’).val();
var pwd =$(‘input[name=password]’).val();
$.ajax({
url:’gt/validate-slide’,
type:’POST’,
dataType:’json’,
data:{
name: name,
password: $.md5(pwd),
geetest_challenge: result.geetest_challenge,
geetest_validate: result.geetest_validate,
geetest_seccode: result.geetest_seccode
},
success:function(data){
if(data.result){
alert(‘登录成功’);
window.location.href =’/’;
}else{
alert(data.errorMsg);
captchaObj.reset();
}
}
});
returnfalse;
}
varhandler=function(captchaObj){
captchaObj.appendTo(‘#captcha’);
captchaObj.onReady(function () {
$(“#wait”).hide();
});
$(‘#loginBtn’).click(function(){
login(captchaObj);
});
// 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
window.gt= captchaObj;
};
$.ajax({
url:”gt/register-slide?t=”+(newDate()).getTime(),// 加随机数防止缓存
type:”get”,
dataType:”json”,
success:function(data){
// 调用 initGeetest 进行初始化
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须，不能缺少
gt: data.gt,
challenge: data.challenge,
offline:!data.success,// 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha,// 用于宕机时表示是新验证码的宕机
product:”float”,// 产品形式，包括：float，popup
width:”100%”
// 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
}, handler);
}
});

signUp.pug
javascript 代码

extends layout
block opration-content
a(class=”nav-item nav-link”href=”/login”)Login
a(class=”nav-item nav-link active”href=”#”)SignUp
block content
.login.row.justify-content-md-center
.col-md-8
.card.border-secondary
.card-headerRegister
.card-body.text-secondary
form(onsubmit=”return false;”)
.form-group.row
lable(for=”name”class=”col-sm-4 text-right”)Name
.col-sm-6
input(
type=”text”
name=”name”
class=”form-control”
id=”name”
placeholder=”Name”
required
)
.form-group.row
lable(for=”sex”class=”col-sm-4 text-right”)Sex
.col-sm-6
label.custom-control.custom-radio
input(
id=”radioStacked1″
name=”sex”
type=”radio”
value=”0″
class=”custom-control-input”
required
)
span.custom-control-indicator
span.custom-control-descriptionMale
label.custom-control.custom-radio
input(
id=”radioStacked2″
name=”sex”
type=”radio”
value=”1″
class=”custom-control-input”
required
)
span.custom-control-indicator
span.custom-control-descriptionFemale
.form-group.row
lable(for=”address”class=”col-sm-4 text-right”)Address
.col-sm-6
input(
type=”text”
name=”address”
class=”form-control”
id=”address”
placeholder=”Address”
required
)
.form-group.row
lable(for=”password”class=”col-sm-4 text-right”)Password
.col-sm-6
input(
type=”password”
name=”password”
class=”form-control”
id=”password”
placeholder=”Password”
required
)
.form-group.row
lable(for=”password_confirmation”class=”col-sm-4 text-right”)ConfirmPassword
.col-sm-6
input(
type=”password”
name=”password_confirmation”
class=”form-control”
id=”password_confirmation”
placeholder=”Confirm Password”
required
)
.form-group.row
lable.col-sm-4.text-right验证码
#captcha.col-sm-6
p#wait.show正在加载验证码……
.row
.col-sm-8.ml-sm-auto
button(type=”submit”class=”btn btn-dark”id=”registerBtn”)
i(class=”fa fa-sign-in”aria-hidden=”true”)
|SignUp
append header
script(src=CommonLibs+’/js/gt.js’)
script.
functionregister(captchaObj){
var result = captchaObj.getValidate();
if(!result){
returnalert(‘请完成验证’);
}
var name =$(‘input[name=name]’).val();
var pwd =$(‘input[name=password]’).val();
var cpwd =$(‘input[name=password_confirmation]’).val();
var sex =$(‘input[name=sex]:checked’).val();
var address =$(‘input[name=address]’).val();
var udate =newDate();
if(name ==”|| pwd ==”|| cpwd ==”|| sex ==”|| address ==”){
returnfalse;
}
udate = udate.Format(‘yyyy-MM-dd hh:mm:ss’);
if($.md5(pwd)!= $.md5(cpwd)){
alert(‘The confirmation password is not identical.’);
returnfalse;
}
var param ={
uname: name,
upwd: $.md5(pwd),
usex: sex,
uaddress: address,
udate: udate
};
$.ajax({
type:’post’,
url:’/ghost/register’,
data: param,
dataType:’json’,
success:function(res){
alert(‘Register Success’);
window.location.href =’/login’;
},
error:function(err){
console.log(err);
captchaObj.reset();
}
});
returnfalse;
}
varhandler=function(captchaObj){
captchaObj.appendTo(‘#captcha’);
captchaObj.onReady(function () {
$(“#wait”).hide();
});
$(‘#registerBtn’).click(function(){
register(captchaObj);
});
// 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
window.gt= captchaObj;
};
$.ajax({
url:”gt/register-slide?t=”+(newDate()).getTime(),// 加随机数防止缓存
type:”get”,
dataType:”json”,
success:function(data){
// 调用 initGeetest 进行初始化
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
initGeetest({
// 以下 4 个配置参数为必须，不能缺少
gt: data.gt,
challenge: data.challenge,
offline:!data.success,// 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha,// 用于宕机时表示是新验证码的宕机
product:”float”,// 产品形式，包括：float，popup
width:”100%”
// 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
}, handler);
}
});
// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format(“yyyy-MM-dd hh:mm:ss.S”) ==> 2006-07-02 08:09:04.423
// (new Date()).Format(“yyyy-M-d h:m:s.S”) ==> 2006-7-2 8:9:4.18
Date.prototype.Format=function(fmt){//author: meizz
var o ={
“M+”:this.getMonth()+1,//月份
“d+”:this.getDate(),//日
“h+”:this.getHours(),//小时
“m+”:this.getMinutes(),//分
“s+”:this.getSeconds(),//秒
“q+”:Math.floor((this.getMonth()+3)/3),//季度
“S”:this.getMilliseconds()//毫秒
};
if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1,(this.getFullYear()+””).substr(4-RegExp.$1.length));
for(var k in o)
if(newRegExp(“(“+ k +”)”).test(fmt)) fmt = fmt.replace(RegExp.$1,(RegExp.$1.length==1)?(o[k]):((“00″+ o[k]).substr((“”+ o[k]).length)));
return fmt;

index.pug
javascript 代码

extendslayout
    blockopration-content
        a(class=”nav-item nav-link”href=”#”)Holle, #{ name }
a(class=”nav-item nav-link”href=”/login”)Loginout
    blockcontent
.jumbotron
        h1.display-3Holleworld!
            p.lead This is a simple hero unit, a simple jumbotron – style component for calling extra attention to featured content or information.
                hr.my-4
                p It uses utility classes for typography and spacing to space content out within the larger container.
                    p.lead
                    a(class= “btn btn-primary btn-lg”, href = “#”, role = “button”) Learn more

页面文件写好之后，修改app.js入口文件：
javascript 代码

var express = require(‘express’)
var bodyParser = require(‘body-parser’) //用于处理 JSON, Raw, Text 和 URL 编码的数据
var app = express()
var router = require(‘./router/router’)
var session = require(‘express-session’)
//设置session配置
app.use(
    session({
        resave: false, //重新保存
        saveUninitialized: true, //
        secret: ‘ghost castle’, //通过设置的 secret 字符串，来计算 hash 值并放在 cookie 中，使产生的 signedCookie 防篡改。
        cookie: { maxAge: 1000 * 60 * 60 }, //失效时间
    }),
)
app.use(bodyParser.json()) //解析json数据
app.use(bodyParser.urlencoded({ extended: true })) //解析form表单提交上来的数据
app.set(‘view engine’, ‘pug’) // 配置模板引擎
app.use(express.static(‘public’))
app.use(‘/’, router)
var server = app.listen(3001, function() {
    var host = server.address().address
    var port = server.address().port
    console.log(‘http://%s:%s’, host, port)
})

最后修改路由配置文件router.js
javascript 代码

const express = require(‘express’)
const router = express.Router()
const Geetest = require(‘gt3-sdk’) //sdk
//极验配置
const captcha = new Geetest({
    geetest_id: ‘极验id’,
    geetest_key: ‘极验key’,
})
const user = require(‘../controllers/user’)
const login = require(‘../controllers/login’)
const Render = (path, title) => (req, res) => res.render(path, { title })
//注册登录
router.post(‘/ghost/login’, login.login)
router.post(‘/ghost/register’, login.register)
//验证码
router.get(‘/gt/register-slide’, function(req, res) {
    captcha.register(null, function(err, data) {
        if (err) {
            console.log(err)
            return
        }
        if (!data.success) {
            // 进入 fallback，如果一直进入此模式，请检查服务器到极验服务器是否可访问
            // 可以通过修改 hosts 把极验服务器 api.geetest.com 指到不可访问的地址
            // 为以防万一，你可以选择以下两种方式之一：
            // 1. 继续使用极验提供的failback备用方案
            req.session.fallback = true
            res.send(data)
            // 2. 使用自己提供的备用方案
            // todo
        } else {
            // 正常模式
            req.session.fallback = false
            res.send(data)
        }
    })
})
router.post(‘/gt/validate-slide’, function(req, res) {
    captcha.validate(
        req.session.fallback,
        {
            geetest_challenge: req.body.geetest_challenge,
            geetest_validate: req.body.geetest_validate,
            geetest_seccode: req.body.geetest_seccode,
        },
        function(err, success) {
            if (err) {
                // 网络错误
                res.send(err)
            } else if (!success) {
                // 二次验证失败
                res.send({ result: false, errorMsg: ‘登录失败，请完成验证’ })
            } else {
                login.login(req, res)
                //res.send({“status” : “success”});
            }
        },
    )
})
router.post(‘/get_user_info’, user.getUserInfo)
router.post(‘/add_user_info’, user.addUserInfo)
router.post(‘/update_user_info’, user.updateUserInfo)
router.post(‘/delete_user_info’, user.deleteUserInfo)
router.post(‘/export_user_info’, user.exportUser) //导出excel
// 总路由
router.use(function(req, res, next) {
    global.CommonLibs = ”
    const url = req.originalUrl
    if (url != ‘/login’ && url != ‘/register’ && !req.session.user) {
        return res.redirect(‘/login’)
    }
    //next的作用是将请求转发，这个必须有，如果没有，请求到这就挂起了。
    next()
})
// /list_user 页面 post 请求
router.get(‘/list_user’, function(req, res) {
    res.sendfile(‘views/userList.html’)
})
router.get(‘/login’, Render(‘login’, ‘Login’))
router.get(‘/register’, Render(‘signUp’, ‘Register’))
router.get(‘/’, function(req, res) {
    const user = req.session.user[0]
    res.render(‘index’, { title: ‘Home’, name: user.uname })
})
module.exports = router
56前端开发面试题
前端开发面试在线测试
面试web前端开发需要的知识点
赞(0)
前端开发者 » 前端开发nodejs+pug——注册登录
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论