Node.js前后端交互实现用户登陆的实践
目录
- 一、项目需求
- 二，开始撸代码
- 1，创建前端页面（CSS样式此处省略）
- 2、Node.js后端获取用户输入数据
最近学习了一点Node.js的后端知识，于是作为一个学习前端方向的我开始了解后端，话不多说，开始介绍。首先，如果你想要更好的理解这篇博客，你需要具备html，css，javascript和Node.js基础以及少许的SQL数据库知识。接下我们开始这个小项目。
一、项目需求
要求用户进入登陆界面，输入用户名和密码后，后端获取用户输入的表单信息，通过从数据库查找，如果正确，跳转登陆成功页面。
ps:注释写的比较详细了，不明白的地方请多看注释。当然，我也非常欢迎你留言询问，但是这不是一个快速解决问题的办法。
二，开始撸代码
1，创建前端页面（CSS样式此处省略）
<form method="post" action="http://localhost:8080/">
<input type="text" required="required" id="use_name" placeholder="请输入用户名" name="user_name">
<input type="password" required="required" id="pwd" placeholder="请输入密码" name="user_pwd">
<button type="submit" class="but">登陆</button>
</form>
创建表单，使用post提交方式，提交地址为自己的主机，因为我是做的本地测试环境。
登陆成功页面success.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录成功页面</title>
<style>
/*成功页面的样式*/
.success {
text-align: center;
color: #3e8e41;
}
</style>
</head>
<body>
<h1 class="success">恭喜！登录成功！</h1>
<img src="img/keyboard_coffee.jpg">
</body>
</html>
2、Node.js后端获取用户输入数据
（1）引入模块，此时需要你的电脑上面以及安装了Node.js环境，安装方法请自行百度。
// 引入http模块
const http = require('http');
//引入处理请求参数模块
const queryString = require('querystring');
const fs = require('fs');
//引入第三方mime模块
const mime = require('mime');
const path = require("path");
（2）获取用户输入的数据
//创建sever网站服务器对象
let sever = http.createServer();
//为服务器对象绑定请求事件,当客户端有请求时触发
sever.on('request', function (request, response) {
/* POST参数是通过事件的方式接收的
* data 当请求参数传递的时候触发的事件
* end 当参数传递完成的时候触发end事件
*/
let postParams = ''; //定义空字符串用于接收post参数
//绑定data触发事件
request.on('data', function (params) {
postParams = postParams + params; //拼接post参数
});
//绑定data触发事件
request.on('end', function () {
// 把postParams字符串处理为对象,用querystring模块中的parse()方法
// console.log(queryString.parse(postParams));
//获取具体数值，如用户名。 注意：此处的user_name必须和前端HTML代码中的name="user_name"一致的。
let username = queryString.parse(postParams).user_name;
let userpwd = queryString.parse(postParams).user_pwd;
}
至此，我们已经获得了用户输入的数据，并存放在了我们定义的变量username和userpwd中，用于下面与从数据库获取到的用户名和用户密码比较。
（3）从SQL数据库获取用户的信息（我用的是MySQL数据库。我用的数据库管理软件是DBeaver，因为它免费哈哈哈）
看一下我预先准备好的数据库中的数据表。数据库名test(后面数据库封装的配置项里可以看到)，数据表名userinfo
// 数据库查询实例。我是根据用户名username去数据库中查询。
//调用自定义封装的链接数据库模块
const connection = require("./mysql.js");
connection.query("select * from userinfo where userName=?", [username], function (result, filed) {
//result是mysql查询返回的原始数据。查询语句中的‘？'是占位符，用于将SQL查询语句替换为‘[]'中的值。
//处理mysql返回的类似json格式的数组,处理为json数据
let resultJson = JSON.stringify(result);
//JSON.parse()用来解析JSON字符串
let dataJson = JSON.parse(resultJson);
//获得解析后的具体数值
let name = dataJson[0].userName;
let pwd = dataJson[0].userPwd;
//比较数据库获到的用户信息和用户表单输入的是否一致，一致则跳转成功页面，findPage()为自定义的页面跳转函数
if (pwd === userpwd && name === username) {
console.log("密码正确！");
findPage('/success.html', response);
} else {
console.log("密码错误！");
response.end('<h1>密码错误！</h1>')
}
});
/**
* 访问本地静态资源的函数
*/
function findPage(url, res) {
// static为拼接后的静态资源绝对路径
const static = path.join(__dirname, url);
// 异步读取本地文件
//获取文件的类型，使用mime模块的getType()方法
let fileType = mime.getType(static) //获取文件的类型，使用mime模块的getType()方法
//读取文件
fs.readFile(static, function (err, result) {
if (!err) {
res.end(result);
}
});
}
(4)数据库模块封装
因为如果在使用中每次都写一堆代码用于数据库链接之类的操作，机会显得很冗余，于是我参考其他博友的代码对数据库链接操作分为两个文件进行封装
数据库配置封装文件 mysql.config.js
//配置链接数据库参数
module.exports = {
host: 'localhost',
port: 3306,//端口号
database: 'test',//数据库名
user: 'root',//数据库用户名
password: '123456'//数据库密码
};
数据库链接封装文件 mysql.js
let mysql = require('mysql');//引入mysql模块
let databaseConfig = require('./mysql.config'); //引入数据库配置模块中的数据
//向外暴露方法
module.exports = {
query: function (sql, params, callback) {
//每次使用的时候需要创建链接，数据操作完成之后要关闭连接
let connection = mysql.createConnection(databaseConfig);
connection.connect(function (err) {
if (err) {
console.log('数据库链接失败');
throw err;
}
//开始数据操作
//传入三个参数，第一个参数sql语句，第二个参数sql语句中需要的数据，第三个参数回调函数
connection.query(sql, params, function (err, results, fields) {
if (err) {
console.log('数据操作失败');
throw err;
}
//将查询出来的数据返回给回调函数
callback && callback(results, fields);
//results作为数据操作后的结果，fields作为数据库连接的一些字段
//停止链接数据库，必须再查询语句后，要不然一调用这个方法，就直接停止链接，数据操作就会失败
connection.end(function (err) {
if (err) {
console.log('关闭数据库连接失败！');
throw err;
}
});
});
});
}
};
上面的两个文件已经在数据库查询实例中const connection = require("./mysql.js");调用了。
至此我们的使用node.js进行MySQL数据库查询,实现用户登陆的功能已经完成了
在此感谢教会我数据库操作封装的博主大佬，他的文章链接放在这里了
到此这篇关于Node.js前后端交互实现用户登陆的实践的文章就介绍到这了,更多相关Node.js用户登陆内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Node.js利用Express实现用户注册登陆功能(推荐)
要求 了解Express框架 了解node.js常用模块:express,body-parser,mysql 了解express Router 了解HTML form表单 了解MySQL Server 及安装使用 了解SQLyog使用 环境 OS: Win10 Node.js: v12.19.0 Express: v4.17.1 Yarn: v1.22.10 使用VScode IDE body-parser:1.19.0 mysql: 2.18.1 MySQL Server:5.7 SQLyog
-
Node.js前后端交互实现用户登陆的实践
目录 一.项目需求 二,开始撸代码 1,创建前端页面(CSS样式此处省略) 2.Node.js后端获取用户输入数据 最近学习了一点Node.js的后端知识,于是作为一个学习前端方向的我开始了解后端,话不多说,开始介绍.首先,如果你想要更好的理解这篇博客,你需要具备html,css,javascript和Node.js基础以及少许的SQL数据库知识.接下我们开始这个小项目. 一.项目需求 要求用户进入登陆界面,输入用户名和密码后,后端获取用户输入的表单信息,通过从数据库查找,如果正确,跳转登陆成功
-
vue.js前后端数据交互之提交数据操作详解
本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo
-
Node之简单的前后端交互(实例讲解)
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学node的朋友可以看一看.一方面理解服务端与客户端是如何交互的,一方面更熟悉node开发. 先贴代码:(有兴趣的可以copy到本地自己run一下) 主页面的html index.html: <!doctype> <html> <head> <meta charset=&
-
如何利用原生JS实现图片预览加上传(前后端交互)
目录 前言 效果大致如下 前端代码 后端代码 总结 前言 最近在写vue项目的时候发现了个Vant的一个upload的图片上传的组件,就好奇了一下下,于是萌生了一个自己手写一个图片上传的组件的想法,您猜怎么着,还真给我实现了,那今天就和大家分享一下,大家有兴趣的可以了解一下啦,写进项目中可能会是个加分点哦!! 我们知道文件上传是需要前后端交互的,所以我这边给出前后端代码. 文件上传大致分为以下几个步骤 前端文件选择上传的文件类型 拿到文件信息 将选择的文件(视频或图片)在前端页面预览出来 将文件
-
Node.js 搭建后端服务器内置模块( http+url+querystring 的使用)
目录 前言 一.创建服务器 二.返回响应数据 返回复杂对象数据 返回html文档数据 三.设置响应头和状态码 四.实现路由接口 创建简易路由应用 五.处理URL URL格式转换 URL路径拼接 正确转换文件路径 转换为Options Url对象 六.跨域处理 后端设置跨域 jsonp接口 七.Node作为中间层使用 模拟get请求(转发跨域数据) 模拟post请求(服务器提交) 八.使用Node实现爬虫 前言 这一节我们去学习NodeJs的内置模块:http.url.querystring ,并
-
Django之提交表单与前后端交互的方法
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test", "age": 1 }; $.ajax({ type: 'GET', url: /your/url/, data: dat
-
node+vue前后端分离实现登录时使用图片验证码功能
目录 后端代码 前端代码 获取验证码方法 登录验证方法 记录一下前端使用验证码登录的过程后端用的是node.js,关键模块是svg-captcha前端使用的是vue2最后的登录界面如下: 后端代码 先上代码,然后解释 const svgCaptcha = require('svg-captcha') exports.checkCode = (req, res) => { const img = svgCaptcha.create({ size: 4, ignoreChars: '0o1l', c
-
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Vue-CLI项目-axios模块前后端交互(类似ajax提交)08.31自我总结,内容如下: Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axios from 'axios' Vue.prototype.$axios = axios; 三.使用 created() { // 组件创建成功的钩子函数 // 拿到要访问课程详情的课程id let id = this.$ro
-
Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)
目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动
-
Springboot运用vue+echarts前后端交互实现动态圆环图
目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa