Detaillierte Erläuterung der Verwendung von Vue, Koa2 und MockJS zur Simulation von Daten

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von vue + koa2 + mockjs anhand des Beispielcodes ein. Es hat einen gewissen Referenzlernwert für alle, die es brauchen Sie können es weiter unten verfolgen. Kommen Sie und lernen Sie mit mir.

In Bezug auf Mockjs wird es auf der offiziellen Website beschrieben als

1. Trennung von Front- und Backend

2. Sie können Ajax-Anfragen abfangen und simulierte Antwortdaten zurückgeben, ohne die zu ändern vorhandener Code.

3. Umfangreiche Datentypen

4. Simulieren Sie verschiedene Szenarien durch Zufallsdaten.

usw.

Der erste Schritt besteht darin, das vue-cli-Projekt zu installieren. Im Internet gibt es nicht viel zu sagen

Freunde, die es benötigen, können auf diesen Artikel verweisen: http://. www.jb51.net/article /118987.htm, die Einführung ist sehr detailliert.

Der zweite Schritt besteht darin, dass der lokale Vue auf den lokalen Mock zugreift

1. Konfigurieren Sie den Vue-Proxy

In der Proxytabelle in config/index.js, weil Der lokale Knoten Der gestartete Dienst greift standardmäßig auf Port 3000 zu

Konfigurieren Sie also http://localhost:3000/

 proxyTable: {
 '/api': {
 target: 'http://localhost:3000/',
 changeOrigin: true,
 pathRewrite: {
  '^/api': '/'
 }
 }

2. mianjs im Vue-Projekt In

  import axios from 'axios'
  axios.defaults.baseURL = '/api'

Der dritte Schritt besteht darin, das NodeJS-Koa2-Projekt zu erstellen

Koa global installieren, nicht koa2.

1. g koa -generator

Erstellen Sie den Ordner unten. HelloKoa2 ist Ihr Projektname

2, koa2 HelloKoa2

Geben Sie den Ordner ein und führen Sie das aus Installationsabhängigkeiten

3. cd HelloKoa2 und dann npm install

Das Obige schließt die Initialisierung von nodejs ab und führt dann aus

4 um Abhängigkeitsdateien zu installieren

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

5. Beachten Sie, dass der neue Teil in den Kommentaren der ursprünglichen app.js-Datei hinzugefügt wird

 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. Offiziell verwende ich Mock, ich verwende es direkt in Routen/index.js

Die Datei „routes/index.js“ lautet wie folgt

  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()
  })

Hier ist http://mockjs.com /examples.html Die offizielle Website zeigt deutlich die Verwendung der einzelnen Daten

7 Startknoten

 npm run dev

Verwandt Empfehlungen:

php simuliert die Auswirkungen gängiger Datenbankoperationen

Verwenden Sie MySQL-Protokolle, um Datenänderungsverläufe zu simulieren

php simuliert die Auswirkungen gängiger Datenbankoperationen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Vue, Koa2 und MockJS zur Simulation von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!