詳解vue-cli中模擬數據的兩種方法

詳解vue-cli中模擬數據的兩種方法 

創新互聯公司于2013年開始,是專業互聯網技術服務公司,擁有項目網站設計、成都網站設計網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元拉薩做網站,已為上家服務,為拉薩各地企業和個人服務,聯系電話:18982081108

在main.js中引入vue-resource模塊,Vue.use(vueResource).

詳解vue-cli中模擬數據的兩種方法 

1.使用json-server(不能用post請求)

接下來找到build目錄下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入json-server.

/*引入json-server*/
const jsonServer = require('json-server')
/*搭建一個server*/
const apiServer = jsonServer.create()
/*將db.json關聯到server*/
const apiRouter = apiServer.router('db.json')
const middlewares = jsonServer.defaults()\
apiServer.use(apiRouter)
apiServer.use(middlewares)
/*監聽端口*/
apiServer.listen(3000,(req,res)=>{
 console.log('jSON Server is running') 
})

現在重啟服務器后瀏覽器地址欄輸入localhost:3000能進入如下頁面則說明json server啟動成功了

詳解vue-cli中模擬數據的兩種方法 

現在找到config文件夾下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置

'/api':{
  changeOrigin:true, //示范允許跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'' //后面使用重寫的新路徑,一般不做更改
  }
}

現在可以使用localhost:8080/api/apiName 請求json數據了

詳解vue-cli中模擬數據的兩種方法 

在項目中通過resource插件進行ajax請求

data (){}前使用鉤子函數created:function(){

  this.$http.get('/api/newsList')
    .then(function(res){
      this.newsList = res.data //賦值給data中的newsList
    },function(err){
      console.log(err)
    })
}

詳解vue-cli中模擬數據的兩種方法 

2.使用express(可以使用post請求)

在項目中新建routes文件并在其中新建api.js,內容如下:

const express = require('express')
const router = express.Router()
const apiData = require('../db.json')
router.post('/:name',(req,res)=>{
  if(apiData[req.params.name]){
    res.json({
      'error':'0',
      data:apiData[req.params.name]
    })
  }else{
    res.send('no such a name')
  }
})

接下來找到build目錄下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入express,如下:

const express = require('express')
 const app = express()
 const api = require('../routes/api.js')
 app.use('/api',api)
 app.listen(3000)

現在找到config文件夾下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置

'/api':{
  changeOrigin:true, //示范允許跨域
  target:"http://localhost:3000", //接口的域名
  pathRewrite:{
    '^/api':'/api' //后面使用重寫的新路徑,一般不做更改
  }
}

重啟之后,便可以post請求訪問數據了.

總結

以上所述是小編給大家介紹的vue-cli中模擬數據的兩種方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持!

當前文章:詳解vue-cli中模擬數據的兩種方法
網站地址:http://m.kartarina.com/article2/ppppoc.html

成都網站建設公司_創新互聯,為您提供虛擬主機網站改版品牌網站制作電子商務動態網站云服務器

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

成都定制網站網頁設計
主站蜘蛛池模板: 亚洲精品一级无码鲁丝片| 亚洲av无码成人精品区一本二本 | 国内精品人妻无码久久久影院导航| 东京热av人妻无码| 无码人妻精品中文字幕免费| 无码人妻精品一区二区蜜桃百度| 国产成人精品无码免费看| 国产精品va无码二区| 精品无码人妻夜人多侵犯18| 国产在线无码视频一区二区三区 | 亚洲日韩精品无码一区二区三区| 亚洲精品无码午夜福利中文字幕 | 亚洲日产无码中文字幕| 伊人久久一区二区三区无码| 亚洲AV无码专区国产乱码电影| 97精品人妻系列无码人妻| 熟妇人妻无码中文字幕| 国产一区二区三区无码免费| 亚洲中文字幕在线无码一区二区| 高清无码视频直接看| 免费无码精品黄AV电影| 久久久久久久久免费看无码| 亚洲人成网亚洲欧洲无码久久| 国产精品无码亚洲一区二区三区| 日韩精品中文字幕无码一区| 国产亚洲情侣一区二区无码AV| 中文字幕乱妇无码AV在线| 无码一区二区三区在线| 亚洲av无码专区首页| 一区二区无码免费视频网站| 亚洲AV日韩AV永久无码久久| 日韩精品真人荷官无码| 一本加勒比hezyo无码专区| 国产成人亚洲综合无码| 国产精品无码a∨精品| 国产精品热久久无码av| 精品久久久久久无码国产| 精品久久久久久无码中文字幕 | 久久久国产精品无码一区二区三区| 手机永久无码国产AV毛片| 日韩亚洲AV无码一区二区不卡|