• 【VUE】vue程序设计----模仿网易严选

    1、引言

    设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

    2、作品介绍

    网易严选系统采用html，css，vue技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

    2.1、作品简介方面 

    网易严选系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

    2.2、作品二次开发工具

    此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

    2.3、作品技术介绍

    html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计

    vue作品技术方面：使用vue技术开发的网站，涉及常见的vue指令，如v-for，v-if，v-show，v-html等的使用，包含watch，计算属性等常见功能的开发，以及组件的使用，使用vue相关全家桶的使用，运用了v-router来作为路由，完全符合常见的网站开发技术。同时也会使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

    3、作品演示

    【coding加油站】vue程序设计---模仿网易严选

    3.1、首页

    相关代码：

    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)':''" >
    2.   <div class="mask" v-show="big_channel" @click="mask_qiehuan">div>
    3.   <div class="top">
    4.       <Top>
    5.           <a slot="logo" href="" class="logo">
    6.        a>
    7.  
    8.        <a slot="login" href="" class="login">登录a>
    9.       Top>
    10.     <div class="category">
    11.         <ul v-show="short_channel">
    12.          <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>
    13.         ul>
    14.        <div class="all_cate" v-show="big_channel">
    15.            <p>全部频道p>
    16.                <div class="short_cate">
    17.            <span @click="qiehuan(index,item)" :class="index==on?'on':''" v-for="(item,index) in big_categorys" :key="index" >{{item}}span>
    18.  
    19.                div>
    20.        div>
    21.        <span  @click="show_channel"  class="iconfont arr" :class="short_channel?'icon-xiangxiajiantou':'icon-xiangxiajiantou-copy'"> span>
    22.     div>
    23.       
    24.   div>
    25.     <section  >
    26.       <div class="swiper-container">
    27.  
    28.         <div class="swiper-wrapper">
    29.         <div class="swiper-slide" v-for="(item,index) in lunbo" :key="index">
    30.             <img :src="item" alt="">
    31.         div>
    32.     div>
    33.       <div class="swiper-pagination">div>
    34.  
    35.     div>
    36.     
    37.     <div class="title">
    38.         <div v-for="(item,index) in title" :key="index"><img :src="item.icon" alt=""><span>{{item.name}}span>div>
    39.     div>
    40.  
    41.     
    42.     <ul class="classify" v-if="Mister.kingKongModule">
    43.         <li v-for="(item,index) in Mister.kingKongModule.kingKongList" :key="index" ><img :src="item.picUrl" alt=""><span class="">{{item.text}}span>li>
    44.     ul>
    45.    
    46.     <div class="new_person">
    47.         <img src="https://yanxuan.nosdn.127.net/0f256e29c06d1954a6785b16ec7d3624.gif?imageView&quality=75" alt="">
    48.     div>
    49.     <div class="tuijian">
    50.         <div class="img">
    51.             <img v-lazy="'https://yanxuan.nosdn.127.net/2ce893ef19956ddd2413d87a24e9b2e4.png?quality=75&type=webp&imageView&thumbnail=375x0'" alt="">
    52.             <img v-lazy="'https://yanxuan.nosdn.127.net/9afb2a9449c66f348bf3fa4c3deda38f.png?quality=75&type=webp&imageView&thumbnail=375x0'" alt="">
    53.         div>
    54.         <a href="">
    55.             <img v-lazy="'https://yanxuan.nosdn.127.net/8346ccd16467d54491ee969769bcb21e.png?quality=75&type=webp&imageView&thumbnail=750x0'" alt="">
    56.         a>
    57.     div>
    58.     
    59.     <div class="leimu">
    60.         <h1>类目销量榜h1>
    61.         <div class="paihang">
    62.             <div class="left">
    63.                 <div class="text " >热销榜div>
    64.                 <img v-lazy="'https://yanxuan-item.nosdn.127.net/c40842640f6a1a2509960c2029aca1b8.png?quality=75&type=webp&imageView&thumbnail=200x200'" alt="">
    65.             div>
    66.             <div class="right">
    67.                  <div class="text good">好评榜div>
    68.                 <img v-lazy="'https://yanxuan-item.nosdn.127.net/c40842640f6a1a2509960c2029aca1b8.png?quality=75&type=webp&imageView&thumbnail=200x200'" alt="">
    69.             div>
    70.         div>
    71.         <div class="short_paihang" v-if="Mister.categoryHotSellModule">
    72.             <div class="item" v-show="index>=2" v-for="(item,index) in Mister.categoryHotSellModule.categoryList" :key="index" @click="GoonItem(item)">
    73.                 <p>{{item.categoryName}}p>
    74.                 <img v-lazy="item.picUrl" alt="">
    75.             div>
    76.         div>
    77.     div>
    78.     
    79.  
    80.     <div class="sale">
    81.          <div class="tops">
    82.                      <div class="buy" v-html="isTime">
    83.          
    84.         div>
    85.         <a @click.prevent="$router.replace('/flashsale')" href="" class="more">更多 >a>
    86.          div>
    87.          <ul class="bottom" v-if="Mister.flashSaleModule">
    88.              <li @click="$router.push('/flashsale')" v-for="(item,index) in Mister.flashSaleModule.itemList" :key="index">
    89.                  <img v-lazy="item.picUrl" alt="">
    90.                  <p>
    91.                      <span>￥{{item.activityPrice}}span>
    92.                      <del>￥{{item.originPrice}}del>
    93.                  p>
    94.              li>
    95.              <li>li>
    96.              <li>li>
    97.          ul>
    98.     div>
    99.  
    100.     
    101.     <div class="new_shop">
    102.         <div class="new_top">
    103.             <h2>新品首发h2>
    104.                 <a @click.prevent="$router.replace('/new')" href="" class="more">更多 >a>      
    105.             div>
    106.         <ul class="new_shops">
    107.             <li @click="toBuy(item.id)" v-show="index<6" v-for="(item,index) in Mister.newItemList" :key="index">
    108.                <img v-lazy="item.primaryPicUrl" alt=""> 
    109.                <div class="names">
    110.                    {{item.name}}
    111.                div>
    112.                <div class="prices">
    113.                    ￥{{item.retailPrice}}
    114.                div>
    115.                <div class="huodon" v-if="item.promTag">
    116.                    <span>{{item.promTag}}span>
    117.                div>
    118.             li>
    119.                   
    120.         ul>
    121.     div>
    122. section>
    123.  
    124. div>

    3.2、分类页

     相关代码：

    1. <template>
    2. <div class="wrap">
    3. <Top width="95%">Top>
    4. <section>
    5.     <div class="left">
    6.         <ul class="left_scroll">
    7.             <li @click="TabAlter(item.id,index)" :class="active===index?'active':''" v-for="(item,index) in categoryL1List" :key="index">{{item.name}}li>
    8.  
    9.         ul>
    10.     div>
    11.     <div class="right">
    12.       <keep-alive>
    13.             <Right :categoryGroupLis="categoryGroupLis" 
    14.         :isShowConten="currentCategory.bannerList"
    15.         :categoryGroupList="categoryGroupLis"
    16.         />
    17.       keep-alive>
    18.     div>
    19. section>
    20. div>
    21. template>
    22.  
    23.  
    24.  
    25.  
    26. <script>
    27. import Right from './Category_right/Right'
    28. import {mapState} from 'vuex'
    29. import Top from '../../pages/Top/Top'
    30. export default {
    31. data(){
    32.     return {
    33.       active:-1,
    34.     
    35.     }
    36. }
    37. ,
    38. mounted(){
    39. // 异步请求地址
    40. this.TabAlter(11,0)
    41.  
    42. }
    43. ,    
    44. methods:{
    45. TabAlter(id,index){
    46.     
    47.   
    48.   if(index==this.active)return
    49.    this.active=index
    50.   this.$store.dispatch("GETCATEGORY",id)
    51.     
    52. }
    53. }
    54. ,
    55. computed:{
    56.     ...mapState({
    57.         categoryGroupLis:state=>state.Category.categoryGroupLis,
    58.         categoryL1List:state=>state.Category.categoryL1List,
    59.         currentCategory:state=>state.Category.currentCategory,
    60.         // categoryGroupLis:state=>state.Category.categoryGroupLis
    61.  
    62.     })
    63. }
    64. ,
    65. components:{
    66.     Top,
    67.     Right
    68. }
    69.  
    70. }
    71. script>

    3.3、详情页

     相关代码：

    1. <template>
    2. <div class="wrap">
    3. <Header>Header>
    4. <div class="header">
    5.     <div class="intros">
    6.         <div class="title">
    7.             <img src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
    8.             <span>严选好物 用心生活span>
    9.         div>
    10.         <img class="bg" src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
    11.     div>
    12.     <div class="container">
    13.           <div class="banner" ref="banner">
    14.              <ul class="swipers" v-for="(item,index) in category" :key="index">
    15.                
    16.             <li v-for="(items,indexs) in item" :key="indexs">
    17.                 <img :src="items.picUrl" alt="">
    18.                 <p>{{items.mainTitle}}p>
    19.                 <span>{{items.viceTitle}}span>
    20.             li>
    21.                
    22.         ul>
    23.           div>
    24.           <div class="xianshitiao">
    25.               <span class="ospan">span>
    26.           div>
    27.     div>
    28. div>
    29. <section>
    30.     <ul class="content" v-if="DeserveBuy[0] && DeserveBuy[1]" > 
    31.        <li  v-for="(item,index) in DeserveBuy" :key="index">
    32.  
    33.            <div @click="$router.replace('/deserveContent/'+items.topicId)" class="all_show" v-for="(items,indexs) in item" :key="indexs">
    34.                 <img v-lazy="items.picUrl"  alt="">
    35.             <div class="intro" v-if="items.nickname">
    36.            {{items.title}}
    37.             div>
    38.             <div class="person" v-if="items.nickname">
    39.                 <div class="name" >
    40.                     <img v-lazy="items.avatar"  alt="">
    41.                   {{items.nickname}}
    42.                 div>
    43.                 <div class="numbers">
    44.                         <img v-lazy="'https://yanxuan.nosdn.127.net/5097bc5f2e1eb15f2a32b56895db073a.png'" alt=""><span>83kspan>
    45.                 div>
    46.             div>
    47.              <div class="shows" v-else>
    48.                  <h1>{{items.title}}h1>
    49.                  <h3>{{items.subTitle}}h3>
    50.              div>
    51.            div>
    52.         li>
    53.     ul>
    54. section>
    55. div>
    56. template>
    57. <script>
    58. import {mapState} from 'vuex'
    59. import BetterScroll from 'better-scroll'
    60. import Header from '../../pages/Header/Header'
    61. export default {
    62. data(){
    63.     return {
    64.         page:1,
    65.         isZhixing:false,
    66.     }
    67. },
    68. components:{
    69.     Header
    70. },
    71. computed:{
    72.     ...mapState({
    73.         category:state=>state.Deserve.category,
    74.         DeserveBuy:state=>state.Deserve.DeserveBuy
    75.     })
    76. }
    77. ,
    78. mounted(){
    79.     // 获取导航信息
    80.     this.$store.dispatch("GETDESERVECATE")
    81.     // 请求默认数据
    82.     this.$store.dispatch("GETDETAILS",{page:this.page,size:2})
    83.  
    84. },
    85. watch:{
    86.     category(){
    87.         this.$nextTick(()=>{
    88.             let banner=this.$refs.banner
    89.             let oul=banner.querySelectorAll("ul")
    90.             let oul_width=oul[0].offsetWidth
    91.             banner.style.width=(oul_width)+"px"
    92.             // 滑动
    93.             console.log(oul_width)
    94.             let ospan=document.querySelector(".ospan")
    95.            this.scroll= new BetterScroll(".container",{
    96.                 scrollX:true,
    97.                 click:true,
    98.                 momentum:true
    99.              
    100.             })
    101.  
    102.             // 获取下方滚动条
    103.             this.scroll.on("scrollEnd",(e)=>{
    104.                let distance=Math.abs(e.x)
    105.                if(distance>=300){
    106.                    ospan.style.width="100%"
    107.                }else {
    108.                    ospan.style.width="50%"
    109.                }
    110.                
    111.  
    112.                 
    113.             })
    114.  
    115.         })
    116.     }
    117. ,
    118. DeserveBuy(){
    119.  
    120.     this.$nextTick(()=>{
    121.          this.ajaxDeserve()
    122.     })
    123. }
    124.  
    125. },
    126. methods:{
    127.     ajaxDeserve(){
    128.          console.log(9998)
    129.         let content=document.querySelector(".content")
    130.         // 滚动
    131.         let page=1;
    132.          let documents=document.documentElement || document.body
    133.      
    134.         
    135.          window.addEventListener("scroll",()=>{
    136.               
    137.              if(documents.scrollHeight==documents.scrollTop+documents.clientHeight){
    138.                     if(!this.isZhixing){
    139.                      this.page++
    140.                        this.$store.dispatch("GETDETAILS",{page:this.page,size:2})
    141.                           console.log(this.page)
    142.                           this.isZhixing=true
    143.                     }
    144.                 window.setTimeout(()=>{
    145.                     console.log(225)
    146.                         this.isZhixing=false
    147.                     },1000)
    148.           
    149.             
    150.              }
    151.  
    152.  
    153.          },false)
    154.     
    155.  
    156.  
    157.  
    158.       
    159.     }
    160. },
    161.  
    162. beforeDestroy(){
    163.   window.location.reload()
    164. }
    165. }
    166. script>

    4、代码结构图

    总结

    以上就是本次项目的全部内容，需要交流或者免费获取代码请关注微信公众号：coding加油站，获取

  • 相关阅读:
    N皇后问题详解
    设计模式-外观模式
    基于51单片机的出租车计价器proteus仿真原理图PCB
    阿里P8熬了一个月肝出这份32W字Java面试手册，传到Git上目前star数达到了30K+
    制作自定义版本 kernel 镜像
    NLP 类问题建模方案探索实践
    达梦数据库运维手册-个人笔记
    如何有效取代FTP来帮助企业快速传输大文件
    LeetCode_Array_1004. Max Consecutive Ones III 最大连续1的个数 III【滑动数组】【Java】【中等】
    Jvm与DVM与ART
  • 原文地址：https://blog.csdn.net/pandas23/article/details/126611639