美文网首页小知识
Vue使用json-server快速“伪造”后台接口

Vue使用json-server快速“伪造”后台接口

作者: 甜甜082054 | 来源:发表于2019-05-30 11:02 被阅读10次

    JSON-Server主要的作用是搭建一台JSON服务器,测试一些业务逻辑。

    一、安装

    npm install --save json-server

    前提是已经安装好了node环境,并且初始化好了项目。

    二、提供json数据文件。

    在项目根目录下,新建一个 JSON 文件db.json。

    三、配置json-server

    在build\webpack.dev.conf.js下配置,如果是用旧版本的手脚架工具初始化的项目,是在build/dev-server.js下配置。

    /*----------------jsonServer---------*/

    /*引入json-server*/

    const jsonServer = require('json-server')

    /*搭建一个server*/

    const apiServer = jsonServer.create()

    /*将db.json关联到server*/

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

    const middlewares = jsonServer.defaults()

    apiServer.use(middlewares)

    apiServer.use(apiRouter)

    /*监听端口*/

    apiServer.listen(3000, () => {

      console.log('JSON Server is running')

    })

    四、访问数据

    配置完成后,要npm dev run 重启项目,然后再地址栏输入http://localhost:3000 就可以访问到数据。

    五、设置代理

    最后做一下浏览器代理设置,在 config/index.js中:

    /*代理配置表,在这里可以配置特定的请求代理到对应的API接口*/

    /* 下面的例子将代理请求 /api/getNewsList  到 http://localhost:3000/getNewsList*/

    proxyTable: {

      '/api': {

        changeOrigin: true,// 如果接口跨域,需要进行这个参数配置

        target: 'http://localhost:3000',// 接口的域名

        pathRewrite: {

          '^/api': ''//后面可以使重写的新路径,一般不做更改

        }

      }

    具体设置代理的方法,参见:Vue-接口跨域请求调试proxyTable

    六、最后验证一下代理是否成功

    在浏览器输入地址:http://localhost:8080/api。

    七、使用

      使用vue-resouce发送Ajax获取数据。

    this.$http.get('/api/getNewsList')//代替http://localhost:3000/getNewsList

      .then((res) => {

        this.newsList = res.data

      }, (err) => {

        console.log(err)

      })

    相关文章

      网友评论

        本文标题:Vue使用json-server快速“伪造”后台接口

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