Node.js 实现登录校验 + 选项卡（改进版）

最新推荐文章于 2024-05-27 21:23:50 发布

lumpsi

最新推荐文章于 2024-05-27 21:23:50 发布

阅读量1.3k

点赞数 1

分类专栏： web前端开发文章标签： node.js mysql jquery

本文链接：https://blog.csdn.net/lumpsi/article/details/121446981

版权

web前端开发专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Node.js 实现登录校验 + 简易选项卡（改进版）

要求

第一题：
利用Node.js的express框架及JQuery来完成如下要求：
1.设计一个登录页面，要求登录页面需要输入用户名、密码及有登录按钮。
2.点击登录按钮的时候，利用JQuery的AJAX对表单的内容进行post提交。
3.利用node.js及express搭建一个web服务，并响应第2点的post请求，当用户名为admin，密码为123的时候，返回json数据提醒成功，否则则失败。
4.html页面拿到json数据后，如果成功则把登录框去掉，换成“欢迎：admin”，并有一个退出按钮，退出则恢复登录框；如果登录失败则提醒用户名或密码错误即可。

第二题：
利用Node.js的express框架及JQuery来完成如下要求：
1.设计一个html页面，页面中有三个选项卡按钮，分别为：“人力资源部”，“开发部”，“后勤保障部”。
2.点击不同的按钮，用JQuery的get方法请求一个路由，如：http://localhost/dev
3.利用node.js及express搭建一个web服务，并响应第2点的get请求，返回部门的人员json数据，要求数据都在MySQL数据库中，利用node的MySQL组件查询出来。
4.html页面拿到json数据后，在对应按钮下方构建数据。

运行结果

目录结构见↓
在这里插入图片描述
该项目需要安装express及mysql模块，命令为npm install express/mysql
jquery download

app.js

node一下这个文件

const express = require('express');
const app = express();
//引入路由
const router1 = require('./router/test1'); 
const router2 = require('./router/test2');

app.use(express.static('./public'));//将public设置为静态文件路径
app.use(router1);//使用路由router1
app.use(router2);//使用路由router2

app.use('/',function(req,res){
    res.sendFile(__dirname + "/" + "public/index.html");
});

var server = app.listen(8808,function(){
    var port = server.address().port;
    console.log("http://localhost:%s",port);
});

index.html

一个没啥大用的文件，可有可无。。只是为了方便去到不同的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎</title>
</head>
<body>
    <label>第一题：</label>
    <a href="http://localhost:8808/test1.html">登录</a>
    <br>
    <label>第二题：</label>
    <a href="http://localhost:8808/test2.html">选项卡</a>
</body>
</html>

第一题

test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="./js/jquery-3.6.0.js"></script>
</head>
<body>
    <div id="login-div">
        <div class="info">
            <label>账户：</label>
            <input type="text" name="username" id="user">
        </div>
        <div class="info">
            <label>密码：</label>
            <input type="password" name="passwd" id="passwd">
        </div>
        <div class="info">
            <button id="loginBtn">登录</button>
        </div>
        <div class="msg">

        </div>
    </div>
    <script>
        //登录
        $("#loginBtn").click(function () { 
            $.ajax({
                type:"post",
                url:"/login",
                data:{
                    username:$("#user").val(),
                    password:$("#passwd").val()
                },
                dataType:'JSON',
                complete:function(result){
                    if(result.responseJSON=='success'){
                        $('.info').remove();
                        $('.msg').empty();
                        $('.msg').append('<p>欢迎：admin</p>')
                        $('.msg').append('<button id="exit">退出</button>')
                    }else{
                        $('.msg').empty();
                        $('.msg').append('<p style="color:red">账户或密码错误！</p>')
                    }
                }
            });
        });

        //退出
        $(document).on('click','#exit',function(){
            window.location.reload();//其实这里刷新一下就回到原始登录页了，，写的不是很好，偷个懒，就不改了hhh
        });
    </script>
</body>
</html>

