您好,登錄后才能下訂單哦!
小編這次要給大家分享的是vue+koa2如何搭建mock數(shù)據(jù)環(huán)境,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
前段時間寫了一篇前端vue項目實現(xiàn)mock數(shù)據(jù)方式的文章,主要是在vue項目里使用mock數(shù)據(jù),數(shù)據(jù)和項目耦合在一起,不太優(yōu)雅,作為一個有追求的前端,怎么能容忍這種方法呢?特以此篇,記錄利用koa2搭建服務端,提供mock數(shù)據(jù)的方法。
初始化vue項目
這里以vue項目為主,當然別的類型項目依然可以使用這種mock數(shù)據(jù)的方式。
vue create vue-koa2-demo
前提是安裝了vue-cli的腳手架,我電腦安裝的是vue-cli3的版本。按照要求一步一步選擇后,記得選擇安裝vuex,后續(xù)要使用,啟動項目。
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(); // 返回數(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) })
上面請求了一個data.json。需要在項目根目錄下新建文件夾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í)行命令啟動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,由于前后端項目存在跨域,需要使用代理實現(xiàn)。
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數(shù)據(jù)了,大功告成。
這樣以后就可以將mock數(shù)據(jù)的項目和具體前端項目分離開,更方便的使用。再也不用求著后端給mock數(shù)據(jù)了,自己搞!
看完這篇關(guān)于vue+koa2如何搭建mock數(shù)據(jù)環(huán)境的文章,如果覺得文章內(nèi)容寫得不錯的話,可以把它分享出去給更多人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。