Express+JQuery实现简易选项卡

admin • • 前端

Express+JQuery实现简易选项卡

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

结果演示

在这里插入图片描述
目录结构
在这里插入图片描述

test.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">
    <script src="./js/jquery-3.6.0.js"></script>
    <title>选项卡</title>
    <style>
        .li{
            margin-left: 30px;
        }
        .li:hover{
            cursor: pointer;
        }
        .info{
            margin: 20px;
        }

        .on{
            border-bottom: 1px solid black;
        }
    </style>
</head>

<body>
    <!--选项栏-->
    <ul style="list-style: none; display: flex;">
        <li class="li">人力资源部</li>
        <li class="li">开发部</li>
        <li class="li">后勤保障部</li>
    </ul>
    <!--内容栏-->
    <div id="content">
    </div>

    <script>
    	//给li绑定点击事件
        $("li").click(function () { 
            
            var div = $("<div class='info'></div>");
            var index = $(this).index();//获取当前点击的li的下标
			//get方法请求载入http://localhost:8808/dev中的信息
            $.get('http://localhost:8808/dev',function(data){ 
                $(".info").remove();
                for(var j = 0; j < 2;j++){
                    var info = $("<div class='info-o'></div>");
                    $(info).append("<h3>姓名："+data["dept"+(index+1)][j].name+"</h3>");
                    $(info).append("<h4>年龄："+data["dept"+(index+1)][j].age+"</h4>");
                    $(info).append("<hr>")
                    $(div).append(info);
                }
                $("#content").append(div);
            });
         	//li样式切换
            $("li").eq($(this).index()).addClass("on").siblings().removeClass("on");
        });
    </script>
</body>
</html>

test.js

node一下这个文件

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

//跑test.html时，控制台报了这个net::ERR_CONNECTION_REFUSED错误，百度到说可能是跨域的问题，加上以下代码就好了。。。
//设置允许跨域请求
app.all('*', function(req, res, next) {
	//设置允许跨域的域名，*代表允许任意域名跨域
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); 
    res.header('Access-Control-Allow-Metheds', 'PUT, POST, GET, DELETE, OPTIONS'); 
    res.header('X-Powered-By', 'nodejs'); 
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

app.get('/dev', function(req, res) {
	//__dirname 表示当前执行脚本所在的目录
	//fs是node.js的文件系统模块，readFile()为该模块异步读取文件的方法
    fs.readFile(path.join(__dirname, '../data/employees.json'), 'utf-8', function(err, data) {
        if (err) {
            res.send('文件读取失败');
        } else {
            res.send(data);
        }
    });
});


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

employees.json

{
    "dept1":[
        {
            "name":"Bob",
            "age":25
        },
        {
            "name":"Anny",
            "age":23
        }
    ],
    "dept2":[
        {
            "name": "Wang",
            "age":20
        },
        {
            "name":"Zhao",
            "age":30
        }
       
    ],
    "dept3":[
        {
            "name": "Kity",
            "age":20
        },
        {
            "name": "Mary",
            "age":29
        }

    ]
}

（゜ー゜）菜鸟一枚，，如有问题，欢迎指出。。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>