Vue+Mock.jsシミュレーションログインとテーブルの削除変更

前言
mockjsについて、公式サイトでは
1.前後端分離
2.既存のコードを変更することなく、Ajax要求をブロックし、シミュレーションの応答データを返すことができます.
3.データ型が豊富
4.ランダムデータにより、様々なシーンをシミュレートします.
5項目は鍋を背負わない(バックエンドがインタフェースになると鍋を背負う可能性がある)
などの長所、最後の1本は私が加えたものです.
最初のステップはmockをインストールする.js

npm install mockjs --save-dev

第2ステップはmockを使用する.js

import Mock from 'mockjs'

どこで使うかはどこで導入するか.私はプロジェクト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('@county(true)'),
    'age|18-60': 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
      }
    }
  }

追加については、削除と変更は、1つのデータmessage=" "を返すだけでよい.
ステップ3はmainです.jsにはさっき書いたsrc/mock/indexが導入されています.js

import './mock' // simulation data   index.js   

これでソースアドレスの統合が完了しました
Vue学習大男群493671066、美人が多い.運転手さんは早く車に乗って、説明に間に合わない.
こそこそした
著者関連Vue記事
Vue 2に基づく.0バックグラウンドシステム権限制御の実現
フロントエンドドキュメントの要約
VUE2.0削除添付編集model(弾枠)コンポーネント共通追加
心から感謝の意を表します