Node.js后端+MySQL数据库+jQuery前端实现

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS PostgreSQL,集群系列 2核4GB
简介: Node.js后端+MySQL数据库+jQuery前端实现

Node.js后端+MySQL数据库+jQuery前端实现


✨博主介绍

通用组件部分

数据定义

数据库

验证码

跨域问题

前端部分

概述

登录部分

数据校验

登陆成功

登陆失败

密码安全性

注册部分

数据校验

密码强度把关

确认密码框和密码框内容保持一致

注册成功

注册失败

密码安全性

后端部分

概述

数据库连接部分

💫点击直接资料领取💫


✨博主介绍

🌊 作者主页:苏州程序大白


🌊 作者简介:🏆CSDN人工智能域优质创作者🥇,苏州市凯捷智能科技有限公司创始之一,目前合作公司富士康、歌尔等几家新能源公司


💬如果文章对你有帮助,欢迎关注、点赞、收藏


💅 有任何问题欢迎私信,看到会及时回复

💅关注苏州程序大白,分享粉丝福利


通用组件部分

数据定义


63cccedd97284784b0c546ff330cab53.png


username:用户名。


email:邮件。


hash:密码加盐的盐值。


passwd:加密后的密码。


uid:数据表主键,用于唯一标识一个用户。


我们约定,用户名是不可以重复的,但是邮箱是可以重复的。约束放在后端来做。除了邮箱以外,其他的字符串类型的数据都是严格区分大小写的。


在我提供的导出的数据库文件中,已经包含了三个账户,用户名分别是 ss1,ss2,ss3,密码都是 ssss1111。数据库转移文件是 base_info.sql。


155f7157e2684508b65149acef8489a5.png


数据库


为了便于开发和调试,我选择了在 docker 中启动 MySQL(数据库)和 phpMyAdmin(面板)服务。启动过程如下所示,十分简洁明了。提交文件中附有转移数据表使用的 SQL 脚本文件,可轻松迁移到其他平台。


docker pull mysql:8.0.1
docker run --name YDJSIR-mysql -p 3307:3306 -e MYSQL_ROOT_PASSWORD=<数据库密码> -d mysql:8.0.1
docker pull phpmyadmin/phpmyadmin:latest
docker run --name YDSJIR-phpmyadmin -d --link YDJSIR-mysql:db -p 5601:80 phpmyadmin/phpmyadmin


验证码


验证码图片由后端生成,然后发送给前端。前端在每一次提交登录 / 注册请求时会把绑定到当前会话的验证码带上,由后端进行校验,以确保安全性。


前端部分对应代码如下。


function getCaptcha() {
  $.ajax({
    method: "GET",
    xhrFields: { withCredentials: true },
    url: "http://localhost:3001/getcaptcha",
    data: {},
  }).done(function (data, status) {
    console.log(status);
    if (status == "success") {
      const captcha = document.getElementById("captchaPic");
      captcha.innerHTML = data;
      console.log(captcha);
    }
  });
}


补充说明一下,这个 captcha 元素在初始状态长这样。实际上整个

标签在点击时都会触发验证码刷新。


<div id="captchaPic" class="input-addon" style="float: left">
    <button
            class="button-link"
            style="margin: auto; color: aliceblue"
            id="getcaptchapic"
            >
        点击获取
    </button>
</div>


后端部分对应如下:


// 验证码请求接口,在前端加载页面或手动触发时会请求
app.get("/getcaptcha", (req, res) => {
  const captcha = svgCaptcha.create({
    noise: 3, // 干扰线条的数量
    background: "#50ff33", // 背景颜色
    width: "100",
    height: "40",
  });
  // 将图片的验证码存入到 session 中
  req.session.img_code = captcha.text.toLocaleUpperCase(); // 验证码不区分大小写,存储统一大写
  res.type("html"); // 注意这里的类型设置为HTML,与前端直接把返回体作为HTML代码嵌入网页中相对应
  res.send(String(captcha.data));
  res.status(200);
});
// 下面是在处理登录注册请求时的校验过程,以登录过程为例
const { username, password, captcha } = req.body;
console.log(req.session.img_code);
console.log("Client Captcha: " + captcha);
if (captcha.toLocaleUpperCase() != req.session.img_code) {
    console.log("ERROR: captcha wrong!");
    res.send({ RESULT: invalid_captcha }); // 向客户端报告这个错误,并不做进一步的处理
    return;
}


跨域问题


为了解决所有的跨域问题,特别是带上了 express-session 后的跨域问题,如下设置。


前端的每次请求都会带上如下内容,以保证能在 cookie 中保存会话相关信息并在请求时能带上会话信息。


xhrFields: { withCredentials: true }


后端明确指出了前端的来源 refer,因此启动前端时请注意默认情况是让前端跑在 80 端口,且跑在同一台机器上(两边都是 localhost)。如果修改了这样的设置,会因为跨域引起失败。


// 所有请求开始之前
app.use(
  session({
    secret: SECRET,
    resave: false,
    cookie: {
      domain: "localhost:" + PORT,
      maxAge: 600000,
    },
    saveUninitialized: true,
    cookie: { secure: false }, // 为了兼容性设置
  })
);
// 解决跨域问题
app.all("*", function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost"); // 明确指出了前端的地址
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Credentials", "true"); // 否则请求时候带不上会话相关信息
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", " 3.2.1");
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});


前端部分


概述


