VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
  • JavaScript教程之vue-cli模擬后臺數據交互

  • 2019-04-17 20:24 來源:未知

魔兽世界wow www.geyjm.icu 作為一個前端入坑的妹子,在學習vue的道路上掙扎徘徊,由一開始的對vue一直蒙圈只知道雙向數據綁定和一些'V-x'的指令,慢慢通過一個視頻的學習漸漸入坑,對于我這個js基礎不怎么好而且編程思維又不是很嚴謹的人來說還是踩了很多坑,特別是vue配置方面的東西,例如vue-router,vueX,雖然是跟著視頻做的,不過每次都有很多地方配置不正確,會報錯,特別是最近在跟著視頻做一個前端的web頁面其中涉及到前后臺數據交互方面的說到模擬后臺數據的問題,完全懵逼,剛開始都不知哪個文件怎么配置,終于通過網上各種搜索,弄清楚了一些問題附上鏈接     https://blog.csdn.net/weixin_39728230/article/details/80293892

一、模擬后臺數據接口,一般我們用的ajax但是vue里面要用vue-resource這個組件去請求數據,當然不可避免首先要先下載這個組件,方法如下

1、npm install vue-resource --save

2、main.js文件引入vue-resource:

          import VueResource from 'vue-resource'

         Vue.use(VueResource)

準備工作就緒以后就可以開始模擬后臺數據接口配置了,有兩種方法,一種是利用一個插件json-server來模擬還有就是利用express方法,支持get和post請求,據說更加通用

復制代碼
create: function(){
      //this.$http.get('getList')//ajax請求
      this.$http.post('getLisst',{userId:123})
      .then(function(data){
        console.log(data)//成功回調
      },function(err){
        console.log(err)//失敗回調
      })
  },
復制代碼

上面這個是在組件中vue調后臺數據的get和post請求的寫法,post請求可以帶參數傳遞

接下來重要的來了方法一:安裝json-server來配置數據

第一步:安裝json-server這里啰嗦一句,vue里面所有需要用到的組件都要用 npm install xxx(組件名)來安裝

             npm install json-server --save

第二步:安裝成功之后,接下來就是配置,這里說一下,之前看視頻上說配置是在bulid/dev-server.js文件中配置,結果找了半天沒找到,似乎是vue2.0刪除了那個文件,把它里面的配置放置在了build/webpack.dev.conf.js這個文件里面,如下圖代碼可以直接放在該文件最下方

              

復制代碼
//這里是json-server配置信息  
//json-server.js  
const jsonServer = require('json-server')  
const apiServer = jsonServer.create()  
const apiRouter = jsonServer.router('db.json') //數據關聯server,db.json與index.html同級  
const middlewares = jsonServer.defaults()  
  
apiServer.use(middlewares)  
apiServer.use('/api',apiRouter)  
apiServer.listen(3000, () => {                 //監聽端口  
  console.log('JSON Server is running')  
})  
復制代碼

第三步:配置完webpack.dev.conf.js文件之后,差不多進行了一半,配置里面看到有個db.json文件這個就是我們自己配置的數據源

           

          這里面就是我們自己寫的數據源代碼

        

復制代碼
{
    "getNewsList": [
      {
        "id": 1,
        "title": "新聞條目1新聞條目1新聞條目1新聞條目1",
        "url": "//starcraft.com"
      },
      {
        "id": 2,
        "title": "新聞條目2新聞條目2新聞條目2新聞條目2",
        "url": "//warcraft.com"
      },
      {
        "id": 3,
        "title": "新聞條3新聞條3新聞條3",
        "url": "//overwatch.com"
      },
      {
        "id": 4,
        "title": "新聞條4廣告發布",
        "url": "//hearstone.com"
      }
    ]
}
復制代碼

第四步:然后我們看到我們監聽的是3000的端口,而我們文件用的是8080的端口,這里就涉及跨域的問題,雖然不是很懂,不過還是知道一些不同端口號什么的不能請求數據(這里不是很懂有機會再回顧一下看看),那接下來就是解決跨域的問題了,不多說,找到config文件夾下面的index.js文件打開加入下面一段代碼

 proxyTable:{
      '/api':'//localhost:3000/'
    },

至于位置的話請看下面:

第五步:到這里基本配置完成需要你重新npm run dev一下然后打開網頁 //localhost:8080/api/getNewsList 就可以看到你寫的數據

       

這里代表你的json server啟動成功

     

這里就是你配置的接口數據

方法二:express方法,支持get和post請求,據說更加通用,不過我還沒試用,一樣的方法

第一步:先找到webpack.dev.conf.js然后在頭部引入express:

         var express = require('express')  //這里沒有寫,會提示apiServer = express()這里express()未定義??!

        然后在文件底部加上如下代碼:   

復制代碼
//express 配置server  
var apiServer = express()  
var bodyParser = require('body-parser')  
apiServer.use(bodyParser.urlencoded({ extended: true }))  
apiServer.use(bodyParser.json())  
var apiRouter = express.Router()  
var fs = require('fs')  
apiRouter.route('/:apiName') //接口路徑  
  .all(function (req, res) {  
    fs.readFile('./db.json', 'utf8', function (err, data) {  //讀取接口文件  
      if (err) throw err  
      var data = JSON.parse(data)  
      if (data[req.params.apiName]) {  
        res.json(data[req.params.apiName])  
      }  
      else {  
        res.send('no such api name')  
      }  
  
    })  
  })  
  
apiServer.use('/api', apiRouter);  
apiServer.listen(3000, function (err) {  
  if (err) {  
    console.log(err)  
    return  
  }  
  console.log('Listening at //localhost:' + 3000 + '\n')  
})  
復制代碼

第二步:然后一樣的要配置index.js 里面跨域的問題還有json數據的創建

同上面index.js一樣的位置一樣的代碼

第三步:同樣的訪問那個鏈接就可以看到數據

最后,希望能對大家有所幫助,第一次寫,有什么需要交流的請多指出,謝謝

相關教程