vueのインストール、mockjsのシミュレーションデータ応用

4110 ワード

1.vueフレームcnpm install--global vue-cliのインストール
    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 );    } }