利用vue + koa2 + mockjs模拟数据的方法教程

前端之家收集整理的这篇文章主要介绍了利用vue + koa2 + mockjs模拟数据的方法教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧。

关于mockjs,官网描述的是

1.前后端分离

2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据,模拟各种场景。

等等优点。

第一步 安装vue-cli项目 不多说网上一大把

需要的朋友们参考这篇文章,介绍的非常详细。

第二步 因为本地的vue访问本地的mock

1、配置vue代理

在config/index.js里面的proxyTable,因为本地node启动的服务默认访问的是3000端口

所以在target里面配置http://localhost:3000/

2、在vue项目的mianjs中

第三步 搭建nodejs的koa2项目

全局安装koa,不是koa2注意

1、npm install -g koa-generator

创建文件夹下面HelloKoa2是你的项目名字

2、koa2 HelloKoa2

进入该文件夹然后执行安装依赖

3、cd HelloKoa2然后npm install

上面完成了nodejs的初始化接着操作

4、继续安装依赖文件

文件 npm install koa2-cors --save -dev //node端配置cors支持跨域用

5、配置app.js文件 注意下面注释的新增部分就是在本来app.js文件上面新增的东西

<div class="jb51code">
<pre class="brush: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文件如下

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

原文链接:https://www.f2er.com/vue/35096.html

猜你在找的Vue相关文章