在简历的项目经历上写:
快餐店收银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构造的有所区别
【有什么区别】
优化方面:
扩展性:
还想要探索什么新技术