前后端相连，注册与登录 （html,css,js,node.js,mysql)

提示：所用html,css,js,node.js,mysql，代码仅供参考

一、html部分

1.文件名：index.html

代码如下（示例）：

 <div id="div1"><span id="span1">注册</span> <span id="span2">登录</span></div>

    <div id="div2">

        <form action="http://127.0.0.1:3030/api/reguser" method="post">
            <table>
                <tr>
                    <td>名字:</td>
                    <td><input type="text" name="username"></td>
                </tr>

                <tr>
                    <td>密码:</td>
                    <td><input type="text" name="password"></td>
                </tr>
                <tr>
                    <td></td>
                    
                    <td><input type="submit" value="注册" class="ipt"></td>
                </tr>
            </table>
        </form>
        <div id="div3">X</div>
    </div>
    <div id="div4">
        <form action="http://127.0.0.1:3030/api/login" method="get">
            <table>
                <tr>
                    <td>名字:</td>
                    <td><input type="text" name="username"></td>
                </tr>

                <tr>
                    <td>密码:</td>
                    <td><input type="text" name="password"></td>
                </tr>
                <tr>
                    <td></td>
                    
                    <td><input type="submit" value="登录" class="ipt"></td>
                </tr>
            </table>
        </form>
        <div id="div5">X</div>
    </div>

  

二、css部分

1.写在文件index.html中

代码如下（示例）：

 * {
            padding: 0px;
            margin: 0px;
        }

        #div1 {
            width: 400px;
            height: 200px;
            border-radius: 10%;
            background-color: deepskyblue;
            margin: 200px auto;
            font-size: 40px;
            font-weight: 600;
            line-height: 200px;
            text-align: center;
            cursor: pointer;
        }

        #div2,
        #div4 {
            display: none;
            position: absolute;
            top: 140px;
            left: 500px;
            width: 500px;
            height: 360px;
            background-color: khaki;
            border-radius: 5%;
        }

        form {
            padding: 70px;
        }

        form td {

            width: 80px;
            height: 60px;

        }


        td input {
            width: 250px;
            height: 26px;
        }
        
        td .ipt {
            margin-top: 20px;
            margin-left: 20px;
            width: 150px;
            height: 40px;
            background-color: deepskyblue;
            border-radius: 10%;
            font-weight: 800;
        }

        #div3,
        #div5 {
            width: 50px;
            height: 50px;
            position: absolute;
            top: -25px;
            right: -25px;
            line-height: 50px;
            font-size: 40px;
            font-weight: 500;
            text-align: center;
            background-color: palegreen;
            border-radius: 50%;
            cursor: pointer;
        }        

三、js部分

1.写在文件index.html中

代码如下（示例）：

        const div1 = document.querySelector('#div1')
        const span1 = document.querySelector('#span1');
        const span2 = document.querySelector('#span2');
        const div2 = document.querySelector('#div2');
        const div3 = document.querySelector('#div3');
        const div4 = document.querySelector('#div4');
        const div5 = document.querySelector('#div5');
        const input = document.querySelectorAll('input');
    

        for (var i = 0; i <= input.length - 1; i++) {
            input[i].onclick = function (e) {
                e.stopPropagation();
            }
        }

        span1.addEventListener('click', function () {
            div1.style.display = 'none';
            document.body.style.backgroundColor = 'pink'
            div2.style.display = 'block';
            div3.addEventListener('click', function () {
                div1.style.display = 'block';
                div2.style.display = '';
                document.body.style.backgroundColor = '';
                div2.style.top = 140 + 'px';
                div2.style.left = 500 + 'px';
            })
        })
        span2.addEventListener('click', function () {
            div1.style.display = 'none';
            document.body.style.backgroundColor = 'pink'
            div4.style.display = 'block';
            div5.addEventListener('click', function () {
                div1.style.display = 'block';
                div4.style.display = '';
                document.body.style.backgroundColor = '';
                div4.style.top = 140 + 'px';
                div4.style.left = 500 + 'px';
            })
        })

        

四、mysql部分

1.写再了db文件夹下文件index.js中

代码如下（示例）：

const mysql = require('mysql')
const db = mysql.createConnection({
    host: '127.0.0.1',
    user: 'root',
    password: 'admin123',
    database: 'my_bd_01'
})

module.exports = db;

五、node.js部分

1.文件名app.js

代码如下（示例）：

const express = require('express');
const app = express();

//接收body数据
app.use(express.urlencoded({ extended: false }));


//实现跨越资源共享
const cors = require('cors');
app.use(cors());

//解析Token
const expressJWT = require('express-jwt');
const jwtSecretKey= 'wenlifen No1 <>';
app.use(expressJWT({ secret: jwtSecretKey, algorithms: ['HS256'] }).unless({ path: [/^\/api\//] }))

//导入路由器
const user = require('./router/user');
app.use('/api', user)



app.listen(3030, () => {
    console.log('success! http://127.0.0.1:3030');
})

2.在文件夹router下 文件user.js中

代码如下（示例）：

const express = require('express');
const res = require('express/lib/response');
const { redirect } = require('express/lib/response');
const router = express.Router();

//导入函数模块
const router_handler = require('../router_handler/user')
//注册
router.post('/reguser', router_handler.reguser)

//登录
router.get('/login', router_handler.login)

module.exports = router

3.在文件夹router_handler下 文件user.js中

代码如下（示例）：

//连接数据库
const db = require('../db/index')

//导入bcryptjs包进行加密
const bcrypt = require('bcryptjs')

//导入jsonwebtoken
const jwt = require('jsonwebtoken')


//注册
exports.reguser = (req, res) => {
    res.setHeader('Access-control-Allow-Origin', '*');
    res.setHeader('Access-control-Allow-Headers', '*');



    //查询用户名是否被占用
    const sql = 'select * from ev_users where username=?';
    db.query(sql, [req.body.username], (err, results) => {
        if (err) return res.send(err)
        if (!req.body.username || !req.body.password) return res.send('username与password不能为空')
        if (results.length > 0) return res.send('用户名已被占用,注册失败')

        //给密码加密
        req.body.password = bcrypt.hashSync(req.body.password)

        //注册
        const sql = 'insert into ev_users set ?'
        db.query(sql, [{ username: req.body.username, password: req.body.password }], (err, results) => {
            if (err) return res.send(err)
            if (results.affectedRows !== 1) return res.send('注册失败,请重新注册')

            res.send('注册成功')
        })

    })

}

//登录
exports.login = (req, res) => {
    res.setHeader('Access-control-Allow-Origin', '*');
    res.setHeader('Access-control-Allow-Headers', '*');

    console.log(req.query)

    const sql = 'select * from ev_users where username=?'

    
    db.query(sql, req.query.username, (err, results) => {
        if (err) return res.send(err)
        const user = { ...results[0], password: '', user_pic: '' }
        console.log(user)
        if (results.length !== 1) return res.send('没有该用户名,请先注册！')
       
        const compareResult = bcrypt.compareSync(req.query.password, results[0].password)

        if (!compareResult) return res.send('密码错误,登录失败')
        const jwtSecretKey= 'wenlifen No1 <>';
        const tokenStr = jwt.sign(user, jwtSecretKey, { expiresIn: '10h' })

        res.send({
            status: 0,
            message: '登录成功',
            token: 'Bearer ' + tokenStr
        })
    })


}

效果如下：

成功了会出现如下样子：

注册成功后，数据库中会保存符合要求注册数据

成功了会出现如下样子：

---