前端部分沿用了第一次作业的大体设计,但是增加了新的重复密码框,并使用 CDN 引入 jQuery 与后端进行通信。除此以外显然引入了大量 JavaScript 以实现功能。前端界面具有适配多种平台的能力,在 Chrome 91 开发者工具所提供的所有类型的设备的模拟屏幕种均能完整显示正常操作。


运行前端时应尽量保证它在一个服务器环境中运行。本人采用的是 nginx-1.16.1。监听的端口应设为 80,正如前文提及的跨域设置中那样。


登录部分


数据校验


用户名和密码都不能为空,否则拒绝提交并提示用户输入。


登陆成功

如果登陆成功,会弹窗提示,点击确认后跳转到首页。


139b2a18b164444092b2c9f94376c2b7.png


登陆成功时后端会向前端发送 Token。这是用户登陆状态的证明,


登陆失败


登陆失败有两种情况。


用户名和密码不匹配时,会做如下提示,并允许用户在点击确认后重新输入。


e29bd3cc7fec48969f32c9f7e6dda1d6.png


验证码错误时,无论账号密码是否正确,会做如下提示,并允许用户重新输入。


cd8c6c9f8cb54606adab4b0598893b9a.png


密码安全性


前端向后端发送请求的时候即已经密码加盐(用户名)并用 SHA-256 散列,服务端不接触明文密码。SHA-256 的实现使用如下:


var oripwd = password.value;
var encryptedpassword = forge_sha256(username.value + oripwd);


注册部分


数据校验


所有的项目均为必填项目,包括必须勾选已经阅读隐私协议(不勾选提交会弹窗警告)。


255619c40dfb4ef8843dc7ab25b7c2ab.png


如有缺漏,前端会从上到下检测,并给出对应的提示。邮件一栏使用了 HTML5 自带的 email 类型。


本项目通过监听密码框和确认密码框的输入事件实现以下功能:


密码强度把关。


确认密码框和密码框内容保持一致。


密码强度把关


本项目基本密码强度要求是密码长度应在 8 到 30 之间,且有大小写字母、数字和英文特殊符号中的至少两种。


如不符合任意一项,密码复杂度置为 0。密码将从长度(8-14:1 分;15-19:2 分;20-30:3 分)和字符类型丰富度(每多一种字符加一分)两方面打分,并根据得分提示密码强度(3 分 - 弱;4 分 - 中;5 分 - 强;6 分 - 极强;7 分:固若金汤)。提示内容的背景颜色会随之变化。


确认密码框和密码框内容保持一致


当且仅当确认密码框和密码框内容保持一致且密码本身符合强度要求规定时,提示 “完全一致” 并允许注册。否则,对应显示 “密码不符合要求” 或 “两次输入的密码不一致”。提示内容的背景颜色会随之变化。


8ede627585394824a6609a9e8b5d36de.png


注册成功


如果该用户名从未被占用,且密码强度符合要求,则允许注册。


32cae3aa68d0421e85f572b43da8400d.png


注册失败


如果用户名被占用,会提示用户名被占用,并指引用户进行修改。


84bbc0164b9649d783f59f10d12add40.png


密码安全性


前端在向后端发送请求时会做和登录侧一样的处理,在此不再赘述。


后端部分


概述


后端采用了 Node.js 和 express 框架。依赖的 npm 包如下。


express

-express-session

mysql

-body-parser

sonwebtoken

bcryptjs

csprng

package.json 已经编写好,直接 npm install 即可。


数据库连接部分


const con = mysql.createConnection({
  host: <主机名>,
  user: "root",
  password: <数据库密码>,
  port: 3307,
  database: <数据库名>,
});
// 定义一个执行 sql 语句的函数 并且返回一个 promise 对象
const exec = (sql) => {
  const promise = new Promise((resolve, reject) => {
    con.query(sql, (err, result) => {
      resolve(result);
    });
  });
  return promise;
};
// 连接数据库
con.connect();


以后每次调用数据库都是通过如下过程进行。


const sql0 = <SQL语句>;
exec(sql0).then((result) => {});



相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL,然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心,利用清洁计算为万物互联的新世界提供源源不断的能源动力,目前开服的区域包括中国(华北、华东、华南、香港)、新加坡、美国(美东、美西)、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程,来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品:云服务器ECS 云服务器 ECS(Elastic Compute Service)是一种弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
相关文章
|
3月前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
73 1
|
8天前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
44 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
28天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
54 10
|
3月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
89 14
|
3月前
|
存储 JavaScript 前端开发
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
|
3月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
|
3月前
|
Web App开发 开发框架 JavaScript
深入浅出Node.js后端开发
在这篇文章中,我们将一起探索Node.js的奇妙世界。无论你是刚接触后端开发的新手,还是希望深化理解的老手,这篇文章都适合你。我们将从基础概念开始,逐步深入到实际应用,最后通过一个代码示例来巩固所学知识。让我们一起开启这段旅程吧!
|
2月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
|
3月前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
3月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
本文将带你走进Node.js的世界,从基础到进阶,逐步解析Node.js在后端开发中的应用。我们将通过实例来理解Node.js的异步特性、事件驱动模型以及如何利用它处理高并发请求。此外,文章还会介绍如何搭建一个基本的Node.js服务器,并探讨如何利用现代前端框架与Node.js进行交互,实现全栈式开发。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和深入的理解。
87 4

热门文章

最新文章

  • 1
    微信小程序与Java后端实现微信授权登录功能
  • 2
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    详解智能编码在前端研发的创新应用
  • 7
    巧用通义灵码,提升前端研发效率
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    智能编码在前端研发的创新应用
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程