vue+elementui实现英雄联盟道具城

这篇具有很好参考价值的文章主要介绍了vue+elementui实现英雄联盟道具城。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、效果图

1.首页

 2.商品列表、分类

 二、实现重点讲解

1.首页轮播图

1.1技术实现:

 1.2.鼠标聚焦切换图片事件

 2.首页tab切换

3.商品列表实现

三、项目结构说明

 四、总结


一、效果图

1.首页

项目与官方效果没有太大差异:

vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 游戏导航:

 2.商品列表、分类

vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 动态切换分类vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 二、实现重点讲解

1.首页轮播图

1.1技术实现:

使用element的走马灯:Element - The world's most popular Vue UI framework

vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 1.2.鼠标聚焦切换图片事件
mouseover事件:
 <!-- 首页广告 -->
        <div class="fl banner-slide">
          <div id="blk_index_main_focus" class="slide">
            <el-carousel height="372px" @change="changeBanner" ref="banner">
              <el-carousel-item v-for="(item,index) in banners" :key="index">
                <el-image :src="item" style="height: 372px;cursor: pointer;"></el-image>
              </el-carousel-item>
            </el-carousel>
            <div class="dot">
              <a :class="bannerIndex===0?'curr':''" @mouseover="selBanner(0)" style="width:191px;">DRX冠军皮肤</a>
              <a :class="bannerIndex===1?'curr':''" @mouseover="selBanner(1)" style="width:191px;">季中冠军赛通行证</a>
              <a :class="bannerIndex===2?'curr':''" @mouseover="selBanner(2)" style="width:191px;">英雄联盟神秘商店</a>
              <a :class="bannerIndex===3?'curr':''" @mouseover="selBanner(3)" style="width:191px;">净雪之月2023</a>
            </div>
          </div>
        </div>

通过element事件指定图片切换显示:

selBanner(index){//切换轮播图
        this.$refs.banner.setActiveItem(index);
      },

vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 2.首页tab切换

vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

首先准备两套数据:

