Express+JQuery實作簡易選項卡

結果演示
test.html
test.js
employees.json

利用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
        }

    ]
}

（゜ー゜）菜鳥一枚，，如有問題，歡迎指出，，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357136.html

標籤：其他

上一篇：[vue] Vuex模塊化和命名空間namespaced

下一篇：多維陣列降維的幾種方法