vue之仿网易严选详解

最新推荐文章于 2024-05-10 23:33:41 发布
最新推荐文章于 2024-05-10 23:33:41 发布
阅读量2.3k 收藏 31
点赞数 7
分类专栏： html less vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liaojuajun/article/details/108429111
版权

在这里插入图片描述

文章目录

前言

1、使用到的技术

1-vant ui框架
2-less-css预编译语言
3-vue
4-vue router
5-vuex
6-axios
7-javascript
8-html5
9-css3
10-vue-cli
11-webpack

2、使用到的软件

1.visua lstudio code，官网https://code.visualstudio.com/
2.navicat

3、使用代码步骤

代码地址 链接：https://pan.baidu.com/s/1xVw9nVNf-Hg-N3S_3IoNvA 提取码：f786

1、用navicat创建一个新的数据库

在这里插入图片描述

导入数据库，运行SQL文件在这里插入图片描述
在这里插入图片描述
导入mall-server文件下的nideshop.sql文件在这里插入图片描述
导入成功后就会出现这些表（可能要等待一点时间）在这里插入图片描述
** 2、使用visua lstudio code打开文件**

在这里插入图片描述

打开红线路径的文件，database是数据库名称、user，password是数据库账户和密码（需要改），prefix是表的前缀
在这里插入图片描述
把文件mall和mall-server,分别在终端打开。打开后输入npm install安装两个文件都要安装。（还需要安装vue依赖才能使用）在这里插入图片描述
安装成功后，在mall-server输入npm start，在mall输入npm run serve（要是报错看下面）
在这里插入图片描述

在这里插入图片描述

如果报错Module build failed (from ./node_modules/babel-loader/lib/index.js)
意思是babel版本冲突
安装npm install @babel/core @babel/preset-env

再用浏览器打开这个地址

在这里插入图片描述

浏览器打开后

在这里插入图片描述

打开文件mall\src\views的Home.vue

<script>
//导入接口
import axios from 'axios'
import api from '../assets/config/api'
</script>
接口地址，mall/src/assets/config/api.js

在这里插入图片描述

ajax请求，返回后端数据库的数据

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

一、首页

1、Search 搜索

打开vant框架网站，基本用法
https://vant-contrib.gitee.io/vant/#/zh-CN/search
在这里插入图片描述
mall\src\views的Home.vue

//Home.vue
<van-search placeholder="商品搜索 共239万款好物" input-align='center' v-model="searchData" />
//导入vant
import Vue from 'vue';
import {
    Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
   
  name: 'home',
 data:function(){
   
    return {
   
    //设置v-mode的值
     searchData:"", 
     data:{
   },    
    }
  },
 }

2、Swipe 轮播

https://vant-contrib.gitee.io/vant/#/zh-CN/swipe
在这里插入图片描述

//Home.vue
	<van-swipe :autoplay="3000" :width="375" :height="200">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="swiperimg" v-lazy="image.image_url" />
      </van-swipe-item>
    </van-swipe>

 <scrpet>
 export default {
   
 data:function(){
   
    return {
   
      searchData:"",
      data:{
   },
    }
  },
  computed: {
   
    images:function(){
   
//判断ajax的data.banner是否为数组，是的话返回数组，不是的话返回空数组
      if(typeof this.data.banner=='object'){
   
        return this.data.banner
      }else{
   
        return []
      }
    },
   }
   }
 </scrpet>
 <style lang="less">
  #home{
   
    .swiperimg{
   
      width: 375px;
      height: 200px;
    }
  	}
<style>

在这里插入图片描述
3、5个图标

Grid 宫格https://vant-contrib.gitee.io/vant/#/zh-CN/grid

