Project --4

1 Review

2, adjust the layout of the home page

<van-list
  v-if="flag"
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <Prolist :prolist="prolist"/>
</van-list>
<div v-else>
  登陆之后才能看到更多的信息
  <router-link to="/login">登陆</router-link>
</div>

3, add to the cart function

接口： /cart/add?userid=1&proid=2&num=1&token=111

3.1 interface to modify the landing, the landing successful return plus field userid and username, save to a local front-end

• day06/myapp/routes/users.js

// 实现登陆功能
router.post('/login', (req, res, next) => {
  // 1、获取表单信息
  let { tel, password } = req.body;
  // 2、依据手机号查询有没有该用户
  sql.find(User, { tel }, { _id: 0 }).then(data => {
    // 2.1 判断有么有该用户
    if (data.length === 0) {
      // 2.2 没有该用户
      res.send(utils.unregister)
    } else {
      // 2.3 有该用户，验证密码
      // 2.3.1 获取数据库中的密码
      let pwd = data[0].password;
      // 2.3.2 比较 输入的 密码和数据库中的密码
      var flag = bcrypt.compareSync(password, pwd) // 前为输入，后为数据库
      if (flag) {
        // 2.3.3 密码正确,生成token
        let userid = data[0].userid
        let username = data[0].username // +++++++++++++++++
        let token = jwt.sign({ userid }, 'daxunxun', {
          // expiresIn: 60*60*24// 授权时效24小时
          expiresIn: 60*60*24*7// 授权时效7天
        })
        res.send({
          code: '10010',
          message: '登陆成功',
          token: token,
          userid, // ++++++++++++++++++++++++++++++++++++++++++++++++++++++
          username // +++++++++++++++++++++++++++++++++++++++++++++++++++++
        })
      } else {
        // 2.3.4 密码错误
        res.send({
          code: '10100',
          message: '密码错误'
        })
      }
    }
  })
})

• The landing page will be saved to your local userid

day09/src/views/login/index.vue

methods: {
    login () {
      console.log('11111')
      if (this.tel === '' || this.teltip !== '') {
        this.tip = '手机号格式错误'
        return
      }
      if (this.password === '' || this.passwordtip !== '') {
        this.tip = '密码格式错误'
        return
      }
      // 登陆
      axios.post('/users/login', {
        tel: this.tel,
        password: this.password
      }).then(res => {
        console.log(res.data)
        /***
         * 10086 未注册
         * 10100 密码错误
         * 10010 登陆成功
         */
        if (res.data.code === '10086') {
          this.tip = '该用户未注册，请先注册'
        } else if (res.data.code === '10100') {
          this.tip = '密码错误'
        } else {
          // 此时为登陆成功，获取token信息存入本地
          this.tip = ''
          const token = res.data.token
          localStorage.setItem('token', token)
          localStorage.setItem('userid', res.data.userid) // +++++++++++
          localStorage.setItem('username', res.data.username) // +++++++++++++
          this.$router.back()
        }
      })
    }
  }

3.2 Details page click Add to Cart Add to Cart execution logic

<van-goods-action-icon icon="cart-o" @click="toCart" text="购物车"  />
<van-goods-action-button type="warning" @click="addCart" text="加入购物车" />

methods: {
  addCart () {
    let userid = localStorage.getItem('userid')
    let token = localStorage.getItem('token')
    let proid = this.proid
    let num = 1
    let url = '/cart/add?userid=' + userid + '&proid=' + proid + '&num=' + num + '&token=' + token
    axios.get(url).then(res => {
      // 如果未登录，跳转到登陆
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        Toast('加入购物车成功')
      }
    })
  },
  toCart () {
    this.$router.push('/cart')
  }
}

4, View Cart