在实际项目开发时，通常有几十上百个路由，如果都写在一个js文件中，就显得十分臃肿。。express专门提供了路由功能用来封装请求。
每个路由文件通过生成一个 express.Router 实例 router 并导出，通过 app.use 挂载到不同的路径。
在实际开发中推荐使用 express.Router 将不同的路由分离到不同的路由文件中。
*以上文本摘自Node.js使用Express.Router的方法 ——脚本之家

router/test1.js

const express = require('express');
const router = express.Router();//创建一个路由容器
//post方式提交的参数为urlencoded类型，因此这里我们需要将其解析
router.use(express.urlencoded({extended:true}));

router.post('/login',function(req,res){
    //当账户名等于admin 且 密码等于123 时
    if(req.body.username=='admin'&& req.body.password=='123'){
        res.json('success');
    }
    else{
        res.json('error')
    }
});

module.exports = router;//导出该容器

第二题

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <link rel="stylesheet" href="./css/test2.css">
    <script src="./js/jquery-3.6.0.js"></script>
</head>

<body>
    <ul id="nav" style="list-style: none; display: flex;">
    </ul>
    <div id="content"></div>

    <script>
    	//导航栏内容生成
        $.get('/search-dept',function(data){
            for(var i = 0;i < data.length; i++){
                $('#nav').append('<li class="li">'+data[i].dept_name+'</li>');
            }
        });

        //li 点击事件
        $(document).on('click','li',function(){
            var div = $("<div class='info'></div>");
            var index = $(this).index();//获取当前被点击的li的下标
            $('li').eq(index).addClass('on').siblings().removeClass('on');//li样式切换
            //获取并显示不同导航选项对应的职工信息
            $.get('/search-emp',{id:index+1},function(data){
                $(".info").remove();
                for(var i = 0;i < data.length; i++){
                    var info = $("<div class='info-o'></div>");
                    $(info).append('<h3>姓名：'+data[i].pname+'</h3>');
                    $(info).append('<h4>性别：'+data[i].sex+'</h3>');
                    $(info).append('<h4>年龄：'+data[i].age+'</h3>');
                    $(info).append("<hr>");
                    $(div).append(info);
                }
                $("#content").append(div);
            });
        });
    </script>
</body>
</html>

router/test2.js

const express = require('express');
const router = express.Router();
const mysql = require('mysql'); 

//连接数据库方法
function connDB(){
    conn = mysql.createConnection({
        host:'localhost',
        user:'root',
        password:'4580796', //your password
        database:'test', // your database name
        port:'3306',
    });
    conn.connect(()=>{
        console.log('Database connection is successful!');
    })
}

//关闭数据库方法
function closeDB(){
    conn.end(()=>{
        console.log('Successfully closed the database connection!');
    });
}

router.get('/search-dept',function(req,res){
    connDB();
    //查询所有部门名
    conn.query('select dept_name from department',function(err,data){
        if(err){
            console.log(err);
        }else{
            console.log(data);
            res.json(data);
        }
    });
    closeDB();
});

router.get('/search-emp',function(req,res){
    connDB();
    //根据部门id查询对应部门的职员
    conn.query('select pname,sex,age from test.employees where dept_id =' + req.query.id, function(err,data){
        if(err){
            console.log(err);
        }else{
            console.log(data);
            res.json(data);
        }
    });
    closeDB();
});

module.exports = router;

test2.css

.li{
    margin-left: 50px;
}

.li:hover{
    cursor: pointer;
}

.on{
    border-bottom: 1px solid black;
}

.info{
    margin: 20px;
}

数据表

employees
在这里插入图片描述
department

菜鸟一枚，如有问题，，欢迎指出<@_@>

lumpsi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Node.js 实现登录校验 + 选项卡（改进版）

Node.js 实现登录校验 + 简易选项卡（改进版）运行结果app.jsindex.html第一题test1.htmlrouter/test1.js第二题test2.htmlrouter/test2.jstest2.css要求第一题：利用Node.js的express框架及JQuery来完成如下要求：1.设计一个登录页面，要求登录页面需要输入用户名、密码及有登录按钮。2.点击登录按钮的时候，利用JQuery的AJAX对表单的内容进行post提交。3.利用node.js及express搭建一个
复制链接

扫一扫