怎么使用JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單

這篇文章主要介紹了怎么使用JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇怎么使用JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

項(xiàng)目分析

1、效果

2、前端

=>面向?qū)ο?/p>

=>首先分析下拉結(jié)構(gòu)，構(gòu)造相應(yīng)的結(jié)構(gòu)和樣式

=>綁定事件，點(diǎn)擊，鼠標(biāo)滑過(guò)等

=>導(dǎo)入寫(xiě)好的 js 文件 構(gòu)造菜單項(xiàng)、

=>使用ajax請(qǐng)求服務(wù)端 獲取數(shù)據(jù)

=>用每次獲取的數(shù)據(jù)動(dòng)態(tài)生成頁(yè)面結(jié)構(gòu)

3、服務(wù)端

=>接口文檔（定義接口，服務(wù)地址，端口}

=>存儲(chǔ)數(shù)據(jù)

=>創(chuàng)建服務(wù)器

=>接收前端的ajax請(qǐng)求，響應(yīng)數(shù)據(jù)

代碼

1、面向?qū)ο蟠a

export default class Select{
    //添加css樣式
    static  addCSS(selector,style,title){
        if(title===undefined) title="xietian";
        var arr=Array.from(document.styleSheets);
        var  styleSheet=arr.reduce(function(value,item){
            if(item.title===title)return item;
            return value;
        },null);
        if(!styleSheet){
            var s=document.createElement("style");
            s.title=title;
            document.head.appendChild(s);
            styleSheet=document.styleSheets[document.styleSheets.length-1];
        }
        var str="";
        for(var prop in style){
            str+=prop.replace(/[A-Z]/g,function(value){
                return "-"+value.toLowerCase();
            })+":"+(typeof style[prop]==="number" ? style[prop]+"px" : style[prop])+";";
        }
        if(styleSheet.addRule){
            styleSheet.addRule(selector,str,styleSheet.cssRules.length);
        }else{
            styleSheet.insertRule(selector+"{ "+str+" }",styleSheet.cssRules.length);
        }
    }

//定義全局變量
    button;
    ul;
    class;
    constructor(parent,_class) {
        // this.id = _id;
        this.class = _class;
        this.elem = this.createEle();
        this.appendTo(parent);
    }
    //創(chuàng)建元素
    createEle() {
        const div = document.createElement('div');
        div.className = "dropdown " + this.class;
        this.button = document.createElement('button');
        this.button.className = "btn btn-default dropdown-toggle";
        this.button.addEventListener('click',e=>this.clickHander(e))
        this.content = document.createElement('span');
        this.content.innerText = "請(qǐng)選擇";
        const carte = document.createElement('span');
        this.content.className = 'content';
        carte.className = 'carte';
        this.button.appendChild(this.content);
        this.button.appendChild(carte);
        this.ul = document.createElement('ul');
        this.ul.className = "dropdown-menu";
        this.button.appendChild(this.ul);
        div.appendChild(this.button)
        return div;
    }
    //添加點(diǎn)擊事件
    clickHander(e) {
        this.ul.classList.toggle('on');
    }
   //增加li
    addli(list) {
        if(!list) return;
        const frg = document.createDocumentFragment();
        list.forEach(item=>{
            const li = document.createElement('li');
            li.innerHTML = item;
            li.addEventListener('click',e=>this.liHandler(e));

            frg.appendChild(li);
        })
        this.ul.appendChild(frg);
    }
    //給li添加的點(diǎn)擊事件
    liHandler(e) {
        this.content.innerHTML = e.target.innerText;

    }
    //添加css樣式
    addCSS() {
        Select.addCSS(".dropdown",{
            position: "relative",
            boxSizing: "border-box",
            width: "8.33333333%",
            display:"inline-block",
            minHeight: "1px",
            paddingRight: "15px",
            paddingLeft: "15px",
            fontSize: "14px",
            lineHeight: "1.42857143",
            color: "#333333",
        })
        Select.addCSS(".btn",{
            display:'inlineBlock',
            marginBottom:'0',
            outline:"none",
            fontWeight:'normal',
            textAlign:'center',
            whiteSpace:'nowrap',
            verticalAlign:'middle',
            touchAction:'manipulation',
            cursor:'pointer',
            backgroundImage:'none',
            border:'1px solid transparent',
            padding:'6px 12px',
            fontSize:'14px',
            lineHeight:'1.42857143',
            borderRadius:'4px',
            userSelect:'none',
        })
        Select.addCSS(".btn-default",{
           color:'#333',
            backgroundColor:'#fff',
            borderColor:'#ccc',
        })
        Select.addCSS(".btn-default:hover",{
            color:'#333',
            backgroundColor:'#e6e6e6',
            borderColor:'#adadad',
        })
        Select.addCSS(".carte",{
            display:'inline-block',
            width:'0',
            marginLeft: "0",
            height:'0',
            verticalAlign:'middle',
            borderTop:'4px dashed',
            borderRight:'4px solid transparent',
            borderLeft:'4px solid transparent',
        })
        Select.addCSS(".dropdown-menu",{
            position:'absolute',
            top:'100%',
            left:'15px',
            height:'200px',
            overflowY:'scroll',
            zIndex:'1000',
            display:'none',
            float:'left',
            minWidth:'83px',
            padding:'5px 0',
            margin:'2px 0 0',
            fontSize:'14px',
            textAlign:'left',
            listStyle:'none',
            backgroundColor:'#fff',
            backgroundClip:'paddingBox',
            border:'1px solid #ccc',
            border:'1px solid rgba(0, 0, 0, 0.15)',
            borderRadius:'4px',
            boxShadow:'0 6px 12px rgba(0, 0, 0, 0.175)',
        
        })
        Select.addCSS(".on", {
            display:"block!important",
        })
        Select.addCSS('li',{
            textAlign:"center",
        })
        Select.addCSS('li:hover',{
            backgroundColor:'#e6e6e6',
        })
    }
    //添加到html結(jié)構(gòu)中的位置
    appendTo(parent) {
        if(typeof parent == 'string') parent=document.querySelector(parent);
        parent.appendChild(this.elem);
        this.addCSS();
    }

}

2、向服務(wù)器請(qǐng)求ajax

<script type="module">
        import Select from "./select.js";
        // var list = ["北京","上海","廣州","深圳","武漢"];

        let citylist,provincelist,countylist,province_content,content_county;

        var sel_p = new Select('.box','province');

        ajax("city.json",(res)=>{
             provincelist = Object.keys(res);
            sel_p.addli(provincelist);
            sel_p.elem.addEventListener('click',clickHandler)
         province_content = document.querySelector('.province .content');
            county() 
        })

        var sel_c = new Select('.box','city');

        function clickHandler(e) {
            if(e.target.constructor!== HTMLLIElement) return;
            ajax(`http://10.9.72.252:4001/province/?province=${e.target.innerText.trim()}`,function(res){
                 citylist = Object.keys(res.city)
                sel_c.addli(citylist);
                const province = document.querySelector('.province ul');
                province.addEventListener('click',cityHandler);
            })
        }
        

        function cityHandler(e) {
            const content_city = document.querySelector('.city .content');
            const li = document.querySelectorAll('.city li');
            const content_county  = document.querySelector('.county .content');
            content_county.innerText=content_city.innerText = "請(qǐng)選擇";
            li.forEach(item=>{
                item.remove();
            })
        }
            //獲取區(qū)縣數(shù)據(jù)
       function county() {
           var sel_conuty = new Select('.box','county');
           sel_c.elem.addEventListener('click',e=>{
            if(e.target.constructor!== HTMLLIElement) return;
            ajax(`http://10.9.72.252:4001/city/?province=${province_content.innerText.trim()}&city=${e.target.innerText.trim()}`,function(res){
                // console.log(res); 
                countylist =res.county
                sel_conuty.addli(countylist);
                const city = document.querySelector('.city ul');
                city.addEventListener('click',countyHandler);
            })
           })
       }    
        
       function countyHandler(e) {
        const lis = document.querySelectorAll('.county li');
        const content_coun = document.querySelector('.county .content');
        content_coun.innerText = "請(qǐng)選擇";
        lis.forEach(item=>{
                item.remove();
            })

       }
       //封裝一個(gè)簡(jiǎn)單的
        function ajax(url, fn) {
                // XMLHttpRequest對(duì)象用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true)
                xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4 && xhr.status ==200) {
                        //從服務(wù)器獲得數(shù)據(jù)
                        fn.call(this, JSON.parse(xhr.responseText));
                    }
                };
                //發(fā)送數(shù)據(jù)
                xhr.send();
            }
</script>

3、服務(wù)端

const http = require('http');
const querystring= require('querystring');
const city = require("../city.json");
const server = http.createServer(function(req, res) {
    res.writeHead(200,{
        "content-type":"text/html;charset=utf-8",
        "Access-Control-Allow-Origin":"*",
        "Access-Control-Allow-Headers":"*",
        //請(qǐng)求頭跨域 如果請(qǐng)求頭發(fā)生修改并且非同源，就需要申請(qǐng)請(qǐng)求頭跨域
    });
    req.on('data',function(_data) {
        data=_data
    })
    req.on('end',function () {
        // type是接口名稱(chēng)
        console.log(req.url);
        var type=req.url.trim().split("?")[0].replace(/\//g,"");
        console.log(type);
        if(req.method.toLowerCase()==="get"){
            if(req.url.includes("favicon.ico")) return res.end();//如果get請(qǐng)求的是圖標(biāo)直接返回空跳出
            // 如果是get請(qǐng)求，就從url中重新獲取數(shù)據(jù)存入data變量
            data=req.url.includes("?") ? req.url.split("?")[1] : "";
        }
        // 首先判斷是否可以通過(guò)JSON解析，如果通過(guò)JSON直接轉(zhuǎn)換，如果不能就是querystring解析
        try{
            data=JSON.parse(data);
        }catch(e){
            data=data ? querystring.parse(data) : {};
            console.log(data);

        }
        let o = {}
        switch(type){
            case 'province':
                o = {};
                o.city = obj[data.province];
                break;
            case 'city':
                o.city = obj[data.province];
                o.county = o.city[data.city];
                break;
        }
        res.write(JSON.stringify(o));
        res.end();
    })
})
//監(jiān)聽(tīng)4001端口
server.listen(4001,"你的地址",function() {
    console.log("服務(wù)器開(kāi)啟成功^_^");
})

關(guān)于“怎么使用JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“怎么使用JavaScript+node實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)菜單”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。