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