Node.js连接数据库实现注册，登录，在登录时检测账号是否进行注册。

准备工作 创建文件夹

此创建文件夹可以不是使用Vue-cli进行创建，只是简单创建文件夹便可。

  • 使用npm进行mysql插件的安装,cmd黑窗口运行下列指令
npm install mysql --save

此指令运行完成，文件夹根目录出现node_modules文件在这里插入图片描述

  • 黑窗口运行 npm init指令，出现package.json文件最终的根目录如下
    在这里插入图片描述
  • 在根目录下新建http.js文件

开始引入模块，端口

  • 首先在http.js中引入相应模块、工具
var http = require('http');                    //引入http
var querystring = require('querystring');         
var url = require('url');                      //引入url
var fs = require('fs');                        //引入文件管理
  • 创建一个可以访问的端口
http.createServer(function(req, res) {
   console.log('链接成功');_
  //向请求的客户端发送响应头
   res.writeHead(200,{'Content-Type': 'text/html; charset=urf-8'});
   res.end('hello word');
}).listen(3000)

注意：
此处的端口使用为3000，部分可能感觉自己数据库的端口是别的内容，此处要不要更换为数据库相应。在此处进行3000的端口是可以相应操作的，与数据库端口不一致不影响使用。

  • 检验是否成功：使用node运行http.js
    黑窗口运行指令
node http.js

运行完成，在指令下方会出现如下图：
在这里插入图片描述
并且在浏览器输入localhost:3000,进行相应页面会看到hello word
在这里插入图片描述

  • 出现上述两个结果意味着端口创建完成并且是可以成功访问的。

相关页面的操作

页面样式

  • 在根目录下创建三个页面
    index.html login.html regsiter.html
    最终的目录
    在这里插入图片描述
  • 在index.html页面的body中插入如下内容
	<h1>
	     <a href="/login">登录</a>
	     <a href="/regsiter">注册</a>
	</h1>
  • 在login.html页面的body中插入如下内容
    <h1>登录页面</h1>
   <form method ="POST"> 
        <p>
            <label for="userName">用户名:</label>
           <input type="text" id="userName" name="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="passWord">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
           <input type="text" id="passWord" name="password" placeholder="请输入密码">
        </p>
        <input type="submit" >
   </form>
  • 在regsiter.html页面的body中插入如下内容
    <h1>注册页面</h1>
   <form method ="POST"> 
        <p>
            <label for="userName">用户名:</label>
           <input type="text" id="userName" name="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="passWord">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
           <input type="text" id="passWord" name="password" placeholder="请输入密码">
        </p>
        <input type="submit" >
   </form>

页面路由构建

  • 在http.js进行修改
http.createServer(function(req, res) {
	if (req.url == '/favicon.ico') {
		return;     //加载图标也会被当做一次http请求
	};
	var pathname = url.parse(req.url).pathname;     //解析地址栏地址
	var body = '';
//使用fs文件管理读取相对应文件
	fs.readFile(pathname.substring(1) + '.html', function(err, data) {
		if (err) {   //如果错误存在说明文件不存在
			res.writeHead(404, {
				'Content-Type': 'text/html; charset=utf-8'
			});
   		        res.write('404页面不存在');
		} else {   //否则文件读取成功
			res.writeHead(200, {
				'Content-Type': 'text/html; charset=urf-8'
			});
			res.write(data);   //写入文件
		};
		res.end();
	})
}).listen(3000);

注意：
后端相关内容每进行更新一次要注意重新运行执行指令。

  • 运行执行指令，
node http.js
  • 检验
    在浏览器中输入localhost:3000/index进入页面
    在这里插入图片描述
    点击登录和注册进行跳转页面，便为成功。

连接数据库

数据库的操作

  • 建表
CREATE DATABASE IF NOT EXISTS my_sql CHARACTER SET UTF8;

USE my_sql;

SET FOREIGN_KEY_CHECKS=0;

DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo` (
  `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
  `UserName` varchar(64) NOT NULL COMMENT '用户名',
  `UserPass` varchar(64) NOT NULL COMMENT '用户密码',
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息表';

开始连接

  • 在http.js中加入的相关连接代码
var mysql = require('mysql');     //引入mysql模块

var mysql_user = {                 //编写数据库链接数据
	host: 'localhost',         //地址
	user: 'root',              //用户名
	password: '',              //密码 
	database: 'my_sql'         //要链接的数据库名字    就是开始创建的那个表的名字
};

