どのようにVueの中でMockjsを使ってデータの添削を模擬します

以前はjson-serverを使用してフロントエンド開発時にローカルデータインタフェーステストを構築していましたが、github pageでプロジェクトのプレゼンテーションを行う必要がある場合があります.ローカルではjson serverは使いやすいが、githubに置くと期待した効果は実現しない.その後mockjsというプラグインがこのニーズを満たしていることが分かった.半日研究したところ、mockjsシミュレーションデータはもっと強く、ランダムデータを通じて、いろいろなシーンをシミュレートすることができ、次のステップでvue-cliが作成したプロジェクトにユーザー情報を追加するデータシミュレーションインタフェースを実現することができます.
mockjsのインストール

vueプロジェクトにmockjs

をインストール

npm install mockjs --save-dev

プロジェクトsrcディレクトリにmock.jsファイル

を作成する.

作成したばかりのmockファイル

をmain.jsエントリファイルに導入する.

import './mock.js'

シミュレーションデータの作成mock.jsにおけるユーザ情報シミュレーションデータの作成

import Mock from 'mockjs'

const Random = Mock.Random
//       ，      ，            
Mock.setup({
  timeout: '300-600'
})
//                
const mocklist = []
const count = 5;

for (let i = 0; i < count; i++) {
  mocklist.push(Mock.mock({
    id: '@id',
    name: '@cname',
    'phone|1': /^1[0-9]{10}$/,
    email: '@email',
    'education|1': ['  ', '  ', '  ', '  ', '  '],
    'graduationschool|1': ['    ', '      ', '      ', '    ', '    ', '      '],
    'profession|1': ['  ', '  ', '  ', '   ', '    ', '  ', '  '],
    profile: '@cparagraph'
  }))
}

次に、各データインタフェースの追加削除を実現します.ここで私のニーズは、シミュレーションデータを1回だけ使用し、localStorageを使用してデータを格納することです.

//         
function getList() {
  //   localStorage     ，   Mock      
  if (!localStorage.getItem('userlist')) {
    localStorage.setItem('userlist',JSON.stringify(mocklist))
  }
  //        ，   localStorage      
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  return userlist
}

//         
function getUser(options) {
  //    localStorage      
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  //     ，  id     id        
  for( let index in userlist) {
    if (userlist[index].id === options.body) {
      var user = userlist[index]
      return user
    }
  }
}

//       
function deleteUser(options) {
  //    localStorage      
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  //       id      
  for( let index in userlist ) {
    if (userlist[index].id === options.body) {
      userlist.splice(index,1)
      localStorage.setItem('userlist', JSON.stringify(userlist))
    }
  }
  return {
    data: '      '
  }
}

//       
function addUser(options) {
  //    localStorage      
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  //           ，      ，       
  var user = JSON.parse(options.body)
  //    mock        id
  user.id = Random.id()
  //   user     userlist  
  userlist.unshift(user)
  //     userlist    localStorage  
  localStorage.setItem('userlist', JSON.stringify(userlist))
  return {
    data: '      '
  }
}

//       
function updateUser(options) {
  //    localStorage      
  var userlist = JSON.parse(localStorage.getItem('userlist'))
  var user = JSON.parse(options.body)
  //    userlist         id       
  for ( let index in userlist ) {

    if ( userlist[index].id === user.id ) {
      userlist[index] = user
    }
  }
  localStorage.setItem('userlist', JSON.stringify(userlist))
  return {
    data: '      '
  }
}

//       
Mock.mock('/getlist', 'get', getList)
Mock.mock('/getuser', 'post', getUser)
Mock.mock('/deleteuser', 'post', deleteUser)
Mock.mock('/adduser', 'post', addUser)
Mock.mock('/updateuser', 'post', updateUser)

//     Mock   
export default Mock

これにより、必要なコンポーネントに対応するインタフェースを使用できます.
ケースのプレビュー
最後に私はこのdemoをオンラインに置いて、オンラインプレビューをクリックして実現した効果をオンラインプレビューすることができます.
転載先:https://www.cnblogs.com/pingzx/p/10660911.html