vue之仿网易严选详解

在这里插入图片描述



前言

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 然后导入页面
  • 7
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值