elf
/
elf-shop-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'add'

Browse Source
master
ewall 7 years ago
parent 6c0f946abc
commit 7ad1ee8218
3 changed files with 35 additions and 142 deletions
Show Stats Download Patch File Download Diff File

78
README.md
Unescape Escape View File

@ -1,77 +1 @@
# 手把手教你用vue+node+mongodb搭建一个小商城
# 分支说明
- chapter3 什么是动态路由
- chapter4 什么是嵌套路由
- chapter5 什么是编程式路由
- chapter6 什么是路由和命名视图
- chapter7 reset.css的引入及1px边框问题解决
- chapter8 手机适配问题之rem和lib-flexible
- chapter9 阿里巴巴矢量图库icon-font的运用
- chapter10 less的引用及公共变量的抽离
- chapter11 组件入门及写个首页头部组件
- chapter12 vue-awsome-swiper与轮播图组件
- chapter13 优化轮播图组件与vue深度处理器
- chapter14 商品推荐等模块及flex布局
- chapter15 axios的使用与数据的mock（1）
- chapter16 axios的使用与数据的mock（2）
- chapter17 将mock数据渲染到组件
- chapter18 首页图片懒加载及better-scroll的运用
### 前期准备
- [git的学习](https://www.jianshu.com/p/6deca2cfc37a)
- [用vue-cli脚手架搭建一个新的vue项目](https://www.jianshu.com/p/0b91e9a05694)
### v-router的讲解
- [什么是动态路由](https://www.jianshu.com/p/f499d9f64958)
- [什么是嵌套路由](https://www.jianshu.com/p/3036137769da)
- [什么是编程式路由](https://www.jianshu.com/p/81ed5a90bb10)
- [什么是路由和命名视图](https://www.jianshu.com/p/004b73f3f589)
### 项目初始化
- [chapter7 reset.css的引入及1px边框问题解决](https://www.jianshu.com/p/03172908d344)
- [chapter8 手机适配问题之rem和lib-flexible](https://www.jianshu.com/p/6edffcd890e9)
- [chapter9 阿里巴巴矢量图库icon-font的运用](https://www.jianshu.com/p/bfc035236d76)
- [chapter10 写个首页头部组件并引入less](https://www.jianshu.com/p/bdd4dd2c098b)
### 组件
- [组件及运用组件创建一个头部组件](https://www.jianshu.com/p/aa6d64994379)
- [轮播图组件及swiper的引入](https://www.jianshu.com/p/4f92c4461e3d)
- [优化轮播图组件与vue深度处理器](https://www.jianshu.com/p/4f92c4461e3d)
- [商品推荐列表及flex布局](https://www.jianshu.com/p/d58bdcb54529)
### 数据mock
- [axios的使用与数据的mock(1)](https://www.jianshu.com/p/9b804ad87056)
- [axios的使用与数据的mock(2)](https://www.jianshu.com/p/896f8127fe60)
### MongoDB
- MongoDB的安装
- MongoDB服务的配置
- MongoDB基本语法
### Node相关
### 交流扯谈
<img src="https://wx3.sinaimg.cn/mw1024/006pIwwKgy1frm9f1mghlj30e80e83yy.jpg" width="250px" height="250px" alt="weixin:Ewall1106"/>
将数据渲染到组件（列表渲染、模板语法、父子组件之间的传值）

22
src/components/carousel.vue
Unescape Escape View File

@ -2,17 +2,8 @@
<div class="carousel">
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>
<img class="myswiper_img" src="http://a3.vimage1.com/upload/flow/2018/06/21/160/15295761713116.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img class="myswiper_img" src="https://a2.vimage1.com/upload/flow/2018/06/22/40/15296362191561.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img class="myswiper_img" src="https://a3.vimage1.com/upload/flow/2018/06/06/29/15282588215380.jpg" alt="">
</swiper-slide>
<swiper-slide>
<img class="myswiper_img" src="https://a4.vimage1.com/upload/flow/2018/06/21/49/15295697893682.jpg" alt="">
<swiper-slide v-for="(item,index) in swiperData" :key="index">
<img class="myswiper_img" :src="item" alt="">
</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
@ -30,6 +21,12 @@ export default {
swiper,
swiperSlide
},
props: {
swiperData: {
type: Array,
default: []
}
},
data() {
return {
swiperOption: {
@ -43,6 +40,9 @@ export default {
}
}
};
},
mounted() {
console.log('111',this.swiperData)
}
};
</script>

77
src/view/home.vue
Unescape Escape View File

@ -1,41 +1,17 @@
<template>
<div class="home">
<my-header></my-header>
<carousel></carousel>
<carousel :swiperData='swiperData'></carousel>
<!-- 分类 -->
<div class="classification">
<div class="class_top">
<div class="item">
<img src="https://a4.vimage1.com/upload/flow/2018/05/29/106/15275616596915.jpg" alt="">
</div>
<div class="item">
<img src="https://a2.vimage1.com/upload/flow/2018/05/22/138/15269786875124.jpg" alt="">
</div>
<div class="item">
<img src="https://a4.vimage1.com/upload/flow/2018/05/29/100/15275815231657.jpg" alt="">
</div>
<div class="item">
<img src="https://a4.vimage1.com/upload/flow/2018/05/22/190/15269788745661.jpg" alt="">
</div>
<div class="item">
<img src="https://a4.vimage1.com/upload/flow/2018/05/22/110/15269789816830.jpg" alt="">
<div class="item" v-for="(item,index) in classifiData.up" :key="index">
<img :src="item" alt="">
</div>
</div>
<div class="class_bottom">
<div class="item">
<img src="https://a3.vimage1.com/upload/flow/2018/05/29/40/15275616172415.jpg" alt="">
</div>
<div class="item">
<img src="https://a2.vimage1.com/upload/flow/2018/05/29/139/15275815452999.jpg" alt="">
</div>
<div class="item">
<img src="https://a3.vimage1.com/upload/flow/2018/05/22/163/15269793276446.jpg" alt="">
</div>
<div class="item">
<img src="https://a4.vimage1.com/upload/flow/2018/05/22/172/15269794028123.jpg" alt="">
</div>
<div class="item">
<img src="https://a4.vimage1.com/upload/flow/2018/05/22/21/15269794589634.jpg" alt="">
<div class="item" v-for="(item,index) in classifiData.down" :key="index">
<img :src="item" alt="">
</div>
</div>
</div>
@ -43,28 +19,11 @@
<div class="recommend">
<div class="title">今日推荐</div>
<div class="content">
<div class="item">
<img src="https://b.vimage1.com/upload/mst/2018/06/27/14/9b74b67ad8d6049035e8178f6c17ab70_604x290_80.jpg" alt="">
<div class="item_text">
<span>运动潮人录取线
</span>
<span>剩 2 天</span>
</div>
</div>
<div class="item">
<img src="https://b.vimage1.com/upload/mst/2018/06/26/189/f43d77bad367edf2cd9721601f90df1a_604x290_80.jpg" alt="">
<div class="item_text">
<span>国潮攻心计
</span>
<span>剩 1 天</span>
</div>
</div>
<div class="item">
<img src="https://a.vimage1.com/upcb/2018/06/05/132/ias_152816727785388_604x290_80.jpg" alt="">
<div class="item" v-for="(item,index) in recommendData" :key="index">
<img :src="item.imgurl" alt="">
<div class="item_text">
<span>欧美品牌女装与美泽美
</span>
<span>剩 2 天</span>
<span>{{item.title}}</span>
<span>剩 {{item.endtime}} 天</span>
</div>
</div>
</div>
@ -74,7 +33,7 @@
<script>
import MyHeader from "@/components/myHeader";
import Carousel from "@/components/carousel";
import axios from 'axios';
import axios from "axios";
export default {
name: "home",
@ -83,7 +42,14 @@ export default {
Carousel
},
data() {
return {};
return {
// 轮播图
swiperData: [],
// 分类
classifiData: {},
// 推荐
recommendData: []
};
},
mounted() {
this.getIndexData();
@ -92,7 +58,10 @@ export default {
getIndexData() {
axios.get("/api/index.json").then(res => {
console.log(res.data);
})
this.swiperData = res.data.swiper;
this.classifiData = res.data.classifiData;
this.recommendData = res.data.recommendData;
});
}
}
};
@ -130,7 +99,7 @@ export default {
.content {
.item {
background: #fff;
margin-bottom: .133333rem;
margin-bottom: 0.133333rem;
img {
width: 100%;
height: 4.8rem;

Write Preview
Loading…
Cancel
Save