vue+koa2搭建mock数据环境
2020/5/18 11:27:50
本文主要是介绍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数据了,自己搞!
参考资料
- koa官网
这篇关于vue+koa2搭建mock数据环境的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南