[VUE] vue プログラミング - Netease Yanxuan を模倣する

1 はじめに

コース終了時の課題を設計しているのですが、コース設計を開始する場所がありません。Web ページの総要件が多すぎますか? 適切なテンプレートがありませんか? データベース、Java、Python、Vue、HTML のジョブは複雑で、ワークロードが大きすぎますか? Bi 彼女には何の手がかりもなく、一連の質問がありました。あなたが解決したいすべての問題は、WeChat公開アカウント「コーディングガソリンスタンド」で解決されます

2. 作品紹介

NetEase の Yanxuan システムは、html、css、および vue テクノロジーを使用して実装されています。学習した知識システムに準拠しており、一般的な宿題やコース設計に適しています。さらに多くの作品を取得する必要がある場合は、WeChat の公開アカウント: コーディング ガスにご注意ください。詳細については、WeChat のバックグラウンドにメッセージを残すことができます。誰でも質問したり、学びを交換したりすることを歓迎します。

2.1. 作品紹介 

NetEase の厳密な選択システムは従来の方法で実装されており、ほとんどの要件を満たしています。コード構成を説明する関連ドキュメントがあり、コードから知識ポイントを学ぶ必要がある場合は、この作品が最適です。

2.2. 作品の二次開発ツール

この作品のコードは比較的シンプルで、基本的には教室で学んだ知識を使用して完成しますが、関連する紹介文と一部の画像を修正するだけで、独自のコードに変更することができます。 Web 作業では、任意の編集ソフトウェアを使用できます (例: DW、HBuilder、NotePAD、Vscode、Sublime、Webstorm のすべてのエディターを使用できます)。

2.3. 作品の技術的紹介

HTMLウェブページの技術的側面：CSSを使用してウェブページの背景画像を作成し、マウスオーバーと選択したナビゲーションの色の変更効果、下線およびその他の関連テクノロジーを使用して関連するインターフェイスを美しくし、検証のために部分的にJavaScriptを使用します。html5、css3、およびその他の関連テクノロジーを使用してテクニカル レイアウトを完成させます。この作業では、共通レイアウト、共通フローティング レイアウト、およびフレックス レイアウトが使用されます。同時に、html5とcss3を運用に使用し、div+cssの構造、フォーム、ハイパーリンク、フローティング、絶対配置、相対配置、フォントスタイル、参考動画などの基礎知識を使用し、js関連の知識も多少あります。使用済み。たとえば、dom と bom はブラウザの関連 API を取得するために使用され、css はスタイルを美しくしてインターフェイスを Web デザインに合わせて作成するために使用されます。

vue の技術的側面: vue テクノロジーを使用して開発された Web サイト。v-for、v-if、v-show、v-html などの一般的な vue 命令が含まれ、watch などの共通機能の開発も含まれます。コンポーネントの使用、vue 関連のファミリー バケットの使用、およびルーティングとしての v-router の使用は、一般的な Web サイト開発手法と完全に一致しています。同時に、html5、css3 などの関連テクノロジーを使用してテクニカル レイアウトを完成させます (この作業では、共通レイアウト、共通フローティング レイアウト、およびフレックス レイアウトが使用されます)。

3. 作品の実演

[ガソリンスタンドのコーディング] vueプログラミング --- Netease Yanxuanを真似る

3.1. ホームページ

関連するコード:

