vue+koa 2+mockjsを利用してデータをシミュレートする方法教程

前言
まず、これは私が初めて共有したもので、初めて書きました。書いたのはよくないです。あるいは間違いがあったら、皆さん、支出ミスを大目に見てください。
mockjsについて、公式サイトでは
      1.前後端分離
      2.コードを修正する必要がないなら、Ajax要求をブロックして、アナログの応答データを返します。
      3.データの種類が豊富である
      4.ランダムデータによって、さまざまなシーンをシミュレートします。
などの利点があります。
第一歩はVue-cliプロジェクトをインストールします。多くはネット上の一大プロジェクトと言います。
必要な友達はこの文章を参考にします。https://www.jb51.net/article/118987.htm ，非常に詳しく紹介しています。
第二ステップは地元のvueが地元のmockにアクセスするためです。
1、vueエージェントの設定
    config/index.jsの中のproxyTableは、ローカルnode起動のサービスがデフォルトで訪問するのは3000ポートです。
    だからタージの中に配置されています。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のkoa 2プロジェクトを構築する。
全体的にkoaをインストールします。koa 2ではないので注意してください。
1、npm install-g koa-generator
    フォルダを作成した下のハローKoo 2はプロジェクト名です。
2、koa 2ハローKoo 2
    このフォルダに入り、インストール依存を実行します。
3、cd Hello Kooa 2そして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

 npm run dev

締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。