web大作业（1）注册功能的实现

最新推荐文章于 2024-04-22 20:25:02 发布

spring__festival

最新推荐文章于 2024-04-22 20:25:02 发布

阅读量646

点赞数 1

文章标签： node.js

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

版权

首先写（复制）一个漂亮的注册页面

<!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;}
/* 整个登录框的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当鼠标移到按钮上面时变成小手形状 */
button{
    width:100%;
    padding:10px;
    background-color:#CDC673;
    border:1px solid black;
    border-radius:4px;
    cursor:pointer; 
}          
#back{
  margin-left: 50px;
}                                                                                                                                        
</style>
</head>
<body>
<div class="headtop"></div>
<div class="login">
  <h1>学生注册</h1>
  <form action="/register" method="post" id="register_form">
    <input type="text" name="user" placeholder="用户名" required="required">
    <input type="password" name="password" placeholder="密  码" required="required">
    <input type="password" name="confirm_password" placeholder="确认密码" required="required">
  <button type="submit">注册</button>
  </form>
  <br/>
  <a href="student_index.html" id="back">返回</a>
  <br/>
</div>
</body>
<script src="jquery.js"></script>
</html>

复制过来的时候它是一个登陆页面，我加了一行确认密码给改成了注册页面。
然后就是用node.js实现注册功能。

app.post('/register',function(req,res){
  var data = req.body;
  // console.log(data)
  var flag = 0;
  connection.query("select * from student",function(err,rows,fields){
    if(err){
      console.log(err)
    }else{

      //判断用户已存在
      rows.forEach(function(value,index){
        if(rows[index].username==data.user){
          res.render("waterball.html",{
            content:"用户已存在"
          })
          flag = 1;
        }
      })

      //判断密码是否不一致
      if(flag==0){
      if(data.password!=data.confirm_password){
        res.render("waterball.html",{
          content:"密码不一致"
        })
        return;
      }   
      
      //注册
      else{
        var params = [
          data.user,
          data.password
        ]
        var insertquery = 'INSERT student(id,username,password) value(null,?,?)'
        connection.query(insertquery,params,function(err,result){
          if(err){
            console.log(err)
          }else{
            console.log(result);
          }
        })
        res.render("waterball.html",{
          content:"注册成功啦"
        })
      }
    }
  }
  })
})

这里要说明几点：
1，由于表单请求是post，所以要得到表单内容有些复杂，这里调用了body-parser，先在终端里输入npm install body-parser，等待下载完毕，然后在app.js中写上这两句代码：

app.use(bodyParser.urlencoded({extended:false}))
app.use(bodyParser.json())

这样只要用req.body就能获取表单提交内容了。
2，注册需要判断用户名是否存在，以及两次输入密码是否一致，当然我这个注册功能十分简陋，如果要实现用户名不能有“！@#￥%……&*“这样的符号，则可以添加正则表达式进行判断。
3，waterball.html 在这里是一个模板页面，用art-template来渲染，不同情况显示不同内容，但背景都是一个水球，如果用户已存在，水球中显示“用户已存在”，诸如此类。
4，正式做项目应该模块化，像我这样把所有代码写进一个js里，导致代码写得像奥里给一样是不可取的。
5，由于后端内容完全是参考文档做的，所以调试了很久，后来才发现其他大佬都是几行搞定的，真是自愧不如啊。

spring__festival

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web大作业（1）注册功能的实现

首先写（复制）一个漂亮的注册页面<!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-famil
复制链接

扫一扫