前端测试工具:JSON-SERVER

简介

前台要进行数据的模拟,来验证自己功能的实现,就需要安装json-server来模拟后端响应数据。

json-server

使用npm安装:

npm install json-server --save-dev

配置相关文件:

/* webpack.dev.conf.js */
const jsonServer = require('json-server') // 引入文件

/*
 *
 *  [前端测试工具json-server](https://github.com/typicode/json-server)
 *
 * */

const apiServer = jsonServer.create(); // 创建服务器
// const apiRouter = jsonServer.router(path.join(__dirname, 'db.json'));// 数据文件
const apiRouter = jsonServer.router('db.json');// 工程中的数据文件,使用上面那个可能会找不到资源
const middlewares = jsonServer.defaults(); // 返回JSON文件使用的中间件

apiServer.use(middlewares)
apiServer.use(apiRouter)
apiServer.listen(8081, () => { // 监听的端口
  console.log('JSON Server is running')
})

创建一个跟index.html同级的文件叫db.json(这就是模拟后端响应的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"
    }
  ],
  "login": {
    "username": "yudongdong",
    "userId": 123123
  },
  "getPrice": {
    "amount": 678
  },
  "createOrder": {
    "orderId": "6djk979"
  },
  "getOrderList": {
    "list": [
      {
        "orderId": "ddj123",
        "product": "数据统计",
        "version": "高级版",
        "period": "1年",
        "buyNum": 2,
        "date": "2016-10-10",
        "amount": "500元"
      },
      {
        "orderId": "yuj583",
        "product": "流量分析",
        "version": "户外版",
        "period": "3个月",
        "buyNum": 1,
        "date": "2016-5-2",
        "amount": "2200元"
      },
      {
        "orderId": "pmd201",
        "product": "广告发布",
        "version": "商铺版",
        "period": "3年",
        "buyNum": 12,
        "date": "2016-8-3",
        "amount": "7890元"
      }
    ]
  }
}

类似于后端:

@RequestMapping(value = "getNewsList")
@ResponseBody
public String getNewsList() {
    // ...
}

@RequestMapping(value = "login")
@ResponseBody
public String login() {
    // ...
}

@RequestMapping(value = "getPrice")
@ResponseBody
public String getPrice(
        @RequestParam() {
    // ...
}

// ......

访问http://localhost:8081就可以看到:

json-server

可以访问:http://loalhost:8081/getNewsList 拿取对应的JSON数据。

配置代理

配置vue代理:

// config/index.js
module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    /* 代理 */
    proxyTable: {
      '/api': 'http://localhost:8081/'  // ->> http://localhost:8080/ == http://localhost:8081/
    },

    // 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-
    // ...

配置json-server:

/* 给访问db.json资源路径加一个前缀:http://localhost:8080/getUserName ->> http://localhost:8080/api/getUserName */
apiServer.use('/api', apiRouter)

现在访问需要加上 "/api"http://localhost:8080/api == http://localhost:8081/api。

在我目前的这个案例中,在页面加载完成后需要db.json的数据,于是我写了一个钩子函数来完成数据的加载:

export default {
    data () {
        return {
            newList: []
        }
    }
    //...
    created () {
        this.$http.get('/api/getNewsList').then((res) => this.newList = res.data); // 不支持POST
    }
}

另外一种方式

使用json-server只能支持get,不支持post,所以我们更介意使用下面的这种方式:

/*
    config/webpack.dev.conf.js
    下面引入的这些模块和插件都无需install
*/
const fs = require('fs'); // node模块,文件系统
const express = require('express') // node模块,web模块
const bodyParser = require('body-parser') // 引入组件,用它返回JSON数据


var apiServer = express(); // 创建服务器
var apiRouter = express.Router() // 创建路由

apiServer.use(bodyParser.urlencoded({extended: true}))
apiServer.use(bodyParser.json())
apiServer.use('/api', apiRouter); // 路由根目录

apiRouter.get('/', function (req, res) { // 如果设置了use的路径参数,这个就会被覆盖:/ ->> /api
  res.json({message: 'hooray! welcome to our api!'})
})
// /:apiName 路径变量,/api/getUser [apiName == getUser]
apiRouter.route('/:apiName').all(function (req, res) { // .all 所有请求都走这个
  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.listen(8090, function (err) {
  if (err) {
    console.log(err);
    return;
  }
  console.log('Listening at http://localhost:8090');
})

步骤和json-server是一样的,只不过把之前json-server在webpack.dev.conf.js中的内容换成上面的这种即可。然后配合vue-resource的this.$http.post(url)完成请求。

Last modification:February 23rd, 2018 at 01:18 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment