Course introduction

This is the first article I wrote after the website was restored. During the shutdown period, my friends in the group gave me a lot of support. Without your support, I would probably give up writing blog.

The technology stack used for this system is Vue+Webpack+Element+Axios+vueRouter. The system is the POS system of a fast food restaurant. Of course, it is impossible for us to realize all the functions of a complete POS system (I will develop it and open source it in my spare time). We only completed the production of the cashier module in the video. In this video you will learn a lot of practical skills that will help you stand out in the real world.

If you are new to Vue, you may not be able to fully grasp the content of the article, and you will need some basic and intermediate knowledge of Vue. If you are a novice is not very helpless, fortunately, this site provides you with all the pre-video learning resources, you can learn down to earth.

Pre-learning courses:

Primary Courses:

Vue2.0 video tutorial – internal instructions (8 episodes)
Vue2.0 video tutorial – global API(9 episodes)
Vue2.0 video tutorial – options (6 episodes)
Vue2.0 video tutorial — examples and built-in components (4 episodes)

Intermediate courses:

Technical Fat VUE-CLI Video Tutorial (3 episodes)
Vue router Video Tutorial (11 episodes)
Vuex Video Tutorial (6 episodes)

Section 1: Mockplus draws our ideas

Mockplus is a great tool for product managers to use, but it works really well. As a working programmer you have to lick the product manager’s face, so you should also be aware of Mockplus and be able to use it simply. Mockplus is a wireframing tool that allows us to quickly sketch ideas or things that are hard to put into words to improve our understanding.

Why choose fast food POS system?

At the beginning, I wanted to make a set of mobile application with liquor store as the background, but I found that there are too many such applications on the Internet, such as fangeleme, zhihu and shopping cart, so you can completely download from Github website and learn by yourself. I think it needs to be cool and complicated, and HERE are three reasons you can look at it (you can actually ignore the first two).

The cashier’s interface is complex enough: we use a three-column layout, and each column’s interaction is very technical, allowing you to quickly master the development of complex applications.
Use more knowledge points: use more than 90% of the knowledge points in the actual combat, so that you can connect the knowledge of Vue and quickly become a technical master in the unit.
In order to better and goddess sex sex: Jingdong – strong east brother’s goddess desire is to open milk tea shop, my goddess desire is to open a fast food restaurant.

MockPlus download:

Mockplus is a free app that you can download from www.mockplus.cn/. After downloading it, you need to register an account to use it normally.

The basic requirements analysis and drawing process of the software, please watch the video, there is no word description, go to watch the video.

Project frame diagram;

Here is our Mockplus application box graph, which is simple but gives me a rough idea of what a fast food Pos system looks like in my head. Making a box map and discussing requirements and technical implementation over and over before you start a project can avoid extensive changes in development, which is very important in practice.

Section 2: VUE-CLI setup development environment

We use vuE-CLI for quick setup, if you are not familiar with vue-CLI, please watch the following article, about 30 minutes to fully master vue-CLI.

Technical Fat VUE-CLI Video Tutorial (3 episodes)

Building the project structure:

The project adopts Webpack+ Vue-Router architecture and starts installation (all operations are on Windows system and I do not have a MAC).

Press Win+R, then enter CMD in the text box, press Enter to open the command line, and enter vue- CLI installation command:
```
mpm install vue-cli -gCopy the code
```
-g here stands for global installation.
To initialize the project from the command line, using the Webpack template, type the initialization command:
```
vue init webpack AwesomePosCopy the code
```
Here AwesmonePos is the name of my project folder, so you can call it whatever you like. Configure required modules according to project requirements during installation. The trick here is to omit the folder name when you have already created the folder in advance. The following situation:
```
mikdir AwesomePos
cd AwesomePos
vue init webpackCopy the code
```
From the command line, go to the project directory and use NPM install to install the dependencies for the project in package.json. If your Internet speed is slow, you can use TAOBAO mirror CNPM to install.
Check whether the installation is correct. On the CLI, enter NPM run dev. If the page is displayed in the browser, the installation is correct.

At this point, our project architecture is set up and we need to make some necessary changes to the files generated for us by vue-CLI.

Modify the contents of the project file:

To modify the index. HTML file in the root directory, we want to write some CSS styles for better layout, and then modify the title bar. Let the title fit the project here called “AwesomePOS- Fast Food Restaurant Management System”. The contents of index. HTML are as follows.

<! DOCTYPE HTML > < HTML > <head> <meta Charset =" UTF-8 "> <title>AwesomePOS- fast food management system </title> <link rel=" heet" 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>Copy the code

Create a Pos component, which is the programmer’s entry file. Create a pos.vue file under SRC /components/page/. File contents write vUE template architecture can be.
```
<template>
  <div class="pos">
   Hello Pos Demo!
  </div>
</template>

<script>
export default {
  name: 'Pos'
}
</script>
<style scoped>

</style>Copy the code
```
Change the route file to the project root directory/SRC /router/index.js to make the entry file become the Pos component.

We introduced the Pos template component with import, and then modified the contents of routes. If you are not familiar with vue-Router, you can go to my previous courses.
```
import 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
    }
  ]
})Copy the code
```

Take a look at the web page in your browser, if Hello Pos Demo is displayed. We have successfully built the project architecture. Next time we will identify the ICONS used in the project.

Section 3: Fix the project icon Iconfont

It is often encountered in the development of the use of small ICONS, the use of small ICONS can make the program more beautiful and increase availability. There are many ways to add small ICONS to applications online. I really searched everywhere for an icon library that was easy to use and had beautiful ICONS until I came across IconFont, which I thought met most of my needs. Here I recommend IconFont, alibaba’s vector icon library. (This is definitely not an advertisement, just some feelings for myself)

Pick your favorite icon

Iconfont has so many ICONS that we can pick up our favorite items and put them in our shopping cart, just like shopping in a supermarket.

Icon selection process (6 steps)

Visit the website: Iconfont website: http://www.iconfont.cn
Click on the “official icon library” at the top of the website and choose your favorite icon. Here I choose the icon library of Tmall.
Choose your favorite icon. You have two options: download the code and add it to the project.
We add these two choices to the project, then create a new project and enter a name.
When the project is added, it will be automatically transferred to our project library. Click on the online link.
Produce the CSS import code, which can be generated and imported in index.html on the project’s home page.
```
 <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">Copy the code
```

Use of ICONS:

The ICONS have been successfully introduced into the project and are now ready to use them. In My Project you will see the font class value for the ICONS. You can copy and paste code directly, or you can write your own code.

<i class="icon iconfont icon-hanbao"></i>Copy the code

This will make the icon visible on the page.

Add more ICONS:

If you don’t have enough ICONS in your project, you need to add more. You can add them using the following four steps.

Go to Iconfont and add the ICONS to your shopping cart.
Add the ICONS in the shopping cart to the project.
Regenerate online links. (This is very important)
In the project home page (index.html), replace the CSS import link.

The knowledge point of actual combat project development is a lot, is also very miscellaneous, but these are very practical, you will grow quickly, do not feel irrelevant to Vue and ignore, let us work together to become a better yourself.

Section 4: Write a standalone sidebar navigation component

In the last section we learned how to use inconFont. Now you can add a nice icon to your project. In this lesson we are going to quickly pull out a sidebar component. The purpose of a component is to be reusable, to be used on that page, and to be as simple as writing an HTML tag.

Create leftnav. vue file:

In the SRC/Components directory, create a new common and Page folder.

The common folder is used for shared components, and this is where the leftNav.vue component is written below.
The Page folder is used to hold our page template components, and the page template files are placed here.

In the common folder, create the leftnav. vue file.

Start coding:

Once the file is set up, we’ll give the components a basic structure, which you can either copy and paste or write by hand.

<template>
  <div class="left-nav">
    
  </div>
</template>

<script>
export default {
  name: 'leftNav',
  data () {
    return {
    }
  }
}
</script>
<style>

</style>Copy the code

To start writing the HTML structure, we use the list Li to represent the navigation. Menu bar has cashier, shop, merchandise, members, statistics. The STRUCTURE of the HTML we wrote is as follows

