Vue와 Mock.js는 함께 작동하여 로그인을 시뮬레이션하고 테이블 추가, 삭제, 수정 및 쿼리를 구현합니다.-JS 튜토리얼-php.cn

Vue와 Mock.js는 함께 작동하여 로그인을 시뮬레이션하고 테이블 추가, 삭제, 수정 및 쿼리를 구현합니다.

不言

풀어 주다： 2018-07-27 11:17:19

원래의

2619명이 탐색했습니다.

이 기사에서는 Vue와 Mock.js가 함께 작업하여 로그인을 시뮬레이션하고 테이블 추가, 삭제, 수정 및 쿼리를 구현하는 방법에 대한 기사를 소개합니다. 좋은 참고 가치가 있으며 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

머리말

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: 템플릿 생성 구문: #🎜🎜#

#🎜🎜# 데이터 템플릿 각 속성은 속성 이름, 생성 규칙, 속성 값의 세 부분으로 구성됩니다: #🎜🎜#

#🎜🎜#// 속성 이름 이름#🎜🎜#
#🎜🎜#// 규칙 생성 rule#🎜🎜#
#🎜🎜#// 속성 값 값 #🎜🎜#
#🎜🎜#'name|rule': value#🎜🎜#

#🎜🎜#은 속성 이름과 세대 사이에 사용됩니다. 규칙 세로 막대 | #🎜🎜#
#🎜🎜# 규칙 생성은 선택 사항입니다. #🎜🎜#
#🎜🎜# 규칙 생성에는 7가지 형식이 있습니다. #🎜🎜#

#🎜🎜#'name|min-max': 값#🎜🎜#
#🎜🎜#'name|count': 값#🎜🎜#
#🎜🎜#'name|min-max.dmin-dmax': 값#🎜🎜#
#🎜🎜#'name|min-max.dcount': 값#🎜🎜 #
#🎜🎜#'name|count.dmin-dmax': 값#🎜🎜#
#🎜🎜#'name|count.dcount': 값#🎜🎜 #
#🎜🎜#'name|+step': value`#🎜🎜#

#🎜🎜#생성된 규칙의 의미는 유형에 따라 다릅니다. 물론입니다. #🎜🎜#
#🎜🎜#속성 값에는 @ 자리 표시자가 포함될 수 있습니다. #🎜🎜#
#🎜🎜#Attribute 값은 초기 값과 최종 값의 유형도 지정합니다. #🎜🎜#

#🎜🎜# 밤 제공:
밤 1: #🎜🎜#rrreee#🎜🎜#결과: #🎜🎜#rrreee#🎜🎜#밤 2: #🎜🎜#rrreee#🎜🎜#Result#🎜🎜#rrreee#🎜🎜#기타 설정#🎜🎜#rrreee#🎜🎜#시뮬레이트된 로그인#🎜🎜##🎜🎜#//시뮬레이트된 로그인사용자/로그인 인터페이스에서 해당 함수는 loginByUsername입니다.#🎜🎜#rrreee#🎜🎜#로그인 인터페이스 user/logign이 호출되면 자동으로 loginByUsername 이 함수는 이 함수를 실행합니다.
이 함수는 로그인 성공 여부를 데이터를 반환합니다. 성공적인 데이터를 반환한다는 것은 로그인이 성공했다는 것을 의미하고, 그렇지 않으면 그 반대입니다. #🎜🎜##🎜🎜#모의 시뮬레이션 로그인 ok#🎜🎜##🎜🎜# 다음으로 시뮬레이션 폼의 추가, 삭제, 수정, 조회에 대해 소개하겠습니다.
실제로는 거의 같습니다. #🎜🎜#rrreee#🎜🎜#는 조건부 쿼리 후 반환된 가짜 데이터 모음입니다. 가짜 데이터는 mock.js에 의해 시뮬레이션됩니다. #🎜🎜##🎜🎜#먼저 루프에 60명의 가짜 사용자를 추가합니다#🎜🎜#rrreee#🎜🎜#페이징 조건 쿼리에 대해 가짜 데이터를 반환하는 getUserList 함수를 살펴보겠습니다. #🎜🎜#rrreee#🎜🎜# 추가, 삭제, 수정에 대해서는 message="Operation 성공적인" 데이터 일부만 반환하면 됩니다. #🎜🎜##🎜🎜#세 번째 단계는 방금 main.js에 작성한 src/mock/index.js를 소개하는 것입니다#🎜🎜#rrreee#🎜🎜#관련 권장사항: #🎜🎜##🎜🎜## 🎜🎜#vue.js 아래 Baidu Map의 jsApi를 소개하는 방법은 무엇인가요? Baidu Map의 jsApi를 도입하는 두 가지 방법 소개 #🎜🎜##🎜🎜##🎜🎜#vue.js 트리 테이블 캡슐화를 구현하는 방법은 무엇입니까? vue.js에서 트리 테이블을 구현하는 방법#🎜🎜##🎜🎜##🎜🎜#

위 내용은 Vue와 Mock.js는 함께 작동하여 로그인을 시뮬레이션하고 테이블 추가, 삭제, 수정 및 쿼리를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!