newProducts:[//新品上架
          {name:'太空律动 “电音酒桶” 古拉加斯',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-156045.jpg')},
          {name:'太空律动 “噪音女王” 丽桑卓',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-156063.jpg')},
          {name:'太空律动 “魔音海妖” 娜美',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-156029.jpg')},
          {name:'太空律动 “律动队长” 提莫',price:'109.00',cover:require('../../../public/img/N-lol-1-100000-156018.jpg')},
          {name:'太空律动 “万能舞王” 崔斯特',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-156053.jpg')},
          {name:'太空律动 “爱乐之子” 塔里克',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-156071.jpg')},
          {name:'太空律动 “创乐之神” 奥恩',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-156039.jpg')},
          {name:'巅峰之星 布里茨',price:'89.00',cover:require('../../../public/img/N-lol-1-100000-155390.jpg')}
        ],
        recommendProducts:[//热门推荐
          {name:'光明哨兵 格雷福斯',price:'99.00',cover:require('../../../public/img/N-lol-1-100000-149090.jpg')},
          {name:'K/DA 卡莎',price:'79.00',cover:require('../../../public/img/2-145014-9.jpg')},
          {name:'K/DA ALL OUT 卡莎',price:'79.00',cover:require('../../../public/img/N-lol-1-100000-147358.jpg')},
          {name:'玉剑传说 无极',price:'79.00',cover:require('../../../public/img/pkg-9336.jpg')},
          {name:'战斗学院 孙悟空',price:'79.00',cover:require('../../../public/img/N-lol-1-100000-148255.jpg')},
          {name:'K/DA 阿狸',price:'79.00',cover:require('../../../public/img/N-lol-1-100000-118936.jpg')}
        ],

点击tab切换,动态更新数据显示:

<ul class="plate-tit clearfix">
            <li @click="selTab(1)" :class="tabIndex === 1?'current':''">
              <a class="plate-link">新品上架</a>
            </li>
            <li @click="selTab(2)" :class="tabIndex === 2?'current':''">
              <a class="plate-link">热门推荐</a>
            </li>
          </ul>
selTab(index){//新品上架、热门推荐 tab数据切换
        if(this.tabIndex === index){
          return;
        }
        if(index === 1){
          this.tabData = this.newProducts;
        }else if(index === 2){
          this.tabData = this.recommendProducts;
        }
        this.tabIndex = index;
      },

3.商品列表实现

vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 

分类定义:

menus:[
          {id:1,name:'全部分类'},
          {id:2,name:'英雄'},
          {id:3,name:'炫彩皮肤'},
          {id:4,name:'表情'},
          {id:5,name:'海克斯及其他'},
          {id:6,name:'云顶之弈'},
          {id:7,name:'皮肤'},
          {id:8,name:'道具'},
          {id:9,name:'守卫眼皮肤'}
        ],

首页点击分类菜单,路由通过query属性携带参数(分类id):

selMenu(item){//切换菜单
        this.$router.push({
          path: '/productList',
          query: {
            id: item.id
          }
        })
      }

商品列表页面接收获取参数(分类id):

mounted() {
      //获取分类id 参数
      if(this.$route.query.id){
        this.menuId = parseInt(this.$route.query.id);
      }
      //获取商品列表
      this.getData();
    },

查询对应分类商品列表:

getData(){//获取分类对应商品
        if(this.menuId === 1){//所有分类
          this.data = this.productList;
        }else{
          this.data = [];
          this.productList.forEach(item=>{
            if(item.typeId === this.menuId){
              this.data.push(item);
            }
          })
        }
      }

其中,商品列表定义,typeId表示其所属分类的id:

productList:[//商品列表
          {typeId: 1,name:'熊猫 提莫',img:require('../../../public/img/N-lol-1-100000-122946.jpg'),price:69},
          {typeId: 1,name:'山海绘卷 克格莫',img:require('../../../public/img/N-lol-1-111869-165721.jpg'),price:89},
          {typeId: 1,name:'山海绘卷 塔姆',img:require('../../../public/img/N-lol-1-111869-165722.jpg'),price:89},
          {typeId: 1,name:'山海绘卷 巴德',img:require('../../../public/img/N-lol-1-111869-165723.jpg'),price:89},
          {typeId: 1,name:'山海绘卷 莉莉娅',img:require('../../../public/img/N-lol-1-111869-165720.jpg'),price:89},
          {typeId: 3,name:'山海绘卷 克格莫 靛青',img:require('../../../public/img/N-lol-1-111869-165735.jpg'),price:20},
          {typeId: 3,name:'山海绘卷 克格莫 赤金',img:require('../../../public/img/N-lol-1-111869-165734.jpg'),price:20},
          {typeId: 3,name:'山海绘卷 克格莫 葱青',img:require('../../../public/img/N-lol-1-111869-165736.jpg'),price:20},
          {typeId: 2,name:'明烛 米利欧',img:require('../../../public/img/N-lol-1-111869-164325.jpg'),price:45},
          {typeId: 2,name:'祖安怒兽 沃里克',img:require('../../../public/img/1-19-9.jpg'),price:10},
          {typeId: 2,name:'迅捷斥候 提莫',img:require('../../../public/img/1-17-9.jpg'),price:10},
          {typeId: 2,name:'符文法师 瑞兹',img:require('../../../public/img/1-13-9.jpg'),price:10},
          {typeId: 2,name:'正义天使 凯尔',img:require('../../../public/img/1-10-111.jpg'),price:10},
        ]

三、项目结构说明


项目以vue项目创建,前端某些元素使用element,项目启动执行的命令为:

  1. npm install
  2. npm run dev(当然命令可以修改为npm run serve,没啥区别)

注意:npm install 成功了再执行 npm run dev 启动项目
结构如下截图,项目已经集成和实现了需要请求后端接口的一切功能,所以无须花费精力去考虑前端如何去对接后端和接口,可以把一切精力放在实现前端界面设计上来。

这样不懂后端的伙伴也省心省力,接口请求只需按照模板去copy就好,无非就是get/post/delete/put等请求方式和参数传递的差别,当然不明白的可以细问作者。

项目结构还是分为:顶部+具体功能显示容器+底部,页面存放于src/page目录下,看目录命名就能明白其含义,具体功能页面在views目录下。

路由在router目录中。

路由权限也是很重要的一个功能,为permission.js,所有页面跳转都会经过其拦截,有人问,路由权限有什么用,好说,比如订单页面或个人中心页面吧,肯定是需要登录才能访问的,首页却是无需登录即可访问的,那么就可以在permission.js里面获取登录token,有token即表示已经登录,可以访问订单或个人中心页面,否则跳转登录页等。
vue+elementui实现英雄联盟道具城,前端开发它不香么,vue.js,elementui,前端,web,javascript,html5

 四、总结

后续不定期将不断完善和增加功能页面,敬请期待。

关注作者,及时了解更多好项目!

作者主页也有更多好项目分享!

获取源码或如需帮助,可通过博客后面名片+作者即可!

 其他作品集合:文章来源地址https://www.toymoban.com/news/detail-520233.html

  1. 《vue+elementui实现app布局小米商城,样式美观大方,功能完整》
  2. 《vue完美模拟pc版快手,实现短视频,含短视频详情播放》
  3. 《vue+element实现美观大方好看的音乐网站,仿照咪咕音乐网》     
  4. 《vue实现功能完整的购物商城,商品零食、电商通用商城》
  5. 《vue+element实现蔬菜、水果、电商商城》
  6. 《vue+element简单实现电商商城网站,模仿小米电商商城》
  7. 《vue实现美观大方的动漫、cos、帖子类型网站》
  8. 《vue实现好看的相册、图片网站》
  9. 《高度仿PC版《微信读书》,好看的小说、读书网站》
  10. 《vue+element实现非常好看的鲜花网站商城,页面完整,样式美观》
  11. 《vue+elementui+springboot前后端分离实现通用商城管理后台》
  12. 《微信小程序日记、微信小程序个人空间、个人日记》
  13. 《vue+element模仿腾讯视频电影网站》
  14. 《vue+element高度仿照QQ音乐,完美实现PC端QQ音乐》
  15. 《vue+element详细完整实现个人博客、个人网站》
  16. 《vue+elementui+springboot前后端分离实现学校帖子网站,学校大作业》
  17. 《vue+elementui实现U袋网-完整版》
  18. 《vue+element+electron仿微信实现》
  19. 《vue+element模仿电商商城,前后端分离实现,下单微信扫码支付》
  20. 《electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏》
  21. 《微信小程序仿唯聚时代,微信小程序商城》
  22. 《jquery+bootstrap完整丰富样式开发框架源码,各种现成样式简单易用》
  23. 《html+css响应式旅游主题网站模板,旅游网站,企业文化新闻类网站》
  24. 《css+html各种动态、动画、3D相册等7件套》
  25. 《仿华为电商商城,官网,华为超级新品日demo,大屏霸气且简洁》
  26. 《vue+element简单实现商城网站首页,模仿电商商城》
  27. 《vue+elementui实现非常好看的博客、网站首页,网站模板》
  28. 《elementui+vue实现经典管理系统布局框架,拿来即用》
  29. 《简系统登录页模板html+vue+elementui》
  30. 《vue+elementui完美实现博客、网站、个人网站,高仿“张凯博客”》
  31. 《vue+elementui完美实现后台管理系统的左、右、顶部菜单布局》
  32. 《html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐》
  33. 《后端使用springboot+maven+shiro+mybatis+mysql,前端使用H-ui.admin_v3.1.3.1,快速实现管理后台功能》
  34. 《springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码》
  35. 《html+css实现好友列表,类似QQ群聊成员列表》

到了这里,关于vue+elementui实现英雄联盟道具城的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • GuLi商城-前端基础Vue-整合ElementUI快速开发

    npm安装 启动项目:npm run dev http://localhost:8082/#/hello 

    2024年02月09日
    浏览(46)
  • 英雄联盟轮播图自动轮播

    六月过去了,七月还会远吗?不知不觉到了六月底的最后一天。你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自动轮播的话,那样会不会更炫酷呢?炫不炫酷我不

    2023年04月08日
    浏览(46)
  • LOL英雄联盟自动打人机训练升级【CircuitPython】

    设备:1920*1080 系统:Windows11 程序:CircuitPython 英雄:琴女 功能: 自动释放加血 自动释放攻击 自动对线 欢迎评论

    2024年02月16日
    浏览(44)
  • 使用vue脚手架搭建前端工程(附:搭配ElementUI来快速开发)

    目录 一、搭建过程 1. 全局安装webpack(打包工具) 2. 全局安装vue脚手架 3. 初始化vue项目 4. vue项目目录的简单介绍 二、执行流程分析 三、自己造一个组件案例 四、ElementUI的使用 1. 环境的引入 2. 一个简单使用 3. 使用它来快速搭建后台管理系统 五、总结 npm install webpack -g np

    2024年02月10日
    浏览(71)
  • 英雄算法联盟 | 31天让你的算法与众不同

      是的,我的付费服务开通了,知识星球 —— 英雄算法联盟。   那么就有人要说了,终于开始割韭菜了!   这个事情就要看你是怎么看待的。如果你付费了,但是没有按照我的计划行事,没有融入整个团队,甘为韭菜,那我也救不了你。但是如果你付费了,坚持自律

    2024年02月07日
    浏览(49)
  • Vue + ElementUI 实现后台管理系统模板 -- 前端篇

    使用场景分析: Home.vue 页面中,Header 部分有个折叠按钮,点击之后,可以折叠与展开 Aside 组件,这之间就设计到数据在组件间的共享。 使用 vuex 后,数据统一管理,当数据发生变化时,其所有引用的地方均会修改。 2、安装、模块化使用 vuex 1》安装 项目构建时,已经安装

    2024年04月11日
    浏览(42)
  • 毕业设计 英雄联盟数据分析与预测 -大数据分析 可视化 机器学习

    🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点,往往达不到毕业答辩的要求,这两年不断有学弟学妹告诉学长自己做的项目系统达不到老师的要求。 为了大家能够顺利以及最少的精力通过毕设,学长分享优质毕业设计项目,今天

    2024年02月05日
    浏览(111)
  • 【手机号验证/前端】Vue2+elementUI编写一个手机号验证码登录页面,路由式开发(附完整代码)

    目录 效果图: 一、template部分 二、style样式 三、script部分 1.先对手机号的格式进行一个判断 2.接下来就是表单验证规则rules 3.最后就是methods了 (1)首先我们给获取验证码绑定一个方法 (2)然后封装一个axios接口,方便后面测试联调(这部分每个人封装的都不一样) (3)然

    2024年02月17日
    浏览(55)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(57)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包