本文主要為大家介紹了關於利用vue + koa2 + mockjs模擬數據的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
關於mockjs，官網描述的是
1.前後端分離
2.不需要修改既有程式碼，就可以攔截Ajax 請求，回傳模擬的回應資料。
3.資料型態豐富
4.以隨機數據，模擬各種情境。
等等優點。
第一步安裝vue-cli專案不多說網路上一大把
需要的朋友參考這篇文章：http://www.jb51.net/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
相關推薦：
php模擬資料庫常用操作效果
利用MySQL日誌模擬資料變化軌跡
php模擬資料庫常用操作效果#
以上是利用vue 、 koa2 、mockjs模擬資料詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
