本文介绍了一个使用Express、Axios和MySQL数据库的三级联动地区选择组件的实现。通过导入自定义的LiItem和Address组件，实现了导航栏的动态加载，并通过axios从后台获取地址数据。组件中包含了事件监听、样式设置和数据交互，提供了省份、城市和地区的下拉选择功能。同时，展示了如何通过POST请求获取和展示地址数据。
三级级联地区切换
说明：组件化开发，结合使用express框架搭建后台，axios传递数据，使用mysql数据库。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>唯品会</title>
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<!-- nav -->
<nav class="wrap">
<div class="con">
<div class="left">
</div>
<div class="right">
<ul id="liTest"></ul>
</div>
</div>
</nav>
<script type="module">
origin="localhost:3000";
//nav liItem项
import LiItem from "./js/LiItem.js";
let arr=["请登录","注册","签到有礼","我的订单","我的特卖","会员俱乐部","客户服务","手机版","更多"];
let slideDirecArr=["right",,,,"center","center","center","left","left"];
let slideWidArr=[200,,,,,,,200,150];
let slideHeiArr=[200,,,,80,80,80,200,150]
arr.forEach((item,index)=>{
let liItem=new LiItem(30,item,slideDirecArr[index],slideWidArr[index],slideHeiArr[index]);
liItem.appendToUl("#liTest");
});
let login=LiItem.todoList.get("请登录");
// console.dir(login);
// nav 地址
import Address from "./js/Address.js"
let addressArr=[];
axios.post("/getAddress1",{name:'北京',type:0}).then(res=>{
// console.log(res)
addressArr=res.data.data;
// addressArr=addressArr.reduce((value,item)=>{
// value[value.length]=item.name;
// return value;
// },[])
let address=new Address(addressArr);
address.appendTo("nav>.con>.left")
})
// axios.get(origin+"/getAddress").then(res=>{
// console.log(res)
// })
</script>
</body>
</html>
组件
import Component from "./Component.js"
export default class Address extends Component{
data;
prev;
cprev;
address;
pos;
bool=false;
closeBool=false;
constructor(_data){
super();
this.data=_data;
// console.log(this.data)
this.render();
this.setStyle();
// 500 280
}
render(){
this.elem.innerHTML=`
<div calss="head">
<span>北京</span>
<i></i>
</div>
<div calss="con">
<p style="height:40px;line-height:40px;position:relative;">请选择你所在的地区<span style="height:40px;line-height:40px;display:block;position:absolute;right:0px;top:0px;font-size:20px;transform: rotateZ(45deg);cursor:pointer;">+</span></p>
<ul>
<li>省份</li>
<li>城市</li>
<li>地区</li>
</ul>
<div>
${(function(data){
return data.map(item=>{
return `<p style="width:93px;float:left;height:28px;line-height:28px;text-align:center;overflow:hidden;border:1px solid white;" data-index="${item.id}">${item.name}</p>`
}).join("")
})(this.data)}
</div>
</div>
`
}
setStyle(){
Object.assign(this.elem.style,{
height:"30px",
lineHeight:"30px",
position:"relative"
})
Object.assign(this.elem.firstElementChild.style,{
height:"28px",
lineHeight:"28px",
position:"relative",
zIndex:"999",
border:"1px solid #f5f5f5",
borderBottom:"1px solid #f5f5f5",
paddingRight:"25px",
paddingLeft:"15px",
cursor:"pointer"
});
Object.assign(this.elem.firstElementChild.children[1].style,{
width:"0px",
height:"0px",
position:"absolute",
top:"11px",
right:"5px",
borderWidth:"5px",
borderColor:"#ccc transparent transparent",
borderStyle:"solid dotted dotted"
})
//con
Object.assign(this.elem.children[1].style,{
position:"absolute",
top:"29px",
left:"0px",
zIndex:"99",
width:"478px",
height:"278px",
padding:"10px",
border:"1px solid #ccc",
display:"none"
})
Object.assign(this.elem.children[1].children[1].style,{
width:"100%",
height:"29px",
lineHeight:"28px",
borderBottom:"1px solid #ccc",
})
Object.assign(this.elem.children[1].children[1].children[0].style,{
height:"27px",
border:"1px solid #ccc",
borderWidth:"2px 1px 1px",
borderTopColor:"#f10180",
borderBottomColor:"white",
float:"left",
padding: "0px 15px",
fontWeight:"700",
color:"blank"
})
Object.assign(this.elem.children[1].children[1].children[1].style,{
height:"28px",
border:"1px solid #ccc",
borderWidth:"1px",
// borderBottomColor:"white",
float:"left",
padding: "0px 15px",
})
Object.assign(this.elem.children[1].children[1].children[2].style,{
height:"28px",
border:"1px solid #ccc",
borderWidth:"1px",
// borderBottomColor:"white",
float:"left",
padding: "0px 15px",
})
this.elem.addEventListener("click",e=>this.clickHandler(e));
this.elem.children[1].firstElementChild.firstElementChild.addEventListener("click",e=>this.Handler(e));
this.elem.children[1].children[1].children[0].addEventListener("click",e=>this.clickHandler2(e));
this.elem.children[1].children[1].children[1].addEventListener("click",e=>this.clickHandler2(e));
this.elem.children[1].children[1].children[2].addEventListener("click",e=>this.clickHandler2(e));
this.prev=this.elem.children[1].children[1].children[0]
this.elem.children[1].children[2].addEventListener("mouseover",e=>this.mouseHandler(e));
this.elem.children[1].children[2].addEventListener("mouseout",e=>this.mouseHandler(e));
this.elem.children[1].children[2].addEventListener("click",e=>this.clickHandler3(e));
this.pos=this.elem.children[1].children[1].children[0];
this.posi=0
}
Handler(){
let evt=new Event("click");
this.elem.dispatchEvent(evt);
}
clickHandler(e){
if(e.target===this.elem.firstElementChild||e.target===this.elem.firstElementChild.children[0]||e.target===this.elem.firstElementChild.children[1]||e.target===this.elem.children[1].firstElementChild.firstElementChild||(e.target.parentElement===this.elem.children[1].children[2]&&this.closeBool)){
if(!this.bool){
Object.assign(this.elem.firstElementChild.style,{
border:"1px solid #ccc",
borderBottom:"1px solid white"
});
Object.assign(this.elem.children[1].style,{
display:"block"
})
this.elem.style.backgroundColor="white"
this.bool=true
}else{
Object.assign(this.elem.firstElementChild.style,{
border:"1px solid #f5f5f5",
borderBottom:"1px solid #f5f5f5"
});
Object.assign(this.elem.children[1].style,{
display:"none"
})
this.elem.style.backgroundColor="#f5f5f5"
this.bool=false
}
}
}
clickHandler2(e){
if(e.target.nodeName!=="LI") return;
switch(e.target.textContent){
case "省份":
this.pos=e.target;
this.posi=0;
break;
case "城市":
this.pos=e.target;
this.posi=1;
break;
case "地区":
this.pos=e.target;
this.posi=2;
break;
}
if(this.prev){
Object.assign(this.prev.style,{
height:"28px",
border:"1px solid #ccc",
borderWidth:"1px 1px 1px",
fontWeight:"400",
color:"#777"
})
}
this.prev=e.target;
Object.assign(this.prev.style,{
height:"27px",
border:"1px solid #ccc",
borderWidth:"2px 1px 1px",
borderTopColor:"#f10180",
borderBottomColor:"white",
fontWeight:"700",
color:"blank"
})
}
mouseHandler(e){
if(e.target.nodeName!=="P") return;
if(e.type==="mouseover"){
e.target.style.color="#f10180"
e.target.style.borderColor="#f10180"
}else{
e.target.style.color="#777"
e.target.style.borderColor="white"
}
}
clickHandler3(e){
if(e.target.nodeName!=="P") return;
let text=e.target.textContent;
this.setText(text);
this.toggleNext();
let data={};
data.name=e.target.textContent;
data.id=e.target.dataset.index;
// console.log(data)
this.getData(data);
}
setText(text){
this.elem.firstElementChild.firstElementChild.textContent=text;
}
toggleNext(){
this.closeBool=false;
let evt=new Event("click");
let elem=this.pos;
// console.dir(elem.nextElementSibling.parentElement)
if(elem.nextElementSibling){
elem.nextElementSibling.dispatchEvent(evt);
}else{
this.closeBool=true;
this.elem.dispatchEvent(evt);
}
}
getData(data){
let i=this.posi
let address;
// console.log(this.posi)
axios.post("/getAddress",{name:data.name,type:i,id:data.id}).then(res=>{
// console.log(res)
address=res.data.data;
// console.log(address)
this.setAddress(address)
}).catch(err=>{
this.elem.children[1].children[2].innerHTML="访问资源出错"
})
}
setAddress(address){
this.elem.children[1].children[2].innerHTML="";
// console.log(address)
let str=address.map(item=>{
return `<p style="width:93px;float:left;height:28px;line-height:28px;text-align:center;overflow:hidden;border:1px solid white;" data-index="${item.id}">${item.name}</p>`
}).join("")
this.elem.children[1].children[2].innerHTML=str;
}
}
基础组件
export default class Component{
elem;
constructor(){
this.elem=this.createElem();
}
createElem(){
let div=document.createElement("div");
return div;
}
appendTo(parent){
if(typeof parent === "string")parent=document.querySelector(parent);
// console.log(parent)
parent.appendChild(this.elem);
}
}
接口代码
router.post("/getAddress1",(req,res,next)=>{
// let data=req.body.data;
db.select("*","provice","where 1").then(result=>{
res.send(result)
})
})
router.post("/getAddress",(req,res,next)=>{
let data=req.body;
console.log("11111",data)
switch(data.type){
case 1:
db.select("*","city","where proviceid="+data.id).then(result=>{
res.send(result)
})
break;
case 2:
db.select("*","regin","where cityid="+data.id).then(result=>{
res.send(result)
})
break;
}
})
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
