Vue+Mock.js는 테이블 추가, 삭제, 수정 및 확인을 시뮬레이션하는 세부 단계를 구현합니다.

mockjs에 대해서는 공식 웹사이트에서 설명합니다. 1. 앞뒤 분리 2. 기존 코드를 수정하지 않고도 Ajax 요청을 가로채고 시뮬레이션된 응답 데이터를 반환할 수 있습니다. 3. 풍부한 데이터 유형 4. 랜덤 데이터를 통해 다양한 시나리오를 시뮬레이션해보세요.

머리말

mockjs에 대해 공식 웹사이트에서는

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

2에 대해 설명합니다. 기존 코드를 수정할 필요가 없으며 Ajax 요청을 가로채고 시뮬레이션된 응답 데이터를 반환할 수 있습니다.

3. 풍부한 데이터 유형

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

5 프로젝트는 비난을 받지 않습니다. (백엔드가 인터페이스를 제공할 때까지 기다리면 책임을 질 수 있습니다.)

그리고 다른 장점으로는 마지막을 추가했습니다.

첫 번째 단계는 mock.js를 설치하는 것입니다.

npm install mockjs --save-dev

두 번째 단계는 mock.js를 사용하는 것입니다

import Mock from 'mockjs'

사용하는 곳마다 소개하세요. 저는 src/mock/index.js 프로젝트에서 mock.js를 사용합니다src/mock/index.js里面使用mock.js

详细请看官方文档

关键点1：Mock.mock()

Mock.mock( rurl?, rtype?, template|function( options ) )

这里的参数都是可选：

• rurl(可选)。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。

• rtype(可选)。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

• template(可选)。

表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

• function(options)(可选)。

表示用于生成响应数据的函数。

• options：指向本次请求的 Ajax 选项集。

关键点2：模板生成语法：

• 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

• // 属性名 name

• // 生成规则 rule

• // 属性值 value

• 'name|rule': value

• 属性名 和 生成规则 之间用竖线 | 分隔。

• 生成规则 是可选的。

• 生成规则 有 7 种格式：

• 'name|min-max': value

• 'name|count': value

• 'name|min-max.dmin-dmax': value

• 'name|min-max.dcount': value

• 'name|count.dmin-dmax': value

• 'name|count.dcount': value

