JavaScript + node 实现三级联动菜单

三级联动菜单

1. 项目分析

   1. 效果

      

   2. 前端

      =>面向对象

      =>首先分析下拉结构，构造相应的结构和样式

      =>绑定事件，点击，鼠标滑过等

      =>导入写好的 js 文件 构造菜单项、

      =>使用ajax请求服务端 获取数据

      =>用每次获取的数据动态生成页面结构

   3. 服务端

      =>接口文档（定义接口，服务地址，端口}

      =>存储数据

      =>创建服务器

      =>接收前端的ajax请求，响应数据

2. 代码

   • 面向对象代码

     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);}//创建元素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 = "请选择";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;}//添加点击事件clickHander(e) {this.ul.classList.toggle('on');}//增加liaddli(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添加的点击事件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结构中的位置appendTo(parent) {if(typeof parent == 'string') parent=document.querySelector(parent);parent.appendChild(this.elem);this.addCSS();}}
     

   • 向服务器请求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 = "请选择";li.forEach(item=>{item.remove();})}//获取区县数据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.countysel_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 = "请选择";lis.forEach(item=>{item.remove();})}//封装一个简单的function ajax(url, fn) {// XMLHttpRequest对象用于在后台与服务器交换数据var xhr = new XMLHttpRequest();xhr.open('GET', url, true)xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status ==200) {//从服务器获得数据fn.call(this, JSON.parse(xhr.responseText));}};//发送数据xhr.send();}</script>

   • 服务端

     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":"*",//请求头跨域 如果请求头发生修改并且非同源，就需要申请请求头跨域});req.on('data',function(_data) {data=_data})req.on('end',function () {// type是接口名称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请求的是图标直接返回空跳出// 如果是get请求，就从url中重新获取数据存入data变量data=req.url.includes("?") ? req.url.split("?")[1] : "";}// 首先判断是否可以通过JSON解析，如果通过JSON直接转换，如果不能就是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();})
     })
     //监听4001端口
     server.listen(4001,"你的地址",function() {console.log("服务器开启成功^_^");
     })
     

   有需要源码的可以留言私信给我，可以供大家一起学习参考，我会逐渐完善代码。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！