vue+koa2搭建mock數據環境

前段時間寫了一篇前端vue項目實現mock數據方式的文章，主要是在vue項目裏使用mock數據，數據和項目耦合在一塊兒，不太優雅，做爲一個有追求的前端，怎麼能容忍這種方法呢？特以此篇，記錄利用koa2搭建服務端，提供mock數據的方法。

初始化vue項目

這裏以vue項目爲主，固然別的類型項目依然能夠使用這種mock數據的方式。

vue create vue-koa2-demo

前提是安裝了vue-cli的腳手架，我電腦安裝的是vue-cli3的版本。按照要求一步一步選擇後，記得選擇安裝vuex，後續要使用，啓動項目。

koa2項目初始化

前端項目弄好以後，開始安裝koa

mkdir koa-demo
cd koa-demo
npm koa koa-router koa-cors

安裝工做完成後，在項目根目錄下新建一個server.js.

let Koa=require('koa')
let Router=require('koa-router')
let cors=require('koa-cors')
let fs=require('fs')

const app=new Koa()
const router=new Router()

router.get('/getData',async ctx=>{
  // 容許cors跨域請求
  await cors();
  // 返回數據
  ctx.body=JSON.parse(fs.readFileSync('./static/data.json'));
})

// 將koa和中間件連起來
app.use(router.routes()).use(router.allowedMethods());

let port=3000;
app.listen(port,()=>{
  console.log('server is running on'+port)
})

上面請求了一個data.json。須要在項目根目錄下新建文件夾static，新建data.json

[{
  "id": 1,
  "name": "曹操",
  "age": "18"
}, {
  "id": 2,
  "name": "孫權",
  "age": "20"
}, {
  "id": 3,
  "name": "劉備",
  "age": "24"
}, {
  "id": 4,
  "name": "魏延",
  "age": "28"
}]

在終端中執行命令啓動koa項目

node server.js

當看到下圖時，表示啓動項目成功

改造前端項目

• 修改Home.vue文件

<template>
  <div class="home">
    <ul>
      <li v-for="item in list" :key="item.id">
        <p>姓名:{{ item.name }}</p>
        <p>年齡:{{ item.age }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Home",
  computed: {
    list() {
      return this.$store.state.list;
    }
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      this.$store.dispatch('getData')
    }
  }
};
</script>

• 修改App.vue文件

<template>
  <div id="app">
    <router-view />
  </div>
</template>

• 修改store/index.js

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    list: []
  },
  mutations: {
    setlist(state, data) {
      state.list = data;
    }
  },
  actions: {
    getData({ commit }) {
      axios
        .get("/api/getData", {
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          if (res.status === 200) {
            return res.data;
          }
        })
        .then(res => {
          commit("setlist", Array.from(res));
        });
    }
  },
  modules: {}
});

記得提早安裝axios，這裏須要使用axios請求後端接口。

• 新建配置文件

在根目錄下新建一個vue.config.js，因爲先後端項目存在跨域，須要使用代理實現。

module.exports = {
  devServer: {
    port: 8085, // 端口號
    https: false, // https:{type:Boolean}
    open: true, //配置自動啓動瀏覽器
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  }
};

從新啓動項目

npm run serve

就會看到頁面上顯示出了koa-demo項目裏定義的json數據了，大功告成。

這樣之後就能夠將mock數據的項目和具體前端項目分離開，更方便的使用。不再用求着後端給mock數據了，本身搞！

參考資料

• koa官網