每周三集前端免费视频
每年帮助超100万前端爱好者学习

Vue实战视频-快餐店收银系统 (共11集)

课程前言

 

这是我网站恢复后写的第一篇文章,在关站这段时间里,群里的小伙伴们给了我很多支持,没有你们的支持,很可能我就放弃写博客了,所以非常感谢你们的支持。

这个系统使用的技术栈为:Vue+Webpack+Element+Axios+vueRouter.系统是一个快餐店的POS系统,当然我们不可能实现一个完整POS系统的所有功能(业余时间我会开发完成并开源),我们在视频中只完成收银模块的制作。你在这个视频中会学习到很多实战的技巧,让你在真实的工作中得心应手,脱颖而出。

课程源码GitHub地址:https://github.com/shenghy/AwesomePOS

如果你是一个Vue新手,你可能还不能完全掌握文章的内容,你需要一些Vue的初级知识和中级知识。如果你是新手是不是感到很无奈,幸运的是本站为你提供了全部的前置视频学习资源,你可以踏踏实实的学习。

 

 

学习前置课程:

初级课程:

  1. 【第一季】Vue2.0视频教程-内部指令(共8集)
  2. 【第二季】Vue2.0视频教程-全局API(共9集)
  3. 【第三季】Vue2.0视频教程-选项(共6集)
  4. 【第四季】Vue2.0视频教程-实例和内置组件(共4集)

中级课程:

  1. 技术胖的Vue-cli 视频教程(共3集)
  2. 技术胖的Vue-router视频教程(共11集)
  3. 技术胖的vuex视频教程(共6集)

第1节:Mockplus把我们的想法画出来

Mockplus是产品经理装逼使用的利器,但是真的很好用,作为一个已经工作的程序员必须舔产品经理的脸,所以你也要对Mockplus的使用有所了解,并会简单的使用。其实Mockplus就是一个线框图制作工具,能把我们的想法或者不太好用语言表达的地方,快速画出线框草图增加理解能力。

为什么选择快餐店POS系统?

刚开始我想作一套以酒水商城为背景的手机端应用,但是我发现网上这样的应用太多了,什么仿饿了么,什么知乎,什么购物车都可以在网上找到,所以你完全可以Github网站中下载,自学掌握。我觉的既然作了这个实战,就要够酷够复杂,我下面列举了三个原因,大家可以看一下(你其实可以忽略前两点)。

  • 这个收银界面足够复杂:我们采用三栏布局,每栏的交互操作都很有技术技巧,让你快速掌握复杂应用的开发。
  • 用到的知识点多:用到实战中90%以上的知识点,让你把Vue的知识串联起来,快速成为单位中的技术牛人。
  • 为了更好的和女神啪啪啪:京东-强东哥的女神愿望就是开奶茶店,我的女神愿望就是开个快餐店。

 

MockPlus软件下载:

Mockplus是一款免费的软件,你可以随便下载:https://www.mockplus.cn/ 。下载好后你需要注册一个账户,就可以正常使用了。

软件的基本需求分析和画的过程,请看视频,这里就不用文字描述了,去看视频吧。

项目框线图;

下面是我们用Mockplus制作的应用框线图,虽然简单,但是已经把我脑海中快餐店Pos系统的大体样式画出来了。在作项目之前,一定要画出框线图,反复讨论需求和技术实现,这样能避免开发中的大范围修改,在实际工作当中非常重要。

 

第2节:Vue-cli搭建开发环境

我们采用Vue-cli进行快速搭建,如果你对Vue-cli还不了解,请观看下面的文章,大概30分钟可完全掌握Vue-cli。

  1. 技术胖的Vue-cli 视频教程(共3集)

搭建项目架构:

项目采用Webpack+Vue-router的架构方式,开始安装(全部在windows系统上操作,我也没有mac电脑)。

  1. 按Win+R,然后在文本框中输入cmd,回车打开命令行,输入vue-cli安装命令:

    这里的-g代表全局安装。
  2. 在命令行中初始化项目,我们采用的是webpack模板,输入初始化命令:

    这里的AwesmonePos是我的项目文件夹名称,你可以起一个自己喜欢的名称。安装时根据项目需要配置所需要的模块。这里有一个小技巧,就是在你已经提前建立好了文件夹的时候,我们也进入了文件夹,这时候我们可以省略这个文件夹名称。如下情况:
  3. 在命令行中,进入项目目录,使用npm install 安装package.json里项目的依赖包。如果你网速较慢的话,可以使用淘宝镜像的cnpm来进行安装。
  4. 查看是否安装正确。在命令行中输入 npm run dev ,如果能在浏览器中正常打开页面,说明安装正确。

到这里为止,我们的项目架构就建立好了,我们需要对Vue-cli给我们生成的文件进行一些必要的修改。

修改项目文件内容:

  1. 修改根目录下的index.html文件,我们想写一些CSS样式,这样作是为了更好的布局,然后修改一下标题栏。让标题符合项目这里起名叫“AwesomePOS-快餐店管理系统”。index.html修改后内容如下。
  2. 新建Pos组件,这个相当于程序员的入口文件。在src/components/page/目录下新建Pos.vue文件。文件内容写出vue模板的架构就可以。

     
  3. 修改路由文件,项目根目录/src/router/index.js,让入口文件变成Pos组件。
    先用import引入了Pos模板组件,然后修改routes里边的内容。如果你对Vue-router的知识还不了解,可以去看我以前的课程,这里就不作过多的讲解了。

