js+nodejs+ajax登录注册表单验证
自制登录注册表单验证
- 一.用到的一些东西
- 登录模块
- 注册模块
- 遇到的问题
-
- Error 1: Cannot set headers after they are sent to the client
- Error 2 在sql.js里,for循环里执行sql语句
- 注意点
-
- 1.用ajax提交form表单要阻止表单的默认事件.
- 2.用form表单用post提交的数据在node中必须使用body-praser中间件解析
- 3.用get方法直接可以用req.query,就可以获取到提交的数据了
一.用到的一些东西
1.ES6一些语法
2.jquery库
3.node.js
3.1--experss框架
3.2--express-Router路由
3.3--body-parser中间件
3-4--path 路径模块
4.mysql 数据库
5.ajax 提交数据
页面挺粗糙的不要在意.
登录模块
思路解析:
- 判断用户名是否存在,
------ 1.1 存在.
-------------判断密码否正确
-------------------密码正确则登录成功
-------------------密码错误则提示(‘密码错误’)
------- 1.2 不存在
--------------提示用户不存在,请注册
用户输入数据-----通过ajax提交到node服务器----调用sql里面写好的方法-----在服务器中进行验证------返回结果给前端---------前端给出提示和页面跳转.
代码的实现
router路由
api.js
router.get('/login', function(req, res) {
res.render('login.html')
})
//表单提交
router.post('/login', function(req, res) {
let userMassage = {
username: req.body.username,
password: req.body.password
}
//调用数据库放方法
sql.userLogin(function(arrUser, arrPwd) {
//把当前输入的用户名和数据库的用户名进行验证,
//并且存在thisUser中
var thisUser = arrUser.find(item => {
if (item.user == userMassage.username) {
return item
}
})
//如果是有的话,就进行密码的判断
if (thisUser) {
if (userMassage.password == thisUser.pwd) {
res.status(200).json({
code: 0,
massage: '登录成功'
})
} else {
res.status(200).json({
code: 1,
massage: '密码错误'
})
}
//没有就用户不存在
} else {
res.status(200).json({
code: 2,
massage: '用户不存在'
})
}
})
})
app.js (模板引擎用不到,注释掉了)
const express = require('express') //加载express
let path = require('path'); //路径处理模块
const app = express()
const bodyParser = require('body-parser')
//把加载路由模块
const router = require('./routes/api.js')
//模板引擎
// app.engine('.html', require('express-art-template'))
//加载静态资源
app.use(express.static(path.join(__dirname, 'public'))); //加载静态资源
//配置解析表单post请求体插件
// 创建 application/x-www-form-urlencoded 编码解析
app.use(bodyParser.urlencoded({
extended: false }))
app.use(bodyParser.json())
//挂载路由
app.use(router)
app.listen(3333, () => {
console.log('服务器已连接,正在监听3333端口');
})
数据库模块 (数据库的话可以自己去创建,这里的是我自己建的哇)
sql.js
/*
数据库连接
*/
// 引入mysql模块
var mysql = require('mysql');
// 创建链接
var conn = mysql.createConnection({
host: 'localhost',
user: 'promise',
password: '123456',
database: 'animated',
port: 3306,
useConnectionPooling: true
});
//链接
conn.connect(function(err) {
if (err) {
console.log(`mysql连接失败: ${
err}!`);
} else {
console.log("mysql连接成功!");
}
});
//登录验证,
exports.userLogin = function(fun) {
let sql = "select * from user where userName";
conn.query(sql, function(err, result) {
let arrUser = [];
for (let i = 0; i < result.length; i++) {
arrUser.push({
user: result[i].userName, pwd: result[i].passWord })
}
fun(arrUser)
});
}
前端页面
$('#login-form').on('submit', function(e) {
//阻止默认提交
e.preventDefault()
var formData = {
username: $('#admin').val(), password: $('#pwd').val() }
$.ajax({
url: '/login',
type: 'post',
data: formData,
dataType: 'json',
success: function(data) {
var data = data.code
switch (data) {
case 0:
window.alert('恭喜你,登录成功')
window.location.href = 'index.html';
break;
case 2:
window.alert('没有该用户名,请您注册')
break;
case 1:
window.alert('密码错误')
break;
}
}
})
})
注册模块
思路解析
思路解析:
- 判断用户名是否存在,
------ 1.1 存在.
--------------提示用户已经存在
--------1.2不存在
------------点击注册
用户输入数据-----通过ajax提交到node服务器----调用sql里面写好的方法-----把数据写入到数据库中-------然后node返回值给前端-----提示注册情况.
代码的实现
路由
router.get('/register', function(req, res) {
res.render('register.html')
})
router.post('/register', function(req, res) {
// 获取表单数据-
let userMassage = {
username: req.body.username,
password: req.body.password
}
//获取到数据库的数据在这里验证
sql.userLogin(function(arrUser) {
var thisUser = arrUser.find(item => {
if (item.user !== userMassage.username) {
return item
}
})
if (thisUser) {
sql.userRegister(userMassage.username, userMassage.password)
res.status(200).json({
code: 0,
massage: '用户注册成功'
})
} else {
res.status(200).json({
code: 1,
massage: '用户名已存在'
})
}
})
})
数据库sql.js
exports.userRegister = function(userName, passWord) {
//插入语句
let sqlin = `INSERT INTO user (userName, passWord, id) VALUES (${
userName}, ${
passWord}, ${
num});`;
conn.query(sqlin, function(err) {
if (err) {
console.log(err);
return;
}
console.log('用户注册成功');
})
// 存在返回0,用户不存在返回1
}
前端页面
$('#register-form').on('submit', function(e) {
e.preventDefault()
var formData = {
username: $('#phone').val(),
password: $('#password').val()
}
$.ajax({
url: '/register',
type: 'post',
data: formData,
dataType: 'json',
success: function(data) {
console.log(data);
var code = data.code;
if (code === 0) {
window.alert('恭喜您,注册成功')
window.location.href = 'login.html';
} else if (code === 1) {
window.alert('该用户名已被注册')
}
}
})
})
路由已经是挂在上去的了.
遇到的问题
Error 1: Cannot set headers after they are sent to the client
在写的时候遇到的,上网查了资料然后解决了,
问题所在: 客户端请求一次,而服务器响应两次以上
解决: 清除其他响应,或者响应完就return
Error 2 在sql.js里,for循环里执行sql语句
问题所在: 在for循环里执行sql语句,for循环只执行了一次,只有一次结果.
在写的时候觉得,在sql.js那里进行验证的,用for循环遍历数据库里面的用户列表,然后进行验证, 验证后执行sql语句插入.然后就完事了
所以出现了问题,到最后找了许多答案,
然后我就在服务器端做判断,再直接调用sql方法.最后也是成功解决掉了.
注意点
1.用ajax提交form表单要阻止表单的默认事件.
2.用form表单用post提交的数据在node中必须使用body-praser中间件解析
3.用get方法直接可以用req.query,就可以获取到提交的数据了
表单中有些正则功能我就不说了,都是前端的东西.
这个小案例搞定的时候真的很开心.了解了很多关于交互的操作,后面再继续努力了.然后就开始学习vue了.
要完整的demo的话,可以资源里下载. 理解理解哈.