前端隔离测试

目的

当前端开发过程中，需要输出来填充页面时候，或者后台交互时候，需要后台准备假数据服务器。

这个时候，使用mysql等后台工具，则工作量太大。

工具引入 mockjs -- 模拟随机数据

http://mockjs.com/0.1/

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

工具引入 jsonserver -- 与mockjs不同， 其实后台可设置， 可记忆更新状态的

https://github.com/typicode/json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.

• Egghead.io free video tutorial - Creating demo APIs with json-server
• JSONPlaceholder - Live running version

npm install -g json-server

Create a db.json file with some data

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Start JSON Server

json-server --watch db.json

Now if you go to http://localhost:3000/posts/1, you'll get

{ "id": 1, "title": "json-server", "author": "typicode" }

Also when doing requests, it's good to know that:

• If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
• Your request body JSON should be object enclosed, just like the GET output. (for example {"name": "Foobar"})
• Id values are not mutable. Any id value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.
• A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will result in a 200 OK but without changes being made to the data.

自己动手

在vue项目的基础上， 添加mockjs

https://www.jianshu.com/p/27b2767b4193

另外添加jsonserver

https://github.com/fanqingsong/code-snippet/tree/master/web/mockjs/test

mock.js

import Mock from 'mockjs';

export default Mock.mock('http://g.cn', {
    'name'    : '@name',
    'age|1-100': 100,
    'color'    : '@color'
});

db.json (json server)

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    },
    {
      "id": 3,
      "title": "a new title birthed."
    },
    {
      "title": "a new title birthed.",
      "id": 4
    },
    {
      "title": "a new title birthed.",
      "id": 5
    },
    {
      "title": "a new title birthed.",
      "id": 6
    },
    {
      "title": "a new title birthed.",
      "id": 7
    },
    {
      "title": "a new title birthed.",
      "id": 8
    },
    {
      "title": "a new title birthed.",
      "id": 9
    },
    {
      "title": "a new title birthed.",
      "id": 10
    },
    {
      "title": "a new title birthed.",
      "id": 11
    },
    {
      "title": "a new title birthed.",
      "id": 12
    },
    {
      "title": "a new title birthed.",
      "id": 13
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

App.vue

<template>
  <div id="app">
    girls info:
    <div>name: {{girl_props.name}}</div>
    <div>age: {{girl_props.age}}</div>
    <div>color: {{girl_props.color}}</div>

    <hr>
    <button @click="addpost">add new post</button>
    her posts json:
    <div>
      <ul>
        <li v-for="post of posts">{{post.title}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import data from '../utils/mock';

import axios from 'axios';

import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      girl_props: {},
      posts: [],
      errors: []
    }
  },
  methods:{
    addpost: function(){
      axios.post('http://localhost:3000/posts', {
        title: "a new title birthed."
      })
      .then(response => {
        axios.get('http://localhost:3000/posts')
        .then(response => {
          this.posts = response.data
        })
      })
      .catch(e => {
        this.errors.push(e)
      })
    }
  },
  created: function(){
    axios.get('http://g.cn')
    .then(response => {
      // JSON responses are automatically parsed.
      this.girl_props = response.data
      console.log(response.data);
    })
    .catch(e => {
      this.errors.push(e)
    })

    axios.get('http://localhost:3000/posts')
    .then(response => {
      // JSON responses are automatically parsed.
      this.posts = response.data
      console.log(response.data);
    })
    .catch(e => {
      this.errors.push(e)
    })

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "fanqingsong <qsfan@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "json-server": "json-server --watch ./utils/db.json"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "json-server": "^0.14.0",
    "vue": "^2.5.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "mockjs": "^1.0.1-beta3",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.7.2",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

npm run json-server

npm run dev

横线上为mockjs测试

横线下为 jsonserver测试， 点击add 则会新增文章，刷新也会保存。