vue后臺模擬數(shù)據(jù)交互

參考文章:
1.https://blog.csdn.net/qq_34645412/article/details/78833860
2.https://blog.csdn.net/benben513624/article/details/78562529
3.https://blog.csdn.net/weixin_39728230/article/details/80293892
正文:
1.修改build/webpack.dev.conf.js文件。(接口路徑為根目錄,接口文件名為db.json)

//(1),在頭部引用express
var express = require('express')
//(2),配置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) { //讀取接口文件,db.json是接口文件名
    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 http://localhost:' + 3000 + '\n')
})

2.修改config/index.js文件。因為代碼的服務(wù)端接口是8080,接口文件的服務(wù)端端口是3000,為了解決這個問題需要做一個服務(wù)端代理的配置。

dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    //配置轉(zhuǎn)化:從3000 => 8080
    //這下面就是要加的代碼?。。。。?    proxyTable:{
      '/api':'http://localhost:3000/'
    },
    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  }

3.將接口文件db.json放到vue項目的根目錄下。

//db.json
{
    "getNewsList": [
        {
        "id": 1,
        "title": "新聞條目1新聞條目1新聞條目1新聞條目1",
        "url": "http://starcraft.com"
        },
        {
        "id": 2,
        "title": "新聞條目2新聞條目2新聞條目2新聞條目2",
        "url": "http://warcraft.com"
        },
        {
        "id": 3,
        "title": "新聞條3新聞條3新聞條3",
        "url": "http://overwatch.com"
        },
        {
        "id": 4,
        "title": "新聞條4廣告發(fā)布",
        "url": "http://hearstone.com"
        }
    ]
}

4.調(diào)用接口文件。

axios({ // 用axios發(fā)送post請求
    method: 'post',
    url: '/api/getNewsList', // 請求地址
}).then(function(res){ // 處理返回的文件流
    console.log(res.data);
    alert('成功了');
}).catch(function (code) {
    alert('失敗了');
    console.log(code);
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容