node.js连接数据库登录注册，修改用户（页面的ajax请求）
首先给大家看一下目录结构，结构如下：
index.html 首页（显示所有的用户信息）
login.html 登录页
register.html 注册页
db.js 配置链接数据库参数
dbhelper.js 数据库连接池（向外暴露方法）
test.js 逻辑js（使用方法：node test.js 即可）
下面的代码：
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<!-- 设置语言为中文 -->
<meta http-equiv="Content-Language" content="zh-cn" />
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 设置手持设备支持 -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title></title>
<style>
table,
table tr th,
table tr td {
border: 1px solid #0094ff;
}
</style>
</head> <body>
<table>
<tr>
<th>编号</th>
<th>用户名</th>
<th>密码</th>
<th>操作</th>
</tr>
<tbody id="tbody"> </tbody>
</table>
<a href="register.html">添加用户</a>
<div id="msg"></div>
</body>
<script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
<script>
main(); function main() {
let body_id = {
"id": getQueryValue("id")
}
$.ajax({
type: "POST",
url: "http://127.0.0.1:3000/select",
contentType: 'application/json',
data: JSON.stringify(body_id),
success: function(data) {
let html = '';
for(let i = 0; i < data.msg.length; i++) {
html += '<tr>' +
'<td>' + data.msg[i].id + '</td>' +
'<td>' + data.msg[i].userName + '</td>' +
'<td><input type="text" value='+ data.msg[i].passWord +' id="passWord'+data.msg[i].id+'"/></td>' +
'<td>'+
'<span style="color:red;" onclick="del(' + data.msg[i].id + ',' + data.login_id + ')">删除</span>'+
'<span style="color:blue;" onclick="upd(' + data.msg[i].id + ',' + data.login_id + ')">修改</span>'+
'</td>' +
'</tr>';
}
$("#tbody").html(html);
}
});
} function del(id, login_id) {
if(id == login_id) {
alert("不能自己删除自己");
} else {
let body_id = {
"id": id,
"login_id": login_id
}
$.ajax({
type: "POST",
url: "http://127.0.0.1:3000/del",
contentType: 'application/json',
data: JSON.stringify(body_id),
success: function(data) {
if(data.code == 1) {
alert("删除成功");
main();
} else if(data.code == 0) {
alert(data.msg);
} else {
$("#msg").text(JSON.stringify(data));
}
}
});
}
} function upd(id, login_id){
if(id != login_id) {
alert("只能修改自己的密码");
} else {
let body_id = {
"id": id,
"login_id": login_id,
"passWord": $("#passWord"+login_id).val().trim()
}
$.ajax({
type: "POST",
url: "http://127.0.0.1:3000/upd",
contentType: 'application/json',
data: JSON.stringify(body_id),
success: function(data) {
if(data.code == 1) {
alert("修改自己的密码成功");
main();
} else if(data.code == 0) {
alert(data.msg);
} else {
$("#msg").text(JSON.stringify(data));
}
}
});
}
} function getQueryValue(name) {
// 创建正则表达式，这个表达式匹配以name开头或者&name开头，以&结尾或者就是name结尾
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
// 解码url
var decodedUrl = decodeURI(window.location.search);
// 匹配表达式，返回一个group数组
var r = decodedUrl.substr(1).match(reg);
// 数组下标2的元素就是所要截取的结果
if(r != null) return unescape(r[2]);
return null;
}
</script> </html>
login.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<!-- 设置语言为中文 -->
<meta http-equiv="Content-Language" content="zh-cn" />
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 设置手持设备支持 -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title></title>
</head> <body>
用户名：<input type="text" maxlength="16" id="userName" /> 密码：
<input type="password" maxlength="16" id="passWord" />
<button onclick="login()">登录</button>
<div id="msg"></div>
<div id="reg"></div>
</body>
<script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
<script>
function login() {
let userName = $("#userName").val().trim();
let passWord = $("#passWord").val().trim();
if(!userName) {
alert("用户名不能为空");
return false;
}
if(!passWord) {
alert("密码不能为空");
return false;
}
let loginReqbody = {
'userName': userName,
'passWord': passWord
}
$.ajax({
type: "POST",
url: "http://127.0.0.1:3000/login",
contentType: 'application/json',
data: JSON.stringify(loginReqbody),
success: function(data) {
$("#passWord").val("");
if(data.code == 0) {
$("#msg").text(data.msg).css("color", "red");
$("#reg").html("<a href='register.html'>前往注册</a>").css("color", "blue");
} else if(data.code == 1) {
$("#msg").text(data.msg).css("color", "red");
} else if(data[0].userName || data[0].passWord) {
alert("登录成功");
window.location.href = 'index.html?id=' + data[0].id;
} else {
$("#msg").text(JSON.stringify(data));
}
}
});
}
</script> </html>
register.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<!-- 设置语言为中文 -->
<meta http-equiv="Content-Language" content="zh-cn" />
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 是否开启cleartype显示效果 -->
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 设置手持设备支持 -->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<title></title>
</head> <body>
用户名：<input type="text" maxlength="16" id="userName" /> 密码：
<input type="password" maxlength="16" id="passWord" />
<button onclick="register()">注册</button>
<div id="msg"></div>
</body>
<script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
<script>
function register() {
let userName = $("#userName").val().trim();
let passWord = $("#passWord").val().trim();
if(!userName) {
alert("用户名不能为空");
return false;
}
if(!passWord) {
alert("密码不能为空");
return false;
}
let loginReqbody = {
'userName': userName,
'passWord': passWord
}
$.ajax({
type: "POST",
url: "http://127.0.0.1:3000/add",
contentType: 'application/json',
data: JSON.stringify(loginReqbody),
success: function(data) {
if(data.code == 0) {
$("#msg").text(data.msg).css("color", "red");
$("#passWord").val("");
} else if(data.code == 1) {
alert("注册成功");
window.location.href = 'login.html';
} else {
$("#msg").text(JSON.stringify(data));
}
}
});
}
</script> </html>
db.js
// 配置链接数据库参数
module.exports = {
host: 'localhost',
port: 3306, // 端口号
database: 'test', // 数据库名
user: 'root', // 数据库用户名
password: 'root' // 数据库密码
};
dbhelper.js
const mysql = require('mysql'); // 引入mysql模块
const databaseConfig = require('./db'); // 引入数据库配置模块中的数据
// 向外暴露方法
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;
}
});
});
});
}
};
test.js
const mysql = require('mysql'); // 引入mysql模块（防止SQL注入使用的）1'or'1'='1
const db = require('./dbhelper');
const bodyParser = require('body-parser');
let express = require('express');
let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
next();
});
// 登录实例
app.post('/login', function(req, res, next) {
let queryString = "SELECT id,userName,passWord FROM login WHERE userName=" + mysql.escape(req.body.userName);
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
if(rows.length == 0) {
res.json({
code: '0',
msg: '用户不存在'
});
} else if(rows[0].passWord == req.body.passWord) {
res.json(rows);
} else {
res.json({
code: '1',
msg: '密码错误'
});
}
}
})
});
// 注册
app.post('/add', function(req, res, next) {
let queryString = "SELECT id,userName,passWord FROM login WHERE userName=" + mysql.escape(req.body.userName);
let addString = "INSERT INTO login(userName,passWord) VALUES(?,?)";
let addSqlParams = [req.body.userName, req.body.passWord];
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
if(rows.length != 0) {
res.json({
code: '0',
msg: '用户已经存在'
});
} else {
db.query(addString, addSqlParams, function(err, rows) {
res.json({
code: '1',
msg: '注册成功'
});
})
}
}
})
});
// 查询所有用户信息
app.post('/select', function(req, res, next) {
let queryString = "SELECT id,userName,passWord FROM login";
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
res.json({
code: "1",
msg: rows,
login_id: req.body.id
});
}
})
});
// 删除某个用户
app.post('/del', function(req, res, next) {
let queryString = "DELETE FROM login WHERE id = " + mysql.escape(req.body.id);
if(req.body.id != req.body.login_id) {
db.query(queryString, function(err, rows) {
if(err) {
res.json(err);
} else {
res.json({
code: '1',
msg: '删除成功'
});
}
})
} else {
res.json({
code: '0',
msg: '不能自己删除自己'
});
}
});
// 只能修改自己的密码
app.post('/upd', function(req, res, next) {
let queryString = 'UPDATE login SET `passWord` = ? WHERE id = ?';
let updSqlParams = [req.body.passWord, req.body.id];
if(req.body.id == req.body.login_id) {
db.query(queryString, updSqlParams, function(err, rows) {
if(err) {
if(err.affectedRows == 1) {
res.json({
code: '1',
msg: '修改成功'
});
}else{
res.json({
code: '0',
msg: '只能修改自己的密码'
});
}
} else {
res.json(err);
}
})
} else {
res.json("未知错误");
}
});
app.listen(3000);
这里详细给大家说说test.js里面的东西哈，希望大家少走弯路。
首先，不通过form表单提交，想要通过ajax的post方式请求就需要借助插件 bodyParser 了，具体的安装插件方法，百度上真的很多，自己搜索哈，别忘了一定要安装mysql，不然不行的 npm install mysql
在test.js中，最上方引入 const mysql = require('mysql'); 因为下面的SQL查询中要用到 mysql.escape ，这个是防止SQL注入额，比如 1'or'1'='1
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
这两个的顺序最好不要颠倒，具体原因我也不知道，按顺序就对了。
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
next();
});
这个地方是设置跨域访问的，因为我用的是hbuilder，默认额是8020端口，test.js运行后监听的是3000端口，所以这个配置是少不了的。
接下来是登录方法，注册方法，查询所有用户，删除某个用户，修改密码等方法。
这五个方法中这只是大部分的逻辑，有的逻辑需要你自己写上去的，我只写了一部分，缺什么向上面添加就行了。
下面是项目的下载链接： https://share.weiyun.com/5PldvEQ （腾讯微云）
node.js连接数据库登录注册，修改用户（页面的ajax请求）的更多相关文章
- Node.js实现登录注册功能
使用Node.js + Navicat for mysql实现的登录注册功能 数据库中存在有”user_id,user_name,password,user_img,user_number“字段,其中 ...
- Spring Security入门（3-7）Spring Security处理页面的ajax请求
- Node.js连接数据库
Node.js连接数据库前,须要安装对应的包.假设安装sql server 须要先装包node-sqlserver. 我们以mysql为案例来说明node.js查询mysql数据. 1.安装 node ...
- js验证登录注册
js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...
- node.js连接数据库基本操作、封装数据库操作，输出到网页
声明:以下代码测试通过,不同于直接的复制粘贴乱七八糟未测试的代码,完全可以用,最后会附上所有的代码和sql文件 首先建立表,建表语句如下: /* SQLyog Ultimate v12.08 (64 ...
- node+mysql+express实现登录/注册/修改密码/删除用户 接口
实现用户的注册.登录.修改密码.删除用户操作 用到的数据库:nodecms:表:user 目录结构: db目录下存放数据库操作语句: userSQL.js 用户有关的操作语句 router目录 接口路 ...
- Node.js + React + MongoDB 实现 TodoList 单页应用
之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...
- Node.js实现前后端交换——用户登陆
最近学习了一点Node.js的后端知识,于是作为一个学习前端方向的我开始了解后端,话不多说,开始介绍.首先,如果你想要更好的理解这篇博客,你需要具备html,css,javascript和Node.j ...
- MongDB系列(一)：使用node.js连接数据库
1.首先启动mongodb数据库服务器 2.创建app.js,代码如下: /** * Created by byzy on 2016/8/18. * node.js 连接 mongodb实例 */ / ...
随机推荐
- 图像压缩Vs.压缩感知
压缩感知科普文两则: 原文链接:http://www.cvchina.info/2010/06/08/compressed-sensing-2/ 这几天由于happyharry的辛勤劳动,大伙纷纷表示 ...
- Win10怎么批量修改文件后缀名？
Win10怎么批量修改文件后缀名?一般我们都是右击重命名,但是,如果要改的文件很多的话,这样做事不行的,该怎么批量修改后缀名呢?下面我们一起来看看两种解决办法 通常我们修改文件后缀名都是右击>& ...
- 【转】【Oracle 集群】Linux下Oracle RAC集群搭建之Oracle DataBase安装（八)
原文地址:http://www.cnblogs.com/baiboy/p/orc8.html 阅读目录 目录 数据库安装 参考文献 相关文章 Oracle 11G RAC数据库安装(八) 概述:写 ...
- 路飞学城Python-Day140
Django思维导图
- cent os 安装mariaDB / mySQL 之后初始化的命令
#安装mysql mysql-server,默认安装的是开源的mariaDB和它的server,mariadb-server,安装源中可能有找不到的,就换个名字再找找 yum install -y ...
- C++基础 (2) 第二天 C++相对C的改进 命名空间 引用
1 昨日回顾 2内联函数 3 默认参数和占位参数 4函数重载 函数重载 就是可以定义多个相同名字的函数 6 类和对象的基本语法 7 类的封装和访问控制 还有一个结论: 封装有两层含义: 把属性和方法进 ...
- 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...
- jquery ajax 全介绍
下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...
- POJ 2115 C Looooops（ 简单拓欧 + 快速幂 ）
链接:传送门 题意:题目中给出一个循环 for (variable = A; variable != B; variable += C) ,这个东东还需要 mod 2^k 问至少多次能退出,如果进入死 ...
- 51nod-完美字符串（贪心）
约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...