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
    评论
专栏目录
Mall-Server:基于SSH的商城API服务器
05-10
Mall-Server 基于SSH的商城后台API应用 技术栈 Struts 2.5.16 Hibernate 5.0.7 Spring 5.1.7 开发环境 IDEA 2017 数据库 Mysql Maven 使用 Maven 来整合 SSH，详细配置见配置文件 `pom.xml` 使用 Spring 整合了 Struts2 和 Hibernate ，免去了冗余的 Hibernate 配置文件 `hibernate.cfg.xml` 。 Build 使用 Idea 打开项目后，打开项目工程配置，标注 Spring 和 Struts2 的配置文件，然后配置 Tomcat 便可运行（记得配置 Deployment ）
vue3.x vant 实现select效果 多选
qq_24832277的博客
03-13 1710
vue3.x vant 实现select效果
2024年Vue3项目搭建规范(1)，网易严选面试有几轮
最新发布
2301_82244330的博客
05-10 635
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
【VUE】vue程序设计----模仿网易严选
coding加油站
08-30 1280
模仿网易严选，网易严选作业，vue作业，vue，vue模仿网易严选，期末大作业
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文档路...
模仿网易严选(vant)
qq_43619461的博客
02-11 371
vue2+vant2+express 简单使用(模仿网易严选) 地址:https://gitee.com/itengfei/you-163
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 框架仿制今日头条实例的主要目的是为了实践前端页面的开发...
vue+vant移动端入门实现5（仿网易严选）
MCCLS的博客
06-14 1027
1.吸顶--粘性布局sticky 2.Tabber 标签栏,页面跳转 3.footer 标签栏--抽取为单独文件 4.实现fo'o
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框架 点击某行记录显示其详细信息
qq_43542074的博客
09-04 3504
要求的效果： 点击某行记录（cell组件）后，显示这条记录的详细信息。 <!-- 通知部分 --> <van-panel title="通知公告" class="marginTop8"> <div slot="header" class="van-cell van-panel__header "> <div class="van-cel...
【Vue】仿小米商城系统（一）
前端学习博客
05-10 7983
【Vue】仿小米商城系统（一） 文章目录【Vue】仿小米商城系统（一）前言一、项目概述项目介绍商城页面与组件技术栈商城各页面展示商品首页产品站商品详情登录页面：账号 jack 密码 jack订单确认购物车页面订单支付页面支付宝支付微信支付订单列表项目源码：二、项目开发前准备跨域解决jsonpnginx项目目录结构Storage封装接口错误拦截Mock设置集成Mock API（本地集成Mock.js） 前言 本项目是基于Vue全家桶的仿小米商城系统，系列笔记(已完结)如下👇🏻 【Vue】仿小米商城系统（一）
vue显示地区的组件以及使用方法
就是个div
12-06 579
vant的treeSelect使用
Vue路由传参
Xmengyan的博客
09-02 176
一.使用query进行传参 query方式，必须定义path属性，通过query传参，然后在目标页面通过this.$route.query来接受参数。 1.绑定一个点击@click事件并把id传过去 <van-card v-for="item in appIndex_list" :key="item.teacher_id" @click="goList(item.id)" /> 也可以使用router-link标签 &...
用vue编程仿网易云音乐播放器
07-14
使用Vue编程可以很好地实现一个仿网易云音乐播放器。首先，你需要安装Vue及相关依赖，然后创建一个Vue项目。 接下来，你可以开始设计和开发播放器的各个组件，如播放列表、歌曲详情、控制栏等。可以使用Vue组件化的...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值