前段時(shí)間寫了一篇前端vue項(xiàng)目實(shí)現(xiàn)mock數(shù)據(jù)方式的文章，主要是在vue項(xiàng)目里使用mock數(shù)據(jù)，數(shù)據(jù)和項(xiàng)目耦合在一起，不太優(yōu)雅，作為一個(gè)有追求的前端，怎么能容忍這種方法呢？特以此篇，記錄利用koa2搭建服務(wù)端，提供mock數(shù)據(jù)的方法。

初始化vue項(xiàng)目

這里以vue項(xiàng)目為主，當(dāng)然別的類型項(xiàng)目依然可以使用這種mock數(shù)據(jù)的方式。

vue create vue-koa2-demo

前提是安裝了vue-cli的腳手架，我電腦安裝的是vue-cli3的版本。按照要求一步一步選擇后，記得選擇安裝vuex，后續(xù)要使用，啟動(dòng)項(xiàng)目。

koa2項(xiàng)目初始化

前端項(xiàng)目弄好之后，開始安裝koa

mkdir koa-democd koa-demonpm koa koa-router koa-cors

安裝工作完成后，在項(xiàng)目根目錄下新建一個(gè)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跨域請(qǐng)求 await cors(); // 返回?cái)?shù)據(jù) 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)})

上面請(qǐng)求了一個(gè)data.json。需要在項(xiàng)目根目錄下新建文件夾static，新建data.json

[{ 'id': 1, 'name': '曹操', 'age': '18'}, { 'id': 2, 'name': '孫權(quán)', 'age': '20'}, { 'id': 3, 'name': '劉備', 'age': '24'}, { 'id': 4, 'name': '魏延', 'age': '28'}]

在終端中執(zhí)行命令啟動(dòng)koa項(xiàng)目

node server.js

當(dāng)看到下圖時(shí)，表示啟動(dòng)項(xiàng)目成功

改造前端項(xiàng)目修改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請(qǐng)求后端接口。

新建配置文件

在根目錄下新建一個(gè)vue.config.js，由于前后端項(xiàng)目存在跨域，需要使用代理實(shí)現(xiàn)。

module.exports = { devServer: { port: 8085, // 端口號(hào) https: false, // https:{type:Boolean} open: true, //配置自動(dòng)啟動(dòng)瀏覽器 proxy: { '/api': { target: 'http://127.0.0.1:3000', changeOrigin: true, pathRewrite: { '^/api': '/' } } } }};

重新啟動(dòng)項(xiàng)目

npm run serve

就會(huì)看到頁面上顯示出了koa-demo項(xiàng)目里定義的json數(shù)據(jù)了，大功告成。

這樣以后就可以將mock數(shù)據(jù)的項(xiàng)目和具體前端項(xiàng)目分離開，更方便的使用。再也不用求著后端給mock數(shù)據(jù)了，自己搞！

參考資料koa官網(wǎng)

總結(jié)

到此這篇關(guān)于vue+koa2搭建mock數(shù)據(jù)環(huán)境的詳細(xì)教程的文章就介紹到這了,更多相關(guān)vue koa2 mock數(shù)據(jù)環(huán)境內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！