vue后台模拟数据交互

参考文章：
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文件。因为代码的服务端接口是8080，接口文件的服务端端口是3000，为了解决这个问题需要做一个服务端代理的配置。

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-
    //配置转化：从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广告发布",
        "url": "http://hearstone.com"
        }
    ]
}

4.调用接口文件。

axios({ // 用axios发送post请求
    method: 'post',
    url: '/api/getNewsList', // 请求地址
}).then(function(res){ // 处理返回的文件流
    console.log(res.data);
    alert('成功了');
}).catch(function (code) {
    alert('失败了');
    console.log(code);
});

最后编辑于：2018.08.01 16:37:56