基于昨天的代码,补充几点来完成抽卡页面的制作
核心思路
在web里面导入vue,lib,home,player,特别注意的是lib包要在WEB-INF下:
在RandomImgC导入所需文件夹路径,利用Math.random()函数随机生成图片:
@WebServlet("/randomImgC")
public class RandomImgC extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String[] fileNames = new File("E:\\足球\\足球照片\\球王/").list();
String imgName=fileNames[(int)Math.floor(Math.random()*fileNames.length)];//随机生成
System.out.println("随机生成的图片名称是:"+imgName);
ImgUtil.responseImg("E:\\足球\\足球照片\\球王/"+imgName,resp);
}
}
在player.html文件中写一个抽卡初始的盒子:
<div class="f">
<div v-for="i in 6"@click="xzImg($event,i)"></div>
</div>
<hr>
用流失布局使其均匀分布:
.f{
display: flex;
justify-content: space-around;
用css设置一个翻转动画:
@keyframes xz {
0%{
transform: rotateY(0deg);
background-image: url("");
}100%{
transform: rotateY(180deg);
}
}
@keyframes xzr {
0% {
transform: rotateY(180deg);
}100%{
transform: rotateY(0deg);
background-image: url("");
}
}
设置动画的持续时间,变化速率及延迟时间:
.xz{
animation: xz 1s linear 1 forwards;
}
.xzr{
animation: xzr 1s linear 1 forwards;
}
做一个判断,选择输出样式,特别注意要是每张图片每点一下都能随机输出不同图片就要在randomImgC加一个i来使服务器区分执行内容的不同:
数据转化成Json格式再响应给服务器:
public static void transJason(Object obj, HttpServletResponse resp){
try {
//数据转换成json格式,再响应给浏览器
String json_string = JSON.toJSONString(obj);
resp.setContentType("application/json;charset=utf-8");
resp.getWriter().write(json_string);
}catch (Exception e){
e.printStackTrace();
}
}
在home的html文件中
创建Vue对象,返回返回图片名:
const vueObj=new Vue({//wn是Vue对象返回值
el:'#app',
data:{
imgNames:[]
},
methods:{
imgSrc(imgName){
return '/imgC?action=getImgByName&imgName='+imgName
},
mounted()
,用于在组件被挂载完成后执行一些操作,用this获取到所有实例对象并输出:
},
mounted(){
this.getAllImgNames()
//此处的this表示整个Vue对象
console.log(this.imgNames,2,this) //里面的this是wn
}
})
console.log(vueObj)
在axios的回调函数then中,如果是普通函数function({this} 普通函数中的this指代js的bom顶层对象,类似于java中的Object,如果使用箭头函数()=>{this},此时的this表示整个vue实例,也就是new Vue({}) 函数的返回值vueOBJ
回到player()方法绑定点击按钮进入球员抽卡界面:
<div id="app">
<button onclick="location.assign('/home.html')">进入球员抽卡界面</button>
<div class="f">
<div v-for="i in 6"@click="xzImg($event,i)"></div>
</div>
<hr>
<img src="/randomImgC" alt="" width="400" height="450"><br>
<button onclick="location.reload()">换一个</button>
与服务器建立连接:
连接成功:
点击进入球员抽卡界面按钮跳转到:实况抽卡(100%包含时刻)
即为成功