<ul> <li> < I class="icon iconfont icon-wodezichan"></ I >< div> </div> </li> < I class="icon iconfont Icon - dianpu "> < / I > < div > shop < / div > < / li > < li > < I class =" icon iconfont icon - hanbao "> < / I > < div > products < / div > < / li > < li > < I Class ="icon iconfont icon-huiyuanqia"></ I >< div> member </div> </li> <li> < I class="icon iconfont icon-nav "></ I > <div> </div> </li> </ul>Copy the code

Note: here you may and I use the icon is not the same, please change your icon to use the code, do not mindlessly copy, the icon will not be displayed.

Once the basic structure of components is written, start writing CSS styles to make our components look good.

<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>Copy the code

After writing the CSS style, the component is basically written, and we will add <route-link> tags to the component as required. But there is no requirement for this right now, so we won’t add it yet.

Put the leftNav component into the template

Start by importing the leftNav component in app. vue with import.

import leftNav from '@/components/common/leftNav'Copy the code

Add the Components property to the vue constructor and put it in our leftNav component.

export default {
  name: 'app',
  components:{
    leftNav
  }
}Copy the code

Even if the component is successfully introduced on the page, we can then happily use it in the <template> area (<leftNav></leftNav>). Post the introduction to use all the code, easy to learn to view.

<template> <div id="app"> <! -- Left navigation --> <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>Copy the code

Section 5: Enable the Element seal

Element is a VUE 2.0-based component library for developers, designers and product managers that provides design resources to help your website take shape quickly. Although it is flexible to write components in the project, it is not efficient. Therefore, we should learn to work on the shoulders of giants. Element is the shoulder of giants, which is also a relatively mature Vue component library in China. So I decided to use this component library to develop the project.

NPM install

NPM is used here, which works better with the WebPack packaging tool.

npm install element-ui --saveCopy the code

If your network is not good, you can use CNPM to install.

Complete introduction project

Write the following in main.js:

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) })Copy the code

The above code completes the introduction of Element. Note that style files need to be introduced separately.

Use Element’s el-row to create a grid

Once installed, do a simple layout test. Here, use a two-column layout. Element supports a 24-column layout.

Add template layout to pos.vue:

< the template > < div class = "pos" > < div > < el - row > < el - col: span = '7' > I am order bar < / el - col > <! <el-col > </el-row> </div> </div> </template> <script> export default {name: 'Pos', data () { return { } } } </script> <style scoped> </style>Copy the code

Solve 100% high problems

We use the Element component in the page, so it automatically generates the virtual DOM for us, and we can’t set the height to 100%;

You can use javascript to set the 100% height problem. The first step is to add an ID to our <el-col> tag, which we set to

  mounted:function(){
      var orderHeight=document.body.clientHeight;
      document.getElementById("order-list").style.height=orderHeight+'px';
  },Copy the code

We have the basic structure of the layout, all that remains is the details. Next time we will spend one class making most of the CSS style content.

Section 6: Quick Layout with Element (1)

In this lesson, we will quickly use Element to layout the page. In this chapter, I will directly copy the Style code, because I think you can learn Vue, then THERE is no problem with CSS, so we will not delay your valuable event.

El-tabs Component of the tabs

We can quickly create our tabs using the El-Tabs component provided by Element. For details, see the Element API.

The basic usage is simple. You can simply insert < el-Tabs > tags in the template, where each TAB page is represented by < el-Tab-Pane >.

Let’s start with the simplest code:

< El-Tabs > < El-Tab-Pane Label =" Order "> </ el-Tab-Pane > < El-Tab-Pane Label =" Order "> Delivery < / el - TAB - pane > < / el - tabs >Copy the code

And if you’re careful, you’ll see that each el-Tab-Pane has a label property, which is the title of your TAB. The contents can be written directly in < el-Tab-Pane >.

The el-table component creates a table

<el-table :data="tableData" border show-summary style="width: 100%" >< el-table-column prop="goodsName" label=" merchandise "></el-table-column> <el-table-column prop="count" label=" quantity" Width ="50"></el-table-column> <el-table-column prop="price" label=" amount "width="70"></el-table-column> <el-table-column <template scope="scope"> <el-button type="text" size="small"> <el-button type="text" size="small"> Add </el-button> </template> </el-table-column> </el-table>Copy the code

The data source value in tableData, for layout convenience, so we write dead, will be changed to dynamically added data in the future.

