利用Vue.js框架实现火车票查询系统(带源代码)

序

Vue.js是一个流行的JavaScript MVVM库，它是基于数据驱动和基于组件的思想构建的。与Angular.js相比，Vue.js提供了一个更简单、更容易理解的API，让我们能够快速上手使用vue.js。

今天，我将基于这个数据库构建一个火车票查询系统。首先，我们的机器上必须有NodeJS环境，并安装npm包管理工具。因为vue运行在节点环境中，我们需要npm来安装vue。

在终端进入npm install - global vue-cli进行全局安装vue-cli是vue官方提供的命令行工具，可以快速构建大型单页应用。

注意：安装时需要翻墙，所以需要使用vpn工具。这里推荐使用Skyline VPN或者GreenVPN，可以在百度上找到。

安装了vue-cli后，我们可以使用vue init webpack my-project创建一个基于webpack模板的project my-project。

根据英文提示输入相应的值，我们会创建一个项目，然后将my-project CD到你的项目目录中，然后通过npm install安装项目使用的依赖库。

安装后，您的项目结构如下所示

因为我之前的项目占用了端口3001，我们需要打开config目录下的index.js文件，修改默认端口，这里改为3002，默认为8080

这意味着我们可以通过输入命令npm run dev来启动项目，浏览器将自动打开http://localhost:3002/

我们要做的是火车票查询系统，所以请求接口肯定是必不可少的，需要我们上一篇文章搭建的接口。以下是向服务器发送get请求代码

scriptexport默认值{ name: 'hello '，data () { return { items: ' '，fItem: ' '，sItem:'' }，methods : { select : function(){ var=this；jquery . Ajax({ URL : ' http://localhost :3001/Ajax/search？data: { key:'520520test '，start : thi . FiTem，end : thi . SiTem }，type:'get '，dataType:'json '，success:函数(数据){ that . items=data . result；console . log(data . result . length)} })；} }}/script因为我们在Vue项目中使用了jQuery的Ajax request方法，所以我们必须全局地将jQuery引入到项目中，总共需要5个步骤

第一步

在package.json中添加

依赖项： {'jquery' :' 2.2.3'}，然后npm安装

第二步

然后将其添加到构建目录下的webpack.base.conf.js中

var web pack=require(' web pack ')

第三步

在webpack.base.conf.js结尾添加，注意不要写错位置

plugins :[new webpack . optimize.commonschunk plugin(' common . js ')，new web pack。provide plugin({ jquery : ' jquery '，$ : ' jquery ' })]

第四步

重新启动npm服务运行开发

第五步

最后，在main.js中介绍它并完成它

从“jquery”导入美元

有关Vue的更多信息，请参见发展文档http://cn.vuejs.org/v2/guide/installation.html

完成项目下载

摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。