利用vue + koa2 + mockjs模拟数据的方法教程
前言
首先说一下这是本人第一次分享东西第一次写，写的不好或者有错误的请大家多包涵支出错误共同进步，好了，话不多说了，来一起看看详细的介绍吧。
关于mockjs，官网描述的是
1.前后端分离
2.不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
3.数据类型丰富
4.通过随机数据，模拟各种场景。
等等优点。
第一步安装vue-cli项目不多说网上一大把
需要的朋友们参考这篇文章：https://www.nhooo.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中
importaxiosfrom'axios' axios.defaults.baseURL='/api'
第三步搭建nodejs的koa2项目
全局安装koa，不是koa2注意
1、npminstall-gkoa-generator
创建文件夹下面HelloKoa2是你的项目名字
2、koa2HelloKoa2
进入该文件夹然后执行安装依赖
3、cdHelloKoa2然后npminstall
上面完成了nodejs的初始化接着操作
4、继续安装依赖文件
npminstallmockjs--save-dev//mock文件 npminstallkoa2-cors--save-dev//node端配置cors支持跨域用
5、配置app.js文件注意下面注释的新增部分就是在本来app.js文件上面新增的东西
constKoa=require('koa')
constapp=newKoa()
constviews=require('koa-views')
constjson=require('koa-json')
constonerror=require('koa-onerror')
constbodyparser=require('koa-bodyparser')
constlogger=require('koa-logger')
constcors=require('koa2-cors')//新增部分处理跨域
//这里提一点题外话假如routes文件新增一个路径就的在下面增加路劲
//假设routes新增一个user.js
//新增一个user需要修改两个地方这里是一个下面还有一个地方
//这里需要constuser=require('./routes/user')
constindex=require('./routes/index')
constusers=require('./routes/users')
//errorhandler
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)=>{
conststart=newDate()
awaitnext()
constms=newDate()-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('servererror',err,ctx)
});
module.exports=app
6、正式使用mock我这里直接在routes/index.js里面使用
routes/index.js文件如下
constrouter=require('koa-router')()
varMock=require('mockjs')//引入mockjs
constRandom=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=awaitMock.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等每个都不一样
constproduceNewsData=function(){
letarticles=[];
for(leti=0;i<50;i++){
letnewArticleObject={
title:Random.csentence(5,30),//Random.csentence(min,max)
author:Random.cname(),//Random.cname()随机生成一个常见的中文姓名
}
articles.push(newArticleObject)
}
return{
articles:articles
}
}
ctx.body=awaitproduceNewsData()
})
这里提一点http://mockjs.com/examples.html官网看清楚每种数据的用法
7、启动node
npmrundev
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。