vue+koa2+mockjs模拟数据的方法 利用vue + koa2 + mockjs模拟数据的方法教程
谢彪 人气:0前言
首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧。
关于mockjs,官网描述的是
1.前后端分离
2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据,模拟各种场景。
等等优点。
第一步 安装vue-cli项目 不多说网上一大把
第二步 因为本地的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
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
加载全部内容