<template>
  <div class="box">
    <header class="header">购物车头部</header>
    <div class="content">
      <ul class="prolist" v-if="flag">
        <li class="proitem" v-for="(item, index) of cartlist" :key="item.proid" @click="toDetail(item.proid)">
          <div class="itemimg">
            <img :src="item.proimg" alt="">
          </div>
          <div class="iteminfo">
            <h2>{{ index }}-{{ item.proname }}</h2>
            <h3>{{ item.brand }}</h3>
            <p>{{ '￥' + item.price }}</p>
            <div>
              <button>-</button>{{ item.num }}<button>+</button>
            </div>
          </div>
        </li>
      </ul>
      <div v-else>
        购物车空空如也，<router-link to="/home">去购物</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      cartlist: [],
      flag: false // false 表示没有数据
    }
  },
  created () {
    let userid = localStorage.getItem('userid')
    let token = localStorage.getItem('token')
    let url = '/cart?userid=' + userid + '&token=' + token
    axios.get(url).then(res => {
      // 10119 未登录
      // 11000 没有数据
      // 有数据
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else if (res.data.code === '11000') {
        this.flag = false
      } else {
        this.flag = true
        this.cartlist = res.data.data
      }
    })
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.prolist {
  @include rect(100%, auto);
  .proitem {
    @include rect(100%, 1rem);
    @include border(0 0 1px 0, #efefef, solid); // 设定的是一个物理像素
    @include flexbox();
    .itemimg {
      @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);
        @include border(1px, #f66, solid);
        @include margin(0.05rem);
        @include display(block);
      }
    }
    .iteminfo {
      @include flex();
    }
  }
}
</style>

5, the number of shopping cart addition and subtraction, delete, select

<div>
  <button @click="reduce(item)">-</button>{{ item.num }}<button @click="add(item)">+</button>
  <button @click="deleteItem(item, index)"> 删除 </button>
</div>

methods: {
  // 不管加还是减，记住传递参数为 对象
  reduce (item) {
    let token = localStorage.getItem('token')
    // 如果数量为1，不可以再减
    let num = item.num > 1 ? --item.num : 1
    // 请求数据库更新
    axios.get('/cart/update?token=' + token + '&cartid=' + item.cartid + '&num=' + num).then(res => {
      // 未登录
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        // 更新成功  ---  更新对象的属性值-- 可以引起视图的二次渲染 -- 为什么传对象
        item.num = num
      }
    })
  },
  add (item) {
    let token = localStorage.getItem('token')
    let num = ++item.num
    console.log(num)
    axios.get('/cart/update?token=' + token + '&cartid=' + item.cartid + '&num=' + num).then(res => {
      console.log('cart', res.data)
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        item.num = num
      }
    })
  },
  // 删除 需要传递对象和索引值  --- 目的是 删哪个 截取那个数据
  deleteItem (item, index) {
    let token = localStorage.getItem('token')
    axios.get('/cart/delete?token=' + token + '&userid=' + item.userid + '&proid=' + item.proid).then(res => {
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        // 删除成功  --- 调整视图
        this.cartlist.splice(index, 1)
      }
    })
  }
}

6, calculate the total price and the total number of

• layout

<div class="submitOrder">
  <ul>
    <li>
      <p>
        总数: <span>11</span>
      </p>
    </li>
    <li>
      <p>
        合计: <span></span>
      </p>
    </li>
    <li>
      提交订单
    </li>
  </ul>
</div>

