vue實踐06-項目實踐
vue實踐06-項目實踐
vue-cli建立項目
項目採用Webpack+Vue-router的架構方式,在命令行中，進入項目目錄，使用npm install 安裝package.json裏項目的依賴包。若是你網速較慢的話，可使用淘寶鏡像的cnpm來進行安裝。 查看是否安裝正確。在命令行中輸入 npm run dev ，若是能在瀏覽器中正常打開頁面，說明安裝正確。javascript
mkdir myPos
cd myPos
vue init webpack
cnpm install
npm run dev
複製代碼
本博客代碼所在github：https://github.com/dumingcode/myPos.gitphp
編寫獨立的側邊欄導航組件
這節課咱們要快速擼一個側邊欄組件出來。組件的做用就是在能夠複用，想在那個頁面使用均可以，而且像寫html標籤同樣簡單。css
創建leftNav.vue文件：
咱們在src/components目錄下，先新建一個common和page文件夾。html
- common文件夾用來放共用組件，下面寫的leftNav.vue組件就放到這裏。
- page文件夾用來放咱們的頁面模板組件，頁面的模板文件放到這裏。 在common文件夾下，新建leftNav.vue文件。 開始動手寫代碼： 創建好文件後，咱們先給components來個基本組件結構，你能夠複製粘貼也能夠手寫。
<template>
<div class="left-nav">
</div>
</template>
<script>
export default {
name: 'leftNav',
data () {
return {
}
}
}
</script>
<style>
</style>
複製代碼
開始寫html結構，咱們用列表li來表明導航。菜單欄有收銀、店鋪、商品、會員、統計。咱們編寫的html結構以下vue
<template>
<div class="left-nav">
<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>
</div>
</template>
複製代碼
注意：這裏你也許和我使用的圖標不同，請自行改爲你圖標用的代碼，不要無腦拷貝，圖標會顯示不出來。java
components（組件）基本結構寫好後，開始動手寫CSS樣式，讓咱們的組件變的好看。webpack
<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樣式，這個組件算是大致寫好了，之後根據需求咱們會在組件裏添加標籤。可是如今尚未這個需求，因此暫時不添加。ios
把leftNav組件放到模板中,先用import在App.vue中引入leftNav組件。git
import leftNav from '@/components/common/leftNav'
複製代碼
引入後在vue的構造器裏添加components屬性，並放入咱們的leftNav組件github
export default {
name: 'App',
components:{
leftNav
}
}
複製代碼
這樣組件就算在也頁面引入成功了，接下來咱們就能夠在<template>區域裏愉快的使用它（<leftNav></leftNav>）。App.vue所有代碼以下所示：
<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>
複製代碼
使用Element ui
Element是一套爲開發者、設計師和產品經理準備的基於Vue2.0的組件庫，提供了配套設計資源，幫助你的網站快速成型。其實還有另一套相似的ui組件iview。
- 安裝element
cnpm install element-ui --save - 完整引入element 在main.js文件中添加代碼以下：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.config.productionTi
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
render: h => h(App),
template: '<App/>'
})
複製代碼
以上代碼便完成了Element的引入。須要注意的是，樣式文件須要單獨引入。
3. 用Element的el-row的佈局 在Pos.vue裏添加模版佈局：
<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%高度問題。先要給咱們的標籤上添加一個id，咱們這裏把ID設置爲 order-list。而後在vue構造器裏使用mounted鉤子函數來設置高度。
mounted:function(){
var orderHeight=document.body.clientHeight;
document.getElementById("order-list").style.height=orderHeight+'px';
}
複製代碼
- vue文件格式化（美觀）
我是利用vscode IDE 開發的，提供一個格式化vue文件的方法。
1.安裝 vetur
2.在User Setting中增長設置:
"vetur.format.defaultFormatter.html": "js-beautify-html"
3.搞定
格式化快捷鍵：Alt+Shift+F
複製代碼
利用Element快速佈局
el-tabs標籤頁組件
用Element裏提供的el-tabs組件能夠快速製做咱們的tabs標籤頁效果，具體使用方法能夠到Element的官網查看API。 基本用法很簡單，能夠直接在模板中引入標籤，標籤裏邊用來表明每一個每一個標籤頁。
<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-table組件製做表格
須要在點餐的tab標籤頁裏放入表格，把點選的食品放入到待結帳列表裏,可使用Element的內置組件el-table。若是你對el-table不瞭解， 能夠去Element官網去查看一下。我這裏不做太多的解釋，先把代碼貼過來，而後根據代碼在講解。
<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中的值爲方便取數，暫時寫成固定的，代碼以下：
data() {
return {
tableData: [
{
goodsName: "可口可樂",
price: 8,
count: 1
},
{
goodsName: "香辣雞腿堡",
price: 15,
count: 1
},
{
goodsName: "愛心薯條",
price: 8,
count: 1
},
{
goodsName: "甜筒",
price: 8,
count: 1
}
]
};
}
複製代碼
此時能夠運行npm run dev看下運行效果。
el-button 按鈕組件
須要在點餐表格的下方放入三個功能性按鈕，分別是掛單按鈕、刪除按鈕、結帳按鈕。一樣使用Element裏的組件，進行快速寫入。el-button 的type屬性是設置按鈕樣式的，爲了學些和區分咱們這裏用三個屬性來設置按鈕。
<el-button type="warning" >掛單</el-button>
<el-button type="danger" >刪除</el-button>
<el-button type="success" >結帳</el-button>
複製代碼
到這裏咱們左邊最重要的訂單操做區域就佈局完成了，接下來咱們佈局右側的商品佈局。
利用Element快速佈局之二
先給出完成佈局以後的頁面效果，引用技術胖老師博客的圖片。
經常使用商品區域佈局
在<el-col :span=17>標籤裏增長一個層，而後在層內進行佈局。由於裏邊的商品實際意義上是列表，因此用無序列表<li>來佈局商品。貼出佈局的html代碼。
<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樣式來美化頁面：
.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。for循環代碼以下：
<el-col :span="17">
<div class="often-goods">
<div class="title">經常使用商品</div>
<div v-for="item in oftenGoods" class=" often-goods-list ">
<ul>
<li>
<span>{{ item.goodsName }}</span>
<span class="o-price ">￥{{ item.price }}元</span>
</li>
</ul>
</div>
</div>
</el-col>
複製代碼
often-goods數組代碼以下：
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
}
]
複製代碼
商品類佈局
商品的上半部分就佈局完成了，如今須要佈局下半部分，咱們在下半部分先添加一個tabs的標籤樣式。
<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>
複製代碼
製做商品的無序列表：
<el-tab-pane label="漢堡">
<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>
</el-tab-pane>
複製代碼
針對商品無序列表添加css樣式
.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的數據，數據格式以下:
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
}
]
複製代碼
經過添加循環將靜態數據展示到頁面上。
<el-tab-pane label="漢堡">
<ul class=" cookList ">
<li v-for="item in type0Goods">
<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
<span class="foodName">{{ item.goodsName}}</span>
<span class="foodPrice">￥{{ item.price}}元</span>
</li>
</ul>
</el-tab-pane>
複製代碼
使用Axios遠程獲取數據
開始學習Axios的知識，並把商品數據從遠端讀取到頁面上。
安裝Axios
npm install axios --save
引入Axios,在Pos.vue頁面引入Axios，因爲使用了npm來進行安裝，因此這裏不須要填寫路徑。 import axios from 'axios'
服務端拉取經常使用商品數據
感謝技術胖老師提供的server程序。遠端服務器地址：http://jspang.com/DemoApi/oftenGoods.php。使用Axios的get 方式來得到數據,把axios的方法寫到了created鉤子。
created(){
axios.get('http://jspang.com/DemoApi/oftenGoods.php')
.then(response=>{
console.log(response);
this.oftenGoods=response.data;
})
.catch(error=>{
console.log(error);
alert('網絡錯誤，不能訪問');
})
},
複製代碼
拉取分類商品數據：
遠端服務器地址：http://jspang.com/DemoApi/typeGoods.php。
//讀取分類商品列表
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('網絡錯誤，不能訪問');
})
複製代碼
頁面上裏有循環展現商品詳情代碼以下：
<el-tab-pane label="漢堡">
<ul class=" cookList ">
<li v-for="item in type0Goods">
<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
<span class="foodName">{{ item.goodsName}}</span>
<span class="foodPrice">￥{{ item.price}}元</span>
</li>
</ul>
<ul class=" cookList ">
<li v-for="item in type1Goods">
<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
<span class="foodName">{{ item.goodsName}}</span>
<span class="foodPrice">￥{{ item.price}}元</span>
</li>
</ul>
<ul class=" cookList ">
<li v-for="item in type2Goods">
<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
<span class="foodName">{{ item.goodsName}}</span>
<span class="foodPrice">￥{{ item.price}}元</span>
</li>
</ul>
<ul class=" cookList ">
<li v-for="item in type3Goods">
<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
<span class="foodName">{{ item.goodsName}}</span>
<span class="foodPrice">￥{{ item.price}}元</span>
</li>
</ul>
</el-tab-pane>
複製代碼
後面繼續學習訂單操做裏須要的功能，好比點擊商品，添加到左邊的訂單欄裏，增長，刪除商品，模擬訂單提交到後臺。
訂單模塊代碼
本節要完成的任務是實現頁面左側的訂單列表頁面的添加操做。
在vue的構造器里加入methods方法，在methods方法裏再加入addOrderList方法。這個方法的做用是點擊右側的商品，而後把商品添加到左邊的列表裏。
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;
});
}
複製代碼
在咱們的商品上綁定方法，來進行調用添加方法，增長代碼以下：@click="addOrderList(goods)"。
<li v-for="item in type0Goods" @click="addOrderList(item)">
<span class="foodImg"><img :src="item.goodsImg" width="100%"></span>
<span class="foodName">{{ item.goodsName}}</span>
<span class="foodPrice">￥{{ item.price}}元</span>
</li>
<div v-for="item in oftenGoods" class=" often-goods-list " @click="addOrderList(item)">
<ul>
<li>
<span>{{ item.goodsName }}</span>
<span class="o-price ">￥{{ item.price }}元</span>
</li>
</ul>
</div>
複製代碼
訂單列表中增長按鈕
商品中綁定addOrderList方法是很是容易的，若是在訂單列表中綁定是須要特殊處理一下的，須要用到template的scope值，讓後進行綁定。
<el-button type="text" size="small" @click="addOrderList(scope.row)">增長</el-button>
複製代碼
刪除單個商品
在veu構造器methods屬性裏增長一個delSingleGoods方法，並接收goods對象爲參數，用數組的filter能夠輕鬆刪除數組中單個的商品。
//刪除單個商品
delSingleGoods(goods){
console.log(goods);
this.tableData=this.tableData.filter(o => o.goodsId !=goods.goodsId);
},
複製代碼
將統計代碼寫成一個函數，增長商品或刪除商品的時候都會調用。
//彙總數量和金額
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;
});
}
}
複製代碼
刪除代碼html調用實例
<el-button type="text" size="small" @click="delSingleGoods(scope.row)">刪除</el-button>
複製代碼
刪除所有訂單商品
此部分代碼直接將商品表清空。
//刪除全部商品
delAllGoods() {
this.tableData = [];
this.totalCount = 0;
this.totalMoney = 0;
},
複製代碼
模擬結帳
由於模擬結帳須要Post數據到後臺，個人服務器又不能提供這樣的藉口給你們，因此我只說製做思路，你們能夠在本身的服務器上去實現。
一、設置咱們Aixos的Pos方法。
二、接受返回值進行處理。
三、若是成功，清空現有構造器裏的tableData，totalMoney，totalCount數據。
四、進行用戶的友好提示。
第三步和第四步的方法以下所示：
checkout() {
if (this.totalCount!=0) {
this.tableData = [];
this.totalCount = 0;
this.totalMoney = 0;
this.$message({
message: '結帳成功，感謝你又爲店裏出了一份力!',
type: 'success'
});
}else{
this.$message.error('不能空結。老闆瞭解你急切的心情！');
}
}
複製代碼
感謝
文章最後感謝技術胖老師的分享，本文其實是按着老師的blog敲出來的，經過老師的課程初步對vue.js有了瞭解，後面經過實踐慢慢積累經驗。
參考
相關文章
- 1. vue項目最佳實踐
- 2. Vue+Vux項目實踐
- 3. vue實踐-todolist小項目
- 4. electron + vue 實踐項目
- 5. Vue + webpack 項目實踐
- 6. vue項目實踐1——構建項目
- 7. vue項目實踐（vuex + vue-router + vue-resource）
- 8. MVC2 項目實踐
- 9. Laravel項目實踐
- 10. freemarker項目實踐
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • Mozilla 項目 - 瀏覽器信息
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章