利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:25:06

利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程

利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程:前言首先說一下這是本人第一次分享東西第一次寫，寫的不好或者有錯誤的請大家多包涵支出錯誤共同進步，好了，話不多說了，來一起看看詳細的介紹吧。關(guān)于mockjs，官網(wǎng)描述的是 1.前后端分離 2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應(yīng)數(shù)

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程:前言首先說一下這是本人第一次分享東西第一次寫，寫的不好或者有錯誤的請大家多包涵支出錯誤共同進步，好了，話不多說了，來一起看看詳細的介紹吧。關(guān)于mockjs，官網(wǎng)描述的是 1.前后端分離 2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應(yīng)數(shù)

前言

首先說一下這是本人第一次分享東西第一次寫，寫的不好或者有錯誤的請大家多包涵支出錯誤共同進步，好了，話不多說了，來一起看看詳細的介紹吧。

關(guān)于mockjs，官網(wǎng)描述的是

1.前后端分離

2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應(yīng)數(shù)據(jù)。

3.數(shù)據(jù)類型豐富

4.通過隨機數(shù)據(jù)，模擬各種場景。

等等優(yōu)點。

第一步安裝vue-cli項目不多說網(wǎng)上一大把

需要的朋友們參考這篇文章：//www.gxlcms.com/article/118987.htm ，介紹的非常詳細。

第二步因為本地的vue訪問本地的mock

1、配置vue代理

在config/index.js里面的proxyTable，因為本地node啟動的服務(wù)默認訪問的是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

創(chuàng)建文件夾下面HelloKoa2是你的項目名字

2、koa2 HelloKoa2

進入該文件夾然后執(zhí)行安裝依賴

3、cd HelloKoa2然后npm install

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

4、繼續(xù)安裝依賴文件

 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文件新增一個路徑就的在下面增加路勁
 //假設(shè)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文件新增一個路徑就的在下面增加路勁
 //假設(shè)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生成隨機屬性的函數(shù) random具體可以生成
 //哪些東西詳見http://mockjs.com/examples.html
 router.prefix('/index')

 router.get('/string', async (ctx, next) => {
 //116到125 是mock的第一種使用方法，這種方法隨機生成1到10個數(shù)組但是每個數(shù)組的author、title等都一樣
 // ctx.body = await Mock.mock({
 // // 屬性 list 的值是一個數(shù)組，其中含有 1 到 10 個元素
 // 'arr|1-10': [{
 // // 屬性 id 是一個自增數(shù)，起始值為 1，每次增 1
 // 'id|+1': 1,
 // 'author|+1': Random.cname(),
 // 'img': Random.image('100x100'),
 // 'title':Random.csentence(5, 9) 
 // }]
 // }) 
 //127到141是mock的第二種方法主要使用Random函數(shù)來生成 這里生成的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 官網(wǎng) 看清楚每種數(shù)據(jù)的用法

7、啟動node