js+nodejs+ajax登录注册表单验证

一.用到的一些东西

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的话,可以资源里下载. 理解理解哈.