利用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中的array数组使用技巧
Jan 31 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vue组件的写法汇总
Apr 12 Javascript
Node.js笔记之process模块解读
May 31 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
详解从零搭建 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
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
常用简易JavaScript函数
2009/04/09 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
详解Python中的动态属性和特性
2018/04/07 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
django 中QuerySet特性功能详解
2019/07/25 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
4S店售后客服自我评价
2014/04/09 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA