node.js--登陆和注册数据验证

前言

开始前准备工作：

• 1、安装mysql；form表单写一个代码登陆和注册页面；
• 2、创建一个自己的数据库（myfirst）和表（user）；
• 3、封装sql语句操作模块；
• 4、安装express模块；

知识储备

• 1、node模块化
• 2、数据库连接池与封装
• 3、回调函数的原理
• 4、expres模块

需求和原理

登陆

我们要实现用户在输入框中输入用户名和密码，然后我们把用户输入的内容和我们数据库的信息进行匹配如果存在有即为登陆成功否则的登陆失败。（注意：这里我们并没有对input框中的内容进行正则判断）

注册

用户输入账号和密码，我们把用户输入的账号和密码提交保存至我们的数据库，保存成功即为注册成功，否则即为失败。（注意：这里我们并没有对input框中的内容进行正则判断）

原理

• 1、要想获取数据库的操作我们需要在node中下载数据模块，然后对数据库sql语句的操作进行封装，这样方便我们后续使用。
• 2、我们也需要创建一个服务。表单提交的数据通过服务的请求和反馈然后和我们数据库信息比对。
• 3、创建服务我们这里使用Express模块来完成（不再使用node.js内置的http模块）

数据库白名单

注意：当我们注册成功后，表内会增加一条数据

封装sql语句操作

const mysql = require("mysql");
// 连接池
const pool = mysql.createPool({
  host:"localhost",
  user:"root",//我本地数据库的账户名
  password:"123456",//我本地的数据库登陆密码
  database:"myfirst",//我自己创建的数据库名字
  // 可选
  queueLimit:3,
  connectionLimit:20
})
//添加一个query方法
let query = function(sql,callBack){
  pool.getConnection((err,conn)=>{
    if (err) {
      console.log(err);
      return
    }
    conn.query(sql,(err,data)=>{
      if (err) {
        console.log(err);
        return
      }
      if (callBack) {
        callBack(data);
      }
    })
  })
}
/**
 * 插入数据
 * @param {*} table 表名
 * @param {*} datas 数据对象
 * @param {*} callBack 插入成功后的回调函数
 */
let insert = (table,datas,callBack)=>{
  //拼接SQL
  let fields = '';//字段
  let values = '';//值
  for (const k in datas) {
    fields += k+"," //拼接字段
    values += `'${datas[k]}',`
  }
  //清除最后一位的逗号。
  fields = fields.slice(0,-1);
  values = values.slice(0,-1);
  // console.log(fields);
  // console.log(values);
  let sql = `INSERT INTO ${table} (${fields}) VALUES (${values})`;
  query(sql,callBack)
};

//封装一个删除sql方法 
let del = (table,datas,callBack)=>{
  let arr = ['1=1']; //避免datas为空时，出现异常错误。
  for (const k in datas) {
    arr.push(`${k} = '${datas[k]}'`);
  }
  let sql = `delete from ${table} where ${arr.join(" and ")}`;
  query(sql,callBack)
}
/**
 * 修改方法  
 * @param {string} table 表名
 * @param {object} sets 修改的字段与值
 * @param {object} wheres 判断条件
 * @param {Function} callBack 回调函数
 */
let update = (table,sets,wheres,callBack)=>{
  //准备一个数组，用来拼接 where子句
  let whereArr = ['1=1']; //避免datas为空时，出现异常错误。
  for (const k in wheres) {
    whereArr.push(`${k} = '${wheres[k]}'`);
  }
  //准备一个数组，用来拼接 set 子句
  let setArr = [];
  for (const k in sets) {
    setArr.push(`${k} = '${sets[k]}'`)
  }
  let sql = `UPDATE ${table} SET ${setArr.join(",")}  WHERE ${whereArr.join(" and ")}`
  query(sql,callBack)
}
// 导出
module.exports = {
  query,
  insert,
  del,
  update
};

复制代码

注意：初始化与如何下载mysql和如何操作mysql这里不过多赘述

创建服务

app.js 文件

const express = require('express')
// 创建服务
const app = express()
const port = 3001
//引入路由模块
app.use(require("./login"));
//这个是服务器端口号
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
复制代码

数据获取和处理

login.js文件

const express = require('express')
// 引入封装的sql语句操作模块
const db = require('./db')
// 调用express.Rotuer()方法创建路由对象
const login = express.Router();
//固定写法：解析post参数的。 写在路由的前面
login.use(express.urlencoded({ extended: false }));
// 在路由对象上挂载具体的路由。


// 登陆
login.post('/login', (req, res) => {
  let { username, pwd } = req.body;
  // 调用封装的查询语句比对数据是否相同，如果数据相同回调的data就会返回一个非空数组
  db.query(`select * from user where name = '${username}' and pwd = '${pwd}' `, (data) => {
    if (data.length > 0) {
      res.send('登录成功')
    } else {
      res.send('登录失败')
    }
  })
})
// 注册
login.post('/register', (req, res) => {
  // 解构赋值
  let { username:name, pwd:pwd } = req.body;
  db.insert('user', { name,pwd }, (data) => {
    if (data.affectedRows > 0) {
      res.send("注册成功！")
    } else {
      res.send("注册失败！")
    }
  })
})
// 使用module.exprots导出路由对象
module.exports = login;
复制代码

html部分

  <!-- 登陆---样式自己定！！ -->
  <form action="http://127.0.0.1:3001/login" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="登录" id="btn">
  </form>
  <!-- 注册---样式自己定！！ -->
  <form action="http://127.0.0.1:3001/register" method="post">
    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="pwd"><br>
    <input type="submit" value="注册" id="btn">
  </form>
复制代码

效果