<div class="wrap" :style="!Mister?'background-image:url(https://yanxuan-static.nosdn.127.net/hxm/yanxuan-node-wap/style/img/skeleton/index-bad8841212914b21f136.png)':''" >
  <div class="mask" v-show="big_channel" @click="mask_qiehuan"></div>
  <div class="top">
      <Top>
          <a slot="logo" href="" class="logo">
       </a>

       <a slot="login" href="" class="login">登录</a>
      </Top>
    <div class="category">
        <ul v-show="short_channel">
         <li  :class="active==index?'on':''" v-for="(item,index) in categorys" :key="index" v-show="index<4"><a href="" @click.prevent="select(index,item)"  >{
   
   {item}}</a></li>
        </ul>
       <div class="all_cate" v-show="big_channel">
           <p>全部频道</p>
               <div class="short_cate">
           <span @click="qiehuan(index,item)" :class="index==on?'on':''" v-for="(item,index) in big_categorys" :key="index" >{
   
   {item}}</span>

               </div>
       </div>
       <span  @click="show_channel"  class="iconfont arr" :class="short_channel?'icon-xiangxiajiantou':'icon-xiangxiajiantou-copy'"> </span>
    </div>
      
  </div>
    <section  >
      <div class="swiper-container">

        <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in lunbo" :key="index">
            <img :src="item" alt="">
        </div>
    </div>
      <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->

    </div>
    <!-- title -->
    <div class="title">
        <div v-for="(item,index) in title" :key="index"><img :src="item.icon" alt=""><span>{
   
   {item.name}}</span></div>
    </div>

    <!-- classify -->
    <ul class="classify" v-if="Mister.kingKongModule">
        <li v-for="(item,index) in Mister.kingKongModule.kingKongList" :key="index" ><img :src="item.picUrl" alt=""><span class="">{
   
   {item.text}}</span></li>
    </ul>
   <!-- 新人福利 -->
    <div class="new_person">
        <img src="https://yanxuan.nosdn.127.net/0f256e29c06d1954a6785b16ec7d3624.gif?imageView&quality=75" alt="">
    </div>
    <div class="tuijian">
        <div class="img">
            <img v-lazy="'https://yanxuan.nosdn.127.net/2ce893ef19956ddd2413d87a24e9b2e4.png?quality=75&type=webp&imageView&thumbnail=375x0'" alt="">
            <img v-lazy="'https://yanxuan.nosdn.127.net/9afb2a9449c66f348bf3fa4c3deda38f.png?quality=75&type=webp&imageView&thumbnail=375x0'" alt="">
        </div>
        <a href="">
            <img v-lazy="'https://yanxuan.nosdn.127.net/8346ccd16467d54491ee969769bcb21e.png?quality=75&type=webp&imageView&thumbnail=750x0'" alt="">
        </a>
    </div>
    <!-- 类目销量榜 -->
    <div class="leimu">
        <h1>类目销量榜</h1>
        <div class="paihang">
            <div class="left">
                <div class="text " >热销榜</div>
                <img v-lazy="'https://yanxuan-item.nosdn.127.net/c40842640f6a1a2509960c2029aca1b8.png?quality=75&type=webp&imageView&thumbnail=200x200'" alt="">
            </div>
            <div class="right">
                 <div class="text good">好评榜</div>
                <img v-lazy="'https://yanxuan-item.nosdn.127.net/c40842640f6a1a2509960c2029aca1b8.png?quality=75&type=webp&imageView&thumbnail=200x200'" alt="">
            </div>
        </div>
        <div class="short_paihang" v-if="Mister.categoryHotSellModule">
            <div class="item" v-show="index>=2" v-for="(item,index) in Mister.categoryHotSellModule.categoryList" :key="index" @click="GoonItem(item)">
                <p>{
   
   {item.categoryName}}</p>
                <img v-lazy="item.picUrl" alt="">
            </div>
        </div>
    </div>
    <!-- 限时抢购 -->

    <div class="sale">
         <div class="tops">
                     <div class="buy" v-html="isTime">
         
        </div>
        <a @click.prevent="$router.replace('/flashsale')" href="" class="more">更多 ></a>
         </div>
         <ul class="bottom" v-if="Mister.flashSaleModule">
             <li @click="$router.push('/flashsale')" v-for="(item,index) in Mister.flashSaleModule.itemList" :key="index">
                 <img v-lazy="item.picUrl" alt="">
                 <p>
                     <span>￥{
   
   {item.activityPrice}}</span>
                     <del>￥{
   
   {item.originPrice}}</del>
                 </p>
             </li>
             <li></li>
             <li></li>
         </ul>
    </div>

    <!-- 新品首发 -->
    <div class="new_shop">
        <div class="new_top">
            <h2>新品首发</h2>
                <a @click.prevent="$router.replace('/new')" href="" class="more">更多 ></a>      
            </div>
        <ul class="new_shops">
            <li @click="toBuy(item.id)" v-show="index<6" v-for="(item,index) in Mister.newItemList" :key="index">
               <img v-lazy="item.primaryPicUrl" alt=""> 
               <div class="names">
                   {
   
   {item.name}}
               </div>
               <div class="prices">
                   ￥{
   
   {item.retailPrice}}
               </div>
               <div class="huodon" v-if="item.promTag">
                   <span>{
   
   {item.promTag}}</span>
               </div>
            </li>
                  
        </ul>
    </div>
</section>

</div>

3.2. カテゴリページ

 関連するコード:

<template>
<div class="wrap">
<Top width="95%"></Top>
<section>
    <div class="left">
        <ul class="left_scroll">
            <li @click="TabAlter(item.id,index)" :class="active===index?'active':''" v-for="(item,index) in categoryL1List" :key="index">{
   
   {item.name}}</li>

        </ul>
    </div>
    <div class="right">
      <keep-alive>
            <Right :categoryGroupLis="categoryGroupLis" 
        :isShowConten="currentCategory.bannerList"
        :categoryGroupList="categoryGroupLis"
        />
      </keep-alive>
    </div>
</section>
</div>
</template>




