vueのプロジェクトでモックを使用する方法を知っていますか?
2022-01-13 22:35:32
Mock.js
は、フロントエンドのタッパーがバックエンドから独立して開発し、ユニットテストを書きやすくするために設計されたモックデータジェネレータです。以下のモック関数が提供されています。
- データテンプレートに基づきモックデータを生成する
- Ajaxリクエストをシミュレートし、モックデータを生成して返す。
- HTMLテンプレートに基づいたモックデータの生成
最初のステップ
npm install mockjs // install mockjs
npm install axios
第2ステップでは、関連する設定をrequest.jsで行い、request.jsのコードは次のようになります。
import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-urlencoded'
const http = axios.create()
http.defaults.timeout = 3000
http.interceptors.request.use(config => { // request interceptor configuration // may not be configured
// do sth
return config
}, error => {
console.log(error)
return Promise.reject(error)
})
http.interceptors.response.use(response => { // response interceptor configuration // may not be configured
// do something
return response
}, error => {
console.log(error)
return Promise.reject(error)
})
export function fetch(url, params) { // Encapsulate the post request for axios
return new Promise((resolve, reject) => { // promise usage, check it out
axios.post(url, params).then(response => {
resolve(response.data) // promise related
}).catch(error => {
reject(error) // promise related
})
})
}
export default { // Expose the htto_mock method, which is used later in the page
http_mock(url, params) {
return fetch(url, params)
}
}
第3ステップでは、関連する設定をmock.jsで行っており、mock.jsのコードは以下の通りです。
import Mock from 'mockjs'
const Random = Mock.
var listData = function() {
let _data = {
status: 200,
message: 'success',
data: {
total: 100,
'rows|10': [{
id: '@guid',
name: '@cname',
'age|20-30': 23,
'jobs|1': ['front-end engineer', 'back-end engineer', 'UI engineer', 'requirements engineer']
}]
}
}
return { _data }
}
// url is the request address to be intercepted request method request data (rule) (here the api will be intercepted by mockjs)
Mock.mock('http://route.showapi.com/60-27', 'post', listData())
4番目のステップでは、main.jsの中にmock.jsを導入する必要があります。
import mock from '@/http/mock'
5番目のステップでは
import request from '@/http/request'
export default {
name: "FirstPage",
created() {
this.getData()
},
methods: {
getData() {
// Pretend to send a request using http_mock (mock automatically intercepts the request and generates the data)
// The first argument here needs to be the same as the first argument in Mock.mock()
console.log('Request started')
request.http_mock('http://route.showapi.com/60-27','api_id=63114&api_sign=3847b0').then(response => {
console.log(response._data)
})
},
}
}
その効果は次のとおりです。
概要
この記事があなたのお役に立ち、Script Houseの他のコンテンツにもっと注目していただけることを願っています。
関連
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
Vue+ElementUIによる大規模なフォームの処理例
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
jQueryのコピーオブジェクトの説明
-
vue ディレクティブ v-html と v-text
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueでルートネスティングを実装する例
-
Vueの「データを聴く」原則を解説
-
Vueのフォームイベントのデータバインディングの説明
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン