美文网首页
课时82-课时86笔记.md

课时82-课时86笔记.md

作者: 九旬大爷的梦 | 来源:发表于2018-11-29 15:24 被阅读11次

课时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. 先获取登陆/注册的账户和密码
  //1. 获取提交的数据
  let name= req.body.name;
  let pwd= req.body.pwd;
  //2. 处理数据
  //2.1 生成用户注册对象
  let loginUser = {
    userName : name,
    loginPwd : pwd
  }
  1. 登陆时
    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>

BootCDN稳定 免费 快速的前端CDN加速服务

课时86 Express-小撩-socket.IO简介

socket.io 是用于构建实时通讯服务的框架。

2018-11-29_151505.jpg

socket官网

相关文章

网友评论

      本文标题:课时82-课时86笔记.md

      本文链接:https://www.haomeiwen.com/subject/kymgqqtx.html