课时82 Express-小撩-注册上
先处理register.ejs的form提交方式改成post,
register.ejs:
<form action="/" method="post">
<p>账号:<input type="text" name="name"></p>
<p>密码:<input type="password" name="pwd"></p>
<input type="submit" value="提交">
</form>
然后让注册成功之后跳到主页,也就是把action='/'
,然后在主页里接受注册时[图片上传中...(111543388573_.pic.jpg-a7d9c2-1543388576693-0)]
提交的数据。
index.js:
//register时的post请求
router.post('/', function(req, res, next) {
//1. 获取提交的数据
let name= req.body.name;
let pwd= req.body.pwd;
console.log(name,pwd);
});
131543388690_.pic.jpg
课时83 Express-小撩-注册下
提交注册表单之后应该先判断数据库中是否有这个用户名:
- 如果用户名存在,那 跳转到登录页面
- 如果不存在,那就注册成功,然后跳转到登录页面
可以使用mongoose直接查询( find() )数据库,该用户名是否存在,如果不存在的话就直接插入( inset() ) 。
注册成功后密码存储的话应该使用md5加密 ,登录验证时在解密
但是在这里使用一个变量(充当数据库)接收注册的用户名和密码。
课时84 Express-小撩-登录
新建一个util文件,把验证用户名的函数存放在这里,然后使用exprots或者module.exprots暴露出去。
关于这两者区别请看-->module.exports vs exports-廖雪峰的官方网站-node.js
存放在外部的共用的值和方法util.js:
//存放数据
exports.users= [];
//判断提价的用户名是否存在
exports.isReg= (userObj, users)=>{
for(var i=0; i<users.length; i++){
//取出单个用户对象
let user= users[i];
console.log('注册表',users[i])
//判断
if(user.userName === userObj.userName){
return user;
}
}
}
在登陆和注册需要验证的情况下都需要以下几步:
前提是在登陆和注册中都require了util.js,因为只有引用了它才能使用验证和存贮。
- 先获取登陆/注册的账户和密码
//1. 获取提交的数据
let name= req.body.name;
let pwd= req.body.pwd;
//2. 处理数据
//2.1 生成用户注册对象
let loginUser = {
userName : name,
loginPwd : pwd
}
- 登陆时
2.1.判断是否注册
2.2.判断密码是否正确
//2.2 验证用户是否注册
console.log(loginUser)
let user= util.isReg(loginUser, util.users);
if(user !== null && user!== undefined){
//用户存在
if(user.loginPwd === loginPwd){
res.send("登陆成功,欢迎" + user.userName + ",<a href='/'> 返回主页</a>")
res.redirect('/');
}else{
res.send('密码错误')
}
}else{
//用户不存在
res.send("用户不存在,请<a href='/register'> 去注册</a>");
}
});
跳转使用重定向:res.redirect('/')
课时85 Express-小撩-配置聊天界面
添加一个chat.ejs 表示聊天机器人的页面,对应添加routes、app.js的配置和前面一样,
只有登陆后,才能显示聊天机器人:
<% if(name !== '小乐'){ %>
<p>
<a href="/chat">去找小乐聊天</a>
</p>
<% } %>
如何给添加views中.ejs文件所需要的静态文件(css/js/images):
在app.js中注意如没有请添加上这句
//获取放置在public文件夹下的静态文件,
app.use(express.static(__dirname + '/public'));
关于app.use()这个方法具体的介绍,这里有篇文章,写的很好app.use(express.static)方法详解
Express细节探究(1)——app.use(express.static)
这样,就可以在ejs文件中导入外部静态文件了。
这里需要注意一点,在导入写URL时,只需要写public后面的路径就好,不需要再加上“public”了。如下:
<link rel="stylesheet" type="text/css" href="table.css"/>
<script type="text/javascript" src="table.js"></script>
网友评论