利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)（附源碼）
前言
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。相比于Angular.js，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js
今天，我就要基于這個(gè)庫(kù)來搭建一個(gè)火車票查詢系統(tǒng)。首先我們的機(jī)器上得有NodeJS環(huán)境，并且安裝了npm包管理工具。因?yàn)関ue是跑在node環(huán)境下的，并且我們需要用npm來安裝vue。
在終端輸入npm install --global vue-cli我們來全局安裝vue-cli，他是vue官方提供的一個(gè)命令行工具，可用于快速搭建大型單頁(yè)應(yīng)用。
安裝好vue-cli后我們就可以使用vue init webpack my-project來創(chuàng)建一個(gè)基于webpack模板的項(xiàng)目my-project了。
按照英文提示輸入對(duì)應(yīng)的值，我們就創(chuàng)建好了一個(gè)項(xiàng)目，接著cd my-project到你的項(xiàng)目目錄，然后通過npm install來安裝項(xiàng)目所用到的依賴庫(kù)。
安裝完之后你的項(xiàng)目結(jié)構(gòu)是這個(gè)樣子
由于我的前一個(gè)項(xiàng)目把3001端口占用了，所以我們需要打開config目錄下的index.js文件，修改默認(rèn)端口，這里改為3002，默認(rèn)是8080
這是我們就可以通過輸入命令npm run dev來啟動(dòng)項(xiàng)目了，瀏覽器會(huì)自動(dòng)打開http://localhost:3002/
我們要做的是火車票查詢系統(tǒng)，所以請(qǐng)求接口肯定是少不了的了，這就要用到我們上一篇文章搭建好的接口了。下面是向服務(wù)器發(fā)送get請(qǐng)求代碼
<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>由于我們?cè)赩ue項(xiàng)目中用的是jQuery的Ajax請(qǐng)求方法，所以我們還得在項(xiàng)目中全局引入jQuery，一共需要5個(gè)步驟
第一步
在package.json里加入
dependencies:{
"jquery" : "^2.2.3"
}然后npm install
第二步
然后在build目錄下的webpack.base.conf.js里加入
var webpack = require("webpack")
第三步
在webpack.base.conf.js的最后加入，注意不要寫錯(cuò)位置
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
第四步
重啟服務(wù)npm run dev
第五步
最后在main.js中引入就搞定
import $ from 'jquery'
想了解Vue的更多內(nèi)容請(qǐng)看開發(fā)文檔http://cn.vuejs.org/v2/guide/installation.html
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- Vue實(shí)現(xiàn)動(dòng)態(tài)查詢規(guī)則生成組件
- Vue按時(shí)間段查詢數(shù)據(jù)組件使用詳解
- vue input輸入框模糊查詢的示例代碼
- vue實(shí)現(xiàn)Input輸入框模糊查詢方法
- Vue.js實(shí)現(xiàn)分頁(yè)查詢功能
- Vue實(shí)現(xiàn)點(diǎn)擊時(shí)間獲取時(shí)間段查詢功能
- Vue.js進(jìn)行查詢操作的實(shí)例詳解
- 基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能
- 使用Bootstrap4 + Vue2實(shí)現(xiàn)分頁(yè)查詢的示例代碼
- vue+element自定義查詢組件
相關(guān)文章
強(qiáng)制Vue重新渲染組件的5種方法小結(jié)
在開發(fā)Vue.js應(yīng)用程序時(shí),有時(shí)我們需要強(qiáng)制重新渲染組件以確保數(shù)據(jù)和視圖同步,下面就來介紹一下強(qiáng)制Vue重新渲染組件的5種方法,感興趣的可以了解一下2025-06-06
Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能實(shí)例
最近做項(xiàng)目遇到在線預(yù)覽和下載pdf文件,試了多種pdf插件,例如jquery.media.js(ie無(wú)法直接瀏覽),最后選擇了pdf.js插件,這篇文章主要介紹了Vue中使用pdf.js實(shí)現(xiàn)PDF文檔展示功能的相關(guān)資料,需要的朋友可以參考下2025-04-04
VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class)
這篇文章主要介紹了VUE如何實(shí)現(xiàn)點(diǎn)擊文字添加顏色(動(dòng)態(tài)修改class),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue監(jiān)聽用戶輸入和點(diǎn)擊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)
本文主要介紹了element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue學(xué)習(xí)記錄之動(dòng)態(tài)組件淺析
動(dòng)態(tài)組件指的是動(dòng)態(tài)切換組件的顯示與隱藏,這篇文章主要給大家介紹了關(guān)于vue學(xué)習(xí)記錄之動(dòng)態(tài)組件的相關(guān)資料,本文通過示例代碼介紹介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了關(guān)于Vue如何啟動(dòng)項(xiàng)目的相關(guān)資料,還介紹了解決vue啟動(dòng)項(xiàng)目時(shí)間很長(zhǎng)問題的相關(guān)方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
文章詳細(xì)介紹了HTML5 Canvas的模板區(qū)、樣式區(qū)和腳本區(qū)的使用方法,包括如何設(shè)置Canvas的寬高、水平居中、獲取Canvas元素、繪制圖形（直線、矩形、圓、文字）、轉(zhuǎn)換為Base64、下載圖片以及加載圖片并添加文字水印等操作2025-10-10
前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,接下來就詳細(xì)的給大家介紹一下vue大文件視頻切片上傳的處理方法,需要的朋友可以參考下2023-08-08