Web编程大作业(二)用户注册&登录系统(express+MySQL)

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

MorphLing_

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

阅读量2.3k

点赞数 5

本文链接：https://blog.csdn.net/morphling_/article/details/106824738

版权

本文介绍了一个使用Express框架和MySQL数据库实现的用户注册登录系统。系统包括首页、登录和注册页面，通过路由和EJS模板进行前后端交互。注册时，教师角色需输入验证码。登录成功后，通过cookie保存用户信息。注销账号则清除cookie。通过对Express的深入理解和EJS模板的使用，实现了清晰的代码结构。

摘要由CSDN通过智能技术生成

1. 注册&登录系统逻辑图

在这里插入图片描述

2. 效果演示

（啊对，因为只是演示，所以几乎没有加任何样式和美化，css样式等整个项目完成度比较高了再考虑弄）

初次访问网站时，后端没有检查到cookie，于是自动跳转至登录页面
在这里插入图片描述
点击“注册账号”后跳转至注册页面

身份选择为教师时会多出验证码一项。（此处验证码暂时是固定的）

如果输入的信息有误，会根据错误信息进行对应的提示。
在这里插入图片描述

如果注册信息无误则会显示注册成功，并有一个返回首页的按钮

返回首页后回到登陆页面，正确输入账号密码，即显示登陆成功（否则也会进行错误提示）

在这里插入图片描述

再点击返回首页，由于登陆时创建了cookie，首页不再跳转至登录页面，而是根据cookie信息显示了当前的用户名和身份。

在这里插入图片描述

点击“注销账号”后，后端清除cookie并再次访问首页，于是又跳转到了登陆页面。
在这里插入图片描述

3. 代码实现

代码上主要由三个路由和对应的三个ejs模板页面实现。
在这里插入图片描述
很明显，index，login和register分别对应了首页、登陆页面和注册页面，路由（js）实现后端逻辑，ejs实现前端页面。

1. 首页（index）

index.js，根据有无cookie产生不同的响应，并处理“注销账号”的请求，具体看代码

var express = require('express');
var router = express.Router();

//捕获到get请求（即访问127.0.0.1:3000）
router.get('/', function(req, res, next) {
   
  let coo=req.cookies;
  //检查是否存在cookie，若没有则跳转至登陆页面
  if (coo.username==undefined)
  {
   
    res.redirect('/login');
  }
  //若有，则将cookie信息作为参数传递给index.ejs进行渲染
  else
  {
   
    //cookie中身份信息存放的是'0'和'1'，转化为'学生'和'教师'
    var loginType='';
    if (coo.loginType=='0') loginType="学生";
    else loginType="教师"
    res.render('index',{
   username:coo.username,loginType:loginType});
  }
});
//捕获到post请求
router.post('/',function(req,res,next){
   
  let bod=req.body;
  //“注销账号”按钮被点击时
  if (bod.refresh=='1'){
   
    //清除所有cookie
    res.clearCookie('username');
    res.clearCookie('loginType');
    //重新跳转至首页
    res.redirect('/');
  }
})
module.exports = router;

index.ejs，username和loginType是两个参数，用来显示用户信息

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>首页</h1>
    <p>当前的账号为：<%= username%></p>
    <p>身份：<%= loginType%></p>
    <form method="post">
      <button type="submit" name="refresh" value="1">注销账号
    </form>
  </body>
</html>

2. 登陆页面（login）

var express = require('express');
var router = express.Router();
var mysql=require('../mysql.js')

//初次访问
router

最低0.47元/天解锁文章

MorphLing_

关注

5
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Web编程大作业(二)用户注册&登录系统(express+MySQL)

目录1. 注册&登录系统逻辑图2. 效果演示3. 代码实现1. 首页（index）2. 登陆页面（login）3. 注册页面（register）4. 零零散散的知识点总结1. 注册&登录系统逻辑图2. 效果演示初次访问网站时，后端没有检查到cookie，于是自动跳转至登录页面点击“注册账号”后跳转至注册页面身份选择为教师时会多出验证码一项。（此处验证码暂时是固定的）如果输入的信息有误，会根据错误信息进行对应的提示。如果注册信息无误则会显示注册成功，并有一个返回首页的
复制链接

扫一扫