vue+layui

最新推荐文章于 2024-04-27 10:09:51 发布

冯不疯先生

最新推荐文章于 2024-04-27 10:09:51 发布

阅读量499

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_58437833/article/details/119361407

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

前端/;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奥运奖牌表</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>
<div class="layui-container">
    <!--轮播图satart-->
    <div class="layui-col-md6">
        <div class="layui-panel">
            <div style="padding: 30px;">奥运头条</div>
            <div class="layui-card-body">
                <div class="layui-carousel" id="test1">
                    <div carousel-item>
                        <div v-for="branner in banners"><img style="width: 100%" :src="branner.imgUrl" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--轮播图end-->

    <div class="layui-col-md6">
        <div class="layui-panel">
            <div class="layui-tab" lay-filter="test1">
                <ul class="layui-tab-title">
                    <li class="layui-this">奖牌榜</li>
                    <li>用户管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>国家/地区</th>
                                <th>金牌🥇</th>
                                <th>银牌🥈</th>
                                <th>铜牌🥉</th>
                                <th>总数</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="worldMedal in worldMedals">
                                <td>{{worldMedal.country_name}}</td>
                                <td>{{worldMedal.gold_num}}</td>
                                <td>{{worldMedal.silver_num}}</td>
                                <td>{{worldMedal.bronze_num}}</td>
                                <td>{{worldMedal.medal_total_num}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="layui-tab-item">
                        <table class="layui-table">
                            <thead>
                            <tr>
                                <th>奖牌数</th>
                                <th>选手名称</th>
                                <th>介绍</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="ChinaMedal in ChinaMedals">
                                <td>{{ChinaMedal.medal_total}}</td>
                                <td>{{ChinaMedal.name}}</td>
                                <td>{{ChinaMedal.desc}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
    //实例化vue
    new Vue({
        el: '.layui-container',
        data: {
            banners: [],
            worldMedals: [],
            ChinaMedals: [],
            isBanners: false,
        },
        //方法钩子
        methods: {
            //查询轮播图
            getBanners() {
                //vue axios
                axios
                    .get('https://local.week3.com/home/index/getBanners')
                    .then(res => {
                        //设置  data里面的数据
                        this.banners = res.data.data
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            //查询世界金牌
            getWorldMedal() {
                axios
                    .get('https://local.week3.com/home/index/getWorldMedal')
                    .then(res => {
                        this.worldMedals = res.data
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            getChinaMedal() {
                axios
                    .get('https://local.week3.com/home/index/getChinaMedal')
                    .then(res => {
                        this.ChinaMedals = res.data
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
        },
        //调用方法钩子
        created() {
            //定义this的对象
            var that = this;

            this.getBanners();
            this.getWorldMedal()
            //创建切换卡实例
            layui.use('element', function () {
                var element = layui.element;
                //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
                //监听Tab切换，以改变地址hash值
                element.on('tab(test1)', function (data) {
                    // console.log(data.index)
                    if (data.index == 1) {
                        that.getChinaMedal()
                    }
                });
            });
        },
        //
        updated() {

            if (this.isBanners == false) {
                layui.use(['carousel'], function () {
                    var carousel = layui.carousel;
                    //建造实例
                    carousel.render({
                        elem: '#test1'
                        , width: '100%' //设置容器宽度
                        , arrow: 'always' //始终显示箭头
                        //,anim: 'updown' //切换动画方式
                    });
                });
            }

            if (this.banners.length > 0) {
                this.isBanners = true
            }
        }
    })

</script>

php：

//赛事轮播图
    public function getBanners()
    {
        $data = Banner::getBanners();
        if ($data !== false) {
            $data = $data->toArray();
        }
        return json($data);
    }

    //世界奖牌
    public function getWorldMedal()
    {
        $data = WorldMedal::getWorldMedal();
        if ($data !== false) {
            $data = $data->toArray();
        }
        return json($data);
    }

    public function getChinaMedal()
    {
        $data=ChinaMedal::getChinaMedals();
        if ($data !== false) {
            $data = $data->toArray();
        }
        return json($data);
    }

class Banner extends Model
{
    protected $table = 'banners';

    //查询轮播图数据
    public static function getBanners()
    {
        return self::paginate(3);
    }

}


----------------------------------------------
class ChinaMedal extends Model
{
    //
    protected $table = 'china_medals';

    public static function getChinaMedals()
    {
        return self::select();
    }
}

---------------------------------------------
class WorldMedal extends Model
{
    //
    protected $table = 'world_medals';

    public static function getWorldMedal()
    {
        return self::select();
    }
}

冯不疯先生

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue+layui

效果图前端/;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>奥运奖牌表</title> <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"></head><body>&lt
复制链接

扫一扫