.submitOrder {
  @include rect(100%, 0.5rem);
  @include border(1px 0 0 0, #f66, solid);
  @include fixed();
  @include bottom(0.5rem);
  @include background-color(#fff);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flexbox();
      @include justify-content();
      @include align-items();
      &:nth-child(1) {
        @include flex(4);
      }
      &:nth-child(2) {
        @include flex(4);
      }
      &:nth-child(3) {
        @include flex(2);
        @include background-color(#f66);
        @include color(#fff);
      }
      p {
        span{
          @include color(#f66);
        }
      }
    }
  }
}

• Calculated using the total number of property to get the total price

<li>
  <p>
    总数: <span>{{ totalNum }}</span>
  </p>
</li>
<li>
  <p>
    合计: <span>{{ totalPrice }}</span>
  </p>
</li>

computed: {
  totalNum () {
    let num = 0
    this.cartlist.map((item) => {
      num += item.num
    })
    return num
  },
  totalPrice () {
    let totalPrice = 0
    this.cartlist.map((item) => {
      totalPrice += item.num * item.price
    })
    return totalPrice.toFixed(2)
  }
},

7, add and choose Select All

• Before each list to add a checkbox, add a checkbox --- cart / index.1.vue bottom

• Modify the shopping cart list, each piece of data to add a field flag, set its value to true

created () {
  let userid = localStorage.getItem('userid')
  let token = localStorage.getItem('token')
  let url = '/cart?userid=' + userid + '&token=' + token
  axios.get(url).then(res => {
    // 10119 未登录
    // 11000 没有数据
    // 有数据
    if (res.data.code === '10119') {
      this.$router.push('/login')
    } else if (res.data.code === '11000') {
      this.flag = false
    } else {
      this.flag = true
      // ++++++++++++++++++++++++++++++
      let arr = res.data.data
      arr.map(item => { // 处理数据。每一项添加一个字段
        item.flag = true
      })
      this.cartlist = arr
      // ++++++++++++++++++++++++++++
    }
  })
},

• Select calculate the total number and total

computed: {
  totalNum () {
    let num = 0
    this.cartlist.map((item) => {
      item.flag ? num += item.num : num += 0
    })
    return num
  },
  totalPrice () {
    let totalPrice = 0
    this.cartlist.map((item) => {
      item.flag ? totalPrice += item.num * item.price : totalPrice += 0
    })
    return totalPrice.toFixed(2)
  }
},

• Click Select --- Select Control List select ----- -------- listening abandoned property

<input type="checkbox" v-model="all">全选

data () {
  return {
    cartlist: [],
    flag: false, // false 表示没有数据
    all: true // ++++++++++++++++++++++++++++++++
  }
},
watch: {
  all (newval) {
    if (newval) {
      this.cartlist.map(item => {
        item.flag = true
      })
    } else {
      this.cartlist.map(item => {
        item.flag = false
      })
    }
  }
},

• Click the box to change the list of choices Select

// 添加点击事件
<input type="checkbox" v-model="item.flag" @change="changeFlag(item)">

changeFlag (item) {
  console.log(item)
  if (item.flag) { // 如果此值为真 --- 该项是被选中的，判断别的项是不是选中
    // 如果b为真，表示所有的都被选中
    // arr.every() 所有的条件为真结果才为真
    let b = this.cartlist.every(item => {
      return item.flag === true
    })
    if (b) { // 全部被选中
      this.all = true
    } else {
      this.all = false
    }
  } else { // 有某一项未被选中，肯定全部不被选中
    this.all = false
  }
}

• Abandoned property change listener, click Select All through the event list change

// 全选添加事件
<input type="checkbox" v-model="all" @change="selectAll">全选

selectAll () {
  if (this.all) {
    this.cartlist.map(item => {
      item.flag = true
    })
  } else {
    this.cartlist.map(item => {
      item.flag = false
    })
  }
}

• In principle cart business logic is over is completed, but did not actually ring

8, select the shopping cart of goods submitted to confirm the order page

• 1, click submit orders, access to the selected product (Include the number of id, merchandise, plus the user id), submit the information to the relevant orders Interface
• 2, the list of the selected shopping cart shopping cart corresponding data (to cartid), copy the data to a database of orders, and delete the shopping cart the database

9, classification

9.1 preparation of related interfaces

day06/myapp/routes/pro.js

// 获取分类类型对应的品牌
router.get('/category', (req, res, next) => {
  let { type } = req.query
  sql.find(Pro, { type }, {_id: 0, brand:1, barndimg: 1}).then(data => {
    // 数组去重 https://www.cnblogs.com/le220/p/9130656.html
    let obj = {}
    // 利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
    data = data.reduce((item, next) => {
      obj[next.brand] ? '' : obj[next.brand] = true && item.push(next)
      return item
    }, [])
    res.send({
      code: '200',
      message: '获取分类类型列表',
      data: data
    })
  })
})

// 获取品牌类型对应的产品
router.get('/brandcategory', (req, res, next) => {
  let { brand } = req.query
  sql.find(Pro, { brand: brand }, {_id: 0}).then(data => {
    
    res.send({
      code: '200',
      message: '获取品牌分类列表',
      data: data
    })
  })
})

// 搜索
router.get('/search', (req, res, next) => {
  let { text } = req.query
  sql.find(Pro, { proname: eval('/' + text + '/') }, {_id: 0}).then(data => {
    
    res.send({
      code: '200',
      message: '搜索列表',
      data: data
    })
  })
})

9.2 Writing category page structure

<template>
  <div class="box">
    <header class="header">分类头部</header>
    <div class="content">
      <div class="kind">
        <div class="left">
          <ul>
            <li>手机</li>
            <li>安装</li>
          </ul>
        </div>
        <div class="right"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
.content {
  .kind {
    @include rect(100%, 100%);
    @include flexbox();
    .left {
      @include rect(1rem, 100%);
      @include background-color(#00f);
      ul {
        @include rect(100%, 100%);
        li{
          @include rect(100%, 0.36rem);
          @include border(0 0 1px, #efefef, solid);
          @include line-height(0.36rem);
          @include text-align();
        }
      }
    }
    .right {
      @include flex();
      @include rect(auto, 100%);
      @include background-color(#0f0);
      @include overflow();
    }
  }
}
</style>

9.3 Gets a list of data for the left and rendering

<div class="left">
  <ul>
    <li v-for="(item, index) of kindlist" :key="index">{{ item }}</li>
  </ul>
</div>

data () {
  return {
    kindlist: []
  }
},
created () {
  let token = localStorage.getItem('token')
  let url = '/pro/type?type=type&token=' + token
  axios.get(url).then(res => {
    console.log(res.data)
    if (res.data.code === '10119') {
      this.$router.push('/login')
    } else {
      this.kindlist = res.data.data
    }
  })
}

9.4 Click on the left side of the type of data acquired brands and rendering

// @click="getBrand(item)"
<ul>
  <li v-for="(item, index) of kindlist" @click="getBrand(item)" :key="index">{{ item }}</li>
</ul>

data () {
  return {
    kindlist: [],
    brandlist: []
  }
},
methods: {
  getBrand (item) {
    let token = localStorage.getItem('token')
    let url = '/pro/category?token=' + token + '&type=' + item
    // 接口为新增接口
    axios.get(url).then((res) => {
      console.log(res.data)
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        this.brandlist = res.data.data
      }
    })
  }
}

<div class="right">
  <div class="top">
    <ul>
      <li v-for="(item, index) of brandlist" :key = "index">
        <!-- <img :src="item.barndimg" alt=""> -->
        {{ item.brand }}
      </li>
    </ul>
  </div>
</div>

9.5 Click the Get Data list of the brands and rendering

Introducing the list of components, the components can pass value

// @click="getlist(item)
<div class="top">
  <ul>
    <li v-for="(item, index) of brandlist" :key = "index" @click="getlist(item)">
      <!-- <img :src="item.barndimg" alt=""> -->
      {{ item.brand }}
    </li>
  </ul>
</div>

// +++++++++++++++
components: {
  Prolist
},
data () {
  return {
    kindlist: [],
    brandlist: [],
    prolist: [] // ++++++++++++++++++
  }
},
methods: {
  // 注意对应的接口
  getlist (item) {
    let token = localStorage.getItem('token')
    let url = '/pro/brandcategory?token=' + token + '&brand=' + item.brand
    axios.get(url).then((res) => {
      console.log(res.data)
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        this.prolist = res.data.data
      }
    })
  }
}

Add categories defaults 9.6

• On the left and click on the default style

// :class="kindindex === index ? 'active' : ''"
// @click="getBrand(item, index)"
<li :class="kindindex === index ? 'active' : ''" v-for="(item, index) of kindlist" @click="getBrand(item, index)" :key="index">{{ item }}</li>
data () {
  return {
    kindlist: [],
    brandlist: [],
    prolist: [],
    kindindex: 0 // ++++++++++++++
  }
},
methods: {
  getBrand (item, index) {
    this.kindindex = index
  }
}

• The right of the default and click style

// @click="getlist(item, index)"
// :class="brandindex === index ? 'active' : ''"
<li :class="brandindex === index ? 'active' : ''" v-for="(item, index) of brandlist" :key = "index" @click="getlist(item, index)">
  <!-- <img :src="item.barndimg" alt=""> -->
  {{ item.brand }}
</li>
data () {
  return {
    kindlist: [],
    brandlist: [],
    prolist: [],
    kindindex: 0,
    brandindex: 0 // ++++++++++++++++++++++++++++
  }
},
methods: {
  getBrand (item, index) {
    this.kindindex = index
    this.brandindex = 0 // 点击左侧 永远选中的是右侧的第一个
  },
  getlist (item, index) {
    this.brandindex = index
  }
}

• The default display of the brand first category

created () {
    let token = localStorage.getItem('token')
    let url = '/pro/type?type=type&token=' + token
    axios.get(url).then(res => {
      console.log(res.data)
      if (res.data.code === '10119') {
        this.$router.push('/login')
      } else {
        this.kindlist = res.data.data
        this.getBrand(this.kindlist[0], 0) // +++++++++++++++++
      }
    })
  },

• The default display a list of the first brand

getBrand (item, index) {
  this.kindindex = index
  this.brandindex = 0
  let token = localStorage.getItem('token')
  let url = '/pro/category?token=' + token + '&type=' + item
  axios.get(url).then((res) => {
    console.log(res.data)
    if (res.data.code === '10119') {
      this.$router.push('/login')
    } else {
      this.brandlist = res.data.data
      this.getlist(this.brandlist[0], 0) // +++++++++++++++++++++
    }
  })
},

10 search

General search box displayed first not real input

views/search/index.vue + router/index.js