node.js+mysql实现简单登录注册

js参考B站博主老张简单实现了登录和注册功能。

html参考博客登录页面代码。

首先是登录页面的设计

denglu.html如下

body 设计背景，可以通过改图片地址来实现背景改变

body {
      background: url('https://pic3.zhimg.com/v2-58d652598269710fa67ec8d1c88d8f03_r.jpg') no-repeat;
      background-size: 100% 130%;
    }

 login_box封装整体样式

#login_box {
      width: 20%;
      height: 400px;
      background-color: #ffffff60;
      margin: auto;
      margin-top: 10%;
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
    }

 对不同部分设计样式

h2 {
      color: #6a00ff;
      margin-top: 5%;
    }

    #input-box {
      margin-top: 5%;
    }

    span {
      color: rgb(255, 0, 0);
    }

    input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: rgb(0, 0, 0);
      background: transparent;
      border-bottom: 2px solid rgb(0, 187, 255);
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 50px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: rgb(255, 255, 255);
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #d8c6ff, #6a00ff);
    }

    #sign_up {
      margin-top: 45%;
      margin-left: 60%;
    }

    a {
      color: #1eff00;
    }

 body部分，注册链接改成自己的注册html地址就行

<div id="login_box">
    <h2>LOGIN</h2>
    <form method="post" action="http://localhost:8080">
    <div id="input_box">
      <input type="text" name="userName">
    </div>
    <div class="input_box">
      <input type="password" name="userPwd">
    </div>
      <input type="submit" value="登录">    
    </form>
    <a href="file:///C:/Users/w/Desktop/demo01/zhuce.html">前去注册</a>

zhuce.html注册页面因为大体和登录一样，就不做展示

然后就是server.js代码

首先导入这几个模块

const http = require("http");
const querystring = require("querystring");
const mysql = require("mysql");

其次采用post，分为req.on data和req.on end

querystring.parse是为了让得到的内容变成我想要的格式

let postVal = "";
        req.on("data", (chunk) => {
            postVal = postVal + chunk;
        })
        req.on("end", () => {
            let formVal = querystring.parse(postVal);
            let userName = formVal.userName;
            let userPwd = formVal.userPwd;

再就是连接数据库，这里要修改成自己本地数据库的信息

const connection = mysql.createConnection({
                host: "localhost",
                user: "root",
                password: "123456",
                database: "demo01",
            })
            connection.connect();

 这里我的MySQL可视化用的是Navicat，用的限时免费>.<

登录功能

通过比对输入和数据库信息，匹配则登录成功

 //登录功能
            connection.query("select * from user where userName=? and userPwd=?", [userName, userPwd], (err, results, fields) => {
                if (err) throw err;
                console.log(results)
                if (results.length > 0) {
                    res.write("登录成功")
                }
                res.end();
            })

 注册功能

只需把查询语句换成插入语句

第一个参数为0是因为我在设置数据库中id属性为自动递增

//注册功能
            connection.query("insert into user value (?,?,?)", [0, userName, userPwd], (err, results, fields) => {
                if (err) throw err;
                console.log(results)
                if (results.length > 0) {
                    res.write("注册成功")
                }
                res.end();

最后不要忘了监听

server.listen(8080);

效果展示

 这里id显示78是因为我之前试验了很多次，所以递增到这里了