这时候看一下浏览器中的网页,如果显示出了Hello Pos Demo.我们就算成功搭建项目架构了。下节课我们确定一下项目中使用的图标。

第3节:搞定项目图标Iconfont

在开发中经常会遇到小图标的使用问题,小图标的使用可以让程序更美观和增加可用性。网上给程序加上小图标的方法有很多。曾经为了寻找一款使用简单,图标美观的图标库,我真的是到处搜索,直到遇到了IconFont,我觉的它能满足我的大部分要求。那在这里我推荐大家使用IconFont,这是阿里巴巴的矢量图标库。(这绝对不是广告,只是自己使用的一些感受)

挑选自己喜欢的图标

Iconfont中有很多图标,我们可以像在超市逛街一样,挑选自己喜欢的商品,然后放入购物车。

挑选图标的过程(共6步)

  1. 进入网站:Iconfont网址:http://www.iconfont.cn
  2. 点击网站上方的“官方图标库”,选择自己喜欢的图标。在这里我选择天猫的图标库。
  3. 选择好自己喜欢的图标,你可以有两个选择,下载代码添加至项目
  4. 我们这两选择添加至项目,然后新建项目,并输入名称。
  5. 项目添加好后,会自动给我们转入到我们项目库中。点击查看在线链接。
  6. 生产css引入的代码,生成后就可以在项目首页index.html引入了。

图标的使用:

图标顺利引入到项目中,已经可以使用它们了,在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴,也可以自己写代码。

这样在页面中就可以看到图标了。

添加更多图标:

如果在项目中觉的图标不够用了,需要添加更多图标。可以利用下面四步进行添加。

  1. 去Iconfont网站继续挑选,把相中的图标加入购物车中。
  2. 把购物车中的图标加入到项目中。
  3. 重新生成在线链接。(这部很重要)
  4. 在项目主页中(index.html),更换css引入链接。

实战项目开发的知识点就是很多,也很杂,但是这些都很实用,你也会快速成长,不要感觉和Vue无关就忽略,让我们共同努力,变成更好的自己。

 

第4节:编写独立的侧边栏导航组件

上节学习了inconFont的使用,可以在项目中加入漂亮的icon图标了。这节课我们要快速撸一个侧边栏组件出来。组件的作用就是在可以复用,想在那个页面使用都可以,并且像写html标签一样简单。

建立leftNav.vue文件:

我们在src/components目录下,先新建一个common和page文件夹。

  • common文件夹用来放共用组件,下面写的leftNav.vue组件就放到这里。
  • page文件夹用来放我们的页面模板组件,页面的模板文件放到这里。

在common文件夹下,新建leftNav.vue文件。

开始动手写代码:

建立好文件后,我们先给components来个基本组件结构,你可以复制粘贴也可以手写。

开始写html结构,我们用列表li来代表导航。菜单栏有收银、店铺、商品、会员、统计。我们编写的html结构如下

注意:这里你也许和我使用的图标不一样,请自行改成你图标用的代码,不要无脑拷贝,图标会显示不出来。

components(组件)基本结构写好后,开始动手写CSS样式,让我们的组件变的好看。

编写完CSS样式,这个组件算是大体写好了,以后根据需求我们会在组件里添加<route-link>标签。但是现在还没有这个需求,所以暂时不添加。

把leftNav组件放到模板中

先用import在App.vue中引入leftNav组件。

引入后在vue的构造器里添加components属性,并放入我们的leftNav组件。

这样组件就算在也页面引入成功了,接下来我们就可以在<template>区域里愉快的使用它(<leftNav></leftNav>)。贴出引入使用全部代码,方便大家学习查看。

第5节:开启Element封印

Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库,提供了配套设计资源,帮助你的网站快速成型。在项目中自己写组件虽然灵活,但是效率并不高效,所以要学会站在巨人的肩膀上干活,Element就是巨人的肩旁,也是现在国内比较成熟的以一套Vue的组件库。所以我决定 使用这个组件库开发项目。

npm安装

这里使用npm的方式安装,它能更好地和webpack打包工具配合使用。

如果你网络状况不佳可以使用cnpm来进行安装。

完整引入项目

在main.js中写入以下内容:

以上代码便完成了Element的引入。需要注意的是,样式文件需要单独引入。

用Element的el-row的布个局

安装好,先做个简单的布局小试牛刀,这里作两栏布局,Element支持用24栏的形式进行布局。

在Pos.vue里添加模版布局:

解决100%高的问题

在页面中使用了Element组件,这样他会自动给我们生产虚拟DOM,我们无法设置高度100%;

这时候可以利用javascript,来设置100%高度问题。先要给我们的<el-col>标签上添加一个id,我们这里把ID设置为

order-list。然后在vue构造器里使用mounted钩子函数来设置高度。

 

布局的基本架构,我们已经做好,剩下的就是一些细节。下节课我们将用一节课的时间制作大部分CSS样式内容。

第6节:利用Element快速布局(1)

这节课我们将快速利用Element进行布局页面,这章视频中我会直接拷贝Style代码,因为我觉的你学Vue,那CSS也没有任何问题的,所以不耽误大家的宝贵事件。

el-tabs标签页组件

