實戰筆記
第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 實戰閱讀筆記