var connection = mysql.createConnection(mysql_user);    //建立数据库链接
connection.connect(function(err) {                     //链接数据库
	if (err) {      //链接错误执行
		console.log('[错误]' + err);
		connection.end();
		return;
	};
	console.log('链接成功');    //否则链接成功
});

此时重新执行node htt.js指令，同上方显示链接成功便可。

http.createServer(function(req, res) {
	if (req.url == '/favicon.ico') {
		return;
	};
	var pathname = url.parse(req.url).pathname;
	var body = '';    //定义一个放post数据的变量

	req.on('data', function(chunk) {    //接受post参数并赋值给body
		body = '';
		body += chunk;
		body = querystring.parse(body);
	});

	fs.readFile(pathname.substring(1) + '.html', function(err, data) {
		if (err) {
			res.writeHead(404, {
				'Content-Type': 'text/html; charset=utf-8'
			});
			res.write('404页面不存在');
		} else {
			res.writeHead(200, {
				'Content-Type': 'text/html; charset=urf-8'
			});

			if (body) {    //如果body存在 说明进行了post请求
				switch (pathname) {   //判断登录还是注册
					case '/login':   //执行登录事件   并传入对应参数
						query.emit('login', body.username, body.password, connection);
						break;
					case '/regsiter':  //执行注册事件   并传入对应参数
						query.emit('regsiter', body.username, body.password, connection);
						break;
				}
			};

			res.write(data);
		};
		res.end();
	})
}).listen(3000);

登录事件

var Event = require('events').EventEmitter;    //引入事件模块
var query = new Event();                       //创建事件对象

//绑定login事件  传入 username password  链接数据库对象
query.on('login', function(username, password, connection) {
//编写sql查询语句;
	var find = 'SELECT * FROM userinfo WHERE UserName = ' + username;
//执行sql语句
	connection.query(find, function(err, result) {
		if (err) {   //链接失败 直接return;
			console.log('[错误]' + err);
			return;
		};

		if (result.length) {   //如果查到了数据
			console.log('------------start----------------');
			var string = JSON.stringify(result);
			var json = JSON.parse(string)[0];
			console.log(string)
			if (json.UserPass == password) {
				console.log('密码校验正确');
			} else {
                                console.log('密码校验错误');
			}
			console.log('--------------end-----------------');
		} else {
			console.log('账号不存在')
		}
	})
})
  • 若进行登录是数据库中存储的数据，则检验成功，黑窗口上面显示

在这里插入图片描述

  • 若登录的数据为数据库中没有的数据，有账号不存在和密码错误等情况
    在这里插入图片描述
    在这里插入图片描述

注册事件

//定义注册事件    传入 username password  链接数据库对象
query.on('regsiter', function(username, password, connection) {
//编写查询语句
	var find = 'SELECT * FROM userinfo WHERE UserName = ' + username;
//编写添加语句
	var insert = 'INSERT INTO userinfo (Id,UserName,UserPass) VALUES (0,?,?)';
//执行sql语句
	connection.query(find, function(err, result) {
		if (err) {   //链接失败 直接return;
			console.log('[错误]' + err);
			return;
		};

		if (result.length) {   //如果数据库返回数据 说明账号已存在
			console.log('账号已存在');
			return;
		} else {               //否则不存在   可以进行注册
			var inserInfo = [username, password];  //定义插入数据
            //执行插入数据语句
			connection.query(insert, inserInfo, function(err, result) {
				if (err) {   //链接失败 直接return;
					console.log('[注册错误]' + err);
					return;
				};
				console.log('------------start----------------');
				console.log('注册成功');
				console.log(result);
				console.log('--------------end-----------------');
			});
		};
	});

输入数据库中没有的数据进行注册
在这里插入图片描述
注册完成，数据库表中将会出现新注册的数据，同时黑窗口上面显示
!](https://img-blog.csdnimg.cn/624590e9d19b419fa419e74c3b247526.png)

到此便实现了与数据库的连接。

# node.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

实例讲解Flink 流处理程序编程模型

avatar 华为云开发者联盟
cover

华为云 UCS GitOps：轻松交付多集群云原生应用

avatar 华为云开发者联盟
cover

华为云新一代分布式数据库GaussDB，给世界一个更优选择

avatar 华为云开发者联盟