web大作业（2）登陆页面的实现

最新推荐文章于 2024-05-18 19:25:38 发布

spring__festival

最新推荐文章于 2024-05-18 19:25:38 发布

阅读量1.7k

点赞数 5

文章标签： node.js

本文链接：https://blog.csdn.net/spring__festival/article/details/106616546

版权

首先还是复制一个登陆页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html登录模板</title>
<style>
/* 让页面所有元素的padding和margin都设置为0 */ 
*{margin:0;padding:0;box-sizing:border-box;}
/* 体设置为微软雅黑 */ 
body{font-family: "微软雅黑", sans-serif;}

.headtop{height:28px;}
/* 整个登录框的css，并使用绝对定位居中 */ 
.login { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
body {
        background-image: linear-gradient(to right , #7A88FF, #7AFFAF);
      }
/* 前面分析过的h1标签的css，text-shadow设置阴影使文字更好看，letter-spacing设置字符间距 */ 
.login h1 { color:#555555; text-shadow: 0px 10px 8px #CDC673; letter-spacing:2px;text-align:center;margin-bottom:20px; }
/* 两个输入框的css，border属性设置边框线粗细以及颜色，border-radius设置边框的圆角角度 */
input{
    padding:10px;
    width:100%;
    color:white;
    margin-bottom:10px;
    background-color:#555555;
    border: 1px solid black;
    border-radius:4px;
    letter-spacing:2px;
}
/* 登录按钮的css，cursor:pointer当鼠标移到按钮上面时变成小手形状 */
form button{
    width:100%;
    padding:10px;
    background-color:#CDC673;
    border:1px solid black;
    border-radius:4px;
    cursor:pointer; 
} 
                                                                                                                                            
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
  <h1>学生登陆</h1>
  <form action="/login" method="post">
    <input type="text" name="user" placeholder="用户名" required="required">
    <input type="password" name="password" placeholder="密  码" required="required">
  <button type="submit">登录</button>
  </form>
  <br/>
<a href="student_index.html" id="change">学生登陆</a>
    <a href="teacher_index.html" >教师登陆</a>
    <a href="student_register.html" >没有账号？注册一个</a>
  </div>
</body>
</html>

然后用node.js写登陆的路由：

app.post('/login',function(req,res){
  var data = req.body
  //console.log(data)
  sqlstr = "select * from student where username=? and password=?"
  arr = [data.user,data.password]
  connection.query(sqlstr,arr,function(err,rows){
    //console.log(rows);
    if(rows.length!=0){
      var result = rows[0]
      req.session.username = result.user
      req.session.password = result.password
      res.render("info.html",{
        title:"登陆成功",
        content:"至用户页面",
        hreftext:"https:/www.baidu.com"
      })
    }else{
      res.render("info.html",{
        title:"登陆失败，账号或密码不正确",
        content:"至登录页面",
        hreftext:"/"
      })
    }
  })
})

说明一下几点：
1，用session的时候要在前边引入express-session，然后写上这几句：
app.use(session({ secret:"keyboard cat", resave: false, saveUninitialized: true, cookie:{maxAge:7*24*60*60*1000} }))
这里我设置了maxAge为七天。一边来说session是要加密的，不然很容易被黑客截获信息，当然没有黑客会想接获我的web作业把……
2，一旦发现登陆成功，就要跳转至用户界面，我这里给了一个名为info的跳转模板，html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
</head>
<body>
    <h1>{{title}}</h1>
    <p><span class="num">5</span>秒后跳转{{content}}</p>
</body>
<script>
    var n=5;
    setInterval(()=>{
        n--;
        if(n<0){
            location.href = "{{hreftext}}"
        }else{
        document.querySelector('.num').innerHTML = n
        }
    },1000)
</script>
</html>

实现五秒后跳转功能，若登陆失败则跳回登陆页面。我没有设置css样式，所以页面很简陋。由于我用户界面还没写，这里就先登陆成功跳转百度，作为测试。
3，在用户界面中可以选择退出登录，到时候只要destroy session即可。
4，作业要求两类用户登录，老师的登录和注册我不专门发博客了，只要在数据库里添加一张名为teacher的table即可，界面和路由设计也都一样的。

spring__festival

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
web大作业（2）登陆页面的实现

首先还是复制一个登陆页面：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>html登录模板</title><style>/* 让页面所有元素的padding和margin都设置为0 */ *{margin:0;padding:0;box-sizing:border-box;}/* 体设置为微软雅黑 */ body{font-family: "
复制链接

扫一扫