Use Vue to make a shopping cart

This project is a Web project, no front-end separation, but also to do the phone side, it feels like something wrong ...
The web framework uses SPRINGMVC, the template framework is freemarker, think of the future to do mobile, decisive or JSON for data interaction, and does not use Freemarker. The page static file all write well, put in the SPRINGMVC views. It is still a good thing to do before and after the end of the separation, but do not touch the Web page vue, then well ...
So I thought in the page directly into Vue, but also in the intranet environment development, had to in their own personal notebook download vue.js copy to the intranet computer on the introduction of the page.

Real text

First, let's take a look at the static page:

Static page

Briefly describe the requirements of this function module:

1. Tick Select all, all items are selected. All items are deselected when the Select All box is canceled.

2. Click the plus minus sign on a single item to increase and decrease the number, and the right subtotal calculates the total price of the item in real time.

3. Click the Delete button on the individual item to remove the item from the shopping cart.

4. The bottom is selected in real-time display of the selected items, the right total amount of real-time display of all the checked items of the sum of the subtotal.
   (yes, the demand does not seem to be much, but to combine the background to do it or need a bit of kung fu, but this article we do not involve backstage, build data in the foreground)

Now let's get started.

One, create a Vue object and set up the data.

var cart;        Global Vue object//By encapsulating a method to create a Vue object function Createvue (list) {///passed in through the background gets the list cart = new Vue ({el: ' #cart ', data () { return {list:list//Commodity List}}});

Second, assume that the data is requested from the background and then assigned to the Vue object

