首先声明一下，这是我第一次分享东西，第一次写。文笔不好或者有错误的请多多包涵。共同进步。粗体文字是第一步。第二步因为本地vue访问本地mock1，在config/index.js中配置vue代理的proxyTable，因为本地节点启动的服务默认是3000端口，所以配置http://localhost:3000/在目标proxyTable:{'/api':{target:'http://localhost:3000/',changeOrigin:true,pathRewrite:{'^/api':'/'}}2.在mianjs中导入axiosofvueprojectfrom'axios'axios.defaults.baseURL='/api'第三步构建nodejs的koa2项目，全局安装koa，不是koa2注1.npminstall-gkoa-generator在HelloKoa2下面创建一个文件夹是你的项目名2.koa2HelloKoa2进入文件夹执行安装依赖3、cdHelloKoa2然后npminstall完成nodejs的初始化然后运行??4.继续安装依赖文件npminstallmockjs--save-dev//mockfilenpminstallkoa2-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文件中，会在下面Addroadstrength//假设在routes中添加了一个新的user.js//添加一个新用户需要修改两个地方这里是下面一个还有一个地方//需要const这里user=require('./routes/user')constindex=require('./routes/index')constusers=require('./routes/users')//错误处理器onerror(app)//中间件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'}))//loggerapp.use(async(ctx,next)=>{conststart=newDate()awaitnext()constms=newDate()-startconsole.log(`${ctx.method}${ctx.url}-${ms}ms`)})//这里有点跑题了。如果在routes文件中添加路径，则在下面添加路由methods())app.use(index.routes(),index.allowedMethods())app.use(users.routes(),users.allowedMethods())//错误处理app.on('error',(err,ctx)=>{console.error('服务器错误',err,ctx)});module.exports=app6，mock的正式使用这里我直接使用routes/index.js中的routes/index.js文件如下constrouter=require('koa-router')()varMock=require('mockjs')//引入mockjsconstRandom=Mock.Random;//介绍一下mockjs生成随机属性的函数random具体可以生成//什么东西见http://mockjs.com/examples.htmlrouter.prefix('/index')router.get('/string',async(ctx,next)=>{//116到125是第一个mock此方法随机生成1到10个数组，但每个数组的作者，标题等都是相同的//ctx.body=awaitMock.mock({////属性列表的值是一个数组，其中包含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的第二种方法主要使用这里生成的标题、作者等随机函数是不同的constproduceNewsData=function(){letarticles=[];for(leti=0;i<50;i++){letnewArticleObject={title:Random.csentence(5,30),//Random.csentence(min,max)author:Random.cname(),//随机.cname()随机生成一个普通的中文名}articles.push(newArticleObject)}return{articles:articles}}ctx.body=awaitproduceNewsData()})这里稍微提一下http://mockjs.com/examples。html官网可以清楚的看到各个数据的使用情况7.启动节点npmrundev
