项目总结：快餐店POS收银系统

在简历的项目经历上写：

快餐店收银pos平台开发

1.使用mockplus做出应用框线图，然后利用VueRouter+VueCLI3.0和elementUI框架以及iconfont进行页面、功能开发，利用axios获取后台数据，数据是自己通过yapi平台进行模拟数据。

2 主要内容：

（1）订单模块：包括增加删除单品的数量、计算总数量，总金额，以及删除订单和结账按钮。

（2）热卖商品模块：块级显示热卖商品以及价格，点击可加入订单

（3）分类商品模块：分类显示主食、小食、饮品、套餐，以图片文字显示，点击可加入订单

 

 

=================================================================================================

面试聊这玩意：

1 为啥要用这个框架：

轻量级应用，组件化开发

2 解决了哪些问题 遇到了哪些问题 怎么解决的 自己是什么项目

遇到的问题以及解决方案

【1】获取后台数据

我把食品名字 id 价格都模拟数据写在了yapi平台作为接口，原来用过easy-mock，但是那个网站经常崩溃，然后在pos.vue里引入axios在created周期进行数据调用，在页面的li上v-for（item in foodList）  插值引入{{item.goodName}}

【2】我在使用elementUI创建栅格布局时想要增加他的高度，如通过css样式来太麻烦了，直接通过js的方式设置他的height

 这个在mounted的生命周期   

 var orderHight = document.body.clientHeight;

    document.getElementById("order-list").style.height = orderHight + "px";

【3】点击餐品 订单就会出现相应

在订单的表格里设置data的动态绑定，tableData，然后利用elementUI的传值prop属性设置订单的各个属性名，同时给餐品的也附上相同属性名，添加进订单时先判断是否已经存在相同名字产品  有的话数量+1；没有的话创建一个新的数组，传入相同的属性名的对象，然后this。tableData。push（this。newData）

【4】计算总价

首先是先初始化，然后计算num*price

=========================================================================================

通过这个项目学到了啥

1 箭头函数的使用和优点

（1）简洁（2）箭头函数没有prototype(原型)，所以箭头函数本身没有this

箭头函数的this指向定义时所在的外层第一个普通函数，跟使用位置没有关系。被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变

箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)

 （2）elementUI库的使用

（3）Vuecli3 以及axios的简单应用

====================================================================

项目的不足 改进

1 没有实现响应式页面===》勾引他问你怎么做响应式

2 页面不够复杂  组件少 不够美观

改善css  添加功能

===================================================================

项目总结

初衷：充分运用所学知识，完成实际有价值的小项目，训练自己的业务逻辑和编码规范

实现：确实运用很多自己的知识，学到了新知识

cli3和cli2构造的有所区别

【有什么区别】

优化方面：

扩展性：

还想要探索什么新技术