# supermail

**Repository Path**: whj_51920/supermail

## Basic Information

- **Project Name**: supermail
- **Description**: a vuejs supermail
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-09-04
- **Last Updated**: 2021-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、开发前期准备工作

### 1. 划分目录结构

components 组件

- common 所有项目都能使用的
- content 当前项目使用的

asset 资源

- img
- css

network 网络

common 装一些公共的js文件夹

### 2. css文件引入

normalize.css 对标签的初始化

### 3. vue.config.js和.editorconfig

vue.config.js

```js
module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'common': '@/common',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views',
            }
        }
    }
}
```

.editorconfig：对代码风格规范，便于维护（脚手架3删除了，公司一般会复制过来）

```js
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
```

## 二、首页开发

### 1. 顶部导航栏的封装

一般导航栏的高度都是44px，状态栏的高度是20px。
CSS中想要撑起来盒子直接给它设置line-height。
封装组件的背景颜色不要写死！
JS

```js
  <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
```

css

```css
  .nav-bar {
    display: flex;
    line-height: 44px;
    text-align: center;
    box-shadow: 0 1px 1px rgba(100, 100, 100, .1);
  }

  .left, .right {
    width: 60px;
  }

  .center {
    flex: 1;
  }
```

home组件内引入

```html
 <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
```

### 2. 请求首页数据（axios）

- 安装 axios
  `npm install axios --save`
- network包里创建request.js

```js
import axios from "axios";

export function request(config) {
  // 1. 创建axios实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/hy66',
    timeout: 5000
  })
  // 2. axios拦截器
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err);
  })
  return instance(config)
}
```

- network包里再创建一个home.js，对其进行再一次封装(方便今后的管理）

```js
import {request} from "@/network/request";

export function getHomeMultiData() {
  return request({
    url: '/home/multidata'
  })
}
```

### 3. 获取轮播图数据

```js
  import {getHomeMultiData} from "@/network/home";

    data() {
      return {
        // 轮播图数据
        banners: [],
        recommends: []
      }
    },
    created() {
      // 1. 请求多个数据
      // 这里是一个异步函数，且这个函数的返回值是promise数据
      getHomeMultiData().then(res => {
        console.log(res);
        this.banners = res.data.data.banner.list
        this.recommends = res.data.data.recommend.list
      })
    }
```

### 4. 封装轮播图组件

导入老师封装好的Swiper
把轮播图再封装为一个组件放在home包下
![在这里插入图片描述](https://img-blog.csdnimg.cn/5030e56ba5a948a0868932c981c53e29.png)
HomeSwiper

```js
<template>
  <div>
    <swiper>
      <swiper-item v-for="banner in banners">
        <a :href="banner.link">
          <img :src="banner.image" alt="">
        </a>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import {Swiper, SwiperItem} from "@/components/common/swiper"

export default {
  name: "HomeSwiper",
  props: {
    banners: {
      type: Array,
      default() {
        return []
      }
    }
  },
  components: {
    Swiper,
    SwiperItem
  }
}
</script>
```
### 5. 封装tab-control组件
这个组件是公共业务组件，放在components / content下，由于是内部文字不同所以无需使用插槽。
>注意：这里实现点击谁谁变色的功能
>- 设置currentIndex = 0
>- 添加属性名 {active: index === currentIndex}
>- 添加click方法，点击谁将谁的index值赋给currentIndex
```js
<template>
  <div class="tab-control">
<!--  如果只是文字不一样，没有必要搞插槽-->
      <div v-for="(item, index) in titles" class="tab-control-item" :class="{active: index === currentIndex}" @click="itemClick(index)">
        <span>{{item}}</span>
      </div>
  </div>
</template>

<script>
  export default {
    name: "TabControl",
    props: {
      titles: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        currentIndex: 0
      }
    },
    methods: {
      itemClick(index) {
        this.currentIndex = index
      }
    }
  }
</script>
```
### 6. 首页商品列表
>一次处理多类数据
>
定义一个变量 goods 保存三类数据，分别是流行 / 新款 / 精选
```js
	goods: {
		// page记录当前页码，list记录当前数据
		'pop': {page: 1, list: []},
		'news': {page: 1, list: []},
		'sell': {page: 1, list: []}

对于其他开发常见的是
map -> map -> Array
```
home.js
```js
 export function getHomeGoods(type, page) {
  return request({
    url: '/home/data',
    params: {
      type,
      page
    }
  })
 }
```
home页面
```js
        goods: {
          'pop': {page: 0, list: []},
          'new': {page: 0, list: []},
          'sell': {page: 0, list: []}
        }

      getHomeGoods(type) {
        const page = this.goods[type].page + 1
        getHomeGoods(type, page).then(res => {
          this.goods[type].list.push(...res.data.data.list)
          this.goods[type].page += 1
          console.log(this.goods[type].list);
        })
      }
```
控制tabControl切换商品列表
```js
1. tabControl组件给home页面传index过去
	itemClick(index) {
	        this.currentIndex = index;
	        this.$emit('tabClick', index)
	      }
2. home页面引入goodList组件
    <goods-list :goods="showGoodsList"/>
3. home页面拿到子组件传来的index
	 <tab-control class="tab-control" :titles="['流行', '精选', '新款']" @tabClick="tabClick"/>
4. 根据index变换数据
computed: {
      showGoodsList() {
        return this.goods[this.currentType].list
      }
    }

      tabClick(index) {
        switch (index) {
          case 0:
            this.currentType = 'pop'
            break;
          case 1:
            this.currentType = 'new'
            break;
          case 2:
            this.currentType = 'sell'
            break;
        }
      }
```
### 7.better-scroll 的使用
基本使用
```js
        // 默认情况下，BScroll不能实时监听滚动的位置
        /*
            probeType:侦测
                0 / 1： 不侦测；
                2： 手指滚动过程中侦测，手指离开后不侦测；
                3： 只要手指在上面就侦测

            click: 默认false

            pullUpload: true  上拉加载更多

         */
        const BS = new BScroll(document.querySelector('.wrapper'), {
            probeType: 1,
            click: true,
            pullUpload: true
        })
        // 监听滚动位置
        BS.on('scroll', (position) => {
            console.log(position);
        })
        // 上拉加载(只能一次，所以我们会用.finishPullUp)
        BS.on('pullingUp', () => {
            console.log('上拉加载');
            // 先去发送网络数据，请求更多页的数据
            // 等数据请求完成，并且将新的数据展示出来
            setTimeout(() => {
                BS.finishPullUp()
            }, 2000)
        })
        document.querySelector('.btn').addEventListener('click', function () {
            console.log('按钮打印啦！！！！')
        })
```
> vue 中使用

安装
`npm install better-scroll --save`
`npm install @better-scroll/observe-dom --save`
封装 better-scroll
```js
- 引入better-scroll.observe-dom
  import BScroll from 'better-scroll'
  import ObserveDOM from '@better-scroll/observe-dom'

- Scroll封装
<template>
  <!-- ref 如果是绑定在组件中，那么this.$refs.refname获取到的是组件
       ref 如果是绑定在标签上，那么this.$refs.refname获取到的是标签
  -->
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

  data() {
    return {
        scroll: null
    }
  },
  mounted() {
    this.scroll = new Bscroll(this.$refs.wrapper, {
      probeType: 2,
      click: true,
      pullUpLoad: true,
      observeDOM: true
    })
  }
```
完成回到顶部操作`backTop`组件（组件点击）
```js
- 创建组件BackTop
<template>
  <div class="back-top">
    <img src="~assets/img/common/top.png" alt="">
  </div>
</template>

- home页引用并且添加点击事件
    <!-- @click.native 监听组件的原生事件 -->
    <back-top @click.native="backClick" />

- Scroll组件内封装回到顶部方法
  methods: {
    scrollTop(x, y, time=300) {
      this.scroll.scrollTo(x, y, time)
    }
  }

- home页的点击方法
      backClick() {
        this.$refs.sc.scrollTop(0, 0, 500)
      }
```