admin管理员组文章数量:1609209
目录
-
- 1. 注册&登录系统逻辑图
- 2. 效果演示
- 3. 代码实现
-
- 1. 首页（index）
- 2. 登陆页面（login）
- 3. 注册页面（register）
- 4. 零零散散的总结
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）
login.js通过MySQL验证登录是否有效，若有效则创建cookie，跳转至欢迎页面
var express = require('express');
var router = express.Router();
var mysql=require('../mysql.js')
//初次访问
router版权声明：本文标题：Web编程大作业(二)用户注册&登录系统(express+MySQL) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1725660289a1035318.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论