vueのインストール、mockjsのシミュレーションデータ応用
1.vueフレームcnpm install--global vue-cliのインストール
2. インストール呼び出しrequest要求
5. mockルールを追加(mock.js)
6.パッケージング要求とブロック
2. インストール呼び出しrequest要求
cd mockjs npm install axios --save
3. mockjs npm install mockjs --save-dev
4.入口js(main.js)にmockjsを導入する // mockjs
require(
'./mock.js'
)
5. mockルールを追加(mock.js)
// mockjs
const
Mock = require(
'mockjs'
);
// mock.Random
const
Random = Mock.Random;
// mock
const
produceNewsData = function() {
let
articles = [];
for
(
let
i = 0; i < 100; i++) {
let
newArticleObject = {
title: Random.csentence(5, 30),
// Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage(
'300x250'
,
'mock '
),
// Random.dataImage( size, text ) Base64
author_name: Random.cname(),
// Random.cname()
date: Random.date() +
' '
+ Random.time()
// Random.date() , yyyy-MM-dd;Random.time()
}
articles.push(newArticleObject)
}
return
{
articles: articles
}
}
// Mock.mock( url, post/get , );
Mock.mock(
'/news/index'
,
'post'
, produceNewsData);
import axios
from
'axios'
import vue
from
'vue'
axios.defaults.headers.post[
'Content-Type'
] =
'application/x-www-form-urlencoded'
//
axios.interceptors.request.use(function(config) {
return
config;
}, function(error) {
return
Promise.reject(error);
})
//
axios.interceptors.response.use(function(response) {
return
response;
}, function(error) {
return
Promise.reject(error);
})
6.パッケージング要求とブロック
// axios post
export function fetch(url,
params
) {
return
new
Promise((resolve, reject) => {
axios.post(url,
params
)
.then(response => {
resolve(response.data);
})
.
catch
((error) => {
reject(error);
})
})
}
export
default
{
JH_news(url,
params
) {
return
fetch(url,
params
);
}
}