用Element里提供的el-tabs组件可以快速制作我们的tabs标签页效果,具体使用方法可以到Element的官网查看API。

基本用法很简单,可以直接在模板中引入<el-tabs>标签,标签里边用<el-tab-pane>来代表每个每个标签页。

先看一个最简单的代码:

细心的小伙伴会看到每个<el-tab-pane>里会有一个label属性,这个属性就是你标签页的标题。内容可以直接写在<el-tab-pane>里。

el-table组件制作表格

需要在订单的tab标签页里放入表格,把点选的食品放入到待结账列表里,可以使用Element的内置组件el-table。如果你对el-table不了解, 可以去Element官网去查看一下。我这里不作太多的解释,先把代码贴过来,然后根据代码在讲解。

这里我们采用了五列布表格, 在第1行中的:data是用来绑定数据源的, border代表表格有边框效果。在这视频里我会有详细的讲解。

tableData中的数据源的值,为了布局方便,所以我们进行了写死,以后会改成动态添加的数据。

你现在可以打开浏览器进行一下预览,看一下效果了。如果效果正常,我们可以继续往下编写了。

el-button 按钮组件

需要在点餐表格的下方放入三个功能性按钮,分别是挂单按钮、删除按钮、结账按钮。同样使用Element里的组件,进行快速写入。el-button 的type属性是设置按钮样式的,为了学些和区分我们这里用三个属性来设置按钮。

到这里我们左边最重要的订单操作区域就布局完成了,下节课我们布局右侧的商品布局。

第7节:利用Element快速布局(2)

上节完成了左边订单栏的布局,这节我们还是利用Element完成大部分布局。

这是完成布局的图片

常用商品区域布局:

在<el-col :span=17>标签里增加一个层,然后在层内进行布局。因为里边的商品实际意义上是列表,所以用无序列表<li>来布局商品。贴出布局的html代码。

有了基本html结构后,需要增加一些css样式来美化页面:

现在页面变的漂亮了,我们这时候为了页面更逼近真实效果,我们在Vue的构造器里临时加一个数组,用作常用商品使用。声明的变量叫oftenGoods(真实项目不能这样起名字,这里只是练习使用)。

有了数据,可以使用v-for循环来输出到html模板中。

商品分类布局:

这样我们商品的上半部分就布局完成了,现在需要布局下半部分,我们在下半部分先添加一个tabs的标签样式。

有上节课作tabs标签页的经验,这个变的异常简单。

制作商品的无序列表:

对无序列表进行CSS样式编写:

有了基本的样式,我们可以在Vue的构造器里添加汉堡类的数据。声明一个type0Goods的数据,数据格式如下。

用v-for改造我们的无序列表:

页面的基本布局我们已经制作完成,终于看起来像个收银界面了。但是现在的数据都是写死的,下节课我们将从后端用Axios拉去数据。

第8节:Axios从远程读取数据

上节课我们利用Elemnt已经把页面布局的差不多了,如果你觉的不够美观,可以自己再进行美化,因为课程的原因css细节我们这里就不深入美化了。这节课我们开始学习Axios的知识,并把商品数据从远端读取到页面上。学这节课时技术胖已经为大家准备好了后端数据,你们只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端,数据大家只要会调用即可。

安装Axios

我们直接使用npm install来进行安装。

由于axios是需要打包到生产环境中的,所以我们使用–save来进行安装。

引入Axios

我们在Pos.vue页面引入Axios,由于使用了npm来进行安装,所以这里不需要填写路径。

服务端拉取常用商品数据

远端服务器地址:http://jspang.com/DemoApi/oftenGoods.php

(在实际项目中这个后台接口地址是后端程序员提供给你的,你可以随便调用这个接口,我已经放到服务器上了。)

可以先把地址放到地址栏访问一下,是可以正常访问的,并且输出了json格式的字符串,这就是我们需要的远端数据了。这里我们使用Axios的get 方式来获得数据。

把axios的方法写到了created钩子函数中,我们使用了get 方法进行拉取数据,如果拉取成功用远端数据对oftenGoods进行赋值。

拉取报错,一般有两种情况:

  1. 网络不通:网络状况不是很好,这可以在失败后隔5秒再次请求。
  2. 报决绝访问:这种多是后端程序员设置了不允许跨域访问,需要你和后端程序员一起调试解决。

拉取分类商品数据:

远端服务器地址:http://jspang.com/DemoApi/typeGoods.php

依然用Get进行拉取,拉取后先用consoe.log(response)查看一下数据结构,让后进行赋值。由于知识跟上边的很像,文字版我就不多描述了,详细可以查看视频教程。

在这里贴出拉取和分配不同分类代码:

html模板输出代码:

在实际开发中类别也是循环出来的,这里为了教学演示,没有写的那么复杂,你只要明白了如何操作,以后你可以自己增加。就像我这个项目一样,在视频结束后,会慢慢写完善所有功能,最后送给女神,赢得女神芳心。

下节课我们学习订单操作里需要的功能,比如点击商品,添加到左边的订单栏里,增加,删除商品,模拟订单提交到后台。如果下节课一节讲不完,我们就分成两节课来讲。

 

第9节:订单模块制作 核心功能-1

经过上节课的学习,我们已经可以从后台取得数据了。这节课要完成的任务是实现页面左侧的订单列表页面的添加操作。本来我想一节课讲完的,但是内容还是比较多的,又不想让大家每节课学习很长时间,所以我把这个内容进行了划分。

