利用vue + koa2 + mockjs模拟数据的方法教程


Posted in Javascript onNovember 22, 2017

前言

首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧。

关于mockjs,官网描述的是

      1.前后端分离

      2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

      3.数据类型丰富

      4.通过随机数据,模拟各种场景。

等等优点。

第一步 安装vue-cli项目 不多说网上一大把

需要的朋友们参考这篇文章:https://3water.com/article/118987.htm ,介绍的非常详细。

第二步 因为本地的vue访问本地的mock

1、配置vue代理

    在config/index.js里面的proxyTable,因为本地node启动的服务默认访问的是3000端口

    所以在target里面配置http://localhost:3000/

proxyTable: {
 '/api': {
 target: 'http://localhost:3000/',
 changeOrigin: true,
 pathRewrite: {
  '^/api': '/'
 }
 }

2、在vue项目的mianjs中

import axios from 'axios'
  axios.defaults.baseURL = '/api'

第三步 搭建nodejs的koa2项目

全局安装koa,不是koa2注意

1、npm install -g koa-generator

    创建文件夹下面HelloKoa2是你的项目名字

2、koa2 HelloKoa2

    进入该文件夹然后执行安装依赖

3、cd HelloKoa2然后npm install

上面完成了nodejs的初始化接着操作

4、继续安装依赖文件

npm install mockjs --save -dev //mock文件
 npm install koa2-cors --save -dev //node端配置cors支持跨域用

5、配置app.js文件 注意下面注释的新增部分就是在本来app.js文件上面新增的东西

 

const Koa = require('koa')
 const app = new Koa()
 const views = require('koa-views')
 const json = require('koa-json')
 const onerror = require('koa-onerror')
 const bodyparser = require('koa-bodyparser')
 const logger = require('koa-logger')
 const cors = require('koa2-cors') // 新增部分处理跨域

 //这里提一点题外话 假如routes文件新增一个路径就的在下面增加路劲
 //假设routes新增一个user.js
 //新增一个user需要修改两个地方这里是一个 下面还有一个地方
 //这里需要 const user = require('./routes/user')
 const index = require('./routes/index')
 const users = require('./routes/users')

 // error handler
 onerror(app)

 // middlewares
 app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
 }))
 app.use(cors()) // 新增部分处理跨域
 app.use(json())
 app.use(logger())
 app.use(require('koa-static')(__dirname + '/public'))

 app.use(views(__dirname + '/views', {
  extension: 'pug'
 }))

 // logger
 app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
 })

 //这里提一点题外话 假如routes文件新增一个路径就的在下面增加路劲
 //假设routes新增一个user.js
 //这里需要 app.use(user.routes(), user.allowedMethods())
 app.use(index.routes(), index.allowedMethods())
 app.use(users.routes(), users.allowedMethods())

 // error-handling
 app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
 });

 module.exports = app

6、正式使用mock 我这里直接在routes/index.js里面使用

    routes/index.js文件如下

const router = require('koa-router')()
  var Mock = require('mockjs') //引入mockjs
  const Random = Mock.Random;  //引入mockjs生成随机属性的函数 random具体可以生成
          //哪些东西详见http://mockjs.com/examples.html
  router.prefix('/index')

  router.get('/string', async (ctx, next) => {
   //116到125 是mock的第一种使用方法,这种方法随机生成1到10个数组但是每个数组的author、title等都一样
   // ctx.body = await Mock.mock({
   // // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
   // 'arr|1-10': [{
   //  // 属性 id 是一个自增数,起始值为 1,每次增 1
   //  'id|+1': 1,
   //  'author|+1': Random.cname(),
   //  'img': Random.image('100x100'),
   //  'title':Random.csentence(5, 9) 
   // }]
   // }) 
   //127到141是mock的第二种方法主要使用Random函数来生成 这里生成的title、author等每个都不一样
   const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 50; i++) {
     let newArticleObject = {
      title: Random.csentence(5, 30), // Random.csentence( min, max )
      author: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
     }
     articles.push(newArticleObject)
    }

    return {
     articles: articles
    }
   }
   ctx.body = await produceNewsData()
  })

这里提一点 http://mockjs.com/examples.html 官网 看清楚每种数据的用法

7、启动node

npm run dev

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
js css+html实现简单的日历
Jul 14 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 #Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 #Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 #Javascript
第一个Vue插件从封装到发布
Nov 22 #Javascript
详细分析单线程JS执行问题
Nov 22 #Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 #Javascript
You might like
B2K与车机的中波PK
2021/03/02 无线电
PHP中HTML标签过滤技巧
2014/01/07 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
10条php编程小技巧
2015/07/07 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
angularJS 入门基础
2015/02/09 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python中的filter()函数的用法
2015/04/27 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书