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


Posted in Javascript onMay 18, 2020

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

当看到下图时,表示启动项目成功

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

改造前端项目修改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数据了,大功告成。

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

这样以后就可以将mock数据的项目和具体前端项目分离开,更方便的使用。再也不用求着后端给mock数据了,自己搞!

参考资料koa官网

总结

到此这篇关于vue+koa2搭建mock数据环境的详细教程的文章就介绍到这了,更多相关vue koa2 mock数据环境内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
javascript常见操作汇总
Sep 03 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
javascript数组去重方法分析
Dec 15 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 #Javascript
react 生命周期实例分析
May 18 #Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
Node.js API详解之 net模块实例分析
May 18 #Javascript
Javascript实现简易天数计算器
May 18 #Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 #Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
jquery中动态效果小结
2010/12/16 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
python3将变量输入的简单实例
2020/08/19 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
历史学专业毕业生求职信
2013/09/27 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
教师个人鉴定材料
2014/02/08 职场文书
书香校园活动方案
2014/02/28 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python