node+html+Mysql实现登录注册

最新推荐文章于 2024-08-14 15:45:18 发布

请叫我uu

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量402

点赞数 4

文章标签： javascript 前端 node.js mysql

本文链接：https://blog.csdn.net/qq_52807600/article/details/132812969

版权

更多demo源码已上传github

goblinModeL/js-demo (github.com)https://github.com/goblinModeL/js-demo

node.js 代码：命名随意代码有注释 node连接数据库

const express = require('express');

const app = express();
const mysql = require('mysql');
const db = mysql.createConnection({
    user: 'root',          //用户名
    password: '123456',	//密码
    host: 'localhost',		//主机（默认都是local host）
    database: 'node_demo'       //数据库名
})
app.use(express.urlencoded({ extended: true }));
//跨域 推荐用cors 更方便 这种太臃肿
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
})

db.connect(err => { //检测

})
// 开启服务器
app.listen(3000, () => {
})
const Detection=/^(?=.*[a-zA-Z])(?=.*\\d).{1,9}$///正则表达式 检测密码 至少包含字母、数字，1-9位

    app.post('/add', (req, res) => {
        const { name, password } = req.body;
        //先查询是否存在
        let sqlname = `SELECT * FROM node WHERE name='${name}'`
        db.query(sqlname, (err, data) => {
            if (data.length!==0) {
          console.log(typeof data)
           res.send('用户名已存在')
            }
            else {
                if(Detection.exec(password)!==null) {
                    let sqlStr = `INSERT INTO node ( name, password )VALUES('${name}','${password}')`

                    db.query(sqlStr, (err) => {
                        console.log(err,)
                    })
                    //成功后的页面显示
                    res.send('插入成功')
                }
                else{
                    res.send('密码 至少包含字母、数字，1-9位')
                }
            }
        })
    })


    app.post('/login', (req, res) => {
        const name = req.body.username; // 获取用户名字段的值
        const password = req.body.password;
        console.log(name, password)

        let sqlname = `SELECT * FROM node WHERE name='${name}'`
        db.query(sqlname, (err, data) => {
            if (data.length === 0) {
                res.send('用户名不存在')

            } else {
                if (data[0].password === password) {
                    res.send('登录成功')

                } else {
                    res.send('密码错误')

                }
            }
        })
    })

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <div>

     <label for="username">用户名：</label>
     <input type="text" id="username" name="username">
     <label for="password">密码：</label>
     <input type="password" id="password" name="password">
     <input type="button" value="登录" onclick="getUser()">

 </div>

</body>
<script>

  const  getUser=()=>{
      const username=document.getElementById('username').value
      const password=document.getElementById('password').value
      fetch('http://localhost:3000/login', {
          method: 'POST',
          body: `username=${username}&password=${password}`,
          headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
          },
      })
          .then((res) => {
              // 检查响应是否成功
              if (!res.ok) {
                  throw new Error('网络请求失败');
              }

              // 解析响应数据为文本
              return res.text();
          })
          .then((data) => {
              // 打印响应的文本内容
              console.log(data);
          })
          .catch((err) => {
              console.error('发生错误:', err);
          });


  }

</script>

</html>

命令行可以看到登录状态，如果需要添加到页面改变样式在下面代码块进行判断修改