TableData: [{goodsName: 'goodsName ', price: 8, count:1}, {goodsName:' goodsName ', price: 15, count:1}, {goodsName: Price: 8, count:1}, {goodsName: 'goodsName ', price: 8, count:1}]Copy the code

You can now preview it in your browser and see what it looks like. If it works, we can move on.

El-button Button component

Three functional buttons need to be placed at the bottom of the order form, namely order button, delete button and checkout button. Also use components in Element for fast writes. The type property of an el-button sets the style of the button. We use three properties to set the button in order to learn and distinguish it.

<el-button type="warning" > </el-button> <el-button type="danger" > > check out < / el - button >Copy the code

At this point, the layout of the most important order operation area on our left is complete. In the next class, we will lay out the product layout on the right.

Section 7: Quick Layout with Element (2)

In the previous section, we completed the layout of the order bar on the left, but in this section we will use Element for most of the layout.

This is a picture of the finished layout

Common commodity regional layout:

Add a layer to the <el-col: SPAN =17> TAB and layout within the layer. Since the items inside are actually lists, they are arranged in an unordered list <li>. Post the HTML code for the layout.

<div class=" goods"> <div class="title"> <div class=" goods-list"> <span> < span class = "o - price" > RMB 15 < / span > < / li > < / ul > < / div > < / div >Copy the code

Now that you have the basic HTML structure, you need to add some CSS styles to beautify your page:

 .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; 
   }Copy the code

Now that the page is nice, to make the page more realistic, we temporarily add an array to the Vue constructor to be used for common items. The stated variable is called oftenGoods (real items cannot be named so, here is just practice use).

• oftenGoods:[{goodsId:1, goodsName:' Spicy Chicken Leg Fort ', price:18}, {goodsId:2, goodsName:' Village chicken leg Fort ', price:15}, {goodsId:3, GoodsName :' goodsName ', price:15}, {goodsId:4, goodsName:' goodsName ', price:10}, goodsName:' goodsName ', price:10}, {goodsId:6, goodsName:' Magic chicken ', price:20}, {goodsId:7, goodsName:' Magic chicken ', price:10}, {goodsId:8, goodsName:' snow top coffee ', Price: 18}, {goodsName goodsId: 9: 'big chicken rice flower, price: 15}, {goodsName goodsId: 20:' crispy chicken fillet, price: 17}]Copy the code

Once you have the data, you can use a V-for loop to output it to an HTML template.

Commodity classification layout:

Now that we have the top half of our product laid out, we need to lay out the bottom half of our product. In the bottom half, we will add a tabs.

<div class="goods-type"> < el-Tabs > < El-Tab-pane Label =" hamburger "> Burger </ el-Tab-pane > < El-Tab-pane Label =" hamburger "> </ el-Tab-pane > < El-Tab-Pane Label =" beverage "> Beverage </ el-Tab-Pane > < El-Tab-Pane Label =" package "> Package </ el-Tab-pane > </el-tabs> </div>Copy the code

Having done the tabs in the last class, this becomes surprisingly easy.

Make an unordered list of items:

<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 class="foodName"> <span class="foodName">Copy the code

CSS style unordered lists:

.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;
   }Copy the code

With a basic style, we can add the Hamburg class data to the Vue constructor. Declare a type0Goods data in the following format.

Type0Goods: [{goodsId: 1, goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg", goodsName: 'spicy chicken fort, price: 18}, {goodsId: 2, goodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg", goodsName: 'rural chicken fort, price: 15}, {goodsId: 3. GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg", goodsName: 'and Hamburg, price: 15}, {goodsId: 4. GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg", goodsName: 'happy family barrel, price: 80}, {goodsId: 5, GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg", goodsName: 'crispy Fried chicken legs, price: 10}, {goodsId: 6. GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos004.jpg", goodsName: 'magic chicken nuggets' price: 20}, {goodsId: 7, GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos001.jpg", goodsName: 'coke mug, price: 10}, {goodsId: 8, GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos003.jpg", goodsName: 'snow top coffee' price: 18}, {9, goodsId: GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg", goodsName: 'big chicken rice flower, price: 15}, {goodsId: 20, GoodsImg: "http://7xjyw1.com1.z0.glb.clouddn.com/pos002.jpg", goodsName: 'crispy chicken fillet, price: 17}],Copy the code

