Vue2 Shopping Cart ch1-(install dependency, simple configuration, Axios get API simulation data)

0--Project Description

Note that this project originates from a course network shopping cart tutorial, but in the development process, found in the development process or vue-resource (announced the non-updated class $.AJX () plug-in), for future development use Axios.js, details reference

1 Initial static page

<! DOCTYPE html>. quentity input{width:40px;            padding:5px 10px; Text-Align:center;            }. partcontent{width:100px;        height:50px;            }. partcontent. left{width:50px;            height:50px; Display:table-cell; Vertical-Align:middle; Text-Align:center; float: Left;            }. partcontent. right{width:50px;            height:50px; float:left;        Cursor:pointer; }    </style>delete  </title> <path class= "path1" d= "M17.723 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1 -0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zm7.877 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.98 4-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zm12.8 28c0.543 0 0.985-0.448 0.985-1v-12c0-0.552-0.441-1-0.985-1s-0 .984 0.448-0.984 1v12c0 0.552 0.441 1 0.984 1v0zm23.631 4h-5.908v-2c0-1.104-0.882-2-1.969-2h-5.908c-1.087 0-1.969 0.896-1.969 2v2h-5.908c-1.087 0-1.969 0.896-1.969 2v2c0 1.104 0.882 2 1.969 2v18c0 2.208 1.765 4 3.939 4h13.784c2.174 0 3. 938-1.792 3.938-4v-18c1.087 0 1.969-0.896 1.969-2v-2c0-1.104-0.882-2-1.969-2v0zm9.846 3c0-0.552 0.441-1 0.984-1h3.938c0.544 0 0.985 0.448 0.985 1v1h-5.908v-1zm21.662 28c0 1.104-0.882 2-1.969 2h-13.784c-1.087 0-1.97-0.896-1.97-2v-18h17.723v18zm22.646 8h-19.692c-0.543 0-0.985-0.448-0.985-1s0.441-1 0.985-1h19.692c0.543 0 0.984 0.448 0.984 1s-0.441 1-0.984 1v0z "></path> </symbol> <symbol id= "icon-clock" viewbox= "0 0" > <title>clo ck</title> <path class= "path1" d= "M29.333 16c0-7.364-5.97-13.333-13.333-13.333s-13.333 5.9 7-13.333 13.333c0 7.364 5.97 13.333 13.333 13.333s13.333-5.97 13.333-13.333v0 0 0 0 0 0zm0 16c0-8.837 7.163-16 16-16s16 7. 163 16c0 8.837-7.163 16-16 16s-16-7.163-16-16zm14.667 14.667v1.333h2.667v-10.667h-2.667v9.333zm24             18.667h1.333v-2.667h-10.667v2.667h9.333z "></path> </symbol> </defs>                    </svg> <div class= "container" > <div class= "cart" >                    <div class= "Checkout-title" > <span> shopping Cart </span> </div> <!--table--<div class= "Item-list-wrap" > <d                     IV class= "Cart-item" >       <div class= "Cart-item-head" > <ul> &lt ;li> Product Information </li> <li> Merchandise amount </li> &lt ;li> Product Quantity </li> <li> Total amount </li> <                            li> Edit </li> </ul> </div>                                <!--shopping Cart Product list start--> <ul class= "Cart-item-list" > <li> <div class= "Cart-tab-1" > & Lt;div class= "Cart-item-check" > <a href= "javascript:void 0" class= "item-c Heck-btn "> <svg class=" icon Icon-ok "><use xlink:href=" #icon-ok "> </use></svg>                                        </a> </div>                                    <div class= "Cart-item-pic" >                                         </div> <div class= "Cart-item-title" > <div class= "Item-name" > Yellow crane Tower Cigarettes </div> </di v> <div class= "Item-include" > <dl&gt                                            ;                                                <dt> Gift:</dt> <dd>                                                        <div class= "Partcontent" > <div class= "left" >                            <span> Lighters </span>                        </div> <div class= "right" >                                                                                                </div> </div>                                </dd> </dl> </div>                                    </div> <div class= "Cart-tab-2" >                                <div class= "Item-price" >19</div> </div>                                        <div class= "cart-tab-3" > <div class= "item-quantity" > <div class= "Select-self select-self-open" > <d IV class= "Quentity" >                                               <a href= "Javascript:void 0" >-</a> <input type= "text" Disabled value= "1" > <a href= "                                        Javascript:void 0 ">+</a> </div>                                    </div> <div class= "Item-stock" > In Stock </div> </div> </div> <div class= "CA                                Rt-tab-4 "> <div class=" item-price-total ">0.00</div> </div> <div class= "cart-tab-5" > & Lt;div class= "Cart-item-opration" > <a href= "javascript:void 0" class= "item-ed             It-btn ">                           <svg class= "icon Icon-del" ><use xlink:href= "#icon-del" ></use></svg> </a> </div> </div > </li> </ul> <!--shopping cart items list E Nd--> </div> </div> <!--footer---& Lt;div class= "Cart-foot-wrap" > <div class= "cart-foot-l" > <div class= "item-al L-check "> <a href=" javascript:void 0 "> <span class=" Item-che Ck-btn "> <svg class=" icon Icon-ok "><use xlink:href=" #icon-ok "&GT;&LT;/USE&GT;&L                        t;/svg> </span> <span> Select all </span>      </a>              </div> <div class= "Item-all-del" > <a href= "Javascri Pt:void 0 "class=" item-del-btn ">Cancel Select all</a> </div> </div> <div class= "Cart-foot-r" > <div class= "Item-total" >Total:<span class= "Total-price" ></span> </div> <div class= "next-btn-w Rap "> <a href=" address.html "class=" btn btn--red "> Checkout </a> </div > </div> </div> </div> </div> <div class= "Md-modal mo            Dal-msg md-modal-transition "id=" ShowModal "> <div class=" Md-modal-inner "> <div class=" Md-top ">            <button class= "Md-close" > Close </button> </div> <div class= "Md-content" > <div class= "Confirm-tips" > <p id= "Cuslaninfo" > Are you sure you want to delete this order information?</p> &LT;/DIV&G            T                <div class= "Btn-wrap col-2" > <button class= "btn btn--m" id= "btnmodalconfirm" > OK </button>        <button class= "btn btn--m btn--red" id= "Btnmodalcancel" > Cancel </button> </div> </div> </div></div><!--<div class= "Md-overlay" id= "Showoverlay" ></div>--> </div&        Gt <script type= "Text/javascript" src= "node_modules/vue/dist/vue.js" ></script> <script type= "Text/java Script "src=" Node_modules/axios/dist/axios.js "></script> <script type=" Text/javascript "src=" JS/CART.J S "></script> </body>
2 Cart.js
/** * Created by Administrator on 2017/4/2 0002.*/Let Vmcart=NewVue ({el:' #app ', data: {productlist: []//as a product list}, filter: {//Local Filter}, Mounted:function(){//query a method after the DOM has finished loading (life cycle) instances--come in and query the product         This. Cartview ();//2 Use}, methods: {cartview:function(){//1 DefinitionsConst _THIS = This;//Here's this point VmcartAxios.get (' Data/cartdata.json ')//using Axios. Then (function(RES) {//Then callback function            //with the arrow function, the scope of this does not change, or it points to Vmcart            //(res) =>{            //if (res.status = =) {            //This.totalmoney = Res.data.result.totalMoney;            //this.list = res.data.result.list;            //     }            // }            //where the arrow function is not used            //If you want to use an Vmcart instance,            //You must call the $nexttick method again in the mounted hook function to ensure that the El is render in the DOM                //objects returned by the RES database                //array of data returned by Res.data.result.list                //Console.log (res);Res.status = = && (_this.productlist = res.data.result.list);//executes the following statement when the status is 200            })            .Catch(function(Err) {Console.log (' Get data error ... ');//There is a problem getting data from the database            })        },    }});
3 testing whether to get data
Get success
3.1 The next step is to intentionally introduce axios.then into the. Catch callback to see if it works
Description valid
Vue2 Shopping Cart ch1-(install dependency, simple configuration, Axios get API simulation data)