Explication détaillée de l'utilisation de vue, koa2 et mockjs pour simuler des données

Cet article vous présente principalement les informations pertinentes sur l'utilisation de vue + koa2 + mockjs pour simuler des données. L'article le présente en détail à travers l'exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. pouvez le suivre ci-dessous. Venez apprendre avec moi.

Concernant mockjs, le site officiel le décrit comme

1. Séparation du front-end et du back-end

2. Vous pouvez intercepter les requêtes Ajax et renvoyer des données de réponse simulées sans modifier le code existant.

3. Types de données riches

4. Simulez divers scénarios grâce à des données aléatoires.

etc.

La première étape est d'installer le projet vue-cli Il n'y a pas grand chose à dire sur Internet

Les amis qui en ont besoin peuvent se référer à cet article : http://. www.jb51.net/article /118987.htm, l'introduction est très détaillée.

La deuxième étape est que la vue locale accède au mock local

1 Configurez le proxy de vue

Dans le proxyTable dans config/index.js, car. le nœud local Le service démarré accède au port 3000 par défaut

Configurez donc http://localhost:3000/

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

dans la cible 2. mianjs dans le vue project Dans

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

La troisième étape consiste à construire le projet nodejs koa2

Installer koa globalement, pas koa2 Remarque

1. npm install -g koa -generator

Créez le dossier ci-dessous HelloKoa2 est le nom de votre projet

2, koa2 HelloKoa2

Entrez le dossier et exécutez les dépendances d'installation

3. cd HelloKoa2 puis npm install

Ce qui précède termine l'initialisation de nodejs puis fonctionne

4. Continuez à installer les fichiers de dépendance

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

5. Configurez le fichier app.js. Notez que la nouvelle partie dans les commentaires ci-dessous est ce qui est ajouté au fichier app.js d'origine

 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. Utiliser officiellement mock Je l'utilise directement dans routes/index.js

Le fichier routes/index.js est le suivant

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

Voici http://mockjs.com /examples.html Le site officiel montre clairement l'utilisation de chaque donnée

Nœud de démarrage

 npm run dev

Recommandations associées :

php simule les effets des opérations courantes de base de données

Utilisez les journaux MySQL pour simuler les trajectoires de modification des données

php simule les effets des opérations courantes de base de données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!