制作一个随机抽卡页面

基于昨天的代码，补充几点来完成抽卡页面的制作

核心思路

在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%包含时刻）

 即为成功