添加商品到订单页面

我们在vue的构造器里加入methods方法,在methods方法里再加入addOrderList方法。这个方法的作用是点击右侧的商品,然后把商品添加到左边的列表里。

addOrderList方法(也许你只看文字版无法理解,推荐查看视频):

在作这个方法的时候,在订单列表的下方又添加了订单的统计功能,其实也就两项:订单价格汇总和订单商品数量汇总。我们在data里声明的值是totalMoney和totalCount。

写完这个方法后,我们还需要在我们的商品上绑定方法,来进行调用添加方法。

这样在点击商品时订单列表就会根据我们的程序逻辑发生变化。

订单列表中的增加按钮

商品中绑定addOrderList方法是非常容易的,如果在订单列表中绑定是需要特殊处理一下的,需要用到template的scope值,让后进行绑定。

这节课我们把订单增加的操作制作完成了,下节课我们要制作订单商品的删除和订单的整体删除功能,最后模拟一下订单的结账功能。

 

第10节:订单模块制作 核心功能-2

继续制作订单模块,这节课主要三个功能的制作,删除列表中的单个商品,删除列表中的全部商品,简单模拟结账。

删除单个商品

在veu构造器methods属性里增加一个delSingleGoods方法,并接收goods对象为参数,用数组的filter可以轻松删除数组中单个的商品。

现在可以npm run dev试一下了,会发现现在商品可以正确的删除了,但是统计的数量和金额是不正确的,我们需要写一些统计的代码。在下手之前你会发现在增加商品方法中也有类似统计的方法,既然两个功能很像,我们就重新写一个方法。

需要注意的是,以前我们是单独使用的,所以不用把totoalCount和totalMoney清零,但是做成公用方法了,记得清零。方法做好了,我们在需要的地方直接用this.getAllMoney()引用就可以了。

功能做好了,我们还需要为删除按钮绑定事件:

这样我们就把删除单个订单商品的功能做好了,我们可以测试调试一下。

删除全部订单商品

这个功能其实很简单,只要把this.tableData清空就可以了,在methods属性中写一个delAllGoods的方法。

有的小伙伴会好奇,你完全可以再次复用getAllMoney()方法进行汇总,为什么不用那?汇总方法里毕竟是有业务逻辑的,我们只做两个清零,这样消耗的资源更少,所以我们没有使用。

模拟结账

因为模拟结账需要Post数据到后台,我的服务器又不能提供这样的借口给大家,所以我只说制作思路,大家可以在自己的服务器上去实现。

1、设置我们Aixos的Pos方法。

2、接受返回值进行处理。

3、如果成功,清空现有构造器里的tableData,totalMoney,totalCount数据。

4、进行用户的友好提示。

由于前两个步骤不能演示,所以这里我们只模拟3和4步。在methods里作一个结账方法,清空数据和进行友好提示。

订单模块基本的功能就制作完成了,我希望大家都能动手练习一下,如果你不动手练习你永远学不会的。

 

第11节:项目打包和上线

一直追看的小伙伴可能知道原来还有一节挂单功能的制作,但是在录制的过程中我发现90%的知识点都是重复的,不重复的知识点讲的还和Vue没有关系,是html5的localStorage操作,所以我去掉了这节。这节我们主要讲一下打包需要注意的事项和总结一下我们学习的知识。

打包注意事项:

1、把绝对路径改为相对路径

我们打开config/index.js 会看到一个build属性,这里就我们打包的基本配置了。你在这里可以修改打包的目录,打包的文件名。最重要的是一定要把绝对目录改为相对目录。

这样才能保证我们打包出去的项目可以正常预览。

2、在命令行中用npm run build  进行打包。

 

总结:

我们通过这篇文章和视频学到了Vue2.0在实际项目开发中用到的知识点,有vue-router,Element,Axios,iconFont,如何利用数据来修改Dom。希望这篇文章可以对你有所帮助,(码了16000多字,陆陆续续写了20天)如果这篇文章对您有帮助,请到文章右方或者下方进行打赏。

 

 

 

未经允许不得转载:技术胖-胜洪宇关注web前端技术 » Vue实战视频-快餐店收银系统
分享到: 更多 (0)

