vue, koa2, mockjs를 사용하여 데이터를 시뮬레이션하는 방법에 대한 자세한 설명

이 글에서는 vue + koa2 + mockjs를 사용하여 데이터를 시뮬레이션하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글에서는 샘플 코드를 통해 이를 매우 자세하게 소개합니다. 학습이나 작업이 필요한 모든 사람에게 도움이 되는 학습 가치가 있습니다. 아래 지침을 함께 배워보겠습니다.

mockjs에 대해 공식 홈페이지에는

1. 프론트엔드와 백엔드 분리

2. 기존 코드를 수정하지 않고도 Ajax 요청을 가로채서 시뮬레이션된 응답 데이터를 반환할 수 있습니다.

3. 풍부한 데이터 유형

4. 무작위 데이터를 통해 다양한 시나리오를 시뮬레이션합니다.

그리고 더 많은 장점이 있습니다.

첫 번째 단계는 vue-cli 프로젝트를 설치하는 것입니다.

필요한 친구들은 이 글을 참고하세요: http://www.jb51.net/article/118987 .htm은 매우 상세합니다.

두 번째 단계는 로컬 vue가 로컬 모의에 액세스하기 때문입니다

1. vue 프록시를 구성합니다

config/index.js의 ProxyTable에서 로컬 노드에 의해 시작된 서비스는 기본적으로 포트 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 koa2 프로젝트를 빌드하는 것입니다

koa를 전역적으로 설치하는 것이 아닙니다. koa2.Note

1.npm install -g koa-generator

아래에 폴더를 생성하세요. HelloKoa2는 프로젝트 이름

2, koa2 HelloKoa2

폴더를 입력하고 설치 종속성을 실행합니다.

3, 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. 공식적으로는 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 공식 웹사이트에서는 각 데이터를 명확하게 볼 수 있습니다. Usage

7. 노드 시작

 npm run dev

관련 권장사항:

php는 공통 데이터베이스의 효과를 시뮬레이션합니다. 작업

MySQL 로그를 사용하여 데이터 변경 궤적 시뮬레이션

php는 일반적인 데이터베이스 작업의 효과를 시뮬레이션합니다

위 내용은 vue, koa2, mockjs를 사용하여 데이터를 시뮬레이션하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!