1.遮罩层显示消息框
在遮罩层上显示交互框如下：
思路是：将一个不显示的与页面宽高相等的div设置为position:fixed;，点击原本页面上的图片(或其他操作)，显示遮罩层。
需要注意的是，遮罩层后面的内容有一定的虚化，需要遮罩层设置不小的透明度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 20px;
width:100%;
height:100%;
}
#msgBox{
width:100%;
height:100%;
background:#369;
position:fixed;
top:0;
left:0;
z-index:2;
opacity:0.9
}
.hide{
display:none;
}
button:hover{
cursor:pointer;
}
#img{
width:200px;
}
#img:hover{
opacity:0.6;
}
#btn1{
transition:all .3s;
}
#btn1:hover{
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="http://file02.16sucai.com/d/file/2015/0128/8b0f093a8edea9f7e7458406f19098af.jpg" alt="" id="img">
<p>点击图片，进入遮罩层，展示更大的图片效果;</p>
<div id="msgBox" class="hide">
<button id="btn1" style="position:absolute;top:10%;left:95%;font-size:30px;color:white;border:0;outline: none;background:none;">×</button>
<img src="" alt="" id="bigImg" style="width:500px;top:30%;position:absolute;left:30%">
</div>
<script>
var msgBox=document.getElementById("msgBox");
var btn1=document.getElementById('btn1');
var img=document.getElementById('img');
var bigImg=document.getElementById('bigImg');
bigImg.src=img.src;
img.onclick=()=>{
msgBox.classList.remove('hide')
btn1.onclick=()=>{
msgBox.classList.add('hide')
}
}
</script>
</body>
</html>
2.json-server使用
安装,全局安装
npm i -g json-server
再一个文件夹中创建json文件(如db.json)
{
"user":[
{"id":1,"name":"tom","gender":1,"age":18},
{"id":2,"name":"amy","gender":0,"age":19}
]
}
也可以在目录下生成package.json文件,配置scripts为
"scripts":[ "json-server":"json-server --watch db.json" ]
让json文件中的变化即时发生变化，或者执行json-server --watch db.json
在当前目录下打开命令提示行执行：
json-server db.json
即可得到:
上面的user,就可以用来获取其中的数据:httl://localhost:3000/user，得到
http://localhost:3000/user/1
获取用户id为1的用户数据
具体可以参考：https://blog.csdn.net/lhjuejiang/article/details/81475993
在发送post请求的时候使用postman软件
需要注意的是：在body中选择x-www-form-urlencoded;
这里将的数据是直接填入json中的，所以没有设置对id的auto_increment,id不会自增长，而是存储为 "id": "nMHcHss"，所以填入其中的信息最好都是与其期望的格式匹配。
简单配置路由可以参考这位博主的：https://blog.csdn.net/weixin_40817115/article/details/81281454