• vue+element纯手工完美模拟实现小米有品网站

    目录

    一、预览

    二、效果图对比

    1.官方效果截图：

     2.作者实现的demo效果图：

    三、项目细节说明

    1.项目结构、设计说明

    3.详情、购物车等模拟数据交互

    四、总结

    一、预览

    小米有品官网：小米有品

     本作品demo预览地址：点击预览

    二、效果图对比

    1.官方效果截图：

     2.作者实现的demo效果图：

    首页：

     上新精选：

    商品详情：

     购物车：

     商品搜索：

     

     

     

    登录、注册：

     

     

     

     

     

    三、项目细节说明

    1.项目结构、设计说明

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

    npm install
    npm run dev（当然命令可以修改为npm run serve，没啥区别）
    结构如下截图，项目已经集成和实现了需要请求后端接口的一切功能，所以无须花费精力去考虑前端如何去对接后端和接口，可以把一切精力放在实现前端界面设计上来。

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

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

    路由在router目录中，全局布局公用样式在styles，比如整个项目框架左右空间布局，最小宽度等。

    路由权限也是很重要的一个功能，为permission.js，所有页面跳转都会经过其拦截，有人问，路由权限有什么用，好说，比如订单页面或个人中心页面吧，肯定是需要登录才能访问的，首页却是无需登录即可访问的，那么就可以在permission.js里面获取登录token，有token即表示已经登录，可以访问订单或个人中心页面，否则跳转登录页等。
     

     项目数据已经分离出来，作为单独json文件单独存放，每个商品id唯一。

    如图所示：

    原始数据代码：

    1. {
    2.   "goodsListNew-des":"注释-以下是：上新精选",
    3.   "goodsListNew":[
    4.     {
    5.       "id":1,
    6.       "name":"小米13 Pro",
    7.       "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质",
    8.       "price":4999,
    9.       "originalPrice":5999,
    10.       "count":0,
    11.       "img":"/img/product1.jpeg",
    12.       "imgList":[
    13.         "/img/product1_1.jpg",
    14.         "/img/product1_2.jpg",
    15.         "/img/product1_3.jpg",
    16.         "/img/product1_4.jpg"
    17.       ],
    18.       "detailImgList":[
    19.         "/img/product1_detail1.jpeg",
    20.         "/img/product1_detail2.jpeg",
    21.         "/img/product1_detail3.jpeg",
    22.         "/img/product1_detail4.jpeg"
    23.       ]
    24.     },
    25.     {
    26.       "id":2,
    27.       "name":"Xiaomi 13",
    28.       "title":"Xiaomi 13 黑色 8GB+128GB",
    29.       "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器",
    30.       "price":3999,
    31.       "originalPrice":4999,
    32.       "count":0,
    33.       "img":"/img/product2.jpeg",
    34.       "imgList":[
    35.         "/img/product2_1.jpg",
    36.         "/img/product2_2.jpg",
    37.         "/img/product2_3.jpg",
    38.         "/img/product2_4.jpg"
    39.       ],
    40.       "detailImgList":[
    41.         "/img/product2_detail1.jpeg",
    42.         "/img/product2_detail2.jpeg",
    43.         "/img/product2_detail3.jpeg",
    44.         "/img/product2_detail4.jpeg"
    45.       ]
    46.     },
    47.     {
    48.       "id":3,
    49.       "name":"Redmi Watch 3",
    50.       "title":"Redmi Watch 3 典雅黑",
    51.       "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话",
    52.       "price":479,
    53.       "originalPrice":579,
    54.       "count":0,
    55.       "img":"/img/product3.jpeg",
    56.       "imgList":[
    57.         "/img/product3_1.jpg",
    58.         "/img/product3_2.jpg",
    59.         "/img/product3_3.jpg",
    60.         "/img/product3_4.jpg"
    61.       ],
    62.       "detailImgList":[
    63.         "/img/product3_detail1.jpeg",
    64.         "/img/product3_detail2.jpeg",
    65.         "/img/product3_detail3.jpeg",
    66.         "/img/product3_detail4.jpeg"
    67.       ]
    68.     },
    69.     {
    70.       "id":4,
    71.       "name":"智能门锁E10",
    72.       "title":"Xiaomi智能门锁 E10 黑色",
    73.       "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体",
    74.       "price":799,
    75.       "originalPrice":999,
    76.       "count":0,
    77.       "img":"/img/product4.jpeg",
    78.       "imgList":[
    79.         "/img/product4_1.jpg",
    80.         "/img/product4_2.jpg",
    81.         "/img/product4_3.jpg",
    82.         "/img/product4_4.jpg"
    83.       ],
    84.       "detailImgList":[
    85.         "/img/product4_detail1.jpeg",
    86.         "/img/product4_detail2.jpeg",
    87.         "/img/product4_detail3.jpeg",
    88.         "/img/product4_detail4.jpeg"
    89.       ]
    90.     },
    91.     {
    92.       "id":5,
    93.       "name":"小米13 Pro",
    94.       "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质",
    95.       "price":4999,
    96.       "originalPrice":5999,
    97.       "count":0,
    98.       "img":"/img/product1.jpeg",
    99.       "imgList":[
    100.         "/img/product1_1.jpg",
    101.         "/img/product1_2.jpg",
    102.         "/img/product1_3.jpg",
    103.         "/img/product1_4.jpg"
    104.       ],
    105.       "detailImgList":[
    106.         "/img/product1_detail1.jpeg",
    107.         "/img/product1_detail2.jpeg",
    108.         "/img/product1_detail3.jpeg",
    109.         "/img/product1_detail4.jpeg"
    110.       ]
    111.     },
    112.     {
    113.       "id":6,
    114.       "name":"Xiaomi 13",
    115.       "title":"Xiaomi 13 黑色 8GB+128GB",
    116.       "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器",
    117.       "price":3999,
    118.       "originalPrice":4999,
    119.       "count":0,
    120.       "img":"/img/product2.jpeg",
    121.       "imgList":[
    122.         "/img/product2_1.jpg",
    123.         "/img/product2_2.jpg",
    124.         "/img/product2_3.jpg",
    125.         "/img/product2_4.jpg"
    126.       ],
    127.       "detailImgList":[
    128.         "/img/product2_detail1.jpeg",
    129.         "/img/product2_detail2.jpeg",
    130.         "/img/product2_detail3.jpeg",
    131.         "/img/product2_detail4.jpeg"
    132.       ]
    133.     },
    134.     {
    135.       "id":7,
    136.       "name":"Redmi Watch 3",
    137.       "title":"Redmi Watch 3 典雅黑",
    138.       "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话",
    139.       "price":479,
    140.       "originalPrice":579,
    141.       "count":0,
    142.       "img":"/img/product3.jpeg",
    143.       "imgList":[
    144.         "/img/product3_1.jpg",
    145.         "/img/product3_2.jpg",
    146.         "/img/product3_3.jpg",
    147.         "/img/product3_4.jpg"
    148.       ],
    149.       "detailImgList":[
    150.         "/img/product3_detail1.jpeg",
    151.         "/img/product3_detail2.jpeg",
    152.         "/img/product3_detail3.jpeg",
    153.         "/img/product3_detail4.jpeg"
    154.       ]
    155.     },
    156.     {
    157.       "id":8,
    158.       "name":"智能门锁E10",
    159.       "title":"Xiaomi智能门锁 E10 黑色",
    160.       "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体",
    161.       "price":799,
    162.       "originalPrice":999,
    163.       "count":0,
    164.       "img":"/img/product4.jpeg",
    165.       "imgList":[
    166.         "/img/product4_1.jpg",
    167.         "/img/product4_2.jpg",
    168.         "/img/product4_3.jpg",
    169.         "/img/product4_4.jpg"
    170.       ],
    171.       "detailImgList":[
    172.         "/img/product4_detail1.jpeg",
    173.         "/img/product4_detail2.jpeg",
    174.         "/img/product4_detail3.jpeg",
    175.         "/img/product4_detail4.jpeg"
    176.       ]
    177.     }
    178.   ],
    179.   "goodsListKill-des":"注释-以下是：有品秒杀",
    180.   "goodsListKill":[
    181.     {
    182.       "id":1005,
    183.       "name":"小米13 Pro",
    184.       "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质",
    185.       "price":4999,
    186.       "originalPrice":5999,
    187.       "count":0,
    188.       "img":"/img/product1.jpeg",
    189.       "imgList":[
    190.         "/img/product1_1.jpg",
    191.         "/img/product1_2.jpg",
    192.         "/img/product1_3.jpg",
    193.         "/img/product1_4.jpg"
    194.       ],
    195.       "detailImgList":[
    196.         "/img/product1_detail1.jpeg",
    197.         "/img/product1_detail2.jpeg",
    198.         "/img/product1_detail3.jpeg",
    199.         "/img/product1_detail4.jpeg"
    200.       ]
    201.     },
    202.     {
    203.       "id":1006,
    204.       "name":"Xiaomi 13",
    205.       "title":"Xiaomi 13 黑色 8GB+128GB",
    206.       "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器",
    207.       "price":3999,
    208.       "originalPrice":4999,
    209.       "count":0,
    210.       "img":"/img/product2.jpeg",
    211.       "imgList":[
    212.         "/img/product2_1.jpg",
    213.         "/img/product2_2.jpg",
    214.         "/img/product2_3.jpg",
    215.         "/img/product2_4.jpg"
    216.       ],
    217.       "detailImgList":[
    218.         "/img/product2_detail1.jpeg",
    219.         "/img/product2_detail2.jpeg",
    220.         "/img/product2_detail3.jpeg",
    221.         "/img/product2_detail4.jpeg"
    222.       ]
    223.     },
    224.     {
    225.       "id":1007,
    226.       "name":"Redmi Watch 3",
    227.       "title":"Redmi Watch 3 典雅黑",
    228.       "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话",
    229.       "price":479,
    230.       "originalPrice":579,
    231.       "count":0,
    232.       "img":"/img/product3.jpeg",
    233.       "imgList":[
    234.         "/img/product3_1.jpg",
    235.         "/img/product3_2.jpg",
    236.         "/img/product3_3.jpg",
    237.         "/img/product3_4.jpg"
    238.       ],
    239.       "detailImgList":[
    240.         "/img/product3_detail1.jpeg",
    241.         "/img/product3_detail2.jpeg",
    242.         "/img/product3_detail3.jpeg",
    243.         "/img/product3_detail4.jpeg"
    244.       ]
    245.     },
    246.     {
    247.       "id":1008,
    248.       "name":"智能门锁E10",
    249.       "title":"Xiaomi智能门锁 E10 黑色",
    250.       "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体",
    251.       "price":799,
    252.       "originalPrice":999,
    253.       "count":0,
    254.       "img":"/img/product4.jpeg",
    255.       "imgList":[
    256.         "/img/product4_1.jpg",
    257.         "/img/product4_2.jpg",
    258.         "/img/product4_3.jpg",
    259.         "/img/product4_4.jpg"
    260.       ],
    261.       "detailImgList":[
    262.         "/img/product4_detail1.jpeg",
    263.         "/img/product4_detail2.jpeg",
    264.         "/img/product4_detail3.jpeg",
    265.         "/img/product4_detail4.jpeg"
    266.       ]
    267.     },
    268.     {
    269.       "id":1009,
    270.       "name":"小米13 Pro",
    271.       "title":"Xiaomi 13 Pro 陶瓷黑 8GB+128GB',subTitle:'徕卡专业光学镜头｜徕卡原生双画质",
    272.       "price":4999,
    273.       "originalPrice":5999,
    274.       "count":0,
    275.       "img":"/img/product1.jpeg",
    276.       "imgList":[
    277.         "/img/product1_1.jpg",
    278.         "/img/product1_2.jpg",
    279.         "/img/product1_3.jpg",
    280.         "/img/product1_4.jpg"
    281.       ],
    282.       "detailImgList":[
    283.         "/img/product1_detail1.jpeg",
    284.         "/img/product1_detail2.jpeg",
    285.         "/img/product1_detail3.jpeg",
    286.         "/img/product1_detail4.jpeg"
    287.       ]
    288.     },
    289.     {
    290.       "id":1010,
    291.       "name":"Xiaomi 13",
    292.       "title":"Xiaomi 13 黑色 8GB+128GB",
    293.       "subTitle":"徕卡75mm长焦镜头｜第二代 骁龙8旗舰处理器",
    294.       "price":3999,
    295.       "originalPrice":4999,
    296.       "count":0,
    297.       "img":"/img/product2.jpeg",
    298.       "imgList":[
    299.         "/img/product2_1.jpg",
    300.         "/img/product2_2.jpg",
    301.         "/img/product2_3.jpg",
    302.         "/img/product2_4.jpg"
    303.       ],
    304.       "detailImgList":[
    305.         "/img/product2_detail1.jpeg",
    306.         "/img/product2_detail2.jpeg",
    307.         "/img/product2_detail3.jpeg",
    308.         "/img/product2_detail4.jpeg"
    309.       ]
    310.     },
    311.     {
    312.       "id":1011,
    313.       "name":"Redmi Watch 3",
    314.       "title":"Redmi Watch 3 典雅黑",
    315.       "subTitle":"1.75 AMOLED彩显大屏 ，蓝牙语音通话",
    316.       "price":479,
    317.       "originalPrice":579,
    318.       "count":0,
    319.       "img":"/img/product3.jpeg",
    320.       "imgList":[
    321.         "/img/product3_1.jpg",
    322.         "/img/product3_2.jpg",
    323.         "/img/product3_3.jpg",
    324.         "/img/product3_4.jpg"
    325.       ],
    326.       "detailImgList":[
    327.         "/img/product3_detail1.jpeg",
    328.         "/img/product3_detail2.jpeg",
    329.         "/img/product3_detail3.jpeg",
    330.         "/img/product3_detail4.jpeg"
    331.       ]
    332.     },
    333.     {
    334.       "id":1012,
    335.       "name":"智能门锁E10",
    336.       "title":"Xiaomi智能门锁 E10 黑色",
    337.       "subTitle":"告别钥匙，多种开锁方式，直插式C级锁芯，三防智能锁体",
    338.       "price":799,
    339.       "originalPrice":999,
    340.       "count":0,
    341.       "img":"/img/product4.jpeg",
    342.       "imgList":[
    343.         "/img/product4_1.jpg",
    344.         "/img/product4_2.jpg",
    345.         "/img/product4_3.jpg",
    346.         "/img/product4_4.jpg"
    347.       ],
    348.       "detailImgList":[
    349.         "/img/product4_detail1.jpeg",
    350.         "/img/product4_detail2.jpeg",
    351.         "/img/product4_detail3.jpeg",
    352.         "/img/product4_detail4.jpeg"
    353.       ]
    354.     }
    355.   ]
    356. }

     2.路由配置源码：

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import Layout from '@/page/index/index'
    4.  
    5. Vue.use(Router)
    6.  
    7. export default new Router({
    8.   routes: [
    9.     {
    10.       path: '/index',
    11.       component: Layout,
    12.       children: [{
    13.         path: '',
    14.         name: '主页',
    15.         component: () =>
    16.           import( /* webpackChunkName: "views" */ '@/views/home/index')
    17.       }]
    18.     },
    19.     {
    20.       path: '/',
    21.       name: '主页',
    22.       redirect: '/index'
    23.     },
    24.     {
    25.       path: '/newSelection',
    26.       component: Layout,
    27.       children: [{
    28.         path: '',
    29.         name: '上新精选',
    30.         component: () =>
    31.           import( /* webpackChunkName: "views" */ '@/views/new_selection/index')
    32.       }]
    33.     },
    34.     {
    35.       path: '/goodsDetails',
    36.       component: Layout,
    37.       children: [{
    38.         path: '',
    39.         name: '商品详情',
    40.         component: () =>
    41.           import( /* webpackChunkName: "views" */ '@/views/product_detail/index')
    42.       }]
    43.     },
    44.     {
    45.       path: '/myCar',
    46.       component: Layout,
    47.       children: [{
    48.         path: '',
    49.         name: '我的购物车',
    50.         component: () =>
    51.           import( /* webpackChunkName: "views" */ '@/views/car/index')
    52.       }]
    53.     },
    54.     {
    55.       path: '/login',
    56.       name: '登录页',
    57.       component: () =>
    58.         import( /* webpackChunkName: "page" */ '@/page/login/index'),
    59.     },
    60.   ]
    61. })

    3.详情、购物车等模拟数据交互

    购物车 脚本事件处理源码：

    四、总结

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

    关注作者，及时了解更多好项目！

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

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

    其他作品集合：

    1.    《vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网》     
    2. 《vue实现功能完整的购物商城，商品零食、电商通用商城》
    3. 《vue+element实现蔬菜、水果、电商商城》
    4. 《vue+element简单实现电商商城网站，模仿小米电商商城》
    5. 《vue实现美观大方的动漫、cos、帖子类型网站》
    6. 《vue实现好看的相册、图片网站》
    7. 《高度仿PC版《微信读书》，好看的小说、读书网站》
    8. 《vue+element实现非常好看的鲜花网站商城，页面完整，样式美观》
    9. 《vue+elementui+springboot前后端分离实现通用商城管理后台》
    10. 《微信小程序日记、微信小程序个人空间、个人日记》
    11. 《vue+element模仿腾讯视频电影网站》
    12. 《vue+element高度仿照QQ音乐，完美实现PC端QQ音乐》
    13. 《vue+element详细完整实现个人博客、个人网站》
    14. 《vue+elementui+springboot前后端分离实现学校帖子网站，学校大作业》
    15. 《vue+elementui实现U袋网-完整版》
    16. 《vue+element+electron仿微信实现》
    17. 《vue+element模仿电商商城，前后端分离实现，下单微信扫码支付》
    18. 《electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏》
    19. 《微信小程序仿唯聚时代，微信小程序商城》
    20. 《jquery+bootstrap完整丰富样式开发框架源码，各种现成样式简单易用》
    21. 《html+css响应式旅游主题网站模板，旅游网站，企业文化新闻类网站》
    22. 《css+html各种动态、动画、3D相册等7件套》
    23. 《仿华为电商商城，官网，华为超级新品日demo,大屏霸气且简洁》
    24. 《vue+element简单实现商城网站首页，模仿电商商城》
    25. 《vue+elementui实现非常好看的博客、网站首页，网站模板》
    26. 《elementui+vue实现经典管理系统布局框架，拿来即用》
    27. 《简系统登录页模板html+vue+elementui》
    28. 《vue+elementui完美实现博客、网站、个人网站，高仿“张凯博客”》
    29. 《vue+elementui完美实现后台管理系统的左、右、顶部菜单布局》
    30. 《html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐》
    31. 《后端使用springboot+maven+shiro+mybatis+mysql，前端使用H-ui.admin_v3.1.3.1，快速实现管理后台功能》
    32. 《springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码》
    33. 《html+css实现好友列表，类似QQ群聊成员列表》
  • 相关阅读:
    前端项目中，强缓存和协商缓存的配置
    【C语言】指针传参引发的相关问题
    [减脂期食谱] 自制千岛酱
    matlab循环执行开始之前，怎样在不知道数组大小的情况下预先分配一个数据，以提高循环运行速度？
    互联网摸鱼日报（2022-11-28）
    艾美捷ICT FLICA天冬氨酸蛋白酶（Caspase）活性检测试剂盒说明书
    Python——读取MySQL数据并导出到Excel
    Sklearn基本算法
    Golang:反射机制reflect
    虚拟机磁盘扩容及重新分区方法
  • 原文地址：https://blog.csdn.net/lucky_fang/article/details/130852103