The Vue. js framework realizes train ticket inquiry system

This article mainly introduces the use of Vue. the js framework provides information about the train ticket query system. The detailed introduction and sample code are provided in this article, and a complete project download is provided at the end of this Article. For more information, see, let's take a look. Preface

Vue. js is currently a popular JavaScript MVVM library, which is built based on data-driven and componentized ideas. Compared with Angular. js, Vue. js provides simpler and easier-to-understand APIs, allowing us to quickly get started with Vue. js

Today, I will build a train ticket inquiry system based on this database. First, we have the NodeJS environment on our machine and installed the npm package management tool. Because vue runs in the node environment, and we need to use npm to install vue.

You can run npm run dev to start the project. The browser automatically opens http: // localhost: 3002/

What we need to do is the train ticket query system, so the request interface must be indispensable. This requires the interface we set up in the previous article. The following is the get Request Code sent to the server:

《script》export default { name: 'hello', data () { return { items:'', fItem:'', sItem:'' } }, methods:{ select:function(){ var that = this; jQuery.ajax({ url: 'http://localhost:3001/ajax/search?', data: { key:'520520test', start:this.fItem, end:this.sItem }, type:'get', dataType:'json', success: function(data){ that.items = data.result; console.log(data.result.length) } }); } }}《script》

Because we use jQuery's Ajax Request Method in the Vue project, we have to introduce jQuery globally in the project. A total of five steps are required.

Step 1

Add package. json

dependencies:{ "jquery" : "^2.2.3"}

Then npm install

Step 3

Add it at the end of webpack. base. conf. js. Be sure not to write the wrong location

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

For more information about Vue, see the development documentation http://cn.vuejs.org/v2/guide/installation.html.

For more information about how to implement the train ticket Query System Using the Vue. js framework, visit the PHP Chinese website!