小編這次要給大家分享的是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數據了，自己搞！
看完這篇關于vue+koa2如何搭建mock數據環境的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
