笔记0628-CSDN博客

为什么80%的码农都做不了架构师？>>>

学习git的使用，

分支的学习
项目克隆
项目提交
冲突解决

axios的使用

test002 1-6

socket将点餐的人拉进同一个团队

bus.js的使用为了非父子组件直接的传参数

flexible.js scss

shift + 右键直接打开命令行窗口

git命令行打开窗口
直接打开项目git bash here

下拉代码
$ git pull origin develop

$ git status

今天的任务，熟悉项目，熟悉到细节，每个文件

学习如何分割模块

父选择器
.homeView {
height: 100%;
min-height: 7rem;
// max-height: 10rem;
&.orderList {
background-color: #fff;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}

使用mapMutations简写vuex的Mutations函数13:57 2018/6/28
// this.$store.commit('changeDialog', {show: true, content: '请选择正确用餐人数'})
this.changeDialog({show:true,content:'请选择正确点餐人数'})

一个神奇的问题，请求后台接口的地址发生了变化，这是debug出来的
怀疑对象是
$axios
http://localhost:8080/api/c/savedeskpeople

c端学习
PeopleSelect.vue 订餐人数选择模版
CountIcon.vue 点单加减模版
TasteAlert.vue 规格弹窗模版

类的判断，数组写法14:15 2018/6/28
:class="[/^[4|9]$/.test(index)?'right':'',num == item?'selected':'']"
.stop为了阻止冒泡15:02 2018/6/28
<section class="fine" @click.stop="orderFine">选好了</section>
操作路由
this.$router.push(‘/xxx ‘)
前进后退
this.$router.go(-1) 和 this.$router.go(1)

shopDetail的赋值在哪里？

非父子组件通信

@xgg作用
xgg是自己创建的函数，触发模板传参

建立Bus.js中转站，引入中转站模板

import Vue from 'vue'
export default new Vue()

组件A

<div class="countIcon xgg" v-else @click="xgg(cell)">选规格
    <section class="foodCount" v-show="cell.count != 0">{{cell.count}}</section>
</div>

xgg (cell) {
  console.log("触发弹窗")
  Bus.$emit('xgg', cell)
  this.$emit('xgg')
}

组件B

使用bus模板监听xgg事件，然后接受参数

mounted () {
  Bus.$on('xgg', cell => {
    var arr1 = cell.food_senior_standards
    this.standardArr = arr1.map(() => false)
    this.currentCount = 0
    this.combinationId = ''
    this.price = ''
    this.food = cell
  })
},
destroyed () {
  Bus.$off('xgg')
},

b端和c端商户和消费者

this.$store.dispatch('countChange', { count, id, combinationId })
this.countChange({count, id, combinationId})
dispatch异步与action配合 commit同步与mutations配合

点击食品列表的规格按钮，触发非父子组件传参数。

<food-list v-show="tabed == 1" @xgg="shwoTaste = true">
组件A
xgg (cell) {
Bus.$emit('xgg', cell) //没有这句不能传参数，重点学习
this.$emit('xgg') //没有这句不能弹窗
}
组件B
mounted () {
Bus.$on('xgg', cell => {
var arr1 = cell.food_senior_standards
this.standardArr = arr1.map(() => false)
this.currentCount = 0
this.combinationId = ''
this.price = ''
this.food = cell
})
},
destroyed () {
Bus.$off('xgg')
},

其中有es6的写法，学习一下

动画效果，出现有消失
<transition name="slide-fade">
<section class="mainCon" v-show="changeIng">
<img :src="changeMessage.avatar" alt="" class="userImg">
{{changeMessage.wechat_user_name}}：{{changeMessage.name}} {{changeMessage.count > 0?`+
${changeMessage.count}`:`-${Math.abs(changeMessage.count)}`}}
</section>
</transition>

同步事件 promice

axios.get(`${api}/c/getfoodlist/?desk_id=${deskId}`)
.then(res => {
var foodList = res.data.data
foodList.forEach(item => {
item.count = 0
for (let value of item.foods) {
value.count = 0
}
})
commit({
type: 'getFoodList',
res: foodList
})
})
.then(() => {
// 获取本桌号的购物车列表
axios.get(`${api}/c/getshoppingitems/${deskId}`)
.then(res => {
commit({
type: 'getShopCar',
arrAllCard: res.data.data.shopCartItemsData.shopCartItems,
foodTypes: res.data.data.foodTypesData.foodTypes,
totalPrice: res.data.data.shopCartItemsData.total_price,
mealFee: res.data.data.shopCartItemsData.meal_fee
})
})
})