express实现本地注册登录

1,402 阅读2分钟

express介绍

express介绍 - 掘金 (juejin.cn)已经在这篇文章中介绍过,这里不再介绍。

1.安装express

首先,打开终端窗口,输入yarn init,然后name选项中输入任意名字【注意:不能为中文】

1.png

然后输入yarn add express进行安装

image.png

最后再输入 yarn add mysql 安装数据库

2.png

这样前期部署工作已经完成。

2.创建一个网页,用于注册和登陆

代码如下

<form action="http://127.0.0.1:8000/register" method="post">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="pwd"><br>
    确认密码:<input type="password" name="conpwd"><br>
    <input type="submit" value="注册" id="btn">
    <input type="reset" value="清空">
  </form>
  <form action="http://127.0.0.1:8000/login" method="post">
    用户名:<input type="text" name="username"><br>
    密码:<input type="password" name="pwd"><br>
    <input type="submit" value="登录" id="btn">
  </form>
  <script>
    //获取密码元素节点
    let pwd = document.querySelector("input[name='pwd']");
    //获取确认密码元素节点
    let conpwd = document.querySelector("input[name='conpwd']");
    //获取注册按钮元素节点
    let btn = document.getElementById('btn');

    btn.onclick = function () {
      //判断密码与确认密码是否相等。
      if (pwd.value.trim() != conpwd.value.trim()) {
        alert("两次输入的密码不一致!")
        return false;
      }
    }
  </script>

3.封装一个数据库

代码如下

const mysql = require("mysql");

const pool = mysql.createPool({
  host:"localhost",
  user:"root",
  password:"123456",
  database:"newstudent", //本地数据库,名字要对应好
  // 可选
  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);
      }
    })
  });
}
//封装 插入一条数据。
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);
  let sql = `INSERT INTO ${table} (${fields}) VALUES (${values})`;
  query(sql,callBack)
};

//封装一个删除方法 
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
};

4.创建app.js

代码如下

const express = require('express');
const db = require("./db");
const app = express()
const port = 8000;

//解析post参数
app.use(express.urlencoded({extended:false}));

app.get('/', (req, res) => res.send('Hello World!'))


app.post("/login",(req,res)=>{
  //获取用户名和密码
  let {username,password} = req.body;
  //查询数据库
  let sql = `select * from user where username = '${username}' and pwd = '${pwd}'`;
  db.query(sql,data=>{
    if (data.length>0) {
      res.send("登录成功")
    } else {
      res.send("登录失败")
    }
  })
})


app.post('/register', (req, res) => {
  let { username, pwd } = req.body;
  res.writeHead(200, {
    'Content-Type': 'text/html;charset=utf-8'
  });
  db.insert('user', { username: username, pwd: pwd }, (data) => {
    if (data.affectedRows > 0) {
      res.end("注册成功!")
    } else {
      res.end("注册失败!")
    }
  })
})


app.listen(8000, () => console.log(`Example app listening on port 8000!`))

验证

首先打开命令终端,输入 node app.js

3.png

然后打开网页,点击注册

4.png

5.png

打开Navicat for MySQL 可以看到数据库中已经添加二狗用户名

6.png

然后进行登陆验证

7.png

至此大功告成!