vue、koa2、mockjs を使用してデータをシミュレートする方法の詳細な説明

この記事では主に、vue + koa2 + mockjs を使用してデータをシミュレートすることに関する関連情報をサンプル コードを通じて詳しく紹介します。これは、すべての人の学習や仕事に役立ちます。以下の指示に従ってください。

mockjs については、公式サイトで

1. フロントエンドとバックエンドの分離

2. 既存のコードを変更することなく、Ajax リクエストをインターセプトし、シミュレートされた応答データを返すことができます。

3. 豊富なデータタイプ

4. ランダムデータを通じてさまざまなシナリオをシミュレートします。

他にも多くの利点があります。

最初のステップは、vue-cli プロジェクトをインストールすることです。インターネット上にたくさんあります。必要な方は、この記事を参照してください: http://www.jb51.net/article/118987。 .htm に詳細が記載されています。

2 番目のステップは、ローカル vue がローカル モックにアクセスするためです

1. config/index.js の proxyTable で vue プロキシを構成します

。ローカル ノードによって開始されたサービスはデフォルトでポート 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'

3 番目のステップは、nodejs koa2 プロジェクトをビルドすることです

koa をグローバルにインストールします。 koa2. 注

1. npm install -g koa-generator

HelloKoa2 はプロジェクト名です

2, koa2 HelloKoa2

フォルダーに入り、インストールの依存関係を実行します

, cd HelloKoa2 と npm install

上記で、nodejs の初期化が完了し、操作が続行されます

4. 依存関係ファイルのインストールを続けます

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

5. 新しい部分がコメント化されていることに注意してください。以下は、元の 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。 ここでは、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 公式 Web サイトでは、各データが明確に表示されます。操作

MySQL ログを使用してデータ変更の軌跡をシミュレート

php は一般的なデータベース操作の影響をシミュレートします

以上がvue、koa2、mockjs を使用してデータをシミュレートする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。