web编程期末树莓派项目（二）——用户登陆注册

最新推荐文章于 2024-08-07 12:06:20 发布

Philca

最新推荐文章于 2024-08-07 12:06:20 发布

阅读量272

点赞数 1

分类专栏： web编程

本文链接：https://blog.csdn.net/weixin_51076879/article/details/118095543

版权

本文介绍了一个基于Express框架的Web编程期末项目，详细阐述了如何构建用户注册登录系统，包括页面逻辑、数据库构建和前后端实现。通过EJS模板进行页面渲染，根据cookies展示用户信息。用户注册时需验证信息合法性，登录时判断账号密码是否匹配，并有验证码功能，区分学生和教师身份。

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

web编程期末树莓派项目（二）——用户登陆注册

用户注册登录系统

用户注册登录系统

效果展示

在这里插入图片描述

express框架

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性用于创建各种 Web 应用。使用 Express 可以快速地搭建一个完整功能的网站。

本项目使用的即为express框架。

-bin // node www网站启动文件
-node_modules // 存放node模块
-public //静态资源文件如图片，css，html
-routes //路由文件
-views //视图页面（ejs模板）
-app.js //配置文件和中间件的配置，启动文件
-mysql.js //本地数据库
-package.json //项目的依赖包，脚本，描述信息

关于express框架的具体解析可以看这里

为了实现根据cookies显示用户信息等功能，页面一律采用ejs模板，达成渲染效果。
使用方法用例：

在后端写入语句

 res.render('index',{
   username:cookies.username,loginType:loginType});

前端对应写入

<div><%= username%> <%= loginType%></div>

即得到后端对前端的渲染
在这里插入图片描述

页面逻辑

网页得到get请求，判断有无cookies。
若有cookies，直接进入导航页；若无cookies，进入登陆页面。
若已有账号，用户进行登录操作。后端捕获到post请求将登录信息与数据库已有用户信息进行匹配，若找到匹配项，进入导航页面，创建cookies，导航页面据此显示用户信息；若无匹配项，提示登录失败，要求用户重新登录。
若未注册账号，跳转到注册页面。用户输入注册信息，后端判断注册信息是否合法。如果不合法，提示非法原因，用户重新注册；如果合法，后端捕获到post请求将注册信息存入数据库，重新跳转到登陆页面。

数据库构建

需在数据库中创建一个存放用户信息的表格。username、passwords满足基本注册登录逻辑，loginType用于判断注册人身份

CREATE TABLE if not exists `login` (
  `id` int(11)  NOT NULL AUTO_INCREMENT,
  `username` varchar(16) DEFAULT NULL,
  `passwords` varchar(16) DEFAULT NULL,
  `loginType` int(1) DEFAULT NULL,
  `createtime` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `id_UNIQUE` (`id`),
  UNIQUE KEY `username_UNIQUE` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

前端实现

在express框架下的views文件夹下分设三个ejs页面，分别对应导航页面、登录页面、注册页面。

-views //视图页面（ejs模板）
index.ejs
login.ejs
register.ejs

导航页面

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>云课堂</title>
		<link rel="stylesheet" href="index.css" />