Transform our unordered list with V-for:

<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}} yuan </span> </li>Copy the code

The basic layout of the page is finished, and it finally looks like a checkout interface. But now the data is written dead, so next time we’ll pull the data from the back end using Axios.

Section 8: Axios reads data remotely

In last class, we used Elemnt to almost complete the page layout. If you feel that the page layout is not beautiful enough, you can beautify it by yourself. Due to the reasons of the course, we will not beautify the CSS details. In this lesson, we will start by learning Axios and reading commodity data from the remote end to the page. Learn this lesson technology fat has prepared the back-end data for you, as long as you call the corresponding page can be retrieved, in the actual development, these background data is the need for back-end programmers and you to discuss the production. We now only do the front end, data as long as we can call.

Install Axios

We use NPM Install directly to install.

npm install axios --saveCopy the code

Since AXIos needs to be packaged into production, we use -save to install it.

The introduction of Axios

We introduce Axios on the pos.vue page, where there is no need to fill in the path since NPM is used for the installation.

import axios from 'axios'Copy the code

The server pulls commonly used commodity data

The remote server address: http://jspang.com/DemoApi/oftenGoods.php

(In the actual project this background interface address is provided to you by the backend programmer, you can call this interface, I have put it on the server.)

You can first put the address in the address bar to access, is normal access, and output json format string, this is the remote data we need. Here we use Axios’ get method to get the data.

created(){ axios.get('http://jspang.com/DemoApi/oftenGoods.php') .then(response=>{ console.log(response); this.oftenGoods=response.data; }) .catch(error=>{ console.log(error); Alert (' Network error, inaccessible '); })},Copy the code

The AXIos method is written into the Created hook function. We use the GET method to pull data. If the pull is successful, remote data is used to assign values to oftenGoods.

Pull error, generally there are two cases:

Network failure: The network condition is not very good, this can be repeated after 5 seconds after failure.
Refuse to access: this is more backend programmers set up not to allow cross-domain access, you and back-end programmers debugging together to solve.

Pull classified commodity data:

The remote server address: http://jspang.com/DemoApi/typeGoods.php

Log (response) to check the data structure and then assign the value. Because the knowledge is very similar to the above, I will not describe the text version, details can see the video tutorial.

Here post the different classification codes for pull and assign:

/ / read classified goods list axios. Get (' http://jspang.com/DemoApi/typeGoods.php '). Then (response = > {the console. The 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 (' Network error, inaccessible '); })Copy the code

HTML template output code:

<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> </li> </ul>Copy the code

In the actual development of the category is also out of the loop, here for teaching demonstration, not as complex as written, as long as you understand how to operate, you can add your own later. Just like my project, AFTER the video ends, I will slowly write and perfect all functions, and finally send it to the goddess to win her heart.

Next class, we will learn the functions needed in order operation, such as clicking goods, adding to the left order bar, adding and deleting goods, and simulating order submission to the background. If we can’t finish one lecture next time, we’ll split it into two lectures.

Section 9: Order module making core functions-1

After last class, we can already get data from the background. The task of this lesson is to add the order list page on the left side of the page. Originally, I wanted to finish the lecture in one class, but there was still a lot of content, and I didn’t want you to study for a long time in each class, so I divided the content into sections.

Add an item to the order page

We add methods to the vue constructor, and add addOrderList to the methods constructor. What this method does is click on the item on the right and add it to the list on the left.

The addOrderList method:

AddOrderList (goods){this.totalCount=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; If (isHave){if(isHave){let arr = this.tabledata.filter (o => o.goodsid == goods.goodsId); arr[0].count++; //console.log(arr); } else {/ / there is no array is pushed the let newGoods = {goodsId: goods. GoodsId, goodsName: goods. GoodsName, price: goods. The price, the count: 1}; this.tableData.push(newGoods); } this.tableData.foreach ((element) => {this.totalCount+=element.count; this.totalMoney=this.totalMoney+(element.price*element.count); }); }}Copy the code

When making this method, the order statistics function is added at the bottom of the order list. In fact, there are only two items: order price summary and order quantity summary. The values we declare in data are totalMoney and totalCount.

After writing this method, we also need to bind the method to our commodity to call the add method.

 @click="addOrderList(goods)"Copy the code

This will change the order list according to our program logic when clicking on an item.

Add button in order list

It is easy to bind the addOrderList method to an item, but if the binding is special in an order list, use the scope value of the Template and bind later.

<el-button type="text" size="small" @click="addOrderList(scope.row)">Copy the code

In this class, we finished the operation of adding orders. In the next class, we will make the deletion of goods and the overall deletion of orders. Finally, we will simulate the checkout function of orders.

Section 10: Order module making core functions -2

Continue to make the order module, the main three functions of this lesson are to delete a single commodity in the list, delete all commodities in the list, and simply simulate checkout.

Delete a single item

Add a delSingleGoods method to the VeU constructor’s Methods property and take the Goods object as an argument. You can easily delete a single item from the array using filter.

// Delete single goods delSingleGoods(goods){console.log(goods); this.tableData=this.tableData.filter(o => o.goodsId ! =goods.goodsId); },Copy the code

Now we can try NPM run dev, we will find that goods can be deleted correctly, but the number and amount of statistics are not correct, we need to write some statistics code. Before you start, you will notice that there is a similar statistic in the increment method. Since the two functions are very similar, we will write a new method.

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); }); }}Copy the code

Notice that we used to use it separately, so we didn’t have to clear totoalCount and totalMoney, but we made them public, so clear them. With this method in place, we can simply refer to this.getallMoney () wherever we need it.

With the functionality done, we also need to bind events for the delete button:

<el-button type="text" size="small" @click="delSingleGoods(scope.row)">Copy the code

Now that we have the ability to delete individual order items, we can test and debug them.

Delete all ordered items

This is as simple as clearing this.tableData and writing a delAllGoods method in the methods property.

DelAllGoods () {this.tableData = []; this.totalCount = 0; this.totalMoney = 0; },Copy the code

Some of you might be wondering, why don’t you use the getAllMoney() method when you could reuse it? After all, there is business logic in the summary method. We only do two zeros, which consumes less resources, so we don’t use them.

Analog checkout

Because the simulated checkout needs to Post data to the background, my server can not provide such an excuse to everyone, so I only said to make ideas, we can achieve in their own server.

1. Set the Pos method of our Aixos.

2. Accept the return value for processing.

3. If successful, empty the tableData, totalMoney, totalCount data in the existing constructor.

4, user friendly prompts.

Since the first two steps cannot be demonstrated, we will only simulate steps 3 and 4 here. Make a checkout method in Methods, clear data and give a friendly prompt.

checkout() { if (this.totalCount! =0) { this.tableData = []; this.totalCount = 0; this.totalMoney = 0; This.$message({message: 'check out! Thank you! ', type: 'success' }); }else{this.$message.error(' cannot be null. Your boss understands your eagerness! '); }}Copy the code

The basic functions of the order module are done, and I hope you can practice with your hands. If you don’t practice with your hands, you’ll never learn.

Section 11: Project packaging and launch

Friends who have been watching may know that there is another section of the production of listing function, but in the process of recording, I found that 90% of the knowledge points are repeated. The knowledge points that are not repeated have nothing to do with Vue, which is the localStorage operation of HTML5, so I removed this section. In this section, we mainly talk about packaging matters needing attention and summarize the knowledge we have learned.

Packing notes:

1. Change the absolute path to a relative path

If we open config/index.js, we’ll see a build property, and that’s the basic configuration we packed. Here you can change the package directory, package file name. The most important thing is to change the absolute directory to the relative directory.

assetsPublicPath:'./'Copy the code

This way we can make sure that the projects we pack out can be previewed properly.

2. Package with NPM run build at the command line.

npm run buildCopy the code

Conclusion:

Through this article and video, we have learned some knowledge points that Vue2.0 can use in actual project development, such as vue-Router, Element, Axios, iconFont, and how to modify Dom with data. Hope this article can be helpful to you, (code more than 16000 words, write continuously for 20 days) if this article is helpful to you, please go to the right side of the article or below the tip.

exceptional

Vue2.0 actual combat video tutorial – fast food cashier system