<script>
import Right from './Category_right/Right'
import {mapState} from 'vuex'
import Top from '../../pages/Top/Top'
export default {
data(){
    return {
      active:-1,
    
    }
}
,
mounted(){
// 异步请求地址
this.TabAlter(11,0)

}
,    
methods:{
TabAlter(id,index){
    
  
  if(index==this.active)return
   this.active=index
  this.$store.dispatch("GETCATEGORY",id)
    
}
}
,
computed:{
    ...mapState({
        categoryGroupLis:state=>state.Category.categoryGroupLis,
        categoryL1List:state=>state.Category.categoryL1List,
        currentCategory:state=>state.Category.currentCategory,
        // categoryGroupLis:state=>state.Category.categoryGroupLis

    })
}
,
components:{
    Top,
    Right
}

}
</script>

3.3. 詳細ページ

 関連するコード:

<template>
<div class="wrap">
<Header></Header>
<div class="header">
    <div class="intros">
        <div class="title">
            <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
            <span>严选好物 用心生活</span>
        </div>
        <img class="bg" src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
    </div>
    <div class="container">
          <div class="banner" ref="banner">
             <ul class="swipers" v-for="(item,index) in category" :key="index">
               
            <li v-for="(items,indexs) in item" :key="indexs">
                <img :src="items.picUrl" alt="">
                <p>{
   
   {items.mainTitle}}</p>
                <span>{
   
   {items.viceTitle}}</span>
            </li>
               
        </ul>
          </div>
          <div class="xianshitiao">
              <span class="ospan"></span>
          </div>
    </div>
</div>
<section>
    <ul class="content" v-if="DeserveBuy[0] && DeserveBuy[1]" > 
       <li  v-for="(item,index) in DeserveBuy" :key="index">

           <div @click="$router.replace('/deserveContent/'+items.topicId)" class="all_show" v-for="(items,indexs) in item" :key="indexs">
                <img v-lazy="items.picUrl"  alt="">
            <div class="intro" v-if="items.nickname">
           {
   
   {items.title}}
            </div>
            <div class="person" v-if="items.nickname">
                <div class="name" >
                    <img v-lazy="items.avatar"  alt="">
                  {
   
   {items.nickname}}
                </div>
                <div class="numbers">
                        <img v-lazy="'https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png'" alt=""><span>83k</span>
                </div>
            </div>
             <div class="shows" v-else>
                 <h1>{
   
   {items.title}}</h1>
                 <h3>{
   
   {items.subTitle}}</h3>
             </div>
           </div>
        </li>
    </ul>
</section>
</div>
</template>
<script>
import {mapState} from 'vuex'
import BetterScroll from 'better-scroll'
import Header from '../../pages/Header/Header'
export default {
data(){
    return {
        page:1,
        isZhixing:false,
    }
},
components:{
    Header
},
computed:{
    ...mapState({
        category:state=>state.Deserve.category,
        DeserveBuy:state=>state.Deserve.DeserveBuy
    })
}
,
mounted(){
    // 获取导航信息
    this.$store.dispatch("GETDESERVECATE")
    // 请求默认数据
    this.$store.dispatch("GETDETAILS",{page:this.page,size:2})

},
watch:{
    category(){
        this.$nextTick(()=>{
            let banner=this.$refs.banner
            let oul=banner.querySelectorAll("ul")
            let oul_width=oul[0].offsetWidth
            banner.style.width=(oul_width)+"px"
            // 滑动
            console.log(oul_width)
            let ospan=document.querySelector(".ospan")
           this.scroll= new BetterScroll(".container",{
                scrollX:true,
                click:true,
                momentum:true
             
            })

            // 获取下方滚动条
            this.scroll.on("scrollEnd",(e)=>{
               let distance=Math.abs(e.x)
               if(distance>=300){
                   ospan.style.width="100%"
               }else {
                   ospan.style.width="50%"
               }
               

                
            })

        })
    }
,
DeserveBuy(){

    this.$nextTick(()=>{
         this.ajaxDeserve()
    })
}

},
methods:{
    ajaxDeserve(){
         console.log(9998)
        let content=document.querySelector(".content")
        // 滚动
        let page=1;
         let documents=document.documentElement || document.body
     
        
         window.addEventListener("scroll",()=>{
              
             if(documents.scrollHeight==documents.scrollTop+documents.clientHeight){
                    if(!this.isZhixing){
                     this.page++
                       this.$store.dispatch("GETDETAILS",{page:this.page,size:2})
                          console.log(this.page)
                          this.isZhixing=true
                    }
                window.setTimeout(()=>{
                    console.log(225)
                        this.isZhixing=false
                    },1000)
          
            
             }


         },false)
    



      
    }
},

beforeDestroy(){
  window.location.reload()
}
}
</script>

4. コード構造図

要約する

上記はこのプロジェクトの全内容です。無料でコードを伝達または取得する必要がある場合は、WeChat パブリック アカウントをフォローしてください: コーディング ガソリン スタンド、取得