Vue と Mock.js が連携してログインをシミュレートし、テーブルの追加、削除、変更、クエリを実装します。-jsチュートリアル-php.cn

この記事では、Vue と Mock.js を連携させてログインをシミュレートし、テーブルの追加、削除、変更、クエリを実装する方法についての記事を紹介します。これは良い参考値であり、困っている友人に役立つことを願っています。

はじめに

mockjs については、

1. フロントエンドとバックエンドの分離

2 について説明されています。既存のコードを変更する必要はなく、Ajax リクエストをインターセプトし、シミュレートされた応答データを返すことができます。

3. 豊富なデータタイプ

4. ランダムデータを通じてさまざまなシナリオをシミュレートします。

5 プロジェクトは責任を負いません (バックエンドがインターフェイスを提供するのを待っている場合は、責任を負うこともできます)

その他の利点について、最後に追加しました。

最初のステップはmock.jsをインストールすることです

npm install mockjs --save-dev

ログイン後にコピー

2番目のステップは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'。 🎜

🎜function(オプション)(オプション)。 🎜

🎜 は、応答データを生成するために使用される関数を表します。 🎜

🎜options: このリクエストに設定された Ajax オプションを指します。 🎜

🎜キーポイント 2: テンプレート生成構文: 🎜

🎜 データテンプレートの各属性は、属性名、生成の 3 つの部分で構成されます。ルールと属性値: 🎜

🎜// 属性名 name🎜
🎜// 属性値 value🎜
🎜'name|rule': value🎜

🎜属性名と生成ルールは縦棒 | で区切られます。 🎜
🎜生成ルールはオプションです。 🎜
🎜生成ルールには 7 つの形式があります: 🎜

🎜' name |min-max': 値🎜
🎜'名前|カウント': 値🎜
🎜'名前|min-max.dmin-dmax': 値🎜
🎜'name|min-max.dcount': value🎜
🎜'name|count.dmin-dmax': value🎜
🎜'name|count. ': value🎜
🎜'name|+step': value`🎜

生成ルールの意味は属性値の種類によって異なります。 🎜
🎜属性値には @ プレースホルダーを含めることができます。 🎜
🎜属性値は、初期値と最終値の型も指定します。 🎜

🎜例:
栗 1: 🎜rrreee🎜結果: 🎜rrreee🎜栗 2: 🎜rrreee🎜結果🎜rrreee🎜その他の設定🎜rrreee🎜シミュレートされたログイン🎜🎜// シミュレートログイン user/login インターフェイス、対応する関数は loginByUsername です🎜rrreee🎜 ログインインターフェイス user/login が呼び出されると、自動的に次のように対応します。 loginByUsernameこの関数はこの関数を実行します。
この関数はログインが成功したかどうかを返します。成功したデータが返された場合はログインが成功したことを意味します。それ以外の場合はその逆です。 🎜🎜模擬ログインOK🎜🎜 次に、模擬フォームの追加、削除、変更、クエリを紹介します。
実際、🎜rrreee🎜は条件付きクエリの後に返される偽のデータのコレクションにすぎません。偽のデータはmock.jsによってシミュレートされます。 🎜🎜まずループに 60 人の偽のユーザーを追加します🎜rrreee🎜ページング条件クエリの偽のデータを返す getUserList 関数を見てみましょう。 🎜rrreee🎜 追加、削除、変更に関しては、message="Operation success" というデータを返すだけで済みます。 🎜🎜 3 番目のステップは、main.js に先ほど書いた src/mock/index.js を導入することです🎜rrreee🎜 関連する推奨事項: 🎜🎜🎜vue.js Baidu Map の jsApi を導入するにはどうすればよいですか? Baidu MapのjsApiを導入する2つの方法を紹介🎜🎜🎜vue.jsはツリーテーブルのカプセル化をどのように実装しているのでしょうか？ vue.jsでツリーテーブルを実装する方法🎜🎜🎜

以上がVue と Mock.js が連携してログインをシミュレートし、テーブルの追加、削除、変更、クエリを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。