评论 141

  1. #84

    第八节 不用引用axios 直接遍历数组就OK

    匿名2周前 (07-05)回复
  2. #83

    胖哥 6666 绝对干货

    匿名2周前 (07-03)回复
  3. #82

    胖哥 终于看完了前面的视频 跟着这个实战做完啦…最后有一点小BUG 就是在结账的时候 应该if判断tabledata的length!=0才对.不然没有商品也会显示购物成功的

    匿名3周前 (06-29)回复
  4. #81

    很不错的课程,学习到了很多新的知识以及跳过了你曾经走过的坑。之前学习的课程都是碎片化的,有了这个实战课程,大概知道了一个项目的制作流程。谢谢胖哥,等工资发了给你加你喜欢的香辣鸡腿堡。

    匿名3周前 (06-26)回复
  5. #80

    谢谢你胖哥

    匿名1个月前 (06-19)回复
  6. #79

    感谢胖哥

    匿名2个月前 (05-25)回复
  7. #78

    学完胖哥的vue视频,豁然开朗,感觉和react很相似,可以着手做项目了,嘎嘎!

    匿名4个月前 (03-25)回复
  8. #77

    胖哥,

    出不出 angular 的教学视频呢 ?

    匿名4个月前 (03-18)回复
  9. #76

    从胖哥这里学到很多, 谢谢!

    匿名4个月前 (03-12)回复
  10. #75

    胖哥打赏手机端没找到啊

    匿名4个月前 (03-11)回复
  11. #74

    不错!学完了

    匿名5个月前 (03-06)回复
  12. #73

    胖哥 ,你的文章很好,小弟要提点意见了,但是发现了好多错别字,这也可以理解,因为时间紧迫,代码可不能有错误哦,谢啦

    匿名5个月前 (03-05)回复
  13. #72

    胖哥,你好,非常感谢无意中发现这个网站.写的很好.

    匿名5个月前 (03-04)回复
  14. #71

    胖哥,我的男神。

    匿名5个月前 (02-28)回复
  15. #70

    胖哥,你好,非常感谢无意中发现这个网站,之前在官网上没懂的东西,在这里都理解了。照着你的视频做了一个快餐管理系统的首页,右侧的商品可以添加到左侧,也可以全部删除。但是左侧列表里单独的增加和删除按钮点击却不生效,请问是哪里的问题呢?

    删除
    增加

    匿名5个月前 (02-28)回复
  16. #69

    您好,我有个问题:
    第九节视频中,刷新页面,订单里默认的商品不会计算数量和价格,必须点击新的商品,才会计算。因为计算写在addOrderList方法中。这个有问题吧?

    匿名5个月前 (02-27)回复
  17. #68

    其实新手是需要那个挂单的,有时间还是补上去吧

    匿名5个月前 (02-13)回复
  18. #67

    酒保膏药是哪两个字呢,求推荐

    匿名5个月前 (02-12)回复
    • 九保,但是好像淘宝上搜不到了。

      技术胖5个月前 (02-13)回复
  19. #66

    胖哥,有个问题请教一下,我在第一次将商品添加到orderList的时候,用的
    var count = {“count”:1};
    var newGoods = Object.assign(goods,count);
    我第二次添加相同商品时,打印出来tableData中的count值已经变了,但是为什么没有更新到页面上去
    if(isHave){
    let arr = this.tableData.filter(item=>item.goodsId == goods.goodsId);
    arr[0].count++;
    }else{
    // let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
    var count = {“count”:1};
    var newGoods = Object.assign(goods,count);
    this.tableData.push(newGoods);
    }

    匿名5个月前 (02-08)回复
  20. #65

    引用import ‘element-ui/lib/theme-chalk/index.css’你的写错了,现在官网是这个路径

    匿名5个月前 (02-06)回复
    • 感谢,终于找到错误原因了,也感谢胖哥的无私奉献

      匿名5个月前 (02-09)回复
  21. #64

    感谢胖哥无私奉献 这套视频让我学到很多 从小白到入门 谢谢

    匿名5个月前 (02-06)回复
  22. #63

    想在element的基础上增加样式,怎么加?比如进度条,element-ui里面提供的几种颜色都不符合ui设计,这个时候应该怎么办呢?

    匿名5个月前 (02-05)回复
    • 是可以自己定义css样式的,如果你对CSS掌握的非常好。看一下Element的的源文件,然后就可以进行修改了。

      技术胖5个月前 (02-06)回复
      • 感觉改Element的源文件不太好,应该可以单独定义一个css文件吧,这个css文件,放哪里合适?

        匿名5个月前 (02-06)回复
  23. #62

    计算总价和总数量的时候我用的计算属性来完成,这样就不用在方法中再去执行方法了

    匿名6个月前 (02-01)回复
  24. #61

    项目的名称好像不可以包含大写字母吧 sorry, name can no longer contain capital letters.

    匿名6个月前 (01-22)回复
  25. #60

    可以把里面用到的php代码贴出来吗

    匿名6个月前 (01-22)回复
    • 只是个简单的接口,感觉这个没必要贴吧,再说很多小伙伴不会PHP,这样等于增加了他们的难度。

      技术胖6个月前 (01-22)回复
  26. #59

    胖哥,这个实战是没有高清视频吗?在百度云里找不到呢

    匿名6个月前 (01-19)回复
    • 有高清的,在微信群公告里是可以找到的,你好好找一下。

      技术胖6个月前 (01-21)回复
  27. #58

    胖哥,table里面的总计功能不用手动添加,在 el-table上添加show-summary这个属性就可以实现!

    匿名6个月前 (01-12)回复
  28. #57

    老师, 实际项目中, 删除(清空)订单这种属于危险操作, 一般会弹出一个确认框吧 ? 🙂

    匿名6个月前 (01-10)回复
  29. #56

    有个小建议: 增加或删除那里貌似可以用
    watch: {
    tableData: {
    deep: true,
    handler: function(newOrderList) {
    let [totalNum, totalPay] = [0, 0];
    for (let item of newOrderList) {
    totalNum += item.count;
    totalPay += item.count * item.price;
    }
    this.totalNum = totalNum;
    this.totalPay = totalPay;
    }}}

    匿名6个月前 (01-10)回复
  30. #55

    思路清晰易懂。这次实战里没有加入vue-router和vuex吗,感觉对那块比较模糊。

    匿名6个月前 (01-09)回复
  31. #54

    或者说传一份b站呗,积累一些年轻粉丝,也能避免你的站崩了,大家还能继续看

    匿名7个月前 (01-02)回复
    • 好的,我会想办法解决这些事情。

      技术胖7个月前 (01-03)回复
  32. #53

    胖大大能不能百度云给个所有视频的分享啊,感觉网站上不太清楚,zhouyanyus@foxmail.com

    匿名7个月前 (01-02)回复
    • 这个要要打赏之后才可以给的哦。

      技术胖7个月前 (01-03)回复
  33. #52

    胖哥!我的 li 标签不能点击!就是常用商品那下面的 li 标签,其他li标签不能点击 移上去不会出现手指的图标 急死我了….

    匿名7个月前 (12-27)回复
    • 查看一下标签的完整性,也就是成对出现的,你是不是有没闭合的。

      技术胖7个月前 (12-28)回复
  34. #51

    胖哥,项目打包成功后遇到一个问题,IE中获取不到服务器数据,其他浏览器正常显示,axios不兼容?如何解?

    匿名7个月前 (12-26)回复
    • IE是个奇葩的浏览器,请查看一下Axios支持IE的版本,并做出调整。

      技术胖7个月前 (12-27)回复
  35. #50

    为什么删除单个商品是这样写啊
    this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);

    匿名7个月前 (12-25)回复
    • 这个就是普通的JS语法,filter过滤。你可以先看一下filter的用法。

      技术胖7个月前 (12-26)回复
  36. #49

    大家如果用vscode的话,可以下载一个vscode-element-helper插件,写element样式会很快。

    匿名7个月前 (12-23)回复
  37. #48

    第六节 设置删除和增加按钮时,打出来现在出现警告了。然后看了一下,终端提示是现在已经用取代了………..

    匿名7个月前 (12-21)回复
  38. #47

    胖哥,我遇到一个问题,我把 包含商品图片的信息展示 提取成一个子组件了,在点击时候出现问题,

    在gootItem 组件中,使用 this.$emit(“increase”);向父组件通信
    编译报了 [Vue warn]: You may have an infinite update loop in a component render function 错误
    我修改成

    在子组件中定的 click 方法中 使用 this.$refs.goodItem.click();
    商品能成功添加,但出现 Cannot read property ‘click’ of undefined错误

    匿名7个月前 (12-21)回复
  39. #46

    胖老师,http://jspang.com/DemoApi/oftenGoods.php 的源码可以分享一下吗?做作业想参考。

    匿名7个月前 (12-19)回复
  40. #45

    后续更新什么时候啊

    匿名7个月前 (12-18)回复
    • 关注博客文章吧,以后会继续更新的。

      技术胖7个月前 (12-18)回复
  41. #44

    为什么我打开index.html是空白的呢

    匿名7个月前 (12-13)回复
    • 你必须打开服务器环境

      匿名7个月前 (12-16)回复
  42. #43

    胖哥,设置el-col的高度的话,在pos.vue文件中设置.pos,.el-row,.el-col{height:100%;},也能实现右侧主体容器高度的100%呀,这个跟用js设置有什么区别么

    匿名7个月前 (12-13)回复
  43. #42

    胖哥,能不能再给讲讲render这个选项,不太明白呢

    匿名7个月前 (12-12)回复
  44. #41

    胖老大,刚买了个你的webpack3的视频,感觉解决了以前好多困惑

    匿名7个月前 (12-10)回复
    • 你能学到东西就好,我们一起学习进步。一定会有更好的未来。加油骚年。

      技术胖7个月前 (12-11)回复
  45. #40

    胖哥,现在是只能打赏30 吗

    匿名7个月前 (12-08)回复
    • 是的啊,不过你要打赏100,可以加我好友后发红包,晚上我就可以吃鸡腿了。

      技术胖7个月前 (12-08)回复
      • 哈哈,你的回复好可爱,我现在刚出来工作,就支持30了。另外提个小小的建议,胖哥有的地方只讲了es6的语法,好想听听es5的。我知道也要学es6,但es5还没学好呢。胖哥付出必有回报,虽然钱不多,也算是支持下了。我更加想听实战视频,特别是带那种讲踩坑的那种。如何解决,如何思考—来自前端小白的心声~

        匿名7个月前 (12-08)回复
        • 首先感谢你的支持,30元晚上又可以吃鸡腿了。ES6博客中是有讲的,其实大部分还是ES5的写法。ES6只是一少部分。不过我以后会注意,碰到ES6的语法我简单解释一下。

          技术胖7个月前 (12-08)回复
  46. #39

    胖哥,辛苦了,我说一下我的两个疑点:1.if(this.tableData[i].goodsId==goods.goodsId)这个为啥要用goodsId判断
    2.let arr=this.tableData.filter(o=>o.goodsId==goods.goodsId); arr[0].count++; arr[0]是什么
    胖哥帮忙解答一下疑惑呗,非常感谢!还有一点小bug:el-col高度 多添加几个商品 超出电脑屏幕有滚动条时就会出现border-right少一截的问题 。

    匿名7个月前 (12-07)回复
    • 这个我发表下自己的想法1.if(this.tableData[i].goodsId==goods.goodsId),首先刚开始进入没点击任何东西,所以tableData里面是没东西的,也就是这个this.tableData[i].goodsId点击li之后才会取到相应的,所以用这个做判断,如果2者相等,说明已经发生过点击事件,已经有某个点击的商品进入左侧nav。2.let arr=this.tableData.filter(o=>o.goodsId==goods.goodsId); arr[0].count++; arr[0]是这个商品,因为不会重复添加,只是对这个商品的count属性进行增加

      匿名7个月前 (12-30)回复
  47. #38

    有更高级的vue课程推荐吗

    匿名8个月前 (12-06)回复
    • 马上会出一个Vue+Koa的电商实战课程。

      技术胖7个月前 (12-07)回复
  48. #37

    这个还会更新吗?

    匿名8个月前 (12-06)回复
    • 这个已经结束,但是后期还会出实战课程。

      技术胖7个月前 (12-07)回复
  49. #36

    胖哥 这个数据请求 是采用跨域吗

    匿名8个月前 (12-06)回复
  50. #35

    一口气看到了实战,胖哥的vue就差这一部分啦,不错

    匿名8个月前 (12-04)回复
    • 嗯,加油。以后让我们一起学习,每周争取更新三节视频。

      技术胖8个月前 (12-04)回复
  51. #34

    很不错、能这么认真录视频的人太少了,赞赞赞!!!

    匿名8个月前 (11-30)回复
  52. #33

    真的很有用,谢谢分享。

    匿名8个月前 (11-30)回复
    • 你能学到东西,我也很高兴。

      技术胖8个月前 (11-30)回复
  53. #32

    胖哥 你在引入element-ui时用的是import ‘element-ui/lib/theme-default/index.css’现在2.0的已经不支持,我一直安装不上,后来百度才发现已经换成这种的啦import ‘element-ui/lib/theme-chalk/index.css’

    匿名8个月前 (11-29)回复
    • 可能根据版本的升级,会有些不兼容的地方。注意更新知识。

      技术胖8个月前 (11-29)回复
  54. #31

    第六节 快速布局
    版本升级 需要将中的scope属性 修改为 slot-scope 但是不知道在哪里修改?

    不知梦9个月前 (10-24)回复
    • 对呀 (Emitted value instead of an instance of Error) the “scope” attribute for scoped slots have been deprecated and
      replaced by “slot-scope” since 2.5. The new “slot-scope” attribute can also be used on plain elements in additio
      n to to denote scoped slots.

      钻戒可可9个月前 (10-26)回复
    • template中的scope换成slot-scope就行了。

      匿名7个月前 (12-13)回复
  55. #30

    在Pos.vue文件上的template标签上把scope改成slot-scope,需要改的标签是包裹删除和增加按钮的template标签

    前端小菜比9个月前 (10-24)回复
  56. #29

    第六节 快速布局
    版本升级 需要将中的scope属性 修改为 slot-scope 但是不知道在哪里修改 指导下,谢谢

    钻戒可可9个月前 (10-23)回复
    • slot-scope=”scope”

      匿名5个月前 (02-24)回复
  57. #28

    第六节 element快速布局1
    需要将中的scope 设置成为 slot-scopt ,版本升级 ,但是我不知道在哪里修改,希望指导下,谢谢

    钻戒可可9个月前 (10-23)回复
    • template中的scope换成slot-scope就行了。

      匿名7个月前 (12-13)回复
  58. #27

    胖哥 第二节 的 npm 写成 mpm了

    李兴然9个月前 (10-15)回复
    • 谢谢你的建议,我会马上更改。

      技术胖9个月前 (10-22)回复
  59. #26

    胖哥 ,link标签那个不用加http的, 还有iconfont只要iconfont就行了 不用再加icon的

    郑飞10个月前 (10-02)回复
    • 厉害

      匿名5个月前 (03-06)回复
  60. #25

    胖哥,第五节,设置element100%高度那个问题,提供一个更加简单的解决方案,直接设置.pos-order{height:100vh;},vh支持ie9+。
    感谢胖哥,学到很多

    吴舟波10个月前 (09-30)回复
  61. #24

    请教下 这个是收银界面 如果想做个店铺界面 标签该放哪里呢 我放app.vue里不对,放leftNav里把li包起来更不对了,求大神给个思路

    刘卓10个月前 (09-11)回复
    • router-link标签

      刘卓10个月前 (09-11)回复
  62. #23

    胖哥,我做的那个pos页面为什么在本地打开看不见右面板块呢?但是左面的有显示出来咯

    晨夕11个月前 (09-06)回复
  63. #22

    讲的非常好,很细致,通俗易懂,感觉你很适合当讲师,很棒。我跟在后面学习的也不会吃力,当中遇到了个问题,就是我的图片一致加载不出来,data里面也没有goodsImg的信息也不知道怎么回事,希望大神能帮我解答一下。

    汪神兵11个月前 (09-04)回复
  64. #21

    感觉你真的好厉害,无私的为大家奉献这么多好的课程,我是一个前端新手,非常感谢你,讲解的课程也非常细致。真的非常感觉

    lijialang11个月前 (08-15)回复
    • 如此高的评价确实不敢当,希望可以帮助更多的小伙伴。

      技术胖11个月前 (08-16)回复
  65. #20

    胖哥,后期会加入Vuex吗?

    Felix1年前 (2017-07-21)回复
    • 不会更新了,已经更新过了。

      技术胖1年前 (2017-07-22)回复
  66. #19

    无意中发现了胖哥的这个网站,很厉害,榜样!收获很多,谢谢胖哥!

    Janwei1年前 (2017-07-14)回复
  67. #18

    let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId); arr[0].count++; 胖大神,为什么,这里是定义的变量arr中count++,这个值并没有返回到tabledata中,为什么tabledata的count会改变呢

    绿袖子1年前 (2017-07-11)回复
  68. #17

    感谢技术:
    我打包后,出现了pos组件没加载的情况,后来找了很久发现,是配置了mode:’history’,希望能得到您的解答

    鹏鹏1年前 (2017-07-10)回复
    • 这个history的问题我在以前的视频中已经讲解过很多次了,你要启用history模式需要服务端的配合。

      技术胖1年前 (2017-07-10)回复
  69. #16

    如果能够把vuex 也结合进去就更完美了 不过还是要感谢作者 辛苦了

    海浪1年前 (2017-07-05)回复
  70. #15

    你好,请问代码可以共享下吗?想好好学习一下

    elilee1年前 (2017-07-04)回复
    • 在QQ群里有这个源文件,可以到群文件里下载。

      技术胖1年前 (2017-07-05)回复
  71. #14

    elementUI里面有集成汇总的功能,是最近新加的吗?

    Hanhan1年前 (2017-07-02)回复
  72. #13

    胖老师,感觉那个结算金额和数量的方法,直接用computed属性会更好,就不用再add和del方法里调用total方法了,个人拙见,嘿嘿

    hoking1年前 (2017-06-21)回复
    • 谢谢你的指正,很高兴听到你的意见。

      技术胖1年前 (2017-06-22)回复
    • computed请教怎么写这个计算方法

      匿名6个月前 (02-03)回复
  73. #12

    胖哥你好,页面上的flash视频都挂了,不能看

    hzm1年前 (2017-06-19)回复
  74. #11

    你好 我想问一个问题 你用axios,.get(api).then().catch()的时候,里面的this应该指向的是axios对象的,那么它下面是没有oftenGoods的。这里是不是应该用let that = this 然后that.oftenGoods=response.data呢?

    1年前 (2017-06-18)回复
    • 指针自己测试一下,可能你的理解有错误。

      技术胖1年前 (2017-06-19)回复
    • 箭头函数啊

      匿名5个月前 (02-05)回复
  75. #10

    你好,博主,能否有空更新一个你GitHub上的Admin的视频教程,我一直想学习一下搭建Admin框架的视频教程,因为一般情况来说公司内部的后台管理系统还是很有实用意义的,无奈之前都是用Jquery esay ui这类的框架写,很想学习一下用新技术怎么开发

    stacer1年前 (2017-06-15)回复
  76. #9

    胖哥 我发现在vue路由里面加了mode: ‘history’, 打包后就不能直接访问了,这个是需要后端解决吗?

    烈火1年前 (2017-06-13)回复
    • 不用history模式就可以了。如果需要用,需要后端提供支持。

      技术胖1年前 (2017-06-14)回复
  77. #8

    无意间看到这个学习视频,学到很多,胖哥加油,期待你的新作

    前端小丑1年前 (2017-06-13)回复
  78. #7

    胖哥接下去会不会出一个移动端的vue教程?

    闪了腰的青春1年前 (2017-06-12)回复
    • 有可能会讲,不过要先讲完ES6。

      技术胖1年前 (2017-06-13)回复
      • 真棒 跟着你学习了很好 好导师

        闪了腰的青春1年前 (2017-06-13)回复
  79. #6

    晚上回去hign起来

    lyseky1年前 (2017-06-12)回复
    • 建议补充vuex到实战项目种,还有登录验证,感觉还是简单的购物车功能,一个下午就撸完了

      lyseky1年前 (2017-06-15)回复
      • 可以去github上找个vue-elm,照着撸。视频只是个引路,录制只是个人业余爱好,所以有不完善的地方,敬请谅解。

        技术胖1年前 (2017-06-15)回复
  80. #5

    胖哥 你真棒 学到好多

    小郭米1年前 (2017-06-02)回复
  81. #4

    支持胖哥哥,胖哥哥有女神哦,羞羞哒

    小丸子1年前 (2017-05-28)回复
    • 必须有女神,搞定女神是我的终生愿望。

      技术胖1年前 (2017-05-28)回复
    • 女神会不会来 看到 哈哈

      吴建东11个月前 (09-01)回复
      • 我的女神从不看我的博客,甚至他都不知道我有这样一个博客。

        技术胖11个月前 (09-01)回复
  82. #3

    日常催更,感谢胖哥

    笑容1年前 (2017-05-24)回复
    • 非常感谢你的支持,昨天晚上有些事情要谈,所以没有更新。今天会继续更新。

      技术胖1年前 (2017-05-24)回复
  83. #2

    加油 胖哥

    kaixin1年前 (2017-05-23)回复
    • 谢谢支持。

      技术胖1年前 (2017-05-23)回复
      • 您好,请问有把视频推上百度云吗?
        冒昧打扰

        Jarvis1年前 (2017-07-17)回复
        • 有的,不过需要你打赏一下,然后进微信群我才能提供给你。

          技术胖1年前 (2017-07-17)回复
  84. #1

    胖哥加油。期待你的更新。

    Lily1年前 (2017-05-23)回复