vue+koa2搭建mock數(shù)據(jù)環(huán)境的詳細(xì)教程
前段時(shí)間寫(xiě)了一篇前端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)然別的類(lèi)型項(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)目弄好之后,開(kāi)始安裝koa
mkdir koa-demo cd koa-demo npm 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和中間件連起來(lái) 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ì)看到頁(yè)面上顯示出了koa-demo項(xiàng)目里定義的json數(shù)據(jù)了,大功告成。
這樣以后就可以將mock數(shù)據(jù)的項(xiàng)目和具體前端項(xiàng)目分離開(kāi),更方便的使用。再也不用求著后端給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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的方法詳解
- 詳解vue-cli項(xiàng)目中用json-sever搭建mock服務(wù)器
- 在vue中使用express-mock搭建mock服務(wù)的方法
- Vue利用mockjs編寫(xiě)假數(shù)據(jù)并應(yīng)用的問(wèn)題記錄
- Vue+Mockjs模擬curd接口請(qǐng)求的示例詳解
- Mock.js在Vue項(xiàng)目中的使用小結(jié)
- vue?中簡(jiǎn)單使用mock的示例代碼詳解
- Vue項(xiàng)目中使用mock.js的完整步驟
- vue項(xiàng)目中mock.js的使用及基本用法
- Vue+Mock.js模擬登錄和表格的增刪改查功能
- 在Vue框架中配置Mock服務(wù)器的方法
相關(guān)文章
解決Vue 刷新頁(yè)面導(dǎo)航顯示高亮位置不對(duì)問(wèn)題
這篇文章主要介紹了解決Vue 刷新頁(yè)面導(dǎo)航顯示高亮位置不對(duì)問(wèn)題,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能
這篇文章主要介紹了vue實(shí)現(xiàn)todolist功能、todolist組件拆分及todolist的刪除功能,需要的朋友可以參考下2019-04-04使用vue.js2.0 + ElementUI開(kāi)發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程(一)
這篇文章主要介紹了使用vue.js2.0 + ElementUI開(kāi)發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程(一)的相關(guān)資料,需要的朋友可以參考下2017-01-01vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07Vue-Cli項(xiàng)目?jī)?yōu)化操作的實(shí)現(xiàn)
這篇文章主要介紹了Vue-Cli項(xiàng)目?jī)?yōu)化操作,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)
最近遇到這樣的需求輸入連號(hào)事件,需要在表格中輸入物流單號(hào),物流號(hào)碼,生成的數(shù)量,名稱(chēng),點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號(hào)物流單號(hào),本文重點(diǎn)介紹vue3輸入單號(hào)和張數(shù),自動(dòng)生成連號(hào)的單號(hào),感興趣的朋友一起看看吧2024-02-02關(guān)于vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)的問(wèn)題
這篇文章主要介紹了關(guān)于vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08