window. = function  ()  {        //Request background Code      ....         //the list assigned to the cart when the request succeeds list         let list = [             {                 goodstitle:  "Wei long spicy strips",                          //Product Name                  specifications:  "Big Bag",                          //Product Specifications                  unitprice:&nbSP; " 5 ",                                //Commodity price                  subimage1filename : " 20180317eeftyd.jpg ",         //product image name                  purchaseQuantity: 6                      // Number of goods             },              {                 goodsTitle:  "carved brand Detergent",                 specifications:  "Big Bag",                 unitPrice:  ",         "        subimage1Filename:  "20180317ggptfg.jpg",                 purchaseQuantity: 1             },              {                 goodsTitle:  "Mong Tsai Milk",                 specifications:  "20 Boxed",                 unitPrice:  ",     "            subimage1filename:  "20180317feftyp.jpg",                 purchaseQuantity: 1             }];             createvue (list);   //Execute Create Vue object method     });

Three, modify the HTML part of the code to show the data

<tr v-for= "(item,index)  in list" >  <td>    <input  type= "checkbox"  :id= "' Check ' +index"  name= "Checkboxs"  />    < label :for= "' Check ' +index" ></label>  </td>  <td>       </td>   <td style= "Text-align:left;" >    <p>{{item.goodsTitle}}</p>    <p> Specifications: {{ Item.specifications}}</p>  </td>  <td>￥{{item.unitprice}}</td>   <td class= "Adddel" >    <em v-on:click= "Minius (index)" >- </em>    <input type= "number"  v-model.number= "item.purchaseQuantity"  />    <em v-on:click= "Add (Index)" >+</em>  </td>  <td>￥{{item.unitprice * item.purchasequantity}}</td>  <td> <button v-on:click= "Checkdel (index)" > Delete </button></td></tr>

This allows the individual parts of the product to be printed out in full, and the corresponding information printed in the corresponding location. As follows:

, I made up the picture name and path, so I can't find it.

Four, to achieve the full selection and tick the total price calculation, this part is a bit of a challenge. My idea is to add a new data to the Vue object to identify the selected state of the product, so the code in the Create Vue method changes to the following:

Cart = new Vue ({el: ' #cart ', data () {return {list:list, checkeds:n EW Array (list.length)//Initialize to list length}});

Then, in the HTML, the corresponding checkbox of the product is bound to checkeds, and the modified code is as follows:

<input type= "checkbox": id= "' Check ' +index" name= "Checkboxs" v-model= "Checkeds[index]"/>

Use the computed property to calculate the sum of prices:

Sum () {Let sum = 0; For (Let I in This.list) {if (this.checkeds[i])//If the result of checkeds[i] is truth, then the sum is summed + = THIS.LIST[I].UNITP    Rice * this.list[i].purchasequantity; } return sum;}

HTML section, we can display it in the corresponding location with {{sum}}. This makes it possible to calculate the sum of the checked commodity subtotals. Next implement the Select All function, add a method Checkall in the methods attribute, the code is as follows:

 checkall  (Event)  {  //The event here is the Select All CheckBox Object     if  ( event.checked)  {  //If the Select All checkbox is selected, the Checkeds all values are set to True, the check state of the corresponding item checkbox is automatically updated          for  (let i = 0; i <  this.checkeds.length; i++)  {             Vue.set (this.checkeds, i, true);        }      else {  //Otherwise, do the opposite of the above         for  ( let i = 0; i < this.checkeds.length; i++)  {             vue.set (This.checkeds, i, false);         }    }} 

After a wave of operation above, it is possible to achieve the sum of the prices of all the selected and selected points. We also want to count the number of items selected, this is very simple, also use the computed attribute, the results of the checkeds in the statistics of truth is good, the code is as follows:

Checknum:function () {Let num = 0;        For (Let I in This.checkeds) {if (This.checkeds[i]) {num++; }} return num;}

You can then substitute {{Checknum}} in the corresponding location in the HTML. Now that we've achieved almost half of the demand, let's go ahead and finish them!
Five, realize the shopping cart Item single deletion function, this is very simple, we add a Del method in the methods, using the JS array Splice method can be implemented.

Del (index) {this.list.splice (index, 1);    Just remove the item from the array, the view updates automatically, and it has to be said, Vue is awesome! This.checkeds.splice (index,1); Delete the corresponding checked status ID at the same time}

Then it is to give the Delete button to bind the point click event (Index is the subscript in the Loop list):

<button v-on:click= "del (index)" > Delete </button>

This allows us to easily implement the need to delete a single product, of course, to prevent users from mistakenly deleted, when the user clicks the Delete button, we can pop up a confirmation box to prompt the user, here we do not go to realize.
VI, the realization of the number of individual items in the shopping cart increases, decreases, and updates the product in real-time subtotals. Add and reduce method Minius are added first in methods:

Add (index) {this.list[index].purchasequantity++; Here is supposed to check the background corresponding merchandise inventory to limit, here does not involve the background so no add},minius (index) {if (This.list[index].purchasequantity > 1) {//Add a limit here,    At least one commodity should be this.list[index].purchasequantity--; }}

We then bind the events on the corresponding add and subtract buttons to trigger the two methods (index is the subscript for the list loop):

<TD class= "Adddel" > <em v-on:click= "Minius (Index)" >-</em> <input type= "number" v-model.number= " Item.purchasequantity "/> <em v-on:click=" Add (Index) ">+</em></td><td>￥{{item.unitprice * item.purchasequantity}}</td>

From the code above, we can see that we multiply the unit price and quantity directly in the subtotal, so that we can make real-time updates.

At this point, our needs, even if it is completed, and finally give you two small questions to think about

One, how to implement bulk deletion?
Second, after the full selection, we canceled a product status, the selection of the box is still selected, this should be unchecked, or when we all check the selection of the product, the State of the whole box is still in the by-election, this should be selected (as shown in the two figure below), how to solve this phenomenon?

One of the phenomena of problem two

Two phenomena of problem two

Following article

All the code in this article has been hosted on GitHub, and if the code is wrong, please follow GitHub, GitHub address: Https://github.com/cyixlq/vue_shopping_cart

Aboutyou
Links: https://www.imooc.com/article/34548
Source: MU-Class Network

Use Vue to make a shopping cart