<van-grid :column-num='5'>
      <van-grid-item v-for="(item,index) in channel"  :key="index" :icon="item.icon_url" :text="item.name" />
    </van-grid>
     <script>
  export default {
   
     name: 'home',
  data:function(){
   
    return {
   
      searchData:"",
      data:{
   },
    }
    computed: {
   
    channel:function(){
   
    //判断ajax的data.channel是否为数组，是的话返回数组，不是的话返回空数组
      if(typeof this.data.channel=='object'){
   
        return this.data.channel
      }else{
   
        return []
      }
    },
    }
   }
    </script>

在这里插入图片描述
4、品牌制造商直供

图片懒加载
https://vant-contrib.gitee.io/vant/#/zh-CN/swipe

懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

在这里插入图片描述

<div class="brandlist">
      <!-- Panel 面板 -->
      <van-panel title="品牌制造商直供">
        <van-grid  :column-num="2">
          <van-grid-item v-for="(item1,index1) in brandList" :key="index1">
            <van-image fit="cover" lazy-load :src="item1.new_pic_url" />
            <h4 class="title">{
   {
   item1.name}}</h4>
            <p class="price">{
   {
   item1.floor_price}}元起</p>
          </van-grid-item>
        </van-grid>
      </van-panel>
    </div>
    <script>
  export default {
   
     name: 'home',
  data:function(){
   
    return {
   
      searchData:"",
      data:{
   },
    }
    computed: {
   
    brandList:function(){
   
    //判断ajax的data.brandList是否为数组，是的话返回数组，不是的话返回空数组
      if(typeof this.data.brandList=='object'){
   
        return this.data.brandList
      }else{
       
        return []
      }
    },
    }
   }
    </script>
    <style lang="less">
    .brandlist{
   
      .van-grid-item__content{
   
        padding: 0;
      }
      .van-image{
   
        border: 1px solid #fff;
      }
      .title{
   
        position: absolute;
        top: 20px;
        left: 10px;
       
      }
      .price{
   
        position: absolute;
        top: 40px;
        left: 10px;
        font-size: 14px;
        color:#999 ;
      }
      </style>

在这里插入图片描述5、新品首发

   <!-- 新品首发 -->
    <div class="newlist">
      <van-panel title="品牌制造商直供">
        <van-grid  :column-num="2">
          <van-grid-item v-for="(item2,index2) in newGoodsList" :key="index2">
            <van-image fit="cover" lazy-load :src="item2.list_pic_url" />
            <h4 class="title" >{
   {
   item2.name}}</h4>
            <p class="price">{
   {
   item2.retail_price}}元起</p>
           </van-grid-item>
          
       </van-grid>
      </van-panel>
    </div>
 <script>
   export default {
   
     name: 'home',
  data:function(){
   
    return {
   
      searchData:"",
      data:{
   },
    }
    computed: {
   
    newGoodsList:function(){
   
        //判断ajax的data.newGoodsList是否为数组，是的话返回数组，不是的话返回空数组
      if(typeof this.data.newGoodsList=='object'){
   
        return this.data.newGoodsList
      }else{
   
        return []
      }
    },
    }
   }
   <script>
   <style>
    .newlist{
   
      
      .title{
   
        
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .price{
   
        
        font-size: 14px;
        color:#999 ;
      }
    }![在这里插入图片描述](https://img-blog.csdnimg.cn/20200911153220161.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW9qdWFqdW4=,size_16,color_FFFFFF,t_70#pic_center)

   </style>

在这里插入图片描述
6、人气面板
Card 卡片
https://vant-contrib.gitee.io/vant/#/zh-CN/card
在这里插入图片描述

<div class="hotlist">
      <van-panel title="人气推荐">
        <van-card v-for="(item3,index3) in hotGoodsList" :key="index3"
          :price="item3.retail_price"
          :desc="item3.goods_brief"
          :title="item3.name"
          :thumb="item3.list_pic_url"
        />
      </van-panel>
    </div>
    <script>
   export default {
   
     name: 'home',
  data:function(){
   
    return {
   
      searchData:"",
      data:{
   },
    }
    computed: {
   
   hotGoodsList:function(){
   
   //判断ajax的data.hotGoodsList=是否为数组，是的话返回数组，不是的话返回空数组
      if(typeof this.data.hotGoodsList=='object'){
   
        return this.data.hotGoodsList
      }else{
   
        return []
      }
    },
  },
    }
   }
   <script>
   <style>
    .hotlist{
   
      .van-card__content{
   
        justify-content: center;
        text-align:left;
      }
      .van-card__title{
   
        font-weight: 900;
        color: #333;
        font-size: 14px;
        padding: 5px 0;
      }
      .van-card__price{
   
        color: red;
      }
    }
 </style>

在这里插入图片描述

二、分类列表

1、创建分类列表的页面

//mall/src/router/index.js
{
   
    path:'/category',
    name:'category',
    component:Category

  },
在mall/scr/views，创建一个文件category.vue 然后导入页面
最低0.47元/天 解锁文章
liaojuajun
关注
  • 7
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vue3.x vant 实现select效果 多选
qq_24832277的博客
03-13 1711
vue3.x vant 实现select效果
python4行代码将json转为excel_使用Python Pandas模块操作Excel数据
weixin_39721009的博客
11-22 1195
如何示例 Excel 数据我们以Python Pandas数据加载类型表格为例，演示Python Pandas Excel操作。本文将使用Pandas中 read_excel 函数来读取 Excel 文件，并存储成DataFrame格式，本文将介绍如何使用 iloc 、loc 方法获取 DataFrame中对应的数据，实现Execl数据的获取。read_excel的主要参数io: excel文档路...
2024年Vue3项目搭建规范(1)，网易严选面试有几轮
最新发布
2301_82244330的博客
05-10 635
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
vue+vant移动端入门实现3（仿网易严选）
MCCLS的博客
06-13 427
效果图： 实现这部分内容： （1） <!--商品列表--> <div class='goodsListDiv'> <h1> <label>新品首发</label> <a href='#'>更多></a> </h1> </div> .goodsListDiv{ height:1.
vue+vant移动端入门实现2（仿网易严选）
MCCLS的博客
06-13 855
效果图：
【Vue】仿小米商城系统（一）
前端学习博客
05-10 7984
【Vue】仿小米商城系统（一） 文章目录【Vue】仿小米商城系统（一）前言一、项目概述项目介绍商城页面与组件技术栈商城各页面展示商品首页产品站商品详情登录页面：账号 jack 密码 jack订单确认购物车页面订单支付页面支付宝支付微信支付订单列表项目源码：二、项目开发前准备跨域解决jsonpnginx项目目录结构Storage封装接口错误拦截Mock设置集成Mock API（本地集成Mock.js） 前言 本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻 【Vue】仿小米商城系统（一）
Vue全家桶仿网易优选APP商城源码
01-07
Vue全家桶仿网易优选APP商城源码是一款基于Vue.js框架的电商应用开发示例，它旨在帮助开发者了解和学习如何使用Vue.js及相关生态工具来构建一个功能完整的移动应用。在这个项目中，Vue全家桶通常指的是Vue.js核心库...
vue版网易严选体验网易严选购物流程
08-10
在"vue版网易严选体验网易严选购物流程"这个项目中，我们将深入探讨如何利用Vue.js技术栈构建一个类似网易严选的购物流程。 首先，我们要理解Vue.js的基础架构。Vue.js采用MVVM（Model-View-ViewModel）模式，通过...
仿网易云音乐平台（vue项目）
06-30
在"仿网易云音乐平台（vue项目）"中，Vue.js 被用于构建用户界面，实现了音乐播放器的各项功能。Vue 的核心特性包括虚拟DOM、响应式数据绑定、指令系统以及组件化开发，使得开发者能够高效地构建复杂应用。 【HTML...
基于JSP+Vue的仿网易云音乐网站
07-15
在本项目中，我们主要探讨的是一个基于JSP和Vue技术构建的仿网易云音乐网站。这个实训项目旨在让学生掌握Web前端开发与后端服务交互的基本技能，通过模仿实际应用来提升他们的实战经验。下面将详细阐述这个项目涉及...
Vue仿今日头条实例详解
08-28
Vue仿今日头条实例详解 本文主要介绍了使用 Vue 框架仿制今日头条实例的详细过程，并对相关代码进行了解释，对此有兴趣的朋友可以参考。 前言 使用 Vue 框架仿制今日头条实例的主要目的是为了实践前端页面的开发...
vue3_zhihu:基于Vue3仿知乎
03-25
智虎 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue显示地区的组件以及使用方法
就是个div
12-06 579
vant的treeSelect使用
vant实现类似网易严选的商品三级分类（基本框架）
CHERRYGGO的博客
05-20 1880
想要达成网易严选分类页的三级分类效果 在组件中 template： <template> <div class="main"> <van-sidebar v-model="classifyKey"> <!-- 遍历渲染主类 --> <van-sidebar-item v-for="(item, i) in classify" :key="i" @click="
vue仿今日头条_Vue实战篇（Vue仿今日头条）
weixin_39560245的博客
12-19 342
前言vue也弄了一段时间了, 前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了因为也是纯粹的写写前端页面,所以数据方面用的是mock.js,为了真实的模拟请求,可以直接在账号: vue-toutiao密码： 123456如果你想修改接口，请copy一份在修改技术栈：vue + webpack + vuex + axios结构：build: ...
JAVA基础——接口（全网最详细教程）
忆水思寒的博客
07-20 4014
                                   Java基础——接口     接口概念     官方解释：Java接口是一系列方法的声明，是一些方...
vue中使用vant中TreeSelect 分类选择组件
热门推荐
月落星河
12-31 2万+
在vue中使用vant中TreeSelect的组件 中文文档：TreeSelect 分类选择 效果展示： //先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分： <van-popup v-model="policeShow" ...
vue的swiper组件使用，获取当前滑动位置activeIndex
风烟
04-26 1万+
使用vue版的swiper组件vue-awesome-swiper，这个是最好用的，并且api和swiper基本一致。 使用的时候需要拿到滑动之后当前的index。 要获取activeIndex这个值。 错误写法 官方文档这么写有问题，我在全局引入的时候这样根本拿不到。 正确写法 this.$refs.mySwiper.swiper 这样写才可以。 然后监听@slideChange="slid...
用vue编程仿网易云音乐播放器
07-14
当然可以！使用Vue编程可以很好地实现一个仿网易云音乐播放器。首先，你需要安装Vue及相关依赖，然后创建一个Vue项目。 接下来，你可以开始设计和开发播放器的各个组件，如播放列表、歌曲详情、控制栏等。可以使用Vue组件化的方式来构建这些组件，并在主页面中引入和使用它们。 对于数据的获取，你可以通过调用网易云音乐提供的API来获取歌曲列表、歌曲详情等信息。可以使用Vue的生命周期钩子函数来在合适的时机进行数据请求和处理。 在播放器控制方面，你可以使用Vue的数据绑定和事件监听来实现播放、暂停、切歌等功能。同时，你还可以使用Vue的计算属性来实现一些逻辑，比如显示当前播放时间、进度条等。 最后，为了实现音乐的播放，你可以使用HTML5提供的audio标签，并通过Vue的指令绑定来控制音频的播放和暂停。 当然，以上只是一个简单的示例，你可以根据自己的需求和想法来扩展和完善播放器的功能。希望对你有帮助！如果还有其他问题，请随时提问。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值