实战笔记
第1节：Mockplus把咱们的想法画出来
Mockplus是产品经理装逼使用的利器，可是真的很好用，做为一个已经工做的程序员必须舔产品经理的脸，因此你也要对Mockplus的使用有所了解，并会简单的使用。其实Mockplus就是一个线框图制做工具，能把咱们的想法或者不太好用语言表达的地方，快速画出线框草图增长理解能力。javascript
为何选择快餐店POS系统？
刚开始我想做一套以酒水商城为背景的手机端应用，可是我发现网上这样的应用太多了，什么仿饿了么，什么知乎，什么购物车均可以在网上找到，因此你彻底能够Github网站中下载，自学掌握。我觉的既然做了这个实战，就要够酷够复杂，我下面列举了三个缘由，你们能够看一下（你其实能够忽略前两点）。php
- 这个收银界面足够复杂：咱们采用三栏布局，每栏的交互操做都颇有技术技巧，让你快速掌握复杂应用的开发。
- 用到的知识点多：用到实战中90%以上的知识点，让你把Vue的知识串联起来，快速成为单位中的技术牛人。
- 为了更好的和女神啪啪啪：京东-强东哥的女神愿望就是开奶茶店，个人女神愿望就是开个快餐店。
MockPlus软件下载：
Mockplus是一款免费的软件，你能够随便下载：https://www.mockplus.cn/ 。下载好后你须要注册一个帐户，就能够正常使用了。css
软件的基本需求分析和画的过程，请看视频，这里就不用文字描述了，去看视频吧。html
项目框线图；
下面是咱们用Mockplus制做的应用框线图，虽然简单，可是已经把我脑海中快餐店Pos系统的大致样式画出来了。在做项目以前，必定要画出框线图，反复讨论需求和技术实现，这样能避免开发中的大范围修改，在实际工做当中很是重要。前端
第2节：Vue-cli搭建开发环境
咱们采用Vue-cli进行快速搭建，若是你对Vue-cli还不了解，请观看下面的文章，大概30分钟可彻底掌握Vue-cli。vue
搭建项目架构：
项目采用Webpack+Vue-router的架构方式，开始安装（所有在windows系统上操做，我也没有mac电脑）。html5
- 按Win+R，而后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：
1mpm install vue-cli -g
这里的-g表明全局安装。 - 在命令行中初始化项目，咱们采用的是webpack模板，输入初始化命令：
1vue init webpack AwesomePos
这里的AwesmonePos是个人项目文件夹名称，你能够起一个本身喜欢的名称。安装时根据项目须要配置所须要的模块。这里有一个小技巧，就是在你已经提早创建好了文件夹的时候，咱们也进入了文件夹，这时候咱们能够省略这个文件夹名称。以下状况：
123mikdir AwesomePoscd AwesomePosvue init webpack - 在命令行中，进入项目目录，使用npm install 安装package.json里项目的依赖包。若是你网速较慢的话，可使用淘宝镜像的cnpm来进行安装。
- 查看是否安装正确。在命令行中输入 npm run dev ，若是能在浏览器中正常打开页面，说明安装正确。
到这里为止，咱们的项目架构就创建好了，咱们须要对Vue-cli给咱们生成的文件进行一些必要的修改。java
修改项目文件内容：
- 修改根目录下的index.html文件，咱们想写一些CSS样式，这样做是为了更好的布局，而后修改一下标题栏。让标题符合项目这里起名叫“AwesomePOS-快餐店管理系统”。index.html修改后内容以下。
1234567891011121314151617181920<!DOCTYPE html><html><head><meta charset="utf-8"><title>AwesomePOS-快餐管理系统</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css"><style>html,body,#app{height:100%;padding: 0;margin:0;}</style></head><body ><div id="app" ></div><!-- built files will be auto injected --></body></html> - 新建Pos组件，这个至关于程序员的入口文件。在src/components/page/目录下新建Pos.vue文件。文件内容写出vue模板的架构就能够。
1234567891011121314<template><div class="pos">Hello Pos Demo!</div></template><script>export default {name: 'Pos'}</script><style scoped></style>
- 修改路由文件，项目根目录/src/router/index.js，让入口文件变成Pos组件。
先用import引入了Pos模板组件，而后修改routes里边的内容。若是你对Vue-router的知识还不了解，能够去看我之前的课程，这里就不做过多的讲解了。
123456789101112131415import Vue from 'vue'import Router from 'vue-router'import Pos from '@/components/page/Pos'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Pos',component: Pos}]})
这时候看一下浏览器中的网页，若是显示出了Hello Pos Demo.咱们就算成功搭建项目架构了。下节课咱们肯定一下项目中使用的图标。webpack
第3节：搞定项目图标Iconfont
在开发中常常会遇到小图标的使用问题，小图标的使用可让程序更美观和增长可用性。网上给程序加上小图标的方法有不少。曾经为了寻找一款使用简单，图标美观的图标库，我真的是处处搜索，直到遇到了IconFont，我觉的它能知足个人大部分要求。那在这里我推荐你们使用IconFont，这是阿里巴巴的矢量图标库。（这绝对不是广告，只是本身使用的一些感觉）ios
挑选本身喜欢的图标
Iconfont中有不少图标，咱们能够像在超市逛街同样，挑选本身喜欢的商品，而后放入购物车。
挑选图标的过程（共6步）
- 进入网站：Iconfont网址：http://www.iconfont.cn
- 点击网站上方的“官方图标库”，选择本身喜欢的图标。在这里我选择天猫的图标库。
- 选择好本身喜欢的图标，你能够有两个选择，下载代码 和 添加至项目。
- 咱们这两选择添加至项目，而后新建项目，并输入名称。
- 项目添加好后，会自动给咱们转入到咱们项目库中。点击查看在线连接。
- 生产css引入的代码，生成后就能够在项目首页index.html引入了。
1<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">
图标的使用：
图标顺利引入到项目中，已经可使用它们了，在“个人项目中”你会看到图标的font class值。能够直接复制代码粘贴，也能够本身写代码。
|
1
|
<i class="icon iconfont icon-hanbao"></i>
|
这样在页面中就能够看到图标了。
添加更多图标：
若是在项目中觉的图标不够用了，须要添加更多图标。能够利用下面四步进行添加。
- 去Iconfont网站继续挑选，把相中的图标加入购物车中。
- 把购物车中的图标加入到项目中。
- 从新生成在线连接。（这部很重要）
- 在项目主页中(index.html)，更换css引入连接。
实战项目开发的知识点就是不少，也很杂，可是这些都很实用，你也会快速成长，不要感受和Vue无关就忽略，让咱们共同努力，变成更好的本身。
第4节：编写独立的侧边栏导航组件
上节学习了inconFont的使用，能够在项目中加入漂亮的icon图标了。这节课咱们要快速撸一个侧边栏组件出来。组件的做用就是在能够复用，想在那个页面使用均可以，而且像写html标签同样简单。
创建leftNav.vue文件：
咱们在src/components目录下，先新建一个common和page文件夹。
- common文件夹用来放共用组件，下面写的leftNav.vue组件就放到这里。
- page文件夹用来放咱们的页面模板组件，页面的模板文件放到这里。
在common文件夹下，新建leftNav.vue文件。
开始动手写代码：
创建好文件后，咱们先给components来个基本组件结构，你能够复制粘贴也能够手写。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<template>
<div class="left-nav">
</div>
</template>
<script>
export default {
name: 'leftNav',
data () {
return {
}
}
}
</script>
<style>
</style>
|
开始写html结构，咱们用列表li来表明导航。菜单栏有收银、店铺、商品、会员、统计。咱们编写的html结构以下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<ul>
<li>
<i class="icon iconfont icon-wodezichan"></i>
<div>收银</div>
</li>
<li>
<i class="icon iconfont icon-dianpu"></i>
<div>店铺</div>
</li>
<li>
<i class="icon iconfont icon-hanbao"></i>
<div>商品</div>
</li>
<li>
<i class="icon iconfont icon-huiyuanqia"></i>
<div>会员</div>
</li>
<li>
<i class="icon iconfont icon-tongji"></i>
<div>统计</div>
</li>
</ul>
|
注意：这里你也许和我使用的图标不同，请自行改为你图标用的代码，不要无脑拷贝，图标会显示不出来。
components（组件）基本结构写好后，开始动手写CSS样式，让咱们的组件变的好看。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<style>
.left-nav{
color:#fff;
font-size:10px;
height:100%;
background-color: #1D8ce0;
float:left;
width:5%;
}
.iconfont{
font-size:24px;
}
.left-nav ul{
padding:0px;
margin: 0px;
}
.left-nav li{
list-style: none;
text-align: center;
border-bottom:1px solid #20a0ff;
padding:10px;
}
</style>
|
编写完CSS样式，这个组件算是大致写好了，之后根据需求咱们会在组件里添加<route-link>标签。可是如今尚未这个需求，因此暂时不添加。
把leftNav组件放到模板中
先用import在App.vue中引入leftNav组件。
|
1
|
import leftNav from '@/components/common/leftNav'
|
引入后在vue的构造器里添加components属性，并放入咱们的leftNav组件。
|
1
2
3
4
5
6
|
export default {
name: 'app',
components:{
leftNav
}
}
|
这样组件就算在也页面引入成功了，接下来咱们就能够在<template>区域里愉快的使用它（<leftNav></leftNav>）。贴出引入使用所有代码，方便你们学习查看。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<template>
<div id="app">
<!--左侧导航-->
<leftNav></leftNav>
<!--操做区域-->
<div class="main">
<router-view></router-view>
</div>
</div>
</template>
<script>
import leftNav from '@/components/common/leftNav'
export default {
name: 'app',
components:{
leftNav
}
}
</script>
<style>
#app {
font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: left;
color: #2c3e50;
height:100%;
}
.main{
float:left;
width:95%;
background-color: #EFF2F7;
height:100%;
overflow: auto;
}
</style>
|
第5节：开启Element封印
Element是一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库，提供了配套设计资源，帮助你的网站快速成型。在项目中本身写组件虽然灵活，可是效率并不高效，因此要学会站在巨人的肩膀上干活，Element就是巨人的肩旁，也是如今国内比较成熟的以一套Vue的组件库。因此我决定 使用这个组件库开发项目。
npm安装
这里使用npm的方式安装，它能更好地和webpack打包工具配合使用。
|
1
|
npm install element-ui --save
|
若是你网络情况不佳可使用cnpm来进行安装。
完整引入项目
在main.js中写入如下内容:
|
1
2
3
4
5
6
7
8
9
10
11
|
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
|
以上代码便完成了Element的引入。须要注意的是，样式文件须要单独引入。
用Element的el-row的布个局
安装好，先作个简单的布局小试牛刀，这里做两栏布局，Element支持用24栏的形式进行布局。
在Pos.vue里添加模版布局：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<template>
<div class="pos">
<div>
<el-row >
<el-col :span='7'>
我是订单栏
</el-col>
<!--商品展现-->
<el-col :span="17">
我是产品栏
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
name: 'Pos',
data () {
return {
}
}
}
</script>
<style scoped>
</style>
|
解决100%高的问题
在页面中使用了Element组件，这样他会自动给咱们生产虚拟DOM，咱们没法设置高度100%；
这时候能够利用javascript，来设置100%高度问题。先要给咱们的<el-col>标签上添加一个id，咱们这里把ID设置为
|
1
2
3
4
|
mounted:function(){
var orderHeight=document.body.clientHeight;
document.getElementById("order-list").style.height=orderHeight+'px';
},
|
布局的基本架构，咱们已经作好，剩下的就是一些细节。下节课咱们将用一节课的时间制做大部分CSS样式内容。
第6节：利用Element快速布局（1）
这节课咱们将快速利用Element进行布局页面，这章视频中我会直接拷贝Style代码，由于我觉的你学Vue，那CSS也没有任何问题的，因此不耽误你们的宝贵事件。
el-tabs标签页组件
用Element里提供的el-tabs组件能够快速制做咱们的tabs标签页效果，具体使用方法能够到Element的官网查看API。
基本用法很简单，能够直接在模板中引入<el-tabs>标签，标签里边用<el-tab-pane>来表明每一个每一个标签页。
先看一个最简单的代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
<el-tabs>
<el-tab-pane label="点餐">
点餐
</el-tab-pane>
<el-tab-pane label="挂单">
挂单
</el-tab-pane>
<el-tab-pane label="外卖">
外卖
</el-tab-pane>
</el-tabs>
|
细心的小伙伴会看到每一个<el-tab-pane>里会有一个label属性，这个属性就是你标签页的标题。内容能够直接写在<el-tab-pane>里。
el-table组件制做表格
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<el-table :data="tableData" border show-summary style="width: 100%" >
<el-table-column prop="goodsName" label="商品" ></el-table-column>
<el-table-column prop="count" label="量" width="50"></el-table-column>
<el-table-column prop="price" label="金额" width="70"></el-table-column>
<el-table-column label="操做" width="100" fixed="right">
<template scope="scope">
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">增长</el-button>
</template>
</el-table-column>
</el-table>
|
这里咱们采用了五列布表格， 在第1行中的:data是用来绑定数据源的， border表明表格有边框效果。在这视频里我会有详细的讲解。
tableData中的数据源的值，为了布局方便，因此咱们进行了写死，之后会改为动态添加的数据。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
tableData: [{
goodsName: '可口可乐',
price: 8,
count:1
}, {
goodsName: '香辣鸡腿堡',
price: 15,
count:1
}, {
goodsName: '爱心薯条',
price: 8,
count:1
}, {
goodsName: '甜筒',
price: 8,
count:1
}]
|
你如今能够打开浏览器进行一下预览，看一下效果了。若是效果正常，咱们能够继续往下编写了。
el-button 按钮组件
须要在点餐表格的下方放入三个功能性按钮，分别是挂单按钮、删除按钮、结帐按钮。一样使用Element里的组件，进行快速写入。el-button 的type属性是设置按钮样式的，为了学些和区分咱们这里用三个属性来设置按钮。
|
1
2
3
|
<el-button type="warning" >挂单</el-button>
<el-button type="danger" >删除</el-button>
<el-button type="success" >结帐</el-button>
|
到这里咱们左边最重要的订单操做区域就布局完成了，下节课咱们布局右侧的商品布局。
第7节：利用Element快速布局（2）
上节完成了左边订单栏的布局，这节咱们仍是利用Element完成大部分布局。
这是完成布局的图片
经常使用商品区域布局：
在<el-col :span=17>标签里增长一个层，而后在层内进行布局。由于里边的商品实际意义上是列表，因此用无序列表<li>来布局商品。贴出布局的html代码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div class="often-goods">
<div class="title">经常使用商品</div>
<div class="often-goods-list">
<ul>
<li>
<span>香辣鸡腿堡</span>
<span class="o-price">￥15元</span>
</li>
</ul>
</div>
</div>
|
有了基本html结构后，须要增长一些css样式来美化页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.title{
height: 20px;
border-bottom:1px solid #D3DCE6;
background-color: #F9FAFC;
padding:10px;
}
.often-goods-list ul li{
list-style: none;
float:left;
border:1px solid #E5E9F2;
padding:10px;
margin:5px;
background-color:#fff;
}
.o-price{
color:#58B7FF;
}
|
如今页面变的漂亮了，咱们这时候为了页面更逼近真实效果，咱们在Vue的构造器里临时加一个数组，用做经常使用商品使用。声明的变量叫oftenGoods（真实项目不能这样起名字，这里只是练习使用）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
oftenGoods:[
{
goodsId:1,
goodsName:'香辣鸡腿堡',
price:18
}, {
goodsId:2,
goodsName:'田园鸡腿堡',
price:15
}, {
goodsId:3,
goodsName:'和风汉堡',
price:15
}, {
goodsId:4,
goodsName:'快乐全家桶',
price:80
}, {
goodsId:5,
goodsName:'脆皮炸鸡腿',
price:10
}, {
goodsId:6,
goodsName:'魔法鸡块',
price:20
}, {
goodsId:7,
goodsName:'可乐大杯',
price:10
}, {
goodsId:8,
goodsName:'雪顶咖啡',
price:18
}, {
goodsId:9,
goodsName:'大块鸡米花',
price:15
}, {
goodsId:20,
goodsName:'香脆鸡柳',
price:17
}
]
|
有了数据，可使用v-for循环来输出到html模板中。
商品分类布局：
这样咱们商品的上半部分就布局完成了，如今须要布局下半部分，咱们在下半部分先添加一个tabs的标签样式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class="goods-type">
<el-tabs>
<el-tab-pane label="汉堡">
汉堡
</el-tab-pane>
<el-tab-pane label="小食">
小食
</el-tab-pane>
<el-tab-pane label="饮料">
饮料
</el-tab-pane>
<el-tab-pane label="套餐">
套餐
</el-tab-pane>
</el-tabs>
</div>
|
有上节课做tabs标签页的经验，这个变的异常简单。
制做商品的无序列表：
|
1
2
3
4
5
6
7
|
<ul class='cookList'>
<li>
<span class="foodImg"><img src="http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg" width="100%"></span>
<span class="foodName">香辣鸡腿堡</span>
<span class="foodPrice">￥20.00元</span>
</li>
</ul>
|
对无序列表进行CSS样式编写：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
.cookList li{
list-style: none;
width:23%;
border:1px solid #E5E9F2;
height: auot;
overflow: hidden;
background-color:#fff;
padding: 2px;
float:left;
margin: 2px;
}
.cookList li span{
display: block;
float:left;
}
.foodImg{
width: 40%;
}
.foodName{
font-size: 18px;
padding-left: 10px;
color:brown;
}
.foodPrice{
font-size: 16px;
padding-left: 10px;
padding-top:10px;
}
|
有了基本的样式，咱们能够在Vue的构造器里添加汉堡类的数据。声明一个type0Goods的数据，数据格式以下。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
type0Goods:[
{
goodsId:1,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",
goodsName:'香辣鸡腿堡',
price:18
}, {
goodsId:2,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
goodsName:'田园鸡腿堡',
price:15
}, {
goodsId:3,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",
goodsName:'和风汉堡',
price:15
}, {
goodsId:4,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
goodsName:'快乐全家桶',
price:80
}, {
goodsId:5,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
goodsName:'脆皮炸鸡腿',
price:10
}, {
goodsId:6,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg",
goodsName:'魔法鸡块',
price:20
}, {
goodsId:7,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg",
goodsName:'可乐大杯',
price:10
}, {
goodsId:8,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg",
goodsName:'雪顶咖啡',
price:18
}, {
goodsId:9,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
goodsName:'大块鸡米花',
price:15
}, {
goodsId:20,
goodsImg:"http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg",
goodsName:'香脆鸡柳',
price:17
}
],
|
用v-for改造咱们的无序列表：
|
1
2
3
4
5
|
<li v-for="goods in type0Goods">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</li>
|
页面的基本布局咱们已经制做完成，终于看起来像个收银界面了。可是如今的数据都是写死的，下节课咱们将从后端用Axios拉去数据。
第8节：Axios从远程读取数据
上节课咱们利用Elemnt已经把页面布局的差很少了，若是你觉的不够美观，能够本身再进行美化，由于课程的缘由css细节咱们这里就不深刻美化了。这节课咱们开始学习Axios的知识，并把商品数据从远端读取到页面上。学这节课时技术胖已经为你们准备好了后端数据，大家只要调用相应的页面就能够调取，在实际开发中，这些后台数据是须要后端程序员和你共同讨论制做的。咱们如今只作前端，数据你们只要会调用便可。
安装Axios
咱们直接使用npm install来进行安装。
|
1
|
npm install axios --save
|
因为axios是须要打包到生产环境中的，因此咱们使用–save来进行安装。
引入Axios
咱们在Pos.vue页面引入Axios，因为使用了npm来进行安装，因此这里不须要填写路径。
|
1
|
import axios from 'axios'
|
服务端拉取经常使用商品数据
远端服务器地址：http://jspang.com/DemoApi/oftenGoods.php
（在实际项目中这个后台接口地址是后端程序员提供给你的，你能够随便调用这个接口，我已经放到服务器上了。）
能够先把地址放到地址栏访问一下，是能够正常访问的，而且输出了json格式的字符串，这就是咱们须要的远端数据了。这里咱们使用Axios的get 方式来得到数据。
|
1
2
3
4
5
6
7
8
9
10
11
|
created(){
axios.get('http://jspang.com/DemoApi/oftenGoods.php')
.then(response=>{
console.log(response);
this.oftenGoods=response.data;
})
.catch(error=>{
console.log(error);
alert('网络错误，不能访问');
})
},
|
把axios的方法写到了created钩子函数中，咱们使用了get 方法进行拉取数据，若是拉取成功用远端数据对oftenGoods进行赋值。
拉取报错，通常有两种状况：
- 网络不通：网络情况不是很好，这能够在失败后隔5秒再次请求。
- 报决绝访问：这种可能是后端程序员设置了不容许跨域访问，须要你和后端程序员一块儿调试解决。
拉取分类商品数据：
远端服务器地址：http://jspang.com/DemoApi/typeGoods.php
依然用Get进行拉取，拉取后先用consoe.log(response)查看一下数据结构，让后进行赋值。因为知识跟上边的很像，文字版我就很少描述了，详细能够查看视频教程。
在这里贴出拉取和分配不一样分类代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//读取分类商品列表
axios.get('http://jspang.com/DemoApi/typeGoods.php')
.then(response=>{
console.log(response);
//this.oftenGoods=response.data;
this.type0Goods=response.data[0];
this.type1Goods=response.data[1];
this.type2Goods=response.data[2];
this.type3Goods=response.data[3];
})
.catch(error=>{
console.log(error);
alert('网络错误，不能访问');
})
|
html模板输出代码：
|
1
2
3
4
5
6
7
|
<ul class='cookList'>
<li v-for="goods in type3Goods">
<span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
<span class="foodName">{{goods.goodsName}}</span>
<span class="foodPrice">￥{{goods.price}}元</span>
</li>
</ul>
|
在实际开发中类别也是循环出来的，这里为了教学演示，没有写的那么复杂，你只要明白了如何操做，之后你能够本身增长。就像我这个项目同样，在视频结束后，会慢慢写完善全部功能，最后送给女神，赢得女神芳心。
下节课咱们学习订单操做里须要的功能，好比点击商品，添加到左边的订单栏里，增长，删除商品，模拟订单提交到后台。若是下节课一节讲不完，咱们就分红两节课来说。
第9节：订单模块制做 核心功能-1
通过上节课的学习，咱们已经能够从后台取得数据了。这节课要完成的任务是实现页面左侧的订单列表页面的添加操做。原本我想一节课讲完的，可是内容仍是比较多的，又不想让你们每节课学习很长时间，因此我把这个内容进行了划分。
添加商品到订单页面
咱们在vue的构造器里加入methods方法，在methods方法里再加入addOrderList方法。这个方法的做用是点击右侧的商品，而后把商品添加到左边的列表里。
addOrderList方法(也许你只看文字版没法理解，推荐查看视频)：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
methods:{
//添加订单列表的方法
addOrderList(goods){
this.totalCount=0; //汇总数量清0
this.totalMoney=0;
let isHave=false;
//判断是否这个商品已经存在于订单列表
for (let i=0; i<this.tableData.length;i++){
console.log(this.tableData[i].goodsId);
if(this.tableData[i].goodsId==goods.goodsId){
isHave=true; //存在
}
}
//根据isHave的值判断订单列表中是否已经有此商品
if(isHave){
//存在就进行数量添加
let arr = this.tableData.filter(o =>o.goodsId == goods.goodsId);
arr[0].count++;
//console.log(arr);
}else{
//不存在就推入数组
let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
this.tableData.push(newGoods);
}
//进行数量和价格的汇总计算
this.tableData.forEach((element) => {
this.totalCount+=element.count;
this.totalMoney=this.totalMoney+(element.price*element.count);
});
}
}
|
在做这个方法的时候，在订单列表的下方又添加了订单的统计功能，其实也就两项：订单价格汇总和订单商品数量汇总。咱们在data里声明的值是totalMoney和totalCount。
写完这个方法后，咱们还须要在咱们的商品上绑定方法，来进行调用添加方法。
|
1
|
@click="addOrderList(goods)"
|
这样在点击商品时订单列表就会根据咱们的程序逻辑发生变化。
订单列表中的增长按钮
商品中绑定addOrderList方法是很是容易的，若是在订单列表中绑定是须要特殊处理一下的，须要用到template的scope值，让后进行绑定。
|
1
|
<el-button type="text" size="small" @click="addOrderList(scope.row)">增长</el-button>
|
这节课咱们把订单增长的操做制做完成了，下节课咱们要制做订单商品的删除和订单的总体删除功能，最后模拟一下订单的结帐功能。
第10节：订单模块制做 核心功能-2
继续制做订单模块，这节课主要三个功能的制做，删除列表中的单个商品，删除列表中的所有商品，简单模拟结帐。
删除单个商品
在veu构造器methods属性里增长一个delSingleGoods方法，并接收goods对象为参数，用数组的filter能够轻松删除数组中单个的商品。
|
1
2
3
4
5
6
|
//删除单个商品
delSingleGoods(goods){
console.log(goods);
this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);
},
|
如今能够npm run dev试一下了，会发现如今商品能够正确的删除了，可是统计的数量和金额是不正确的，咱们须要写一些统计的代码。在下手以前你会发如今增长商品方法中也有相似统计的方法，既然两个功能很像，咱们就从新写一个方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
//汇总数量和金额
getAllMoney(){
this.totalCount=0;
this.totalMoney=0;
if(this.tableData){
this.tableData.forEach((element) => {
this.totalCount+=element.count;
this.totalMoney=this.totalMoney+(element.price*element.count);
});
}
}
|
须要注意的是，之前咱们是单独使用的，因此不用把totoalCount和totalMoney清零，可是作成公用方法了，记得清零。方法作好了，咱们在须要的地方直接用this.getAllMoney()引用就能够了。
功能作好了，咱们还须要为删除按钮绑定事件：
|
1
|
<el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
|
这样咱们就把删除单个订单商品的功能作好了，咱们能够测试调试一下。
删除所有订单商品
这个功能其实很简单，只要把this.tableData清空就能够了，在methods属性中写一个delAllGoods的方法。
|
1
2
3
4
5
6
|
//删除全部商品
delAllGoods() {
this.tableData = [];
this.totalCount = 0;
this.totalMoney = 0;
},
|
有的小伙伴会好奇，你彻底能够再次复用getAllMoney()方法进行汇总，为何不用那？汇总方法里毕竟是有业务逻辑的，咱们只作两个清零，这样消耗的资源更少，因此咱们没有使用。
模拟结帐
由于模拟结帐须要Post数据到后台，个人服务器又不能提供这样的借口给你们，因此我只说制做思路，你们能够在本身的服务器上去实现。
一、设置咱们Aixos的Pos方法。
二、接受返回值进行处理。
三、若是成功，清空现有构造器里的tableData，totalMoney，totalCount数据。
四、进行用户的友好提示。
因为前两个步骤不能演示，因此这里咱们只模拟3和4步。在methods里做一个结帐方法，清空数据和进行友好提示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
checkout() {
if (this.totalCount!=0) {
this.tableData = [];
this.totalCount = 0;
this.totalMoney = 0;
this.$message({
message: '结帐成功，感谢你又为店里出了一份力!',
type: 'success'
});
}else{
this.$message.error('不能空结。老板了解你急切的心情！');
}
}
|
订单模块基本的功能就制做完成了，我但愿你们都能动手练习一下，若是你不动手练习你永远学不会的。
第11节：项目打包和上线
一直追看的小伙伴可能知道原来还有一节挂单功能的制做，可是在录制的过程当中我发现90%的知识点都是重复的，不重复的知识点讲的还和Vue没有关系，是html5的localStorage操做，因此我去掉了这节。这节咱们主要讲一下打包须要注意的事项和总结一下咱们学习的知识。
打包注意事项：
一、把绝对路径改成相对路径
咱们打开config/index.js 会看到一个build属性，这里就咱们打包的基本配置了。你在这里能够修改打包的目录，打包的文件名。最重要的是必定要把绝对目录改成相对目录。
|
1
|
assetsPublicPath:'./'
|
这样才能保证咱们打包出去的项目能够正常预览。
二、在命令行中用npm run build 进行打包。
|
1
|
npm run build
|
总结：
咱们经过这篇文章和视频学到了Vue2.0在实际项目开发中用到的知识点，有vue-router，Element，Axios，iconFont，如何利用数据来修改Dom。但愿这篇文章能够对你有所帮助，（码了16000多字，陆陆续续写了20天）若是这篇文章对您有帮助，请到文章右方或者下方进行打赏。
- 1. 《Maven实战》笔记
- 2. Maven实战笔记
- 3. netty实战笔记
- 4. DHCP 实战笔记
- 5. JVM实战笔记
- 6. Webpack实战笔记
- 7. saltstack实战笔记
- 8. Tensorflow 实战笔记
- 9. 《Java8实战》读书笔记
- 10. Maven 实战阅读笔记
- 更多相关文章...
- • ASP.NET Razor - 标记 - ASP.NET 教程
- • ADO 添加记录 - ADO 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 《Maven实战》笔记
- 2. Maven实战笔记
- 3. netty实战笔记
- 4. DHCP 实战笔记
- 5. JVM实战笔记
- 6. Webpack实战笔记
- 7. saltstack实战笔记
- 8. Tensorflow 实战笔记
- 9. 《Java8实战》读书笔记
- 10. Maven 实战阅读笔记