Table of contents

2. Realize key explanations

1. Home page carousel

1.1 Technical realization:

1.2. Mouse focus switching picture event

2. Home tab switching

3. Product list realization

3. Description of project structure

Four. Summary

1. Rendering

1. Home page

The project is not much different from the official effect:

Game Navigation:

2. Commodity list and classification

Dynamically switch categories

2. Realize key explanations

1. Home page carousel

1.1 Technical realization:

Use element's revolving lantern: Element - The world's most popular Vue UI framework

1.2. Mouse focus switching picture event

mouseover event:

 <!-- 首页广告 -->
        <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>

Specify the image switching display through the element event:

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

2. Home tab switching

First prepare two sets of data:

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')}
        ],

Click the tab switch to dynamically update the data display:

<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. Product list realization

Classification definitions:

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:'守卫眼皮肤'}
        ],

Click on the category menu on the home page, and the route carries parameters (category id) through the query attribute:

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

The product list page receives and obtains parameters (category id):

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

Query the corresponding category product list:

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);
            }
          })
        }
      }

Among them, the product list definition, typeId represents the id of the category it belongs to:

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},
        ]

3. Description of project structure

The project is created as a vue project, and some front-end elements use element. The command to start the project is:

npm install
npm run dev (of course the command can be changed to npm run serve, there is no difference)

Note : After npm install is successful, execute npm run dev to start the project
structure as shown in the screenshot below. The project has integrated and implemented all the functions that need to request the back-end interface, so there is no need to spend energy to consider how the front-end connects to the back-end and interface, you can put everything Focus on realizing the front-end interface design.

In this way, partners who do not understand the backend can save worry and effort. The interface request only needs to be copied according to the template. It is nothing more than the difference between get/post/delete/put and other request methods and parameter passing. Of course, if you don’t understand, you can ask the author.

The project structure is still divided into: top + specific function display container + bottom, the pages are stored in the src/page directory, you can understand the meaning by looking at the directory name, and the specific function pages are in the views directory.

Routing is in the router directory.

Routing permission is also a very important function. It is permission.js, and all page jumps will be intercepted by it. Some people ask, what is the use of routing permission, so to speak, such as the order page or personal center page, it must be logged in to access , but the home page can be accessed without logging in, then you can get the login token in permission.js, if you have the token, you have logged in, you can access the order or personal center page, otherwise jump to the login page, etc.

Four. Summary

The follow-up will continue to improve and add function pages from time to time, so stay tuned.

Follow the author and learn about more good projects in time!

The author's homepage also has more good projects to share!

Get the source code or if you need help, you can use the business card + author at the back of the blog!

Other collections:

Vue+elementui realizes the League of Legends props city

1. Rendering

1. Home page

2. Commodity list and classification

2. Realize key explanations

1. Home page carousel

1.1 Technical realization:

1.2. Mouse focus switching picture event

2. Home tab switching

3. Product list realization

3. Description of project structure

Four. Summary

Guess you like