美文网首页
vue之如何模拟后端接口

vue之如何模拟后端接口

作者: 18fa100a8459 | 来源:发表于2018-05-31 18:18 被阅读0次

    步骤如下:

    1.首先你的项目必须配置了vue-resource,配置成功后我们需要下载json-server

    cnpm install json-server --save-dev

    2.在build------>webpack.dev.conf.js的任意位置去配置如下代码(代码是参考gitHub里面的json-server编写的,变量名为了避免重复,做过更改):

    const jsonServer = require('json-server')

    const apiServer = jsonServer.create()

    const apiRouter = jsonServer.router('db.json')

    const middlewares = jsonServer.defaults()

    apiServer.use(middlewares)

    apiServer.use('/api',apiRouter)

    apiServer.listen(3000, () => {

      console.log('JSON Server is running')

    })

    3.新建一个db.json文件,放在更目录(和index.html同级),里面就是写模拟的后端接口数据的

    4.打开config------->index.js,在Dev对象中更改proxyTable配置,更改如下:

    proxyTable: {

            '/api/':'http://localhost:3000'

        },

    注意:端口号要和webpack.dev.conf.js保持一致

    以上四个步骤完成后就可以运行了,在项目中按照如下图的格式访问:

    图一

    图二是db.json的书写规范,必须严格按照此规范进行,负责会报错

    图二

    相关文章

      网友评论

          本文标题:vue之如何模拟后端接口

          本文链接:https://www.haomeiwen.com/subject/dyocnxtx.html