利用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 相关文章推荐
document.forms[].submit()使用介绍
Feb 19 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
vue权限问题的完美解决方案
May 08 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 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
PHP strtr() 函数使用说明
2008/11/21 PHP
php zend 相对路径问题
2009/01/12 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery的context属性用法实例
2014/12/27 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python实现简单flappy bird
2018/12/24 Python
详解【python】str与json类型转换
2019/04/29 Python
Python创建或生成列表的操作方法
2019/06/19 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
周年庆促销方案
2014/03/15 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
六年级学生期末评语
2014/12/26 职场文书
飞越疯人院观后感
2015/06/09 职场文书
小学班主任心得体会
2016/01/07 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书