学习POS点餐系统总结

Pos收银系统项目总结

安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

项目回顾

该Pos收银系统是用vue+element开发的，其中技术细节用到了:
vue-cli脚手架制作项目列表结构
vue-router路由引用模板
element UI 组件用来辅助开发
axios 来引用动态数据
.....

vue项目开发经验

这次跟着JSPang的Pos收银系统制作对 如何使用vue全家桶开发项目有了一个初步的认识
首先，vue-cli可以帮助我们自动生成项目结构
其次，在生成的项目中，我们需要引入一系列的依赖包，也就是node_modules
然后，在开发过程中，我们以根目录下的index.html为html的模板，来引入css、字体图标等外部资源
然后，我们以APP.vue为vue的模板，在APP.vue中规划整个页面的布局结构，比如引入组件、引入路由等
然后，在src/main.js下import 我们所需要的依赖，比如vue、vue-router、XXX.vue、element等
然后，就是在component目录下进行组件的开发了，然后配合路由进行使用（也可以通过挂载组件的形式使用）
然后，配置/router/inedx.js,把需要引入的组件信息，配置到路由下(需要import被引入的组件)
element UI语法以及如何配置css
核心js逻辑代码、事件交互、事件处理
axios数据动态交互

element UI

安装依赖包 npm i element-ui -s
导入组件库
import ElementUI from 'element-ui'
导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css'
配置vue插件
Vue.use(ElementUI);

出现的问题

修改标签页的padding样式

因为element有自己的css样式、架构模板，所以很难在外部使用新的css覆盖，考虑到优先级等因素都不能成功
所以直接找到index.css,在末尾直接修改.el-tabs__item的padding

修改表格的求和行计算逻辑

在el-table标签中：
:data是引入数据 
border表示显示边框
show-summary表示显示求和行
style可以设置样式
:summary-method=''编写自定义求和逻辑

因为不清楚表格对象的相关信息，所以要从官网给的代码模板中把相关对象了解
在查找过程中，我们发现这个求和模板中，引入了columns和data这两个对象，data代表着tableData，也就是表格数据对象，而columns代表列数据对象

依托于模板，我们还要自己去完成求和功能，而求和实际上就是对表格数据对象的处理，这个时候，一个优秀的数据构建就十分重要，我们表格数据都存储在tableData中，我们通过遍历tableData，在每次遍历时计算总数以及数量*单价，遍历结束时得到的结果就是总和

getSummary(param){
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    if(index===1){
                        sums[index]=this.totalCount+' 份';
                    }
                    if(index===2){
                        sums[index]=this.totalMoney+' 元'
                    }
                } else {
                    sums[index] = 'N/A';
                }
            });

        return sums;
        }

你会发现上面的代码根本没有计算总和，只是调用并返回了最终结果，其实是因为在使用如下计算方式时，vue会报组件渲染功能中可能有无限的更新循环的错，导致后面的删除增加组件无法显示
			//this.totalCount=0;
            //this.totalMoney=0;
 this.tableData.forEach(element => {
                this.totalCount+=element.count;
                this.totalMoney=this.totalMoney+(element.price*element.count);
            });

核心逻辑JS

点击右侧的菜单加入左侧列表

本质上是数据的交互，是把右侧的数据添加进左侧保存
在知道数据对象构成的前提下，我们用一个数组来存储左侧数据，也就是tableData
先别急着去完成功能，要先考虑数据的有无与重复，
首先，判断右侧数据是否存在于tableData，如果存在该如何处理，如果不存在又该如何处理
要找到分歧点来给功能详细分类
要善于使用高阶函数
比如map用来获取经过处理的数组数据
filter用来获取满足条件的数组数据
reduce用来求和等等
要善于使用数组、等等数据类型的特性

仔细体会数据与组件之间的关系

axios

安装axios
需要用到淘宝镜像cnpm install axios --save
在使用vue-cli脚手架的前提下使用npm install axios 会安装失败
安装成功后会在目录中出现config文件夹

在主页面引用axios并不会在组件中生效，这是因为组件有很明确的依赖关系，可以通过如下代码实现全局使用axios
	import axios from 'axios'
	Vue.prototype.axios = axios

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中
相比较于ajax、jqueryAjax、fetch，axios有着几乎完美的特性：
	从浏览器中创建 XMLHttpRequests
	从 node.js 创建 http 请求
	支持 Promise API
	拦截请求和响应
	转换请求数据和响应数据
	取消请求
	自动转换 JSON 数据
	客户端支持防御 XSRF

出现的问题

403错误

请求后端接口时，图片的请求出现403错误：GET http://xxxxxxxxxxxx 403（Forbidden）

决方法如下：在index.html中的head中添加<meta name="referrer" content="no-referrer" />

而问题出现的原因是，referrer作为一种引用策略，可以用来防止图片或视频被盗。
它的原理是：在http协议中，如果从一个网页到另一个网页，http头字段里就会带一个referrer，图片服务器通过检测referrer是否来自规定域名来进行防盗链。如果没有设置referrer，就可以直接绕过防盗链机制，直接使用或盗取。