json-server搭建模擬的API服務器

• 運行命令 npm install json-server -D 全局安裝 json-server

• 項目根目錄下創建 mock 文件夾

• mock 文件夾下添加 db.json 文件，內容如下：

{
  "students": [
    { "id": 1, "name": "小明", "age": 20},
    { "id": 2, "name": "小紅", "age": 21},
    { "id": 3, "name": "小白", "age": 19},
    { "id": 4, "name": "小露", "age": 20},
    { 
 
"id": 5, "name": "小彩", "age": 22}
  ],
  "country": [
    {"name": "中國"},
    {"name": "日本"},
    {"name": "荷蘭"},
    {"name": "美國"}
  ]
}

• package.json 添加命令：

　　"mock": "json-server --port 1995 mock/db.js",

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 80 --hot",
    
 
"mock": "json-server --port 1995 mock/db.js",
    "build": "webpack"
  },

• 打開終端，運行 npm run mock 運行 json-server 服務器

faker.js 和 lodash.js 創建假數據

• 運行 npm i faker -D 安裝生成假數據的包；

• 運行 npm i lodash -S 安裝lodash,利用 _.times() 方法循環調用 faker 生成數據；

• 把 mock 目錄下的 db.json 改名為 db.js(註意把package.json的mock的db.json改成db.js)

• 修改 db.js 中的代碼如下：

// 導入 lodash
const _ = require(‘lodash‘)

// 導入 faker 生成假數據
const faker = require(‘faker‘)

// 設置本地化
faker.lacale = ‘zh_CN‘

// 使用commonJS 規範把生成的數據導出
// 其中， module.exports 必須指向函數，而且函數中，必須 return 一個數據對象*/
module.exports = () => {
  // json-server 最終return的數據，必須是一個對象
  const data = { list: [] }
  // 調用 _.times 數據生成8次數據
  data.list = _.times(8, n => {
    return {
      id: n + 1,
      name: faker.random.word(),
      ctime: faker.date.recent()
    }
  })
  // 把生成的數據返回出去
  return data
}

案例

index.js

import Vue from ‘vue‘

import Router from ‘vue-router‘

Vue.use(Router)


// 導入並配置  axios
import axios from ‘axios‘
Vue.prototype.$http = axios

import app from ‘./app.vue‘
import list from ‘./list.vue‘
import detail from ‘./detail.vue‘

const router = new Router({
  routes: [
    { path: ‘/‘, redirect: ‘/list‘},
    { path: ‘/list‘, component: list },
    { path: ‘/list/detail/:id‘, component: detail, props: true }
  ]
})

const vm = new Vue({
  el: ‘#app‘,
  render: c => c(app),
  router
}) 

app.vue

<template>
  <div>
    <h1>APP根組件</h1>
    <router-view></router-view>
  </div>
</template>

list.vue

<template>
  <div>
    <h3>列表</h3>

    <ul>
      <li v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定義列表數據，默認為空數組
      list: []
    }
  },
  created() {
    this.getMovieList()
  },
  methods: {
    // 獲取列表的數據
    async getMovieList() {
      const { data: res } = await this.$http.get(‘http://localhost:1995/list‘)
      this.list = res
    },
    // 點擊，通過編程式導航，跳轉到詳情頁面
    goDetail(id) {
      this.$router.push(‘/list/detail/‘ + id)
    }
  }
}
</script>

<style lang="less" scoped>
li {
  list-style: none;
  line-height: 35px;
  border: 1px dashed #ccc;
  margin: 10px 0;
  font-size: 12px;
}
</style>

detail.vue

<template>
  <div>
    <h3>列表</h3>

    <ul>
      <li v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定義列表數據，默認為空數組
      list: []
    }
  },
  created() {
    this.getMovieList()
  },
  methods: {
    // 獲取列表的數據
    async getMovieList() {
      const { data: res } = await this.$http.get(‘http://localhost:1995/list‘)
      this.list = res
    },
    // 點擊，通過編程式導航，跳轉到詳情頁面
    goDetail(id) {
      this.$router.push(‘/list/detail/‘ + id)
    }
  }
}
</script>

<style lang="less" scoped>
li {
  list-style: none;
  line-height: 35px;
  border: 1px dashed #ccc;
  margin: 10px 0;
  font-size: 12px;
}
</style>

db.js

// 導入 lodash
const _ = require(‘lodash‘)

// 導入 faker 生成假數據
const faker = require(‘faker‘)

// 設置本地化
faker.lacale = ‘zh_CN‘

// 使用commonJS 規範把生成的數據導出
// 其中， module.exports 必須指向函數，而且函數中，必須 return 一個數據對象*/
module.exports = () => {
  // json-server 最終return的數據，必須是一個對象
  const data = { list: [] }
  // 調用 _.times 數據生成8次數據
  data.list = _.times(8, n => {
    return {
      id: n + 1,
      name: faker.random.word(),
      ctime: faker.date.recent()
    }
  })
  // 把生成的數據返回出去
  return data
}

Vue.js（15）之 json-server搭建模擬的API服務器