• 'name|+step': value`

• 生成规则 的 含义 需要依赖 属性值的类型 才能确定。

• 属性值 中可以含有 @占位符。

• 属性值 还指定了最终值的初始值和类型。

举个栗子：
栗子1：

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
  "string|3": "★"
})

结果：

//星星数量为3
{
  "string": "★★★"
}

栗子2：

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
  "num|1-100": 100
})

结果

{
  "number": 8
}

其他设置

//  设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

Mock.setup({
  timeout: '300-600'
})

模拟登录

// 模拟登录user/login接口，对应的函数是loginByUsername

Mock.mock(/\/user\/login/, 'post', loginByUsername)

当调用登录接口user/loign时候会自动对应到loginByUsername这个函数执行这个函数，
这个函数会返回是否登录成功数据。返回成功的数据，就是登录成功了，否则相反。

mock模拟登录ok

接下来介绍模拟表格增删改查。
其实也是差不多的

// 用户相关
Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口
Mock.mock(/\/user\/remove/, 'get', deleteUser)   //模拟删除用户信息接口
Mock.mock(/\/user\/add/, 'get', createUser)     //模拟添加用户信息接口
Mock.mock(/\/user\/edit/, 'get', updateUser)   //模拟编辑用户信息接口

就是返回条件查询后的集合假数据而已，假数据是mock.js模拟的。

先循环添加60个假用户

let List = []
const count = 60

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: Mock.Random.guid(),
    name: Mock.Random.cname(),
    addr: Mock.mock(&#39;@county(true)&#39;),
    &#39;age|18-60&#39;: 1,
    birth: Mock.Random.date(),
    sex: Mock.Random.integer(0, 1)
  }))
}

我们再来看getUserList这个函数，就是返回分页条件查询的假数据。

  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)

    const mockList = List.filter(user => {
      if (name && user.name.indexOf(name) === -1) return false
      return true
    })

    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))

    return {
      code: 0,
      data: {
        total: mockList.length,
        users: pageList
      }
    }
  }

关于增加，删除和修改都只需要返回一个数据message="操作成功"

자세한 내용은 공식 문서를 참조하세요

핵심 포인트 1: Mock.mock()

import './mock' // simulation data 路径index.js可省略

여기의 매개변수는 모두 선택사항입니다:

• 
  rurl(선택사항).

가로채기해야 하는 URL(URL 문자열 또는 URL 규칙성)을 나타냅니다. 예를 들어 //domain/list.json/, '/domian/list.json'입니다.

rtype(선택 사항).

가로채야 하는 Ajax 요청 유형을 나타냅니다. 예를 들어 GET, POST, PUT, DELETE 등이 있습니다.

템플릿(선택 사항).

은 개체 또는 문자열일 수 있는 데이터 템플릿을 나타냅니다. 예를 들면 { 'data|1-10':[{}] }, '@EMAIL'입니다.

• 기능(옵션)(선택 사항).

은 응답 데이터를 생성하는 데 사용되는 함수를 나타냅니다.

• 🎜options: 이 요청에 설정된 Ajax 옵션을 가리킵니다. 🎜

🎜요점 2: 템플릿 생성 구문: 🎜

• 🎜데이터 템플릿의 각 속성은 속성 이름, 생성 등 3가지 부분으로 구성됩니다. 규칙 및 속성 값: 🎜
• 🎜// 속성 이름 name🎜
🎜// 규칙 생성 rule🎜
• 🎜// 속성 값 value🎜
• 🎜'name|rule': value🎜
• 🎜 속성 이름과 생성 규칙은 수직 막대(|)로 구분됩니다. 🎜
• 🎜생성 규칙은 선택 사항입니다. 🎜
• 🎜생성 규칙에는 7가지 형식이 있습니다: 🎜
• 🎜' 이름 |min-max': 값🎜
• 🎜'name|count': 값🎜
• 🎜'name|min-max.dmin-dmax': 값🎜
• 🎜'이름|min-max.dcount': 값🎜
• 🎜'name|count.dmin-dmax': 값🎜
• 🎜'name|count. ': value🎜
• 🎜'name|+step': value`🎜
• 생성 규칙의 의미는 속성 값의 유형에 따라 다릅니다. 🎜
• 🎜속성 값에는 @ 자리 표시자가 포함될 수 있습니다. 🎜
• 🎜속성 값은 초기 값과 최종 값의 유형도 지정합니다. 🎜

🎜예: 🎜Chestnut 1: 🎜rrreee🎜Result: 🎜rrreee🎜Chestnut 2: 🎜rrreee🎜Result🎜rrreee🎜Other settings🎜rrreee🎜Simulated login🎜🎜// Simulated loginuser/login 인터페이스에서 해당 함수는 loginByUsername🎜rrreee🎜로그인 인터페이스 user/login이 호출되면 자동으로 에 해당합니다. loginByUsername이 함수는 이 함수를 실행합니다. 🎜이 함수는 로그인 성공 여부에 대한 데이터를 반환합니다. 성공적인 데이터를 반환한다는 것은 로그인이 성공했다는 것을 의미하고, 그렇지 않으면 그 반대입니다. 🎜🎜모의 모의 로그인 ok🎜🎜 다음으로 모의 양식의 추가, 삭제, 수정, 조회에 대해 소개하겠습니다. 🎜사실 거의 똑같습니다🎜rrreee🎜조건 쿼리 후 수집된 가짜 데이터를 mock.js로 시뮬레이션한 것 뿐입니다. 🎜🎜먼저 루프에 가짜 사용자 60명을 추가합니다🎜rrreee🎜페이징 조건 쿼리에 대해 가짜 데이터를 반환하는 <code>getUserList 함수를 살펴보겠습니다. 🎜rrreee🎜 추가, 삭제, 수정과 관련하여 message="Operation 성공적인" 데이터 조각만 반환하면 됩니다. 🎜🎜세 번째 단계는 방금 main.js에 작성한 src/mock/index.js를 도입하는 것입니다.🎜rrreee🎜이제 통합이 완료되었습니다🎜🎜관련 기사:🎜🎜🎜🎜MVC 모드를 구현하여 로그인 및 추가, 삭제, 로그인 수정 및 확인🎜🎜 🎜🎜XML 예제 추가, 삭제, 수정 및 확인🎜🎜🎜관련 동영상: 🎜🎜🎜PHP 사용자 등록 및 로그인 시스템 동영상 튜토리얼🎜🎜

위 내용은 Vue+Mock.js는 테이블 추가, 삭제, 수정 및 확인을 시뮬레이션하는 세부 단계를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!