【vue+koa2搭建mock数据环境的详细教程】

最新推荐文章于 2024-07-03 16:58:10 发布

zsxy2019

最新推荐文章于 2024-07-03 16:58:10 发布

阅读量993

点赞数

分类专栏： mock koa node 文章标签： node 后端 vue

本文链接：https://blog.csdn.net/zsxy2019/article/details/121636876

版权

本文详细介绍了如何使用vue和koa2构建mock数据环境。首先初始化vue项目，接着设置koa2项目，创建server.js并配置data.json。通过axios请求后端接口，改造前端项目，包括Home.vue、App.vue和store/index.js。为解决跨域问题，新建vue.config.js配置代理。最后，启动项目，展示mock数据。这种方式让前端可以独立于后端进行开发。

摘要由CSDN通过智能